-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (101 loc) · 4.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="header-bar">
<div id="info" class="icon" onclick="window.showModal('info-modal', true)">?</div>
<div id="stats" class="icon" onclick="window.showModal('stats-modal', true); updateStats()">
<svg width="30" height="30">
<rect x="1" y="20" height="10" width="8" fill="#555" />
<rect x="11" y="10" height="20" width="8" fill="#555" />
<rect x="21" y="0" height="30" width="8" fill="#555" />
</svg>
</div>
<div id="download" class="icon" onclick="downloadPNG()">
<svg width="30" height="30">
<rect x="7.5" y="0" height="15" width="15" fill="#555" />
<path d="M0,15 L15,30 L30,15 L0,15" fill="#555" />
</svg>
</div>
<div id="player-count" style="display: none">
0
</div>
<div class="icon" id="player-icon" style="display: none; cursor: default">
<svg width="30" height="30">
<circle cx="15" cy="30" r="15" fill="#555" />
<circle cx="15" cy="7.5" r="7.5" fill="#555" />
</svg>
</div>
<div class="icon" id="loader">
<svg width="30" height="30">
<path d="M 15 5 A 10 10 1 1 15 15 M 25 15" stroke="#555" style="stroke-width: 5px;" fill="none"/>
</svg>
</div>
<div style="position: relative">
<span class="switch-text">Placing</span>
<label class="switch" title="placing">
<input type="checkbox" id="toggle" autocomplete checked>
<span class="slider round"></span>
</label>
</div>
<div class="icon">
<a href="./timelapse/" target="_blank">
<svg width="30" height="30">
<rect stroke="#555" x="2" width="26" fill="none" rx="4" stroke-width="4px" y="6" height="18" />
<path fill="#555" d="M 12 11 L 12 19 L 20 15 Z" />
</svg>
</a>
</div>
<span id="coords">(0,0)</span>
</div>
<div id="canvas-container"></div>
<div id="toolbar">
<div id="buttons"></div>
<div id="timer"></div>
</div>
<div class="modal" id="info-modal" onclick="if(event.target === this) window.showModal(this, false)">
<div class="modal-box">
<div class="close-modal" onclick="window.showModal('info-modal', false)">×</div>
<div class="modal-content">
<br>Canvas is a game where you draw pixels on a canvas and create things. <br>
Please:
<ul>
<li>Be nice. Don't cause chaos or destroy things people have obviously worked hard on.</li>
<li>Drawings should be SFW. Kids use this.</li>
<li>Don't hack or use bots.</li>
</ul>
Code is on <a target="_blank" href="https://github.com/chunkybanana/canvas">Github</a>.
Keyboard controls:
<ul>
<li>Arrow keys / WASD - move</li>
<li>Z/X - Zoom</li>
<li>C - toggle placing</li>
</ul>
Scroll to zoom, click and drag to move. Everything should just work normally on mobile.
</div>
</div>
</div>
<div class="modal" id="stats-modal" onclick="if(event.target === this) window.showModal(this, false)">
<div class="modal-box">
<div class="close-modal" onclick="window.showModal('stats-modal', false)">×</div>
<div class="modal-content">
You have placed <span id="placed-pixels">0</span> pixels this iteration, <span id="total-pixels">0</span> all time.
<br><br>
Your favourite colours are: <br>
<ul id="favorite-colors"></ul>
</div>
</div>
</div>
<!-- These have to be included because node's a sussy baka sometimes -->
<script src="config.js"></script>
<script src="data-utils.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>