blob: ebcd1788e672331bc698d2520b8194d457ce20fb (
plain) (
blame)
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
|
import { useState } from "react";
import { BaseDifficulty } from "../App";
import css from "../css/Options.module.css";
import OptionsModel from "../models/OptionsModel";
interface OptionsProps {
onOptionsSubmit: (options: OptionsModel) => void
}
const Options = ({ onOptionsSubmit }: OptionsProps) => {
const MinDifficulty = 4;
const MaxDifficulty = 256;
const [difficulty, setDifficulty] = useState(BaseDifficulty);
const [theme, setTheme] = useState("Pokémon");
const [numErrorText, setNumErrorText] = useState(false);
function onDifficultyClick(selected: number) {
setDifficulty(selected);
setNumErrorText(false);
}
function onSubmit() {
if (difficulty < MinDifficulty || difficulty > MaxDifficulty) {
setNumErrorText(true);
} else {
onOptionsSubmit({...{difficulty}, ...{theme}});
}
}
return (
<div className={css.optionsContainer}>
Memoriam
<div className={css.option}>
<label>
Choose your difficulty:
<input type="number"
min={MinDifficulty}
max={MaxDifficulty}
value={difficulty}
className={`${css.optionBox} ${css.numberBox}`}
onChange={(e) => setDifficulty(Number(e.target.value))} />
<button onClick={() => onDifficultyClick(10)}>Easy</button>
<button onClick={() => onDifficultyClick(16)}>Normal</button>
<button onClick={() => onDifficultyClick(32)}>Hard</button>
<button onClick={() => onDifficultyClick(64)}>Very Hard</button>
<button onClick={() => onDifficultyClick(128)}>Insanity</button>
{numErrorText &&
<div className={css.errorText}>
(Number must be between {MinDifficulty} and {MaxDifficulty}!)
</div>}
</label>
</div>
<div className={css.option}>
<label>
Choose your theme<br/>(What will appear on the cards?):
<select
className={css.optionBox}
value={theme}
onChange={(e) => setTheme(e.target.value)}>
<option>Pokémon</option>
</select>
</label>
</div>
<div className={css.instructions}>
Instructions:<br/>
Select all of the cards, but do not select the same one
more than once!
</div>
<button
onClick={onSubmit}>
Go!
</button>
</div>
)
}
export default Options;
|