-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (120 loc) · 6.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ball Sort Game</title>
<link href="node_modules/nouislider/dist/nouislider.css" rel="stylesheet">
<script src="node_modules/nouislider/dist/nouislider.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.2/css/all.css">
<link rel="stylesheet" href="./css/style.css">
<script src='./js/script.js' defer></script>
</head>
<body>
<header>
<div class="header-container">
<h1>Ball Sort Game</h1>
<button class="toggle-style"><div class="icon ball-icon"></div><div class="txt">➜</div><div class="icon liquid-icon"></div></button>
</div>
</header>
<nav>
<div class="nav-btns">
<button type="button" class="new"><div class="icon"></div><div class="txt">New</div></button>
<button type="button" class="restart"><div class="icon"></div><div class="txt">Restart</div></button>
<button type="button" class="undo"><div class="icon"></div><div class="txt">Undo</div></button>
<div class="flex-separator"></div>
<button type="button" class="addcontainer"><div class="icon"></div><div class="txt">Add Container</div></button>
<button type="button" class="solve" disabled><div class="icon"></div><div class="txt">Solve</div></button>
<button type="button" class="rules"><div class="icon"></div><div class="txt">Rules</div></button>
<button type="button" class="settings"><div class="icon"></div><div class="txt">Settings</div></button>
</div>
</nav>
<dialog class='rules'>
<div class='rules-div'>
<h2>Setup and goal</h2>
<p>
There are <span class="highlight">C</span> equal containers,
each one capable of holding up to <span class="highlight">H</span> items (balls).
</p>
<p>
Such items can have <span class="highlight">N</span> different colors.
For each color, there are exactly <span class="highlight">H</span> items,
so in total there are <span class="highlight">N•H</span> items.
</p>
<p>
Initially, <span class="highlight">N</span> of such containers are filled with these items,randomly sorted, and the remaining <span class="highlight">K=C-N</span> containers are empty.
</p>
<p>
The goal is to move these items among the containers to sort them and have <span class="highlight">N</span> full containers, each one with <span class="highlight">H</span> items of the same color.
</p>
<h2>Moving rules</h2>
<p>You can move the item on the top of container <span class="highlight">A</span> to container <span class="highlight">B</span> if either:</p>
<ul>
<li><span class="highlight">B</span> is empty, or</li>
<li>the top item in <span class="highlight">B</span> has the same color of the item to move.</li>
</ul>
<p>As an additional rule, you can:</p>
<ul>
<li>move as many items of the same color as possible, from <span class="highlight">A</span> to <span class="highlight">B</span>, or</li>
<li>move only one item at a time, from <span class="highlight">A</span> to <span class="highlight">B</span>.</li>
</ul>
<p>Finally, you can optionally choose to initially hide the color of all the items except the top one in each containers.
<br>The color of such items is revealed as soon as they become the top items.</p>
<h2>Resources</h2>
<p>See <a href="http://kociemba.org/themen/waterball/colorsort.html">here</a> for more details on how to solve the game.</p>
<div class="dialog-buttons">
<button type="button" class="close">Close</button>
</div>
</div>
</dialog>
<dialog class='settings'>
<div class='settings-div'>
<div class="sliders">
<div class="slider-container" id="set-N">
<div class="slider"></div>
<div class="label">Number of colors</div>
</div>
<div class="slider-container" id="set-K">
<div class="slider"></div>
<div class="label">Number of empty containers</div>
</div>
<div class="slider-container" id="set-H">
<div class="slider"></div>
<div class="label">Max number of items per container</div>
</div>
</div>
<div class="checkboxes">
<label>
<input type="checkbox" id="set-moveAsManyItemsAsPossible" name="moveAsManyItemsAsPossible"/>
<div class="checkbox-styled"></div>
Move as many items as possible.
</label>
<label>
<input type="checkbox" id="set-hideInitial" name="hideInitial"/>
<div class="checkbox-styled"></div>
Initially, show only the items at the top.
</label>
</div>
<div class="dialog-buttons">
<button type="button" class="cancel">Cancel</button>
<button type="button" class="save">Save</button>
</div>
</div>
</dialog>
<dialog id="won-msg" class="gameOutcome">
YOU WON!
</dialog>
<dialog id="noMoreUsefulMoves-msg" class="gameOutcome">
NO MORE USEFUL MOVES...
</dialog>
<dialog id="noMoreMoves-msg" class="gameOutcome">
NO MORE MOVES...
</dialog>
<main>
<div class="game"></div>
</main>
<footer>
<p>Created by F. Rosset <a href="https://github.com/frarosset"><i class="fab fa-github"></i></a></p>
</footer>
</body>
</html>