Skip to content

Commit 44e080d

Browse files
catbashcatbash
committed
confirm reset/toggle/new if game exists:
1 parent f26f7e0 commit 44e080d

File tree

5 files changed

+248
-83
lines changed

5 files changed

+248
-83
lines changed

‎9sq.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,17 @@ function resetState() {
1717
}
1818

1919
function toggleMode() {
20+
let newGame = state.game !== null ? confirm('Are you sure you want to change modes? This will erase your current game.') : true;
21+
if (!newGame) return;
22+
clearInterface();
23+
resetState();
24+
if (state.game) {
25+
state.game = null;
26+
}
2027
const mode = document.querySelector('mode');
2128
if (mode === null) return;
2229
state.mode = state.mode === 9 ? 0 : state.mode + 1;
2330
mode.innerHTML = state.mode;
24-
clearInterface();
2531
}
2632

2733
function getInterfaceState(dimension=3) {
@@ -142,7 +148,7 @@ window.onload = () => {
142148
const isSq = e.target.nodeName === "SQ";
143149
const isCtrl = e.target.nodeName === "CTRL";
144150

145-
if (isCtrl) {
151+
if (isCtrl && state.targetSq) {
146152
state.targetSq.innerText = e.target.innerText === 'x' ? '' : e.target.innerText;
147153
}
148154

‎index.html

+80-79
Original file line numberDiff line numberDiff line change
@@ -9,84 +9,85 @@
99
<script src="MagicSq.js"></script>
1010
</head>
1111
<body>
12-
<header>
13-
9sq.js
14-
</header>
15-
<main>
16-
<panel>
17-
<button-panel>
18-
<button onclick="toggleMode()">Mode: <mode>5</mode></button>
19-
<button onclick="newGame()">New Game</button>
20-
<button onclick="resetGame()">Reset Game</button>
21-
</button-panel>
22-
<controls>
23-
<ctrl>1</ctrl>
24-
<ctrl>2</ctrl>
25-
<ctrl>3</ctrl>
26-
<ctrl>4</ctrl>
27-
<ctrl>5</ctrl>
28-
<ctrl>6</ctrl>
29-
<ctrl>x</ctrl>
30-
<ctrl onclick="play('wnvd')"></ctrl>
31-
<ctrl class="empty"></ctrl>
32-
<ctrl>7</ctrl>
33-
<ctrl>8</ctrl>
34-
<ctrl>9</ctrl>
35-
</controls>
36-
</panel>
37-
<board>
38-
<nine>
39-
<sq></sq><sq></sq><sq></sq>
40-
<sq></sq><sq></sq><sq></sq>
41-
<sq></sq><sq></sq><sq></sq>
42-
</nine>
43-
<nine>
44-
<sq></sq><sq></sq><sq></sq>
45-
<sq></sq><sq></sq><sq></sq>
46-
<sq></sq><sq></sq><sq></sq>
47-
</nine>
48-
<nine>
49-
<sq></sq><sq></sq><sq></sq>
50-
<sq></sq><sq></sq><sq></sq>
51-
<sq></sq><sq></sq><sq></sq>
52-
</nine>
53-
<nine>
54-
<sq></sq><sq></sq><sq></sq>
55-
<sq></sq><sq></sq><sq></sq>
56-
<sq></sq><sq></sq><sq></sq>
57-
</nine>
58-
<nine>
59-
<sq></sq><sq></sq><sq></sq>
60-
<sq></sq><sq></sq><sq></sq>
61-
<sq></sq><sq></sq><sq></sq>
62-
</nine>
63-
<nine>
64-
<sq></sq><sq></sq><sq></sq>
65-
<sq></sq><sq></sq><sq></sq>
66-
<sq></sq><sq></sq><sq></sq>
67-
</nine>
68-
<nine>
69-
<sq></sq><sq></sq><sq></sq>
70-
<sq></sq><sq></sq><sq></sq>
71-
<sq></sq><sq></sq><sq></sq>
72-
</nine>
73-
<nine>
74-
<sq></sq><sq></sq><sq></sq>
75-
<sq></sq><sq></sq><sq></sq>
76-
<sq></sq><sq></sq><sq></sq>
77-
</nine>
78-
<nine>
79-
<sq></sq><sq></sq><sq></sq>
80-
<sq></sq><sq></sq><sq></sq>
81-
<sq></sq><sq></sq><sq></sq>
82-
</nine>
83-
</board>
84-
</main>
85-
<super-secret-stuff>
86-
</super-secret-stuff>
87-
<footer>
88-
hmmmm
89-
</footer>
90-
<script src="9sq.js"></script>
12+
<header>
13+
<img src="uzef.svg" />
14+
<h1>9sq.js</h1>
15+
<a class="git" href="https://github.com/asterein/9sq.js">.git</a>
16+
</header>
17+
<main>
18+
<panel>
19+
<button-panel>
20+
<button onclick="toggleMode()">Mode: <mode>5</mode></button>
21+
<button onclick="newGame()">New Game</button>
22+
<button onclick="resetGame()">Reset Game</button>
23+
</button-panel>
24+
<controls>
25+
<ctrl>1</ctrl>
26+
<ctrl>2</ctrl>
27+
<ctrl>3</ctrl>
28+
<ctrl>4</ctrl>
29+
<ctrl>5</ctrl>
30+
<ctrl>6</ctrl>
31+
<ctrl>x</ctrl>
32+
<ctrl onclick="play('wnvd')"></ctrl>
33+
<ctrl class="empty"></ctrl>
34+
<ctrl>7</ctrl>
35+
<ctrl>8</ctrl>
36+
<ctrl>9</ctrl>
37+
</controls>
38+
</panel>
39+
<board>
40+
<nine>
41+
<sq></sq><sq></sq><sq></sq>
42+
<sq></sq><sq></sq><sq></sq>
43+
<sq></sq><sq></sq><sq></sq>
44+
</nine>
45+
<nine>
46+
<sq></sq><sq></sq><sq></sq>
47+
<sq></sq><sq></sq><sq></sq>
48+
<sq></sq><sq></sq><sq></sq>
49+
</nine>
50+
<nine>
51+
<sq></sq><sq></sq><sq></sq>
52+
<sq></sq><sq></sq><sq></sq>
53+
<sq></sq><sq></sq><sq></sq>
54+
</nine>
55+
<nine>
56+
<sq></sq><sq></sq><sq></sq>
57+
<sq></sq><sq></sq><sq></sq>
58+
<sq></sq><sq></sq><sq></sq>
59+
</nine>
60+
<nine>
61+
<sq></sq><sq></sq><sq></sq>
62+
<sq></sq><sq></sq><sq></sq>
63+
<sq></sq><sq></sq><sq></sq>
64+
</nine>
65+
<nine>
66+
<sq></sq><sq></sq><sq></sq>
67+
<sq></sq><sq></sq><sq></sq>
68+
<sq></sq><sq></sq><sq></sq>
69+
</nine>
70+
<nine>
71+
<sq></sq><sq></sq><sq></sq>
72+
<sq></sq><sq></sq><sq></sq>
73+
<sq></sq><sq></sq><sq></sq>
74+
</nine>
75+
<nine>
76+
<sq></sq><sq></sq><sq></sq>
77+
<sq></sq><sq></sq><sq></sq>
78+
<sq></sq><sq></sq><sq></sq>
79+
</nine>
80+
<nine>
81+
<sq></sq><sq></sq><sq></sq>
82+
<sq></sq><sq></sq><sq></sq>
83+
<sq></sq><sq></sq><sq></sq>
84+
</nine>
85+
</board>
86+
</main>
87+
<super-secret-stuff>
88+
</super-secret-stuff>
89+
<footer>
90+
</footer>
91+
<script src="9sq.js"></script>
9192
</body>
9293
</html>

‎main.css

+36-2
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,46 @@ header, footer {
3535
header {
3636
font-size: 1.5rem;
3737
background: #333;
38-
margin-bottom: 1rem;
38+
margin-bottom: 3rem;
39+
display: flex;
40+
align-items: center;
41+
position: relative;
42+
overflow: hidden;
43+
}
44+
45+
header h1 {
46+
border-right: 2px solid #555;
47+
padding-right: 1rem;
48+
margin-right: 1rem;
49+
}
50+
51+
header img {
52+
max-height: 50px;
53+
max-width: 50px;
54+
position: absolute;
55+
bottom: -60px;
56+
transition: ease-in-out 0.5s;
57+
}
58+
59+
header:hover img {
60+
bottom: -10px;
61+
transition: ease-in-out 0.5s;
62+
}
63+
64+
.git {
65+
font-size: 1rem;
66+
font-family: monospace;
67+
text-decoration: underline;
68+
}
69+
70+
.git:hover {
71+
color: #ccc;
72+
font-style: italic;
3973
}
4074

4175
footer {
4276
text-align: center;
43-
margin-top: 3rem;
77+
margin-top: 2rem;
4478
}
4579

4680
main {

‎readme.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
### 9sq.js
2+
A tiny hand-rolled sudoku game built for fun with a minimal interface and some entertaining(?) additional features

‎uzef.svg

+122
Loading

0 commit comments

Comments
 (0)