-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
328 lines (322 loc) · 19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html>
<head>
<meta charset = utf-8>
<meta name = viewport content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
<title>Build Game Worlds by Combining Craft with Code | CanvasCraft</title>
<link rel = icon type = image/x-icon href = favicon.ico>
<link rel = stylesheet href = src/styles.css>
</head>
<body>
<div id = everything>
<div id = screen>
<div id = container>
<canvas id = cvs></canvas>
<div id = details></div>
</div>
</div>
<div id = quickButtons>
<button class = quickButton id = helpButton onmousedown = toggleHelpMenu()>
<img src = src/help.svg>
<div id = helpMenu>
Welcome to CanvasCraft!
To get started, let's create a shape by left-clicking and
dragging across this grid
</div>
</button>
<button class = quickButton id = cameraLock><img src = src/cameraLock.svg></button>
<button class = quickButton id = shapeToggle><img src = src/shapes.svg></button>
<button class = quickButton id = saveButton><img src = src/save.svg></button>
<button class = quickButton id = settingsButton><img src = src/settings.svg></button>
</div>
<div id = right class = closed>
<div id = hideRight onmousedown = sideHandle()><img src = src/close.svg></div>
<div id = top>
<div id = topContent>
<h4 id = layerSwitch onmousedown = closeLayers()>
<img src = src/close.svg>Layers and Shapes
</h4>
<div id = layers></div>
</div>
</div>
<div id = base class = closed>
<div id = hideBase onmousedown = baseHandle()><img src = src/close.svg></div>
<div id = hideBaseLarge onmousedown = baseHandle(true) class = flip><img src = src/close.svg></div>
<div id = baseContent>
</div>
</div>
</div>
<div id = settings>
<span id = settingClose>×</span>
<div id = settingContent>
<h1>Settings</h1>
<h3>General</h3>
<label class = checkcontainer class = checked>
Grid
<input type = checkbox checked = checked id = gridOn>
<span class = checkmark></span>
</label>
<label class = checkcontainer class = checked>
Invert grid
<input type = checkbox checked = checked id = whiteGrid>
<span class = checkmark></span>
</label>
Choose a background colour
<button id = bgColor class = 'colorPick small'>
<div id = bgText></div>
</button>
<button id = openSplash class = small>Open Splash Screen</button>
<h3>Shapes</h3>
<label class = checkcontainer id = randomBrushContain class = checked>
Create shapes with a random colour
<input type = checkbox checked = checked id = randomBrush>
<span class = checkmark></span>
</label>
<label class = checkcontainer>
Create shapes with a default colour
<input type = checkbox checked = unchecked id = defaultBrush>
<span class = checkmark></span>
</label>
<button id = settingColor class = 'colorPick small'>
<div id = settingColorText></div>
</button>
Texture render speed <input class = wide id = textureRender>
</div>
</div>
<div id = saveScreen>
<span id = saveClose>×</span>
<div id = saveContent>
<h1>Save</h1>
<h3>Save as Image</h3>
<div class = desc>
Save your artwork as an image. This feature
can be used for game assets or backdrops. Lines are not
included in the final image.
</div>
<label class = checkcontainer>
Transparent background
<input type = checkbox checked = unchecked id = transparentBg>
<span class = checkmark></span>
</label>
<label class = checkcontainer>
Include hidden shapes to boundary
<input type = checkbox checked = unchecked id = hiddenBoundary>
<span class = checkmark></span>
</label>
<div id = saveAsImageBox></div>
<button class = normal id = downloadImage>Download</button>
<h3>Save as File</h3>
<div class = desc>
Easily save your project for later.
When you're ready, just import your saved file
and pick up where you left off.
</div>
<button class = small id = downloadFile>Download File</button>
<label for = uploadFile class = uploadFileLabel>
Upload File
<input type = file class = small id = uploadFile accept = application/json>
</label>
<h3>Save as Code</h3>
<div class = desc>
This feature allows you to add CanvasCraft projects to a game.
The code can include aspects such as the shape's coordinates,
dimensions, and properties.
</div>
<label class = checkcontainer class = checked>
Include shapes
<input type = checkbox checked = checked id = includeShapes>
<span class = checkmark></span>
</label>
<label class = checkcontainer class = checked>
Include lines
<input type = checkbox checked = checked id = includeLines>
<span class = checkmark></span>
</label>
<label class = checkcontainer class = checked>
Include properties
<input type = checkbox checked = checked id = includeProperties>
<span class = checkmark></span>
</label>
<label class = checkcontainer class = checked>
Include hidden shapes
<input type = checkbox checked = checked id = includeHidden>
<span class = checkmark></span>
</label>
<label class = checkcontainer class = checked>
Include types
<input type = checkbox checked = checked id = includeType>
<span class = checkmark></span>
</label>
<label class = checkcontainer>
Enquote properties
<input type = checkbox checked = unchecked id = surroundProperty>
<span class = checkmark></span>
</label>
<label class = checkcontainer>
Sort vertical lines last
<input type = checkbox checked = unchecked id = verticalLast>
<span class = checkmark></span>
</label>
<button class = wide id = selectAsCodeLayer>All Layers</button>
<div class = inputContainer>
<input class = wide id = saveAsCode placeholder = 'Code will appear here' readonly>
<button class = wide id = copyCodeButton style = 'display:flex;align-items:center;width:50%'>
Copy Code
</button>
</div>
</div>
</div>
<div id = popBackground>
<div id = pop>
<span id = popClose onmousedown = closePopUp()>×</span>
<div id = popContents>
<span id = popText></span>
<div id = popOptions>
</div>
</div>
</div>
</div>
</div>
<div id = splash>
<div id = centerSplash>
<img src = src/logo.svg id = logo>
<img src = src/sparkle.svg id = sparkle1 class = sparkle>
<img src = src/sparkle.svg id = sparkle2 class = sparkle>
<img src = src/sparkle.svg id = sparkle3 class = sparkle>
</div>
<div id = text>
<h4>CanvasCraft v2.0.0-beta.3.1</h4>
<button class = start id = aboutCanvasCraft>About</button>
<a class = start href = https://github.com/canvas-craft/canvas-craft.github.io target = _blank>GitHub</a>
<button class = start id = changelog>Changelog</button>
<button class = start id = helpSplash>Help</button>
</div>
<div id = splashPanel>
<div id = splashClose><img src = src/close.svg></div>
<p id = slogan>CanvasCraft - build game worlds in minutes by combining art with code</p>
<hr>
<div id = aboutSection>
<p>Welcome to CanvasCraft, the comprehensive creation tool for the web! 🚀</p>
<p>CanvasCraft is a unique online tool designed to give gives coders and
game developers a simple yet convenient way to build game levels - making creation
easier and more accessible for everyone.</p>
<p>• 🧩️ CanvasCraft's built-in shader feature empowers you to quickly generate complex and natural-looking surfaces using simple JavaScript code.</p>
<p>• 📱 Easily collaborate with others and share your work with the File Export feature, or tailor the UI to suit your needs.</p>
<p>• 💡 Whether you're a coder, a digital artist, or are simply exploring different ways to create, CanvasCraft has been designed to bring your ideas to life.</p>
<h2>What You Need</h2>
<p>CanvasCraft has been made for people who are interested in making
art with code. All you need to get started is a basic understanding of
variables and how the RGB color scheme works. That's it!</p>
<h2>About the Creator</h2>
<p>CanvasCraft is an ongoing project created by
<a href = https://joachimford.uk target = _blank>Joachim</a>.
This tool was initially made for the purpose of building
complex game worlds, but has grown to give an advantage to
creators of many skill levels. Let your imagination go wild! 💥</p>
</div>
<div id = changelogSection>
<h1>20.07.2024</h1>
<h3>v2.0.0-beta.3.1</h3>
<span>• Extended documentation and pro-tips</span>
<span>• Enhanced grid mode</span>
<span>• You will now be able to read the coordinates and dimensions of the shape as it is created</span>
<span>• Edit the world's background colour in the settings</span>
<span>• Mobile support</span>
<span>• Introduced a new "split layer" feature</span>
<span>• Converted the remixes, default colour and default template buttons to icons for a cleaner user interface</span>
<span>• Small edits, including changes to the colour theme, and a hide icon on shape previews</span>
<span>• Added a details panel</span>
<span>• Added an extra control for the side panels</span>
<span>• Lines are no longer created with a random colour</span>
<h1>12.07.2024</h1>
<h3>v2.0.0-beta.2.0</h3>
<span>• Added an "Include hidden shapes to boundary" option for downloading images</span>
<span>• Marked the <span class = code>0, 0</span> axis on grid mode</span>
<span>• Created new argument <span class = code>pos {x, y}</span> in the code box</span>
<span>• A new pro-tip will appear every time you use CanvasCraft</span>
<h1>09.07.2024</h1>
<h3>v2.0.0-beta.1.6</h3>
<span>• Fixed texture render editing bugs</span>
<span>• Increased default texture render speed</span>
<span>• Changed the default variable types to <span class = code>let</span></span>
<span>• Removed vertical scroll bar when editing code</span>
<span>• Fixed small glitch where code goes yellow</span>
<span>• Added help when hovering on code parameters</span>
<span>• Introduced a new <span class = code>size</span> parameter</span>
<span>• You can now edit presets by giving the updated version the same name</span>
<span>• Choosing a different remix will auto-update the shape</span>
<span>• Shorthand controls now stay on the screen</span>
<span>• Implemented CanvasCraft documentation</span>
<h1>28.06.2024</h1>
<h3>v2.0.0-beta.0.5</h3>
<span>• Fixed some mobile glitches</span>
<span>• Reimplemented the ability to upload images, plus new controls</span>
<span>• Saving files now records the shape's name</span>
<span>• Any projects saved from this update onwards will be compatible with newer versions</span>
<span>• Hidden shapes are no longer rendered to the final image</span>
<h1>27.06.2024</h1>
<h3>v2.0.0-beta</h3>
<span>• Released CanvasCraft v2.0.0-beta!</span>
<span>• Entirely rewritten with major bug fixes and layout enhancements</span>
<span>• Better coding practices used to enhance readability</span>
<span>• Vastly improved user interface</span>
<span>• Added a basic help assistant</span>
<h1>07.06.2024</h1>
<h3>v1.2.7</h3>
<span>• Camera can move when creating shapes</span>
<span>• Fixed visuals when switching layer</span>
<span>• Allowed straight lines</span>
<span>• Added "real" to line statistics</span>
<span>• Allow transparent background in settings</span>
<span>• Going back to previous remix no longer goes undefined</span>
<span>• You can delete presets in the settings</span>
<span>• Preset names will not revert to Default when deselected</span>
<span>• You can only select objects from the current layer</span>
<h1>06.06.2024</h1>
<h3>v1.1.8</h3>
<span>• Moved "Rotated Rectangle" to settings</span>
<span>• Editing a preset takes you to the remix</span>
<span>• Fixed default preset glitch when adding to old layers</span>
<span>• Splash screen background image</span>
<span>• Reduced default presets</span>
<span>• Better layer selection</span>
<span>• Styling updates</span>
<span>• Customise navigation speed in the settings</span>
<span>• File & Image Export saves as "CanvasCraft"</span>
<h1>31.05.2024</h1>
<h3>v1.0.9</h3>
<span>• Presets will now save correctly</span>
<span>• Minor layout enhancements</span>
<span>• Improved logo</span>
<h1>30.05.2024</h1>
<h3>v1.0.6</h3>
<span>• New logo!</span>
<span>• Fixed layering inconsistencies</span>
<span>• A localised remix will now be created when you edit a preset</span>
<h1>29.05.2024</h1>
<h3>v1.0.3</h3>
<span>• Added splash screen</span>
<span>• Fixed glitch when loading files</span>
<span>• Saving a preset as default now works</span>
<h1>22.05.2024</h1>
<h3>v1.0.0</h3>
<span>• Released CanvasCraft v1.0.0!</span>
</div>
<div id = helpSection>
<h1>Advanced Help Manual</h1>
<h3>The CanvasCraft documentation - in development</h3>
<input class = wide placeholder = 'Write your query here' id = querySearch>
<div id = queryResult></div>
<p>Can't find what you're looking for? Get in touch at <a href = mailto:hello@joachimford.uk>hello@joachimford.uk</a>!</p>
</div>
</div>
</div>
<script src = src/constants.js></script>
<script src = src/help.js></script>
<script src = src/sidenav.js></script>
<script src = src/functions.js></script>
<script src = src/shape.js></script>
<script src = src/file.js></script>
<script src = src/main.js></script>
</body>
</html>