Skip to content

Commit 199cbee

Browse files
wise-bitwise-bit
committed
wip
1 parent 505b276 commit 199cbee

2 files changed

Lines changed: 166 additions & 33 deletions

File tree

‎src/routes/non-trivial-pursuit/+page.svelte‎

Lines changed: 165 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { onMount } from 'svelte';
44
55
interface Question {
6+
index: number;
67
points: string;
78
question: string;
89
answer: string;
@@ -23,7 +24,12 @@
2324
let categories: string[] = [];
2425
let questions: Question[][] = [];
2526
27+
let currentFace = 1;
28+
let rolling = false;
29+
let rollInterval: string | number | NodeJS.Timeout | undefined;
30+
2631
const defaultQuestion: Question = {
32+
index: 0,
2733
points: '',
2834
question: '',
2935
answer: '',
@@ -33,7 +39,6 @@
3339
3440
const selectedQuestion = writable(defaultQuestion);
3541
const showModal = writable(false);
36-
const showFinalJeopardy = writable(false);
3742
3843
const handleFileUpload = async (event: Event) => {
3944
const input = event.target as HTMLInputElement;
@@ -51,15 +56,18 @@
5156
(categoryObject) => Object.keys(categoryObject)[0],
5257
);
5358
54-
questions = data[boardTitle].map((categoryObject) => {
59+
questions = data[boardTitle].map((categoryObject, categoryIndex) => {
5560
const categoryName = Object.keys(categoryObject)[0];
56-
return categoryObject[categoryName].map((question) => ({
57-
points: question.points,
58-
question: question.question,
59-
answer: question.answer,
60-
visited: false,
61-
showAnswer: false,
62-
}));
61+
return categoryObject[categoryName].map(
62+
(question, questionIndex) => ({
63+
index: categoryIndex * 100 + questionIndex + 1,
64+
points: question.points,
65+
question: question.question,
66+
answer: question.answer,
67+
visited: false,
68+
showAnswer: false,
69+
}),
70+
);
6371
});
6472
};
6573
@@ -70,6 +78,9 @@
7078
const selectQuestion = (question: Question, i: number, j: number) => {
7179
selectedQuestion.set(question);
7280
questions[i][j].visited = true;
81+
};
82+
83+
const openModal = () => {
7384
showModal.set(true);
7485
};
7586
@@ -87,7 +98,7 @@
8798
8899
function downloadSample() {
89100
const a = document.createElement('a');
90-
a.href = 'samples/trials-jeopardy-sample.json';
101+
a.href = 'samples/trials-pursuit-sample.json';
91102
a.download = 'sample.json';
92103
93104
document.body.appendChild(a);
@@ -97,15 +108,10 @@
97108
98109
// dice stuff
99110
100-
let currentFace = 1;
101-
let rolling = false;
102-
let rollInterval: string | number | NodeJS.Timeout | undefined;
103-
104111
const rollDice = () => {
105112
if (rolling) return;
106113
107114
rolling = true;
108-
109115
rollInterval = setInterval(() => {
110116
currentFace = Math.floor(Math.random() * 6) + 1;
111117
}, 100);
@@ -149,7 +155,7 @@
149155
);
150156
</script>
151157

152-
<button class="back-button" on:click={() => goBack()}>{'< back'}</button>
158+
<button class="back-button hov-btn" on:click={() => goBack()}>{'< back'}</button>
153159

154160
{#if false}
155161
<div class="container">
@@ -178,7 +184,7 @@
178184
<div class="dice-container">
179185
<h1>{boardTitle}</h1>
180186
<div
181-
class="dice"
187+
class="dice hov-btn"
182188
aria-label="Roll the dice"
183189
role="button"
184190
tabindex="0"
@@ -194,6 +200,12 @@
194200
Rolled a {currentFace} !
195201
{/if}
196202
</div>
203+
204+
<div>
205+
<button class="show-question-btn hov-btn" on:click={openModal}>
206+
show question!
207+
</button>
208+
</div>
197209
</div>
198210

199211
<!-- main board -->
@@ -214,6 +226,43 @@
214226
</div>
215227
{/if}
216228

229+
{#if $showModal}
230+
<div
231+
class="modal-overlay"
232+
role="button"
233+
tabindex="0"
234+
on:click={closeModal}
235+
on:keydown={closeModal}
236+
>
237+
<div
238+
class="modal"
239+
role="button"
240+
tabindex="0"
241+
on:click|stopPropagation
242+
on:keydown|stopPropagation
243+
>
244+
{#if $selectedQuestion}
245+
<h4>[{$selectedQuestion.points} points]</h4>
246+
<br />
247+
<h2>{$selectedQuestion.question}</h2>
248+
{#if $selectedQuestion.showAnswer}
249+
<p>{$selectedQuestion.answer}</p>
250+
{/if}
251+
<div class="button-set">
252+
<button
253+
class="reveal-button hov-btn"
254+
on:click={() =>
255+
($selectedQuestion.showAnswer = !$selectedQuestion.showAnswer)}
256+
>
257+
reveal answer
258+
</button>
259+
<button class="close-button hov-btn" on:click={closeModal}>close</button>
260+
</div>
261+
{/if}
262+
</div>
263+
</div>
264+
{/if}
265+
217266
<style>
218267
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Pixelify+Sans:wght@400..700&display=swap');
219268
@@ -240,8 +289,8 @@
240289
.back-button {
241290
font-family: 'Pixelify Sans', 'Comic Sans MS', 'Arial', sans-serif;
242291
position: absolute;
243-
top: 1rem;
244-
left: 1rem;
292+
top: 2rem;
293+
left: 2rem;
245294
padding: 0.5rem 1rem;
246295
background-color: #333;
247296
color: #f9f9f9;
@@ -266,6 +315,10 @@
266315
width: 70%;
267316
height: 100%;
268317
background-color: #000;
318+
border-right: 10px solid #0a0a0a;
319+
}
320+
.board-container > * {
321+
border-right: none;
269322
}
270323
271324
.dice-container {
@@ -290,14 +343,17 @@
290343
cursor: pointer;
291344
background-color: #783333;
292345
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
346+
}
347+
348+
.hov-btn {
293349
transition: transform 0.2s;
294350
}
295351
296-
.dice:hover {
352+
.hov-btn:hover {
297353
transform: scale(1.15);
298354
}
299355
300-
.dice:active {
356+
.hov-btn:active {
301357
transform: scale(0.95);
302358
}
303359
@@ -306,22 +362,13 @@
306362
font-size: 2rem;
307363
}
308364
309-
.score-container {
310-
flex: 1;
311-
flex-basis: 30%;
312-
width: 30%;
313-
background-color: #242e2b;
314-
border-left: 10px solid #101212;
315-
padding: 2rem;
316-
}
317-
318365
/* board */
319366
320367
.board {
321368
display: grid;
322369
grid-template-columns: repeat(5, 10rem);
323370
grid-template-rows: repeat(5, 10rem);
324-
gap: 2px;
371+
gap: 1rem;
325372
margin: 20px auto;
326373
}
327374
@@ -333,7 +380,7 @@
333380
justify-content: center;
334381
background-color: #000000;
335382
border: 2px solid #000000;
336-
border-radius: 8px;
383+
border-radius: 1rem;
337384
font-size: 2rem;
338385
}
339386
@@ -342,4 +389,90 @@
342389
color: rgb(0, 0, 0);
343390
font-weight: bold;
344391
}
392+
393+
.show-question-btn {
394+
font-family: 'Pixelify Sans', 'Comic Sans MS', 'Arial', sans-serif;
395+
margin-top: 2rem;
396+
padding: 0.5rem 1rem;
397+
background-color: #64355b;
398+
color: #fff;
399+
border: 0.2rem solid #391f34;
400+
border-radius: 0.3rem;
401+
font-size: 1.5rem;
402+
cursor: pointer;
403+
font-weight: 500;
404+
transition: transform 0.2s;
405+
}
406+
407+
/* scores */
408+
409+
.score-container {
410+
flex: 1;
411+
flex-basis: 30%;
412+
width: 30%;
413+
background-color: #242e2b;
414+
border-left: 10px solid #101212;
415+
padding: 2rem;
416+
}
417+
418+
/* modal */
419+
420+
.modal-overlay {
421+
position: fixed;
422+
top: 0;
423+
left: 0;
424+
width: 100%;
425+
height: 100%;
426+
background: rgba(0, 0, 0, 0.8);
427+
display: flex;
428+
justify-content: center;
429+
align-items: center;
430+
}
431+
432+
.modal {
433+
background: #1a1a1a;
434+
padding: 2rem;
435+
border: 0.3rem solid white;
436+
border-radius: 0.3rem;
437+
text-align: center;
438+
align-items: center;
439+
color: #f9f9f9;
440+
max-width: 500px;
441+
width: 80%;
442+
font-size: 2rem;
443+
}
444+
445+
.button-set {
446+
display: flex;
447+
flex-direction: row;
448+
align-items: center;
449+
justify-content: center;
450+
gap: 2rem;
451+
}
452+
453+
.reveal-button {
454+
font-family: 'Pixelify Sans', 'Comic Sans MS', 'Arial', sans-serif;
455+
margin-top: 1rem;
456+
padding: 0.5rem 1rem;
457+
background-color: #465e4b;
458+
color: #fff;
459+
border: 0.3rem solid #1b291e;
460+
border-radius: 8px;
461+
font-size: 1.5rem;
462+
cursor: pointer;
463+
font-weight: 500;
464+
}
465+
466+
.close-button {
467+
font-family: 'Pixelify Sans', 'Comic Sans MS', 'Arial', sans-serif;
468+
margin-top: 1rem;
469+
padding: 0.5rem 1rem;
470+
background-color: #845454;
471+
color: #fff;
472+
border: 0.3rem solid #463131;
473+
border-radius: 8px;
474+
font-size: 1.5rem;
475+
cursor: pointer;
476+
font-weight: 500;
477+
}
345478
</style>

‎src/routes/not-jeopardy/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
112112
function downloadSample() {
113113
const a = document.createElement('a');
114-
a.href = 'samples/trials-jeopardy-sample.json';
114+
a.href = 'samples/trials-not-jeopardy-sample.json';
115115
a.download = 'sample.json';
116116
117117
document.body.appendChild(a);

0 commit comments

Comments
 (0)