-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (107 loc) · 5.48 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
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><text x='0' y='25' font-size='25'>🎨</text></svg>" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
<title>Play Spectrum</title>
</head>
</head>
<body>
<div id="body">
<h1 id="title-game">Play <span class="instructions">Spectrum</span> !</h1>
<img src="assets/settings.png" alt="settings" id="settings-img" onclick="document.getElementById('settings-dialog').showModal()">
<div id="rules">
<h2><span class="instructions">Spectrum</span>: a game concept... </h2>
<p>How do you feel when colors <span class="instructions">match perfectly</span> on a beautiful gradient ?
In this this game you must recreate a <span class="instructions">gradient</span> by moving tiles until everything looks great !
Follow your <span class="instructions">inner voice</span> and you will build a masterpiece !
</p>
<p>You need to <span class="instructions">move</span> the color tiles to <span class="instructions">recreate the spectrum</span>, you can move
<span class="instructions">the tiles by clicking on the first tile you want to move and the tile to exchange spot with</span>
and once you are done a message should appear if you <span class="instructions">completed</span> the puzzle !</p>
<hr>
<p id="help">
<span class="instructions">Click</span> a button to choose a <span class="instructions">level</span>
or <span class="instructions" id="create-level" onclick="openCreateLevelWindow()">create your level</span>
</p>
</div>
<div id="levels-map">
<div id="button-level"></div>
<br>
<div id="button-custom-levels">No custom levels... yet</div>
</div>
</div>
<div id="window" style="display: none;">
<div id="header-level">
<p id="countdown">You have only <span class="instructions" id="seconds">8 seconds</span> to memorize the pattern <button id='end' onclick='giveUp()'>Give Up ?</button></p>
</div>
<div class="container" id="canva"></div>
<button id="tip-button" onclick="showTip()">tip ?</button>
</div>
<div id="create-level-form" style="display: none;">
<div id="inputs-color">
<div class="palette">
<input type="color" id="c1" value="#ff0000">
<h1 id="c1-code">#ff0000</h1>
<p>Top left</p>
</div>
<div class="palette">
<input type="color" id="c2" value="#00ff00">
<h1 id="c2-code">#00ff00</h1>
<p>Top right</p>
</div>
<div class="palette">
<input type="color" id="c3" value="#0000ff">
<h1 id="c3-code">#0000ff</h1>
<p>Bottom left</p>
</div>
<div class="palette">
<input type="color" id="c4" value="#ffffff">
<h1 id="c4-code">#ffffff</h1>
<p>Botton right</p>
</div>
</div>
<div id="input-infos">
<div>
<div>
<label for="level-name">Give your level a <span class="instructions">name</span> ! (2 car. max)</label>
<input type="text" id="level-name" placeholder="LV" maxlength="2">
</div>
<div>
<label for="level-length"> <span class="instructions" id="nb-tiles">7</span> <span class="instructions">tiles</span> per row/column</label>
<input type="range" id="level-length" value="7" min="3" max="11">
</div>
</div>
<button onclick="createLevel()">Create</button>
<button onclick="document.getElementById('create-level-form').style.display = 'none'">EXIT</button>
</div>
</div>
<dialog id="tip">
<button id="close-dialog" onclick="document.getElementById('tip').close()"></button>
<p id="tip-p"></p>
</dialog>
<dialog id="settings-dialog">
<button id="close-dialog" onclick="document.getElementById('settings-dialog').close()"></button>
<p>Set everything you want to set !</p>
<div id="settings-set">
<div>
<img src="assets/bulb_on.png" alt="on" title="Tips are enabled" onclick="disableTips(this)">
<p>Tips</p>
</div>
<div>
<img src="assets/hash.png" alt="on" title="Hex codes are displayed" onclick="disableHexCodes(this)">
<p>Hex codes</p>
</div>
<div>
<img src="assets/unlock.png" alt="off" title="Tiles are not blocked when on the right spot" onclick="ableBlockTiles(this)">
<p>Block sorted tiles</p>
</div>
</div>
</dialog>
<dialog></dialog>
<footer>Made with ❤ by <a href="https://github.com/Marwane-HQ2/Play_Spectrum">M_</a></footer>
<script src="script.js"></script>
</body>