├── .gitignore
├── .nvmrc
├── README.md
├── docs
└── screenshot.png
├── index.html
├── package-lock.json
├── package.json
└── public
├── Gradients
├── gradi001.png
├── gradi002.png
├── gradi003.png
├── gradi004.png
├── gradi005.png
├── gradi006.png
├── gradi007.png
├── gradi008.png
├── gradi009.png
├── gradi010.png
├── gradi011.png
├── gradi012.png
├── gradi013.png
├── gradi014.png
├── gradi015.png
├── gradi016.png
├── gradi017.png
├── gradi018.png
├── gradi019.png
└── gradi020.png
├── JS2sprites
├── Aggromaxx
│ ├── 001.svg
│ ├── 002.svg
│ ├── 003-alt.svg
│ ├── 003.svg
│ ├── 004.svg
│ ├── Addon.svg
│ ├── Addon2.svg
│ ├── Addon3.svg
│ ├── Vent.svg
│ ├── Vent2.svg
│ ├── Wires.svg
│ └── Wires2.svg
├── BigData
│ ├── 001.svg
│ ├── 002.svg
│ ├── 003a.svg
│ ├── 003b.svg
│ └── 005.svg
├── CrapPack
│ ├── altcrap-001.svg
│ ├── altcrap-001b.svg
│ ├── altcrap-002.svg
│ ├── altcrap-003.svg
│ ├── altcrap-004.svg
│ ├── altcrap-005.svg
│ ├── altcrap-006.svg
│ ├── altcrap-007.svg
│ ├── altcrap-008.svg
│ ├── altcrap-009.svg
│ ├── altcrap-010.svg
│ ├── altcrap-011.svg
│ ├── altcrap-012.svg
│ ├── altcrap-013.svg
│ ├── altcrap-014.svg
│ ├── altcrap-015.svg
│ ├── altcrap-016.svg
│ ├── altcrap-016b.svg
│ ├── crap-001.svg
│ ├── crap-002.svg
│ ├── crap-003.svg
│ ├── crap-004.svg
│ ├── crap-005.svg
│ ├── crap-006.svg
│ ├── crap-007.svg
│ ├── crap-007b.svg
│ └── newcrap-001.svg
└── JS2Classic
│ ├── 001.svg
│ ├── 004.svg
│ ├── 005.svg
│ ├── 006.svg
│ ├── 007.svg
│ ├── 008.svg
│ ├── 009.svg
│ ├── 010.svg
│ ├── 011.svg
│ ├── 012.svg
│ ├── 013.svg
│ ├── 014.svg
│ ├── 015.svg
│ ├── 016.svg
│ ├── 017.svg
│ ├── 018.svg
│ └── 019.svg
├── JSUdata
├── addons
│ ├── A-000.png
│ ├── B-000.png
│ ├── C-000.png
│ ├── D-000.png
│ ├── E-000.png
│ └── F-000.png
└── bases
│ ├── 000.png
│ ├── 001.png
│ └── 002.png
├── WEB_PORT.css
├── WEB_PORT.js
├── WEB_PORT_AFTER.js
├── WEB_PORT_icon.png
├── WEB_PORT_og_image.png
├── googlec44b55cb93ac5031.html
├── guides
├── gradients.html
├── index.html
├── js2-2-01.jpg
├── js2-2.html
├── js2.html
├── jsc.html
├── jsd.html
├── jsv.html
└── jsw.html
├── pages
├── about.html
├── gen
│ ├── dotgrid.html
│ ├── jsplacement.html
│ ├── jsplacement2.html
│ ├── metropolis.html
│ ├── ultra.html
│ ├── velvet.html
│ └── wyre.html
├── gradients.html
├── home.html
└── settings.html
├── req
├── img
│ ├── canbg-light.png
│ ├── canbg.png
│ ├── canwork.png
│ ├── dots
│ │ ├── box.svg
│ │ ├── circle.svg
│ │ ├── diamond.svg
│ │ ├── diamondout.svg
│ │ ├── pat-xline.svg
│ │ ├── pat-xyadd.svg
│ │ ├── pat-xygrid.svg
│ │ ├── pat-xysub.svg
│ │ ├── pat-yline.svg
│ │ ├── pat-yxadd.svg
│ │ ├── pat-yxsub.svg
│ │ ├── ring.svg
│ │ └── square.svg
│ ├── gradi.png
│ ├── home-light.jpg
│ ├── home.jpg
│ ├── hotkeys.png
│ ├── jsico.ico
│ ├── jsico.png
│ ├── logo.png
│ ├── overlay
│ │ └── overlay001.png
│ ├── splash
│ │ ├── 01.jpg
│ │ ├── 02.jpg
│ │ ├── 03.jpg
│ │ ├── 04.jpg
│ │ ├── 05.jpg
│ │ ├── 06.jpg
│ │ ├── 07.jpg
│ │ ├── 08.jpg
│ │ ├── 09.jpg
│ │ ├── 10.jpg
│ │ ├── 11.jpg
│ │ ├── 12.jpg
│ │ └── 13.jpg
│ └── upd.svg
├── js
│ ├── gen
│ │ ├── common
│ │ │ ├── blob.js
│ │ │ ├── colorizer.js
│ │ │ ├── common.js
│ │ │ └── filesaver.js
│ │ ├── js-2
│ │ │ └── js-2.js
│ │ ├── js-classic
│ │ │ ├── js-classic.js
│ │ │ ├── preset.js
│ │ │ ├── presets.json
│ │ │ └── userpresets.json
│ │ ├── js-dotgrid
│ │ │ └── js-dotgrid.js
│ │ ├── js-metropolis
│ │ │ └── js-metropolis.js
│ │ ├── js-ultra
│ │ │ └── js-ultra.js
│ │ ├── js-velvet
│ │ │ └── js-velvet.js
│ │ └── js-wyre
│ │ │ └── js-wyre.js
│ └── sys
│ │ ├── backbone.js
│ │ ├── config.js
│ │ ├── hotkeys.js
│ │ ├── jsunloader.js
│ │ ├── navigation.js
│ │ ├── settings.js
│ │ ├── splash.js
│ │ └── vercheck.js
├── jsplacement.conf
├── style-pro.css
└── style.css
└── robots.txt
/.gitignore:
--------------------------------------------------------------------------------
1 | # node.js
2 | node_modules/
3 |
4 | # builds
5 | dist/
6 |
7 | # os-specific
8 | .DS_Store
9 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JSPlacementWeb
2 |
3 | 👾👽
4 |
5 | Web version of **JSPlacement** - procedural displacement sci-fi maps generator.
6 |
7 | **https://jsplacementweb.pages.dev/**
8 |
9 | Close guide
2 | « Guide index Custom colorizer gradients
5 |
6 |
7 | Adding custom gradients
8 | can be done in several ways.
10 |
11 |
12 | The first way
13 | is to create a 256x256 image with a left to right gradient of your choice. This can be done in various applications such as Adobe Photoshop and Illustrator, Affinity Photo and Designer, GIMP, Inkscape, etc.
14 |
15 |
16 |
17 | The second way
18 | is sampling. Crop and downscale an image to 256x256 size, select a 256x1 area, and scale it up to 256x256 using nearest neighbour interpolation for best result.
19 |
20 |
21 |
22 | The third way
23 | is sampling for lazy people. Just use the picture as is. JSplacement's colorizer will sample it for you.
24 |
25 |
26 |
27 | Adding gradients
28 | to JSplacement works the same way as custom sprites.
32 |
33 |
35 | Supported file formats:
36 | JPG, PNG, BMP
37 |
38 |
--------------------------------------------------------------------------------
/public/guides/index.html:
--------------------------------------------------------------------------------
1 | JSplacement Digital Guide
2 |
3 |
7 |
8 | JSplacement: Classic
9 | Generator settings »
10 |
11 |
12 | JSplacement: 2
13 | Generator settings »
14 | Custom sprites »
15 |
16 |
17 | JSplacement: Velvet
18 | Generator settings »
19 |
20 |
21 | JSplacement: Wyre
22 | Generator settings »
23 |
24 |
25 | JSplacement: dotGrid
26 | Generator settings »
27 |
28 |
29 | Additional features
30 | Custom colorizer gradients »
31 |
32 |
33 |
34 |
35 |
36 |
37 | Close guide
38 |
--------------------------------------------------------------------------------
/public/guides/js2-2-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/guides/js2-2-01.jpg
--------------------------------------------------------------------------------
/public/guides/js2-2.html:
--------------------------------------------------------------------------------
1 | Close guide
2 | « Guide index JSplacement: 2 - Custom sprites
5 |
6 |
9 | To create custom sprites
10 | you will need an illustration software capable of exporting SVG files such as Adobe Illustrator, Affinity Designer, or Inkscape.
11 | Please se attached image as a reference for creating your own sprites.
12 |
13 |
14 |
15 | Start creating
16 | your custom sprite by opening a new document.
21 |
22 |
23 | After drawing your sprite ,
24 | scale it up or down to fit onto the canvas for the best result. For the reference, see the image on the right.
28 |
29 |
30 | Import your sprites into JSplacement: 2
31 | by opening user data folder in your home directory ("JSplacement"), or by pressing C on your keyboard.
34 |
35 |
36 |
37 |
39 | Warning:
40 | While using PNG sprites with JSplacement: 2 is possible, SVG is much lighter and prefered option.
41 |
42 |
43 | JSplacement: 2 - Generator settings »
44 |
--------------------------------------------------------------------------------
/public/guides/js2.html:
--------------------------------------------------------------------------------
1 | Close guide
2 | « Guide index
3 |
4 | JSplacement: 2 - Generator settings
5 |
6 |
7 | Sprite set:
8 | This is just as simple as it looks. A selector between sprite sets that come with JSplacement and custom sprites.
9 | Please read next page for full documentation on how to make and use custom sprites.
10 |
11 |
12 |
13 | Background brightness:
14 | Control background color of the map for different results in whatever you're going to do with it.
15 | In displacement, setting this to 0 will make everything extrude. 255 does the opposite. By default this is 128.
16 |
17 |
18 |
19 | Background iterations:
20 | These are sorted sprite draws which happen on the background to fill the holes on the canvas
21 | and, in most cases, lowers the required amount of sprites to fill the canvas.
22 | Each iteration creates a layer of random sprites in even formation.
23 | 1 iteration draws a single sprite on whole canvas. 2 iterations draw additional 2x2 sprites.
24 | 3 iterations draw additional 3x3. 4 iterations draw additional 4x4. Setting background iterations 0 will disable this feature.
25 | Total count of sprites per levels are: 1 for 1, 5 for 2, 14 for 3, and 30 for 4. By default this is set to 3.
26 |
27 |
28 |
29 | Iterations:
30 | This is the main value of JSplacement: 2. It controls the exact amount of sprites drawn onto the canvas
31 | with exception when using seamless mode which occasionally performs multiple sprite draws based on co-ordinates.
32 | Please note that this is one of two key factors in JSplacement: 2's performance and it will slow down when set to a high value.
33 | By default this is set to 125.
34 |
35 |
36 |
37 | Sprite scaling:
38 | This is the second main value of JSplacement: 2. It controls the average size of generated sprites
39 | based on some math thing that I don't even remember anymore, but it made sense when I did it.
40 | Sprite scaling should be set together with the amount of iteration to achieve desired look.
41 | Please note that just like iterations, sprite scaling affects the overall performance. Larger sprites take longer to generate.
42 | By default this is set to 60.
43 |
44 |
45 |
46 | Seamless:
47 | This switch enables or disables seamless generator mode. In seamless mode, sprites are drawn second time on the opposite side of the canvas
48 | if the sprite is out of bounds to create seamless repeating pattern. If sprite overlaps with a corner, additional 3 draws will be done.
49 | By default this is turned on.
50 |
51 |
52 |
53 | Rotate sprites & Flip sprites:
54 | When turned on, generator will randomly rotate and/or mirror the dreawn sprites to add extra variety to the generated map.
55 | Rotation is done in steps of 90 degrees (0°, 90°, 180°, 270°). By default both of these are turned on.
56 |
57 |
58 |
59 | Blend sprites:
60 | When turned on, generated sprite may use lighten/darken blending mode instead of normal mode.
61 | The odds of using blending modes are: 60% normal, 20% darken, 20% lighten. By default this is turned on.
62 |
63 |
64 |
65 |
66 | JSplacement: 2 - Custom sprites »
67 |
--------------------------------------------------------------------------------
/public/guides/jsc.html:
--------------------------------------------------------------------------------
1 | Close guide
2 | « Guide index
3 |
4 | JSplacement: Classic - Generator settings
5 |
6 |
7 | Iterations:
8 | This is the main value of JSplacement: Classic. It controls the exact amount of objects drawn onto the canvas.
9 | By default this is set to 1000.
10 |
11 |
12 |
13 | Background brightness:
14 | Control background color of the map for different results in whatever you're going to do with it.
15 | In displacement, setting this to 0 will make everything extrude. 255 does the opposite. By default this is 128.
16 |
17 |
18 |
19 | Object types:
20 | Series of switches for various types of objects. Turning all objects off will be overwritten by box only.
21 | By default all are turned on.
22 |
23 |
24 |
25 | Object settings
26 |
27 |
28 | Brightness clamp:
29 | Limit generated shape's brightness between two values OR set both sliders to the same value to make it static.
30 | By default these are set to 0 and 255.
31 |
32 |
33 |
34 | Scale:
35 | Control shapes' average size. By default it's 100%.
36 |
37 |
38 |
39 | Alpha:
40 | Control the opacity of transparent boxes the same way the brightness clamp works.
41 | By default these are set to 50% and 80%.
42 |
43 |
44 |
45 | Spacing:
46 | Control the size of the space between the shapes in the patterns.
47 | By default these are set to 100%.
48 |
49 |
50 |
51 | Max Amount:
52 | Contol the maximum amount of elements in the patterns.
53 | By default these are set to 5.
54 |
55 |
56 |
57 | Line Width:
58 | Control the pixel width of the generated lines.
59 | By default these are set to 10.
60 |
61 |
62 |
63 | Other
64 |
65 |
66 | Randomize:
67 | This button will randomize every single setting in this generator. Have fun!
68 |
69 |
70 |
71 | Presets:
72 | This button will open a list of "Windmill's Seal of Approval" presets.
73 |
74 |
--------------------------------------------------------------------------------
/public/guides/jsd.html:
--------------------------------------------------------------------------------
1 | Close guide
2 | « Guide index
3 |
4 | JSplacement: dotGrid - Generator settings
5 |
6 |
7 | Scale:
8 | This slider defines the scale of dots on the map. By default this is set to 30.
9 |
10 |
11 |
12 | Minimum brightness:
13 | This slider defines the minimum brightness of the dots, which affects the visibility when used as a mask. By default this is set to 0.
14 |
15 |
16 |
17 | Drawning chance %:
18 | Unlike other generators, dotGrid uses systematic co-ordinate based system rather than amount of iterations.
19 | Drawing chance defines the odds of a dot or pattern being drawn per point on co-ordinates.
20 | By default this is set to 2.5.
21 |
22 |
23 |
24 | Pattern max length:
25 | The maximum lenght of the patterns. By default this is 5.
26 |
27 |
28 |
29 | Dot shapes:
30 | Series of switches for various types of dots. Turning all dots off will be overwritten by box only.
31 | By default all are turned on.
32 |
33 |
34 |
35 | Dot patterns:
36 | Series of switches for various types of patterns which use selected dot types. Turning all pattern types off will disable patterns entirely.
37 | By default all are turned on.
38 |
39 |
40 |
41 | Break the code:
42 | This switch disables necessary path closing in the code and turns on every single switch. It simulates the accidental broken code during the development of JSplacement 1.1.0.
43 | By default this is turned off.
44 |
45 |
--------------------------------------------------------------------------------
/public/guides/jsv.html:
--------------------------------------------------------------------------------
1 | Close guide
2 | « Guide index
3 |
4 | JSplacement: Velvet - Generator settings
5 |
6 |
7 | Iterations:
8 | This controls the value of the boxes drawn onto the canvas multiplied by 2 if using X or Y symmetry. 4 if X&Y. By default this is set to 100.
9 |
10 |
11 |
12 | Sub-iterations:
13 | This controls the value of additional boxes drawn onto the canvas in X shape. Like normal iterations, these are multiplied based on symmetry. Default: 50.
14 |
15 |
16 |
17 | Splitter iterations:
18 | This controls the amount of boxes drawn onto the canvas in + shape. This value is multiplied by 2 regardless of the symmetry. Default: 50.
19 |
20 |
21 |
22 | Background brightness:
23 | Control background color of the map for different results in whatever you're going to do with it.
24 | In d
25 | isplacement, setting this to 0 will make everything extrude. 255 does the opposite. By default this is 128.
26 |
27 |
28 |
29 | Symmetry along:
30 | This selector allows you to pick what type of symmetry you want from JSplacement: Velvet. By default this is set to X & Y.
31 |
32 |
33 |
34 | Use splitter:
35 | This selector allows you to turn generation of + shaped overlay on and off. By default this is set to Yes.
36 |
37 |
38 |
39 | Use splitter blending:
40 | This selector allows you to turn + shaped overlay's difference blending mode on and off. By default this is set to Yes.
41 |
42 |
--------------------------------------------------------------------------------
/public/guides/jsw.html:
--------------------------------------------------------------------------------
1 | Close guide
2 | « Guide index
3 |
4 | JSplacement: Wyre - Generator settings
5 |
6 |
7 | Layer count:
8 | Defines the amount of overlapping layers of wires from 2 to 255. By default this is 35.
9 |
10 |
11 |
12 | Wires per layer:
13 | Number of separate wires drawn per each layer. By default this is 3.
14 | Warning! Setting this values high may cause serious lag on lower end computers. Tread carefully.
15 |
16 |
17 |
18 | Max wire width:
19 | Maximum pixel width of the wire. By default this is 64.
20 |
21 |
22 |
23 | Max origin spread:
24 | This setting adds maximum size of the random offset to wire's point of origin. By default this is 0.
25 |
26 |
27 |
28 | Min and max step length:
29 | Minimum and maximum required distance between two points on the wire. By default these are 128 and 2048.
30 | Warning! Setting these values low may cause serious lag on lower end computers. Tread carefully.
31 |
32 |
33 |
34 | Wire color mode:
35 | This controls the way wires' brightness is set. Linear and curve draw them from dark to bright layer by layer.
36 | Inverted linear and inverted curve draw them from bright to dark. Random selects random brightness from 1 to 255.
37 | By default this is set to linear.
38 |
39 |
40 |
41 | Wire width mode:
42 | This controls the way wires' pixel thickness is set. Linear and curve draw them from thick to thin layer by layer.
43 | Inverted linear and inverted curve draw them from thin to thick. Random selects random width from 1 to maximum set width.
44 | By default this is set to random.
45 |
46 |
47 |
48 | Step directions
49 |
50 |
51 | Any:
52 | In this mode, wires have 8 different travel directions per step. This is the default value.
53 |
54 |
55 |
56 | Cardinal:
57 | In this mode, wires have 4 cardinal directions to travel per each step; up, down, left, and right.
58 |
59 |
60 |
61 | Diagonal:
62 | In this mode, wires can only travel diagonally. Essentially same as Cardinal mode, but everything is at 45° angle.
63 |
64 |
65 |
66 | Conical:
67 | In this special mode, each wire starts by going one step in any of the 8 direction, and each step afterwards is the same OR +-45° to previous step.
68 |
69 |
--------------------------------------------------------------------------------
/public/pages/gen/jsplacement2.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
Classic Set
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
Crap Pack
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
BIG:DATA
39 |
40 |
41 |
42 |
43 |
44 |
Aggromaxx
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
Custom Sprites
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
Background brightness 128
66 |
67 |
68 |
69 |
70 |
Background iterations 3
71 |
72 |
73 |
74 |
75 |
Iterations 125
76 |
77 |
78 |
79 |
80 |
Sprite scaling 60
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
Seamless
91 |
92 |
95 |
96 |
97 |
98 |
Rotate sprites
99 |
100 |
103 |
104 |
105 |
106 |
Flip sprites
107 |
108 |
111 |
112 |
113 |
114 |
Blend sprites
115 |
116 |
119 |
120 |
121 |
122 |
123 |
126 |
127 |
128 |
129 |
138 |
139 |
140 |
141 |
142 |
143 |
148 |
149 |
150 |
151 |
160 |
--------------------------------------------------------------------------------
/public/pages/gen/metropolis.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
21 |
Attention!
22 |
23 | JSplacement: Metropolis is currenty a rough sketch of an idea I'm working on.
24 | None of the maps generated with JS:M have resulted in desired geometry as of June 15th.
25 |
26 | You can still use JS:M if you want, but honestly, you should wait for further updates in future version.
27 |
28 |
31 |
32 |
33 |
34 |
35 |
36 |
45 |
46 |
47 |
52 |
53 |
54 |
55 |
64 |
--------------------------------------------------------------------------------
/public/pages/gen/ultra.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
Grid size 4
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
36 |
37 |
38 |
39 |
40 |
41 |
46 |
47 |
48 |
49 |
58 |
--------------------------------------------------------------------------------
/public/pages/gen/velvet.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
Iterations 100
18 |
19 |
20 |
21 |
22 |
Sub-iterations 50
23 |
24 |
25 |
26 |
27 |
Splitter iterations 50
28 |
29 |
30 |
31 |
32 |
Background brightness 128
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Symmetry along...
42 |
43 |
44 |
45 |
46 |
47 |
X & Y
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
X only
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
Y only
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
Use splitter:
74 |
75 |
78 |
79 |
80 |
81 |
Use splitter blending:
82 |
83 |
86 |
87 |
88 |
89 |
90 |
93 |
94 |
95 |
96 |
105 |
106 |
107 |
108 |
109 |
110 |
115 |
116 |
117 |
118 |
127 |
--------------------------------------------------------------------------------
/public/pages/gradients.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
26 |
--------------------------------------------------------------------------------
/public/pages/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
15 |
2 |
Timestamp format
3 |
4 |
9 |
14 |
15 |
16 |
Compact
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
Theme
26 |
27 |
32 |
33 |
34 |
Light
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Skip splash screen:
42 |
43 |
Disable version checker:
44 |
45 |
Disable animations (for slow machines):
46 |
47 |
48 |
res*(res-1)*4){
101 | y1 = source.data[i-res*4];
102 | y2 = source.data[i];
103 | }
104 |
105 | else{
106 | y1 = source.data[i-res*4];
107 | y2 = source.data[i+res*4];
108 | }
109 |
110 | destination.data[i] = (x1-x2)+127;
111 | destination.data[i+1] = (y1-y2)+127;
112 | destination.data[i+2] = 255;
113 | destination.data[i+3] = 255;
114 |
115 | }
116 |
117 | ctxnorm.putImageData( destination, 0, 0 );
118 |
119 | savename += timestamp;
120 | if(seamlsmode == "1"){
121 | savename += "-Seamless";
122 | }
123 | savename += "-Normal";
124 | savename += ".png";
125 |
126 | normalCanvas.toBlob(function(blob) {
127 | saveAs(blob, savename);
128 | });
129 | }
130 |
131 | // Calculate date
132 |
133 | function setTimestamp(){
134 | if(cfg.General.timestampFormat == 0){
135 | timestamp = Math.floor(Date.now() / 1000);
136 | }
137 | if(cfg.General.timestampFormat == 1){
138 | timestamp = realDate();
139 | }
140 | else{
141 | timestamp = compactDate();
142 | }
143 | }
144 |
145 | function realDate(){
146 | var date = new Date();
147 | var str = date.getFullYear() + '-' + ('0' + (date.getMonth()+1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2) + '-' + ('0' + date.getHours()).slice(-2)+ '-' + ('0' + date.getMinutes()).slice(-2) + '-' + ('0' + date.getSeconds()).slice(-2);
148 | return str;
149 | }
150 |
151 | function compactDate(){
152 | var date = new Date();
153 | var str = date.getFullYear() + ('0' + (date.getMonth()+1)).slice(-2) + ('0' + date.getDate()).slice(-2) + ('0' + date.getHours()).slice(-2) + ('0' + date.getMinutes()).slice(-2) + ('0' + date.getSeconds()).slice(-2);
154 | return str;
155 | }
156 |
--------------------------------------------------------------------------------
/public/req/js/gen/common/filesaver.js:
--------------------------------------------------------------------------------
1 | /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
2 | var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,a=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},i=/constructor/i.test(e.HTMLElement)||e.safari,f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},s="application/octet-stream",d=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,d)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(a){u(a)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,d){if(!d){t=p(t)}var v=this,w=t.type,m=w===s,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&i)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;a(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define("FileSaver.js",function(){return saveAs})}
3 |
--------------------------------------------------------------------------------
/public/req/js/gen/js-2/js-2.js:
--------------------------------------------------------------------------------
1 | function generateMap(){
2 |
3 | var bgcol = document.getElementById('bgcol').value;
4 | var iters = document.getElementById('iterations').value;
5 | var bgits = document.getElementById('bgits').value;
6 |
7 | seamlsmode = $('#seamlsmode:checked').val();
8 | var rotatemode = $('#rotatemode:checked').val();
9 | var mirrormode = $('#mirrormode:checked').val();
10 | var blendimode = $('#blendimode:checked').val();
11 | var alphamode = $('#alphamode:checked').val();
12 |
13 | ctx.globalCompositeOperation = "source-over";
14 | ctx.fillStyle = "rgb(" + bgcol + "," + bgcol + "," + bgcol + ")";
15 | ctx.fillRect(-cord, -cord, res, res);
16 |
17 | var minime = 125-document.getElementById('minsize').value;
18 | var maxime = minime*1.5;
19 |
20 | if(bgits != "0"){
21 | var bets = 1;
22 | for(i = 1; i <= bgits; i++){
23 | for(yi = -cord; yi <= cord; yi+=(res/bets)){
24 | for(xi = -cord; xi <= cord; xi+=(res/bets)){
25 | var rng = rand(0,files.length-1);
26 | var img = document.getElementById(files[rng]);
27 | ctx.drawImage(img,xi,yi,res/bets,res/bets);
28 | }
29 | }
30 | bets++;
31 | }
32 | }
33 |
34 | for(i = 0; i < iters; i++) {
35 | setTimeout(function() {
36 | if(seamlsmode == "1"){
37 | var scale = (res/rand(maxime,minime))*rand(10,25);
38 | var posx = rand(-res,res);
39 | var posy = rand(-res,res);
40 | }
41 | else{
42 | var scale = (res/rand(maxime,minime))*rand(10,25);
43 | var posx = rand(-cord-(cord/4),cord);
44 | var posy = rand(-cord-(cord/4),cord);
45 | }
46 |
47 | var rng = rand(0,files.length-1);
48 | var img = document.getElementById(files[rng]);
49 |
50 | if(rotatemode == "1"){
51 | var roota = rand(0,3)*90; // 0, 90, 180, 270
52 | if(roota != 0){ctx.rotate(roota*Math.PI/180);}
53 | }
54 |
55 | if(mirrormode == "1"){
56 | var flip = rand(0,1);
57 | if(flip == "0"){ ctx.scale(-1,1); }
58 | }
59 |
60 | var mood = rand(0,mode.length-1);
61 |
62 | if(blendimode == "1"){
63 | ctx.globalCompositeOperation = mode[mood];
64 | }
65 |
66 | ctx.drawImage(img,posx,posy,scale,scale);
67 |
68 | if(seamlsmode == "1"){
69 | if((posx+scale >= cord) && (posy+scale >= cord)){
70 | posx = posx-res;
71 | ctx.drawImage(img,posx,posy,scale,scale);
72 | posy = posy-res;
73 | ctx.drawImage(img,posx,posy,scale,scale);
74 | posx = posx+res;
75 | ctx.drawImage(img,posx,posy,scale,scale);
76 | }
77 | else if((posx <= -cord) && (posy+scale >= cord)){
78 | posx = posx+res;
79 | ctx.drawImage(img,posx,posy,scale,scale);
80 | posy = posy-res;
81 | ctx.drawImage(img,posx,posy,scale,scale);
82 | posx = posx-res;
83 | ctx.drawImage(img,posx,posy,scale,scale);
84 | }
85 | else if((posx+scale >= cord) && (posy <= -cord)){
86 | posx = posx-res;
87 | ctx.drawImage(img,posx,posy,scale,scale);
88 | posy = posy+res;
89 | ctx.drawImage(img,posx,posy,scale,scale);
90 | posx = posx+res;
91 | ctx.drawImage(img,posx,posy,scale,scale);
92 | }
93 | else if((posx <= -cord) && (posy <= -cord)){
94 | posx = posx+res;
95 | ctx.drawImage(img,posx,posy,scale,scale);
96 | posy = posy+res;
97 | ctx.drawImage(img,posx,posy,scale,scale);
98 | posx = posx-res;
99 | ctx.drawImage(img,posx,posy,scale,scale);
100 | }
101 |
102 |
103 | else if(posx+scale >= cord){
104 | posx = posx-res;
105 | ctx.drawImage(img,posx,posy,scale,scale);
106 | }
107 | else if(posx <= -cord){
108 | posx = posx+res;
109 | ctx.drawImage(img,posx,posy,scale,scale);
110 | }
111 | else if(posy+scale >= cord){
112 | posy = posy-res;
113 | ctx.drawImage(img,posx,posy,scale,scale);
114 | }
115 | else if(posy <= -cord){
116 | posy = posy+res;
117 | ctx.drawImage(img,posx,posy,scale,scale);
118 | }
119 | }
120 |
121 | if(mirrormode == "1"){
122 | if(flip == "0"){ ctx.scale(-1,1); }
123 | }
124 |
125 | if(rotatemode == "1"){
126 | if(roota != 0){ctx.rotate(-roota*Math.PI/180);}
127 | }
128 | }, 20);
129 | }
130 | var sourceCanvas = document.getElementById("dis");
131 | ctx.drawImage(sourceCanvas, -cord, -cord);
132 | }
133 |
134 | $(document).ready(function() {
135 | $('input:radio[name=spriteset]').change(function() {
136 | if (this.value == 'spritea') {
137 | spriteSet("JS2Classic");
138 | }
139 | else if (this.value == 'spriteb') {
140 | spriteSet("CrapPack");
141 | }
142 | else if (this.value == 'spritec') {
143 | spriteSet("BigData");
144 | }
145 | else if (this.value == 'sprited') {
146 | spriteSet("Aggromaxx");
147 | }
148 | else if (this.value == 'spritecustom') {
149 | spriteSet("CustomSprites");
150 | }
151 | });
152 | });
153 |
154 | var mode = [
155 | "source-over",
156 | "source-over",
157 | "source-over",
158 | "darken",
159 | "lighten"
160 | ];
161 |
162 | var canvas = document.getElementById("dis");
163 | var ctx = canvas.getContext("2d");
164 | var pupu = document.getElementById("imgs");
165 |
166 | var res = 8192;
167 | var cord = res/2;
168 |
169 | var undoCanvas = document.createElement('canvas');
170 | undoCanvas.width = res;
171 | undoCanvas.height = res;
172 | var undoctx = undoCanvas.getContext('2d');
173 |
174 | ctx.translate(cord,cord);
175 |
176 | spriteSet("JS2Classic");
177 |
178 | for (i = 0; i < files.length; i++){
179 | pupu.innerHTML = pupu.innerHTML + "' + presets[i].name + '';
16 | $(towrite).appendTo( "#presetlist" );
17 | }
18 |
19 | var objects = [
20 | "iterations", "bgcol",
21 | "draw.Box", "draw.BoxA", "draw.Grid", "draw.BatV", "draw.BatH", "draw.Lines",
22 | "Box.clampmin", "Box.clampmax", "Box.scale",
23 | "BoxA.clampmin", "BoxA.clampmax", "BoxA.clampAmin", "BoxA.clampAmax", "BoxA.scale",
24 | "Grid.clampmin", "Grid.clampmax", "Grid.scale", "Grid.spacing", "Grid.amount",
25 | "BatV.clampmin", "BatV.clampmax", "BatV.scale", "BatV.spacing", "BatV.amount",
26 | "BatH.clampmin", "BatH.clampmax", "BatH.scale", "BatH.spacing", "BatH.amount",
27 | "Lines.clampmin", "Lines.clampmax", "Lines.thick"
28 | ];
29 |
30 | function Preset(x){
31 | for (var i=0;i= 150){
52 | var img = document.getElementById("addon-"+parts[1][rand(0,parts[1].length-1)]);
53 | dtx.drawImage(img,dcan.width/-2,dcan.height/-2,dcan.width,dcan.height);
54 | }
55 |
56 | var roota = rand(0,3)*90; // 0, 90, 180, 270
57 | if(roota != 0){dtx.rotate(roota*Math.PI/180);}
58 |
59 | ctx.drawImage(dcan,xi*(res/gridsize),yi*(res/gridsize),res/gridsize,res/gridsize);
60 | }
61 | }
62 |
63 | ctx.globalCompositeOperation = "normal";
64 | var sourceCanvas = document.getElementById("dis");
65 | ctx.drawImage(sourceCanvas, 0, 0);
66 | }
67 |
68 | function ultraSet(){
69 | $("#imgs").empty();
70 |
71 | path = __dirname + "/JSUdata/bases/";
72 | for (i = 0; i < parts[0].length; i++){
73 | pupu.innerHTML = pupu.innerHTML + "=0)&&(curx<=res)) && ((cury>=0)&&(cury<=res))){
43 | step = rand(minstep,maxstep);
44 |
45 | switch (diremode) {
46 | case 0: direction(rand(0,7),step); break;
47 | case 1: direction(rand(0,3),step); break;
48 | case 2: direction(rand(4,7),step); break;
49 | case 3: conical(nxtdir,step); break;
50 | }
51 |
52 | if(diremode == 3){
53 | nxtdir = nxtdir + rand(-1,1);
54 | if(nxtdir < 0){
55 | nxtdir = 7;
56 | }
57 | else if(nxtdir > 7){
58 | nxtdir = 0;
59 | }
60 | }
61 |
62 | ctx.lineTo(nxtx,nxty);
63 | curx = nxtx; cury = nxty;
64 | }
65 |
66 | switch (colormode) {
67 | case 0: co = Math.ceil(((254/layers)*l)+1); break;
68 | case 1: co = 255-Math.floor(((255/layers)*l)); break;
69 | case 2: co = Math.ceil((254/Math.sqrt(layers))*Math.sqrt(l))+1; break;
70 | case 3: co = 255-(Math.ceil((254/Math.sqrt(layers))*Math.sqrt(l))); break;
71 | case 4: co = rand(1,255); break;
72 | }
73 |
74 | switch (scalemode) {
75 | case 0: lw = linewidth-Math.floor(((linewidth/layers)*l)); break;
76 | case 1: lw = Math.ceil(((linewidth/layers)*l)+1); break;
77 | case 2: lw = linewidth-(Math.ceil(((linewidth-1)/Math.sqrt(layers))*Math.sqrt(l))); break;
78 | case 3: lw = Math.ceil(((linewidth-1)/Math.sqrt(layers))*Math.sqrt(l))+1; break;
79 | case 4: lw = rand(1,linewidth); break;
80 | }
81 |
82 | ctx.strokeStyle='rgb('+co+','+co+','+co+')';
83 | ctx.lineWidth=lw;
84 | ctx.stroke();
85 | ctx.closePath();
86 | }
87 | }
88 |
89 | ctx.globalCompositeOperation = "normal";
90 | var sourceCanvas = document.getElementById("dis");
91 | ctx.drawImage(sourceCanvas, 0, 0);
92 | }
93 |
94 | function direction(i,step){
95 | switch (i) {
96 | case 0: nxtx = curx; nxty = cury+step; break; //Up
97 | case 1: nxtx = curx+step; nxty = cury; break; //Right
98 | case 2: nxtx = curx; nxty = cury-step; break; //Down
99 | case 3: nxtx = curx-step; nxty = cury; break; //Left
100 | case 4: nxtx = curx+(step*0.715); nxty = cury+(step*0.715); break; //Up Right
101 | case 5: nxtx = curx+(step*0.715); nxty = cury-(step*0.715); break; //Right Down
102 | case 6: nxtx = curx-(step*0.715); nxty = cury-(step*0.715); break; //Left Down
103 | case 7: nxtx = curx-(step*0.715); nxty = cury+(step*0.715); break; //Left Up
104 | }
105 | }
106 |
107 | function conical(i,step){
108 | switch (i) {
109 | case 0: nxtx = curx; nxty = cury+step; break; //Up
110 | case 1: nxtx = curx+(step*0.715); nxty = cury+(step*0.715); break; //Up Right
111 | case 2: nxtx = curx+step; nxty = cury; break; //Right
112 | case 3: nxtx = curx+(step*0.715); nxty = cury-(step*0.715); break; //Right Down
113 | case 4: nxtx = curx; nxty = cury-step; break; //Down
114 | case 5: nxtx = curx-(step*0.715); nxty = cury-(step*0.715); break; //Left Down
115 | case 6: nxtx = curx-step; nxty = cury; break; //Left
116 | case 7: nxtx = curx-(step*0.715); nxty = cury+(step*0.715); break; //Left Up
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/public/req/js/sys/backbone.js:
--------------------------------------------------------------------------------
1 | /* Electron Setup */
2 |
3 | const remote = require('electron').remote;
4 | const app = remote.app;
5 | const process = remote.process;
6 |
7 | window.$ = window.jQuery = require('jquery');
8 | $.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
9 | options.async = true;
10 | });
11 |
12 | var win = remote.getCurrentWindow();
13 | win.webContents.session.clearCache(function(){
14 | });
15 |
16 | /* fs module + paths */
17 |
18 | const fs = require('fs-extra');
19 |
20 | var homepath = app.getPath('home') + "/JSplacement";
21 | var customs = app.getPath('home') + "/JSplacement/CustomSprites";
22 |
23 | /* Check for config file */
24 |
25 | if (!fs.existsSync(homepath + "/jsplacement.conf")){
26 | // $( "div#firstrun" ).addClass( "visible" );
27 | // $( "div#wrapper" ).addClass( "blurd" );
28 | fs.copySync(__dirname + '/req/jsplacement.conf', homepath+'/jsplacement.conf');
29 | }
30 |
31 | if(!fs.existsSync(homepath + "/CustomSprites")){
32 | fs.mkdirSync(homepath + '/CustomSprites');
33 | }
34 |
35 | if(!fs.existsSync(homepath + "/CustomGradients")){
36 | fs.mkdirSync(homepath + '/CustomGradients');
37 | }
38 |
39 | /* Startup */
40 |
41 | $(function() {
42 | $("#container").load("pages/home.html");
43 | });
44 |
45 | // RNG
46 | function rand(min, max) {
47 | min = Math.ceil(min);
48 | max = Math.floor(max);
49 | return Math.floor(Math.random() * (max - min + 1)) + min;
50 | }
51 |
--------------------------------------------------------------------------------
/public/req/js/sys/config.js:
--------------------------------------------------------------------------------
1 | /* Config read */
2 |
3 | var ini = require('ini');
4 | var cfg = ini.parse(fs.readFileSync(homepath + "/jsplacement.conf", 'utf-8'));
5 |
6 | if(((typeof cfg.General) == "undefined") || ((typeof cfg.General.timestampFormat) == "undefined")){
7 | cfg.timestampFormat = 1;
8 | fs.writeFileSync(homepath + "/jsplacement.conf", ini.stringify(cfg,{ section: 'General' }));
9 | cfg = ini.parse(fs.readFileSync(homepath + "/jsplacement.conf", 'utf-8'));
10 | }
11 |
12 | if((typeof cfg.General.skipSplashScreen) == "undefined"){
13 | cfg.General.skipSplashScreen = false;
14 | }
15 |
16 | if((typeof cfg.General.disableUpdateCheck) == "undefined"){
17 | cfg.General.disableUpdateCheck = false;
18 | }
19 |
20 | if((typeof cfg.General.disableAnimations) == "undefined"){
21 | cfg.General.disableAnimations = false;
22 | }
23 |
24 | if((typeof cfg.General.skin) == "undefined"){
25 | cfg.General.skin = 0;
26 | }
27 |
28 | if((typeof cfg.General.iddqd) == "undefined"){
29 | cfg.General.iddqd = false;
30 | }
31 |
32 | fs.writeFileSync(homepath + "/jsplacement.conf", ini.stringify(cfg));
33 | cfg = ini.parse(fs.readFileSync(homepath + "/jsplacement.conf", 'utf-8'));
34 |
35 | if(cfg.General.skin == 1){
36 | $('link[rel="stylesheet"]').attr('href','req/style-pro.css');
37 | }
38 |
--------------------------------------------------------------------------------
/public/req/js/sys/hotkeys.js:
--------------------------------------------------------------------------------
1 | var MousePosX = 250;
2 | var MousePosY = 250;
3 |
4 | $(document).keyup(function(e) {
5 | if($( "div#firstrun" ).hasClass( "visible" )){}
6 | else if($( "div#digiguide" ).hasClass( "invisible" ) == false){
7 | if (e.which == 71){
8 | $( "div#digiguide" ).toggleClass( "invisible" );
9 | $( "div#container" ).toggleClass( "blurd" );
10 | }
11 | else if (e.which == 67) {
12 | var shell = require('electron').shell;
13 | var cusstom = app.getPath('home') + "/JSplacement/CustomSprites/";
14 | shell.showItemInFolder(cusstom);
15 | }
16 | }
17 | else{
18 |
19 | // Generators
20 | if ((e.which == 49)||(e.which == 97)) { hideMenu();unload();loadPage('gen/jsplacement.html'); }
21 | else if ((e.which == 50)||(e.which == 98)) { hideMenu();unload();loadPage('gen/jsplacement2.html'); }
22 | // else if ((e.which == 51)||(e.which == 99)) { hideMenu();unload();loadPage('gen/ultra.html'); }
23 | else if ((e.which == 51)||(e.which == 99)) { hideMenu();unload();loadPage('gen/velvet.html'); }
24 | // else if (e.which == 52) { hideMenu();unload();loadPage('gen/metropolis.html'); }
25 | else if ((e.which == 52)||(e.which == 100)) { hideMenu();unload();loadPage('gen/wyre.html'); }
26 | else if ((e.which == 53)||(e.which == 101)) { hideMenu();unload();loadPage('gen/dotgrid.html'); }
27 |
28 | // Home & About
29 | else if ((e.which == 72)||(e.which == 48)||(e.which == 96)) { hideMenu();unload();loadPage('home.html'); }
30 | else if (e.which == 65) { hideMenu();unload();loadPage('about.html'); }
31 |
32 | // Generator
33 | else if (e.which == 82) { refresh(); }
34 | else if (e.which == 83) { saveHeight(savename); }
35 | else if (e.which == 73) { invertMap(savename); }
36 |
37 | // Menu
38 | else if (e.which == 77) { toggleMenu(); }
39 |
40 | // User directory
41 | else if (e.which == 67) {
42 | var shell = require('electron').shell;
43 | var cusstom = app.getPath('home') + "/JSplacement/";
44 | shell.openItem(cusstom);
45 | }
46 |
47 | // In-app Guide
48 | else if (e.which == 71){
49 | $( "#digiguide" ).toggleClass( "invisible" );
50 | $( "div#container" ).toggleClass( "blurd" );
51 | $( "#guide" ).empty();
52 |
53 | if($( "div#digiguide" ).hasClass( "invisible" ) == false){
54 | $( "#guide" ).load( "guides/" + guidepage + ".html" );
55 | }
56 | }
57 |
58 | // Hotkey view undo
59 | else if (e.which == 88) {
60 | $( "div#hotkeys" ).addClass( "invisible" );
61 | $( "div#container" ).removeClass( "blurd" );
62 | }
63 | // Zoom undo
64 | else if (e.which == 90) {
65 | $( "canvas#dis" ).removeClass( "zoomed" );
66 | $( "canvas#dat" ).removeClass( "zoomed" );
67 | $( ".viewcontrols" ).removeClass( "hidden" );
68 | $( "div.canvasboxinner" ).unbind();
69 | $("canvas#dis").css("transform", "translateX(0px) translateY(0px)");
70 | $("canvas#dat").css("transform", "translateX(0px) translateY(0px)");
71 | }
72 | }
73 |
74 | });
75 |
76 | $(document).keydown(function(f){
77 | if($( "div#firstrun" ).hasClass( "visible" )){
78 | }
79 | else if($( "div#digiguide" ).hasClass( "invisible" ) == false){
80 | }
81 | else{
82 | // Hotkeys
83 | if (f.which == 88){
84 | $( "div#hotkeys" ).removeClass( "invisible" );
85 | $( "div#container" ).addClass( "blurd" );
86 | }
87 | else if(f.which == 9){
88 | f.preventDefault();
89 | }
90 | // Zoom
91 | else if (f.which == 90){
92 | $( "canvas#dis" ).addClass( "zoomed" );
93 | $( "canvas#dat" ).addClass( "zoomed" );
94 | $( ".viewcontrols" ).addClass( "hidden" );
95 | transX = (1+MousePosX)*-5; transY = (1+MousePosY)*-5;
96 | $("canvas#dis").css("transform", "translateX("+transX+"px) translateY("+transY+"px)");
97 | $("canvas#dat").css("transform", "translateX("+transX+"px) translateY("+transY+"px)");
98 | $( "div.canvasboxinner" ).mouseover(function(event){
99 | MousePosY = event.offsetY;
100 | MousePosX = event.offsetX;
101 | transX = (1+MousePosX)*-5;
102 | transY = (1+MousePosY)*-5;
103 | $("canvas#dis").css("transform", "translateX("+transX+"px) translateY("+transY+"px)");
104 | $("canvas#dat").css("transform", "translateX("+transX+"px) translateY("+transY+"px)");
105 | });
106 | $( "div.canvasboxinner" ).mousemove(function(event){
107 | MousePosY = event.offsetY;
108 | MousePosX = event.offsetX;
109 | transX = (1+MousePosX)*-5;
110 | transY = (1+MousePosY)*-5;
111 | $("canvas#dis").css("transform", "translateX("+transX+"px) translateY("+transY+"px)");
112 | $("canvas#dat").css("transform", "translateX("+transX+"px) translateY("+transY+"px)");
113 | });
114 | }
115 | }
116 |
117 | });
118 |
--------------------------------------------------------------------------------
/public/req/js/sys/jsunloader.js:
--------------------------------------------------------------------------------
1 | function saveHeight(){
2 | console.log( "Nice..." );
3 | }
4 |
5 | function refresh(){
6 | console.log( "Meme!" );
7 | }
8 |
--------------------------------------------------------------------------------
/public/req/js/sys/navigation.js:
--------------------------------------------------------------------------------
1 | // Toggle side menu visibility
2 | function toggleMenu(){
3 | $( "div#sidemenu" ).toggleClass( "visible" );
4 | $( "svg.menubutton" ).toggleClass( "visible" );
5 | }
6 |
7 | function hideMenu(){
8 | $( "div#sidemenu" ).removeClass( "visible" );
9 | $( "svg.menubutton" ).removeClass( "visible" );
10 | }
11 |
12 | function unload(){
13 | $( "div#container" ).toggleClass( "hiding" );
14 | setTimeout(function(){
15 | $("#container").empty();
16 | }, 125);
17 | }
18 |
19 | function loadPage(page){
20 | setTimeout(function(){
21 | $("#container").load("pages/"+page);
22 | }, 250);
23 | setTimeout(function(){
24 | $( "div#container" ).toggleClass("hiding");
25 | }, 375);
26 | hideColorizer()
27 | }
28 |
29 | function goToPage(url) {
30 | // WEB_PORT override
31 | window.open(url);
32 |
33 | // var shell = require('electron').shell;
34 | // event.preventDefault();
35 | // shell.openExternal(url);
36 | }
37 |
38 | function guidePage(x){
39 | $("div#guide").empty();
40 | $("div#guide").load("guides/"+x+".html");
41 | }
42 |
43 | function closeGuide(){
44 | $( "div#guide" ).empty();
45 | $( "div#digiguide" ).toggleClass( "invisible" );
46 | $( "div#container" ).toggleClass( "blurd" );
47 | }
48 |
49 | function gitGuide(){
50 | $( "div#digiguide" ).toggleClass( "invisible" );
51 | $( "div#container" ).toggleClass( "blurd" );
52 | if($( "div#digiguide" ).hasClass( "invisible" ) == false){
53 | $( "#guide" ).load( "guides/" + guidepage + ".html" );
54 | }
55 | }
56 |
57 | // Toggle Colorizer Menu
58 | function toggleColorizer(){
59 | $("#colorizer").toggleClass("hidden");
60 | $("a.colorize").toggleClass("active");
61 | $("#container").toggleClass("colorizer");
62 | $("#canover").toggleClass("colorizer");
63 | loadGrad();
64 | }
65 |
66 | function hideColorizer(){
67 | $("#colorizer").addClass("hidden");
68 | $("a.colorize").removeClass("active");
69 | $("#container").removeClass("colorizer");
70 | $("#canover").removeClass("colorizer");
71 | }
72 |
--------------------------------------------------------------------------------
/public/req/js/sys/settings.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | $('input[name="timestampFormat"][value="'+cfg.General.timestampFormat+'"]').prop('checked',true);
3 | $('input[name="skin"][value="'+cfg.General.skin+'"]').prop('checked',true);
4 | $('#skipSplashScreen').prop('checked',cfg.General.skipSplashScreen);
5 | $('#disableUpdateCheck').prop('checked',cfg.General.disableUpdateCheck);
6 | $('#disableAnimations').prop('checked',cfg.General.disableAnimations);
7 | timeMode();
8 | });
9 |
10 | function saveNewSetting(id){
11 | switch (id){
12 | case "timestampFormat": cfg.General.timestampFormat = $('input[name="'+id+'"]:checked').val(); break;
13 | case "skipSplashScreen": cfg.General.skipSplashScreen = $('#'+id).prop('checked'); break;
14 | case "disableUpdateCheck": cfg.General.disableUpdateCheck = $('#'+id).prop('checked'); break;
15 | case "disableAnimations": cfg.General.disableAnimations = $('#'+id).prop('checked'); break;
16 | case "skin": cfg.General.skin = $('input[name="'+id+'"]:checked').val(); break;
17 | }
18 |
19 | fs.writeFileSync(homepath + "/jsplacement.conf", ini.stringify(cfg));
20 | cfg = ini.parse(fs.readFileSync(homepath + "/jsplacement.conf", 'utf-8'));
21 | }
22 |
23 | $('input[name="timestampFormat"]').change(function(){
24 | timeMode();
25 | });
26 |
27 | $('input[name="skin"]').change(function(){
28 | if(cfg.General.skin == 0){
29 | $('link[rel="stylesheet"]').attr('href','req/style.css');
30 | }
31 | if(cfg.General.skin == 1){
32 | $('link[rel="stylesheet"]').attr('href','req/style-pro.css');
33 | }
34 | });
35 |
36 | $('#disableUpdateCheck').change(function(){
37 | if(cfg.General.disableUpdateCheck == true){
38 | $('#vercheck').css('display','none');
39 | }
40 | else{
41 | verCheck();
42 | }
43 | });
44 |
45 | $('#disableAnimations').change(function(){
46 | if(cfg.General.disableAnimations == true){
47 | $('#disableanimation').html('');
48 | }
49 | else{
50 | $('#disableanimation').html('');
51 | }
52 | })
53 |
54 |
55 | function timeMode(){
56 | switch (cfg.General.timestampFormat) {
57 | case "0":
58 | var str = Math.floor(Date.now() / 1000);
59 | $('#showtime').html("Files will be saved as: JS-Something-" + str + ".png ");
60 | break;
61 |
62 | case "1":
63 | var date = new Date();
64 | var str = date.getFullYear() + '-' + ('0' + (date.getMonth()+1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2) + '-' + ('0' + date.getHours()).slice(-2) + '-' + ('0' + date.getMinutes()).slice(-2) + '-' + ('0' + date.getSeconds()).slice(-2);
65 | $('#showtime').html("Files will be saved as: JS-Something-" + str + ".png ");
66 | break;
67 |
68 | case "2":
69 | var date = new Date();
70 | var str = date.getFullYear() + ('0' + (date.getMonth()+1)).slice(-2) + ('0' + date.getDate()).slice(-2) + ('0' + date.getHours()).slice(-2) + ('0' + date.getMinutes()).slice(-2) + ('0' + date.getSeconds()).slice(-2);
71 | $('#showtime').html("Files will be saved as: JS-Something-" + str + ".png ");
72 | break;
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/public/req/js/sys/splash.js:
--------------------------------------------------------------------------------
1 | var splashfiles = [
2 | // ["01",'Philip Lück'],
3 | // ['02','Damon Milstead'],
4 | // ['03','Mario Tran Phuc'],
5 | // ['04','Stu Ballinger'],
6 | // ['05','Dortus aka MM'],
7 | // ['06','Grigori Shevtsov'],
8 | // ['07','Grigori Shevtsov'],
9 | // ['08','Stu Ballinger'],
10 | // ['09','Alex Ness'],
11 | ['10','Grigori Shevtsov'],
12 | ['11','Matnes_Design'],
13 | ['12','Grigori Shevtsov'],
14 | ['13','Ross A. Morris']
15 | ];
16 |
17 | var rng = rand(0,splashfiles.length-1);
18 |
19 | $( document ).ready(function() {
20 | if(cfg.General.skipSplashScreen == true){
21 | }
22 | else{
23 | $( "div#splash" ).removeClass( "skip" );
24 | setTimeout(function(){
25 | $( "div#splash" ).removeClass( "visible" );
26 | }, 1500);
27 | }
28 | $("#splashartist").append(splashfiles[rng][1]);
29 | $("div#splash").css("background-image","url('req/img/splash/" + splashfiles[rng][0] + ".jpg')");
30 |
31 | });
32 |
--------------------------------------------------------------------------------
/public/req/js/sys/vercheck.js:
--------------------------------------------------------------------------------
1 | var curver = 130;
2 |
3 | $(function() {
4 | verCheck();
5 | });
6 |
7 | function verCheck(){
8 | if(cfg.General.disableUpdateCheck == false){
9 | $('#vercheck').css('display','block');
10 | $('#vercheck').html(' 
3 |
4 |
11 |
12 |
15 | 
10 | 
11 |
12 | ## You might also like 🖤
13 |
14 | ▶▶▶ Check out **[Displacement X](https://github.com/satelllte/displacementx)** - free and open source alternative of `JSplacement`.
15 |
16 | ## IMPORTANT INFORMATION
17 |
18 | - I am not the author of this software. All rights belong to [Windmill](https://windmillart.net/) - the creator of JSPlacement original desktop application. The only thing I did is ported it to web.
19 | - I don't make any money from this software and I didn't steal it because the source code of any [Electron](https://www.electronjs.org/) app is not protected from reading.
20 | - The reason for making this port is to keep this amazing, useful and loved piece of software alive ❤️. Also, please consider to support the author of this software - [Windmill](https://windmillart.net/), who wasn't getting enough respect and who eventually [turned it down](https://www.reddit.com/r/blender/comments/zfwmjr/does_anyone_know_what_happened_to_jsplacement/) 😔:
21 | - https://www.paypal.com/paypalme/WMillArt
22 | - https://ko-fi.com/windmill
23 | - Note that this software is unstable, because it's a quick port which is missing some features and which might be buggy. This is mostly because there's no file system access given to the web application.
24 |
25 | ## Technical details
26 |
27 | The original static files of the port moved into `/public` directory, which is served by [Vite](https://vitejs.dev/) tool.
28 |
29 | All the web overrides are highlighted with the code comments containing `WEB_PORT` word.
30 |
31 | The original desktop app source code is available at [native](https://github.com/satelllte/JSPlacementWeb/tree/native) branch, which can be compared against the `main` branch anytime.
32 |
33 | To run local development server, clone the repository and run:
34 |
35 | ```sh
36 | npm ci
37 | nvm use
38 | npm run dev
39 | ```
40 |
--------------------------------------------------------------------------------
/docs/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/docs/screenshot.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "JSPlacementWeb",
3 | "version": "1.3.0",
4 | "description": "Web version of JSPlacement app - procedural displacement sci-fi maps generator.",
5 | "author": "Windmill",
6 | "keywords": [
7 | "jsplacement",
8 | "jsplacement-web",
9 | "displacement-map",
10 | "displacement-maps",
11 | "normal-map",
12 | "normal-maps",
13 | "generative-art",
14 | "sci-fi",
15 | "blender",
16 | "blender-maps",
17 | "blender-displacement"
18 | ],
19 | "scripts": {
20 | "dev": "vite dev",
21 | "build": "vite build",
22 | "preview": "vite preview"
23 | },
24 | "devDependencies": {
25 | "vite": "^4.4.9"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/public/Gradients/gradi001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi001.png
--------------------------------------------------------------------------------
/public/Gradients/gradi002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi002.png
--------------------------------------------------------------------------------
/public/Gradients/gradi003.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi003.png
--------------------------------------------------------------------------------
/public/Gradients/gradi004.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi004.png
--------------------------------------------------------------------------------
/public/Gradients/gradi005.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi005.png
--------------------------------------------------------------------------------
/public/Gradients/gradi006.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi006.png
--------------------------------------------------------------------------------
/public/Gradients/gradi007.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi007.png
--------------------------------------------------------------------------------
/public/Gradients/gradi008.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi008.png
--------------------------------------------------------------------------------
/public/Gradients/gradi009.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi009.png
--------------------------------------------------------------------------------
/public/Gradients/gradi010.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi010.png
--------------------------------------------------------------------------------
/public/Gradients/gradi011.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi011.png
--------------------------------------------------------------------------------
/public/Gradients/gradi012.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi012.png
--------------------------------------------------------------------------------
/public/Gradients/gradi013.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi013.png
--------------------------------------------------------------------------------
/public/Gradients/gradi014.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi014.png
--------------------------------------------------------------------------------
/public/Gradients/gradi015.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi015.png
--------------------------------------------------------------------------------
/public/Gradients/gradi016.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi016.png
--------------------------------------------------------------------------------
/public/Gradients/gradi017.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi017.png
--------------------------------------------------------------------------------
/public/Gradients/gradi018.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi018.png
--------------------------------------------------------------------------------
/public/Gradients/gradi019.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi019.png
--------------------------------------------------------------------------------
/public/Gradients/gradi020.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/Gradients/gradi020.png
--------------------------------------------------------------------------------
/public/JS2sprites/Aggromaxx/001.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/Aggromaxx/Addon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/Aggromaxx/Addon3.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-001.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-001b.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-002.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-003.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-004.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-005.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-006.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-007.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-009.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-011.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-013.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-014.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-015.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-016.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/altcrap-016b.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/crap-003.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/crap-004.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/crap-007.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/crap-007b.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/CrapPack/newcrap-001.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/JS2Classic/005.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/JS2Classic/013.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JS2sprites/JS2Classic/018.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/JSUdata/addons/A-000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/addons/A-000.png
--------------------------------------------------------------------------------
/public/JSUdata/addons/B-000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/addons/B-000.png
--------------------------------------------------------------------------------
/public/JSUdata/addons/C-000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/addons/C-000.png
--------------------------------------------------------------------------------
/public/JSUdata/addons/D-000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/addons/D-000.png
--------------------------------------------------------------------------------
/public/JSUdata/addons/E-000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/addons/E-000.png
--------------------------------------------------------------------------------
/public/JSUdata/addons/F-000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/addons/F-000.png
--------------------------------------------------------------------------------
/public/JSUdata/bases/000.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/bases/000.png
--------------------------------------------------------------------------------
/public/JSUdata/bases/001.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/bases/001.png
--------------------------------------------------------------------------------
/public/JSUdata/bases/002.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/satelllte/JSPlacementWeb/f5de697e47d312e642aba7013781ff04e5de1247/public/JSUdata/bases/002.png
--------------------------------------------------------------------------------
/public/WEB_PORT.css:
--------------------------------------------------------------------------------
1 | #WEB_PORT_head {
2 | position: fixed;
3 | z-index: 1000;
4 | top: 42px;
5 | right: 0;
6 | font-size: 16px;
7 | font-weight: bold;
8 | padding: 12px 8px;
9 | padding-top: 8px;
10 | margin: 0;
11 | color: #F44;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: flex-end;
15 | background-color: rgba(0, 0, 0, 0.2);
16 | }
17 | #WEB_PORT_head > h1 {
18 | font-size: 16px;
19 | }
20 | #WEB_PORT_head > a {
21 | color: #44F;
22 | font-size: 12px;
23 | text-decoration: underline;
24 | }
25 |
--------------------------------------------------------------------------------
/public/WEB_PORT.js:
--------------------------------------------------------------------------------
1 | // define `__dirname` global variable which is used in the original source code
2 | __dirname = "";
3 |
4 | // define `rand` function
5 | function rand(min, max) {
6 | min = Math.ceil(min);
7 | max = Math.floor(max);
8 | return Math.floor(Math.random() * (max - min + 1)) + min;
9 | }
10 |
11 | // define `files` global variable which is used in the original source code
12 | files = [
13 | 'JS2sprites/Aggromaxx/001.svg',
14 | 'JS2sprites/Aggromaxx/002.svg',
15 | 'JS2sprites/Aggromaxx/003.svg',
16 | 'JS2sprites/Aggromaxx/003-alt.svg',
17 | 'JS2sprites/Aggromaxx/004.svg',
18 | 'JS2sprites/Aggromaxx/Addon.svg',
19 | 'JS2sprites/Aggromaxx/Addon2.svg',
20 | 'JS2sprites/Aggromaxx/Addon3.svg',
21 | 'JS2sprites/Aggromaxx/Vent.svg',
22 | 'JS2sprites/Aggromaxx/Vent2.svg',
23 | 'JS2sprites/Aggromaxx/Wires.svg',
24 | 'JS2sprites/Aggromaxx/Wires2.svg',
25 | 'JS2sprites/BigData/001.svg',
26 | 'JS2sprites/BigData/002.svg',
27 | 'JS2sprites/BigData/003a.svg',
28 | 'JS2sprites/BigData/003b.svg',
29 | 'JS2sprites/BigData/005.svg',
30 | 'JS2sprites/CrapPack/altcrap-001.svg',
31 | 'JS2sprites/CrapPack/altcrap-001b.svg',
32 | 'JS2sprites/CrapPack/altcrap-002.svg',
33 | 'JS2sprites/CrapPack/altcrap-003.svg',
34 | 'JS2sprites/CrapPack/altcrap-004.svg',
35 | 'JS2sprites/CrapPack/altcrap-005.svg',
36 | 'JS2sprites/CrapPack/altcrap-006.svg',
37 | 'JS2sprites/CrapPack/altcrap-007.svg',
38 | 'JS2sprites/CrapPack/altcrap-008.svg',
39 | 'JS2sprites/CrapPack/altcrap-009.svg',
40 | 'JS2sprites/CrapPack/altcrap-010.svg',
41 | 'JS2sprites/CrapPack/altcrap-011.svg',
42 | 'JS2sprites/CrapPack/altcrap-012.svg',
43 | 'JS2sprites/CrapPack/altcrap-013.svg',
44 | 'JS2sprites/CrapPack/altcrap-014.svg',
45 | 'JS2sprites/CrapPack/altcrap-015.svg',
46 | 'JS2sprites/CrapPack/altcrap-016.svg',
47 | 'JS2sprites/CrapPack/altcrap-016b.svg',
48 | 'JS2sprites/CrapPack/crap-001.svg',
49 | 'JS2sprites/CrapPack/crap-002.svg',
50 | 'JS2sprites/CrapPack/crap-003.svg',
51 | 'JS2sprites/CrapPack/crap-004.svg',
52 | 'JS2sprites/CrapPack/crap-005.svg',
53 | 'JS2sprites/CrapPack/crap-006.svg',
54 | 'JS2sprites/CrapPack/crap-007.svg',
55 | 'JS2sprites/CrapPack/crap-007b.svg',
56 | 'JS2sprites/CrapPack/newcrap-001.svg',
57 | 'JS2sprites/JS2Classic/001.svg',
58 | 'JS2sprites/JS2Classic/004.svg',
59 | 'JS2sprites/JS2Classic/005.svg',
60 | 'JS2sprites/JS2Classic/006.svg',
61 | 'JS2sprites/JS2Classic/007.svg',
62 | 'JS2sprites/JS2Classic/008.svg',
63 | 'JS2sprites/JS2Classic/009.svg',
64 | 'JS2sprites/JS2Classic/010.svg',
65 | 'JS2sprites/JS2Classic/011.svg',
66 | 'JS2sprites/JS2Classic/012.svg',
67 | 'JS2sprites/JS2Classic/013.svg',
68 | 'JS2sprites/JS2Classic/014.svg',
69 | 'JS2sprites/JS2Classic/015.svg',
70 | 'JS2sprites/JS2Classic/016.svg',
71 | 'JS2sprites/JS2Classic/017.svg',
72 | 'JS2sprites/JS2Classic/018.svg',
73 | 'JS2sprites/JS2Classic/019.svg',
74 | 'JSUdata/bases/000',
75 | 'JSUdata/bases/001',
76 | 'JSUdata/bases/002',
77 | 'JSUdata/addons/A-000',
78 | 'JSUdata/addons/B-000',
79 | 'JSUdata/addons/C-000',
80 | 'JSUdata/addons/D-000',
81 | 'JSUdata/addons/E-000',
82 | 'JSUdata/addons/F-000',
83 | ];
84 |
85 | // define `gfiles` global variable which contains paths to gradients
86 | gfiles = [
87 | 'Gradients/gradi001.png',
88 | 'Gradients/gradi002.png',
89 | 'Gradients/gradi003.png',
90 | 'Gradients/gradi004.png',
91 | 'Gradients/gradi005.png',
92 | 'Gradients/gradi006.png',
93 | 'Gradients/gradi007.png',
94 | 'Gradients/gradi008.png',
95 | 'Gradients/gradi009.png',
96 | 'Gradients/gradi010.png',
97 | 'Gradients/gradi011.png',
98 | 'Gradients/gradi012.png',
99 | 'Gradients/gradi013.png',
100 | 'Gradients/gradi014.png',
101 | 'Gradients/gradi015.png',
102 | 'Gradients/gradi016.png',
103 | 'Gradients/gradi017.png',
104 | 'Gradients/gradi018.png',
105 | 'Gradients/gradi019.png',
106 | 'Gradients/gradi020.png',
107 | ];
108 |
109 | // define global configuration object
110 | cfg = {
111 | General: {
112 | skipSplashScreen: true,
113 | disableAnimations: false,
114 | disableUpdateCheck: true,
115 | timestampFormat: 0,
116 | skin: 0,
117 | iddqd: false,
118 | }
119 | }
--------------------------------------------------------------------------------
/public/WEB_PORT_AFTER.js:
--------------------------------------------------------------------------------
1 | // attach static images to the document
2 | (() => {
3 | const container = document.createElement('div');
4 | container.id = 'imgs';
5 | for (i = 0; i < files.length; i++){
6 | container.innerHTML = container.innerHTML + "
7 |
8 |