([])
14 |
15 | const incorrectLetters = guessedLetters.filter(
16 | letter => !wordToGuess.includes(letter)
17 | )
18 |
19 | const isLoser = incorrectLetters.length >= 6
20 | const isWinner = wordToGuess
21 | .split("")
22 | .every(letter => guessedLetters.includes(letter))
23 |
24 | const addGuessedLetter = useCallback(
25 | (letter: string) => {
26 | if (guessedLetters.includes(letter) || isLoser || isWinner) return
27 |
28 | setGuessedLetters(currentLetters => [...currentLetters, letter])
29 | },
30 | [guessedLetters, isWinner, isLoser]
31 | )
32 |
33 | useEffect(() => {
34 | const handler = (e: KeyboardEvent) => {
35 | const key = e.key
36 | if (!key.match(/^[a-z]$/)) return
37 |
38 | e.preventDefault()
39 | addGuessedLetter(key)
40 | }
41 |
42 | document.addEventListener("keypress", handler)
43 |
44 | return () => {
45 | document.removeEventListener("keypress", handler)
46 | }
47 | }, [guessedLetters])
48 |
49 | useEffect(() => {
50 | const handler = (e: KeyboardEvent) => {
51 | const key = e.key
52 | if (key !== "Enter") return
53 |
54 | e.preventDefault()
55 | setGuessedLetters([])
56 | setWordToGuess(getWord())
57 | }
58 |
59 | document.addEventListener("keypress", handler)
60 |
61 | return () => {
62 | document.removeEventListener("keypress", handler)
63 | }
64 | }, [])
65 |
66 | return (
67 |
77 |
78 | {isWinner && "Winner! - Refresh to try again"}
79 | {isLoser && "Nice Try - Refresh to try again"}
80 |
81 |
82 |
87 |
88 |
91 | wordToGuess.includes(letter)
92 | )}
93 | inactiveLetters={incorrectLetters}
94 | addGuessedLetter={addGuessedLetter}
95 | />
96 |
97 |
97 | {BODY_PARTS.slice(0, numberOfGuesses)}
98 |
108 |
116 |
124 |
125 |
23 | {wordToGuess.split("").map((letter, index) => (
24 |
25 |
35 | {letter}
36 |
37 |
38 | ))}
39 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/Keyboard.module.css:
--------------------------------------------------------------------------------
1 | .btn {
2 | width: 100%;
3 | border: 3px solid black;
4 | background: none;
5 | aspect-ratio: 1 / 1;
6 | font-size: 2.5rem;
7 | text-transform: uppercase;
8 | padding: .5rem;
9 | font-weight: bold;
10 | cursor: pointer;
11 | color: black;
12 | }
13 |
14 | .btn.active {
15 | background-color: hsl(200, 100%, 50%);
16 | color: white;
17 | }
18 |
19 | .btn.inactive {
20 | opacity: .3;
21 | }
22 |
23 | .btn:hover:not(:disabled),
24 | .btn:focus:not(:disabled) {
25 | background-color: hsl(200, 100%, 75%);
26 | }
--------------------------------------------------------------------------------
/src/Keyboard.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./Keyboard.module.css"
2 |
3 | const KEYS = [
4 | "a",
5 | "b",
6 | "c",
7 | "d",
8 | "e",
9 | "f",
10 | "g",
11 | "h",
12 | "i",
13 | "j",
14 | "k",
15 | "l",
16 | "m",
17 | "n",
18 | "o",
19 | "p",
20 | "q",
21 | "r",
22 | "s",
23 | "t",
24 | "u",
25 | "v",
26 | "w",
27 | "x",
28 | "y",
29 | "z",
30 | ]
31 |
32 | type KeyboardProps = {
33 | disabled?: boolean
34 | activeLetters: string[]
35 | inactiveLetters: string[]
36 | addGuessedLetter: (letter: string) => void
37 | }
38 |
39 | export function Keyboard({
40 | activeLetters,
41 | inactiveLetters,
42 | addGuessedLetter,
43 | disabled = false,
44 | }: KeyboardProps) {
45 | return (
46 |
53 | {KEYS.map(key => {
54 | const isActive = activeLetters.includes(key)
55 | const isInactive = inactiveLetters.includes(key)
56 | return (
57 |
67 | )
68 | })}
69 |
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom/client"
3 | import App from "./App"
4 |
5 | ReactDOM.createRoot(document.getElementById("root")!).render(
6 |
7 |
8 |
9 | )
10 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/wordList.json:
--------------------------------------------------------------------------------
1 | [
2 | "able",
3 | "about",
4 | "absolute",
5 | "accept",
6 | "account",
7 | "achieve",
8 | "across",
9 | "active",
10 | "actual",
11 | "address",
12 | "admit",
13 | "advertise",
14 | "affect",
15 | "afford",
16 | "after",
17 | "afternoon",
18 | "again",
19 | "against",
20 | "agent",
21 | "agree",
22 | "allow",
23 | "almost",
24 | "along",
25 | "already",
26 | "alright",
27 | "also",
28 | "although",
29 | "always",
30 | "america",
31 | "amount",
32 | "another",
33 | "answer",
34 | "apart",
35 | "apparent",
36 | "appear",
37 | "apply",
38 | "appoint",
39 | "approach",
40 | "appropriate",
41 | "area",
42 | "argue",
43 | "around",
44 | "arrange",
45 | "associate",
46 | "assume",
47 | "attend",
48 | "authority",
49 | "available",
50 | "aware",
51 | "away",
52 | "awful",
53 | "baby",
54 | "back",
55 | "balance",
56 | "ball",
57 | "bank",
58 | "base",
59 | "basis",
60 | "bear",
61 | "beat",
62 | "beauty",
63 | "because",
64 | "become",
65 | "before",
66 | "begin",
67 | "behind",
68 | "believe",
69 | "benefit",
70 | "best",
71 | "between",
72 | "bill",
73 | "birth",
74 | "black",
75 | "bloke",
76 | "blood",
77 | "blow",
78 | "blue",
79 | "board",
80 | "boat",
81 | "body",
82 | "book",
83 | "both",
84 | "bother",
85 | "bottle",
86 | "bottom",
87 | "break",
88 | "brief",
89 | "brilliant",
90 | "bring",
91 | "britain",
92 | "brother",
93 | "budget",
94 | "build",
95 | "business",
96 | "busy",
97 | "cake",
98 | "call",
99 | "card",
100 | "care",
101 | "carry",
102 | "case",
103 | "catch",
104 | "cause",
105 | "cent",
106 | "centre",
107 | "certain",
108 | "chair",
109 | "chairman",
110 | "chance",
111 | "change",
112 | "chap",
113 | "character",
114 | "charge",
115 | "cheap",
116 | "check",
117 | "child",
118 | "choice",
119 | "choose",
120 | "Christ",
121 | "Christmas",
122 | "church",
123 | "city",
124 | "claim",
125 | "class",
126 | "clean",
127 | "clear",
128 | "client",
129 | "clock",
130 | "close",
131 | "closes",
132 | "clothe",
133 | "club",
134 | "coffee",
135 | "cold",
136 | "colleague",
137 | "collect",
138 | "college",
139 | "colour",
140 | "come",
141 | "comment",
142 | "commit",
143 | "committee",
144 | "common",
145 | "community",
146 | "company",
147 | "compare",
148 | "complete",
149 | "compute",
150 | "concern",
151 | "condition",
152 | "confer",
153 | "consider",
154 | "consult",
155 | "contact",
156 | "continue",
157 | "contract",
158 | "control",
159 | "converse",
160 | "cook",
161 | "copy",
162 | "corner",
163 | "correct",
164 | "cost",
165 | "could",
166 | "council",
167 | "count",
168 | "country",
169 | "county",
170 | "couple",
171 | "course",
172 | "court",
173 | "cover",
174 | "create",
175 | "cross",
176 | "current",
177 | "danger",
178 | "date",
179 | "dead",
180 | "deal",
181 | "dear",
182 | "debate",
183 | "decide",
184 | "decision",
185 | "deep",
186 | "definite",
187 | "degree",
188 | "department",
189 | "depend",
190 | "describe",
191 | "design",
192 | "detail",
193 | "develop",
194 | "difference",
195 | "difficult",
196 | "dinner",
197 | "direct",
198 | "discuss",
199 | "district",
200 | "divide",
201 | "doctor",
202 | "document",
203 | "door",
204 | "double",
205 | "doubt",
206 | "down",
207 | "draw",
208 | "dress",
209 | "drink",
210 | "drive",
211 | "drop",
212 | "during",
213 | "each",
214 | "early",
215 | "east",
216 | "easy",
217 | "economy",
218 | "educate",
219 | "effect",
220 | "eight",
221 | "either",
222 | "elect",
223 | "electric",
224 | "eleven",
225 | "else",
226 | "employ",
227 | "encourage",
228 | "engine",
229 | "english",
230 | "enjoy",
231 | "enough",
232 | "enter",
233 | "environment",
234 | "equal",
235 | "especial",
236 | "europe",
237 | "even",
238 | "evening",
239 | "ever",
240 | "every",
241 | "evidence",
242 | "exact",
243 | "example",
244 | "except",
245 | "excuse",
246 | "exercise",
247 | "exist",
248 | "expect",
249 | "expense",
250 | "experience",
251 | "explain",
252 | "express",
253 | "extra",
254 | "face",
255 | "fact",
256 | "fair",
257 | "fall",
258 | "family",
259 | "farm",
260 | "fast",
261 | "father",
262 | "favour",
263 | "feed",
264 | "feel",
265 | "field",
266 | "fight",
267 | "figure",
268 | "file",
269 | "fill",
270 | "film",
271 | "final",
272 | "finance",
273 | "find",
274 | "fine",
275 | "finish",
276 | "fire",
277 | "first",
278 | "fish",
279 | "five",
280 | "flat",
281 | "floor",
282 | "follow",
283 | "food",
284 | "foot",
285 | "force",
286 | "forget",
287 | "form",
288 | "fortune",
289 | "forward",
290 | "four",
291 | "france",
292 | "free",
293 | "friday",
294 | "friend",
295 | "from",
296 | "front",
297 | "full",
298 | "function",
299 | "fund",
300 | "further",
301 | "future",
302 | "game",
303 | "garden",
304 | "general",
305 | "germany",
306 | "girl",
307 | "give",
308 | "glass",
309 | "good",
310 | "goodbye",
311 | "govern",
312 | "grand",
313 | "grant",
314 | "great",
315 | "green",
316 | "ground",
317 | "group",
318 | "grow",
319 | "guess",
320 | "hair",
321 | "half",
322 | "hall",
323 | "hand",
324 | "hang",
325 | "happen",
326 | "happy",
327 | "hard",
328 | "hate",
329 | "have",
330 | "head",
331 | "health",
332 | "hear",
333 | "heart",
334 | "heat",
335 | "heavy",
336 | "hell",
337 | "help",
338 | "here",
339 | "high",
340 | "history",
341 | "hold",
342 | "holiday",
343 | "home",
344 | "honest",
345 | "hope",
346 | "horse",
347 | "hospital",
348 | "hour",
349 | "house",
350 | "however",
351 | "hullo",
352 | "hundred",
353 | "husband",
354 | "idea",
355 | "identify",
356 | "imagine",
357 | "important",
358 | "improve",
359 | "include",
360 | "income",
361 | "increase",
362 | "indeed",
363 | "individual",
364 | "industry",
365 | "inform",
366 | "inside",
367 | "instead",
368 | "insure",
369 | "interest",
370 | "into",
371 | "introduce",
372 | "invest",
373 | "involve",
374 | "issue",
375 | "item",
376 | "jesus",
377 | "join",
378 | "judge",
379 | "jump",
380 | "just",
381 | "keep",
382 | "kill",
383 | "kind",
384 | "king",
385 | "kitchen",
386 | "knock",
387 | "know",
388 | "labour",
389 | "lady",
390 | "land",
391 | "language",
392 | "large",
393 | "last",
394 | "late",
395 | "laugh",
396 | "lead",
397 | "learn",
398 | "leave",
399 | "left",
400 | "less",
401 | "letter",
402 | "level",
403 | "life",
404 | "light",
405 | "like",
406 | "likely",
407 | "limit",
408 | "line",
409 | "link",
410 | "list",
411 | "listen",
412 | "little",
413 | "live",
414 | "load",
415 | "local",
416 | "lock",
417 | "london",
418 | "long",
419 | "look",
420 | "lord",
421 | "lose",
422 | "love",
423 | "luck",
424 | "lunch",
425 | "machine",
426 | "main",
427 | "major",
428 | "make",
429 | "manage",
430 | "many",
431 | "mark",
432 | "market",
433 | "marry",
434 | "match",
435 | "matter",
436 | "maybe",
437 | "mean",
438 | "meaning",
439 | "measure",
440 | "meet",
441 | "member",
442 | "mention",
443 | "middle",
444 | "might",
445 | "mile",
446 | "milk",
447 | "million",
448 | "mind",
449 | "minister",
450 | "minus",
451 | "minute",
452 | "miss",
453 | "mister",
454 | "moment",
455 | "monday",
456 | "money",
457 | "month",
458 | "more",
459 | "morning",
460 | "most",
461 | "mother",
462 | "motion",
463 | "move",
464 | "much",
465 | "music",
466 | "must",
467 | "name",
468 | "nation",
469 | "nature",
470 | "near",
471 | "necessary",
472 | "need",
473 | "never",
474 | "news",
475 | "next",
476 | "nice",
477 | "night",
478 | "nine",
479 | "none",
480 | "normal",
481 | "north",
482 | "note",
483 | "notice",
484 | "number",
485 | "obvious",
486 | "occasion",
487 | "offer",
488 | "office",
489 | "often",
490 | "okay",
491 | "once",
492 | "only",
493 | "open",
494 | "operate",
495 | "opportunity",
496 | "oppose",
497 | "order",
498 | "organize",
499 | "original",
500 | "other",
501 | "otherwise",
502 | "ought",
503 | "over",
504 | "pack",
505 | "page",
506 | "paint",
507 | "pair",
508 | "paper",
509 | "paragraph",
510 | "pardon",
511 | "parent",
512 | "park",
513 | "part",
514 | "particular",
515 | "party",
516 | "pass",
517 | "past",
518 | "pence",
519 | "pension",
520 | "people",
521 | "percent",
522 | "perfect",
523 | "perhaps",
524 | "period",
525 | "person",
526 | "photograph",
527 | "pick",
528 | "picture",
529 | "piece",
530 | "place",
531 | "plan",
532 | "play",
533 | "please",
534 | "plus",
535 | "point",
536 | "police",
537 | "policy",
538 | "politic",
539 | "poor",
540 | "position",
541 | "positive",
542 | "possible",
543 | "post",
544 | "pound",
545 | "power",
546 | "practise",
547 | "prepare",
548 | "present",
549 | "press",
550 | "pressure",
551 | "presume",
552 | "pretty",
553 | "previous",
554 | "price",
555 | "print",
556 | "private",
557 | "probable",
558 | "problem",
559 | "proceed",
560 | "process",
561 | "produce",
562 | "product",
563 | "programme",
564 | "project",
565 | "proper",
566 | "propose",
567 | "protect",
568 | "provide",
569 | "public",
570 | "pull",
571 | "purpose",
572 | "push",
573 | "quality",
574 | "quarter",
575 | "question",
576 | "quick",
577 | "quid",
578 | "quiet",
579 | "quite",
580 | "radio",
581 | "rail",
582 | "raise",
583 | "range",
584 | "rate",
585 | "rather",
586 | "read",
587 | "ready",
588 | "real",
589 | "realise",
590 | "really",
591 | "reason",
592 | "receive",
593 | "recent",
594 | "reckon",
595 | "recognize",
596 | "recommend",
597 | "record",
598 | "reduce",
599 | "refer",
600 | "regard",
601 | "region",
602 | "relation",
603 | "remember",
604 | "report",
605 | "represent",
606 | "require",
607 | "research",
608 | "resource",
609 | "respect",
610 | "responsible",
611 | "rest",
612 | "result",
613 | "return",
614 | "right",
615 | "ring",
616 | "rise",
617 | "road",
618 | "role",
619 | "roll",
620 | "room",
621 | "round",
622 | "rule",
623 | "safe",
624 | "sale",
625 | "same",
626 | "saturday",
627 | "save",
628 | "scheme",
629 | "school",
630 | "science",
631 | "score",
632 | "scotland",
633 | "seat",
634 | "second",
635 | "secretary",
636 | "section",
637 | "secure",
638 | "seem",
639 | "self",
640 | "sell",
641 | "send",
642 | "sense",
643 | "separate",
644 | "serious",
645 | "serve",
646 | "service",
647 | "settle",
648 | "seven",
649 | "shall",
650 | "share",
651 | "sheet",
652 | "shoe",
653 | "shoot",
654 | "shop",
655 | "short",
656 | "should",
657 | "show",
658 | "shut",
659 | "sick",
660 | "side",
661 | "sign",
662 | "similar",
663 | "simple",
664 | "since",
665 | "sing",
666 | "single",
667 | "sister",
668 | "site",
669 | "situate",
670 | "size",
671 | "sleep",
672 | "slight",
673 | "slow",
674 | "small",
675 | "smoke",
676 | "social",
677 | "society",
678 | "some",
679 | "soon",
680 | "sorry",
681 | "sort",
682 | "sound",
683 | "south",
684 | "space",
685 | "speak",
686 | "special",
687 | "specific",
688 | "speed",
689 | "spell",
690 | "spend",
691 | "square",
692 | "staff",
693 | "stage",
694 | "stairs",
695 | "stand",
696 | "standard",
697 | "start",
698 | "state",
699 | "station",
700 | "stay",
701 | "step",
702 | "stick",
703 | "still",
704 | "stop",
705 | "story",
706 | "straight",
707 | "strategy",
708 | "street",
709 | "strike",
710 | "strong",
711 | "structure",
712 | "student",
713 | "study",
714 | "stuff",
715 | "stupid",
716 | "subject",
717 | "succeed",
718 | "such",
719 | "sudden",
720 | "suggest",
721 | "suit",
722 | "summer",
723 | "sunday",
724 | "supply",
725 | "support",
726 | "suppose",
727 | "sure",
728 | "surprise",
729 | "switch",
730 | "system",
731 | "table",
732 | "take",
733 | "talk",
734 | "tape",
735 | "teach",
736 | "team",
737 | "telephone",
738 | "television",
739 | "tell",
740 | "tend",
741 | "term",
742 | "terrible",
743 | "test",
744 | "than",
745 | "thank",
746 | "then",
747 | "there",
748 | "therefore",
749 | "they",
750 | "thing",
751 | "think",
752 | "thirteen",
753 | "thirty",
754 | "this",
755 | "thou",
756 | "though",
757 | "thousand",
758 | "three",
759 | "through",
760 | "throw",
761 | "thursday",
762 | "time",
763 | "today",
764 | "together",
765 | "tomorrow",
766 | "tonight",
767 | "total",
768 | "touch",
769 | "toward",
770 | "town",
771 | "trade",
772 | "traffic",
773 | "train",
774 | "transport",
775 | "travel",
776 | "treat",
777 | "tree",
778 | "trouble",
779 | "true",
780 | "trust",
781 | "tuesday",
782 | "turn",
783 | "twelve",
784 | "twenty",
785 | "type",
786 | "under",
787 | "understand",
788 | "union",
789 | "unit",
790 | "unite",
791 | "university",
792 | "unless",
793 | "until",
794 | "upon",
795 | "usual",
796 | "value",
797 | "various",
798 | "very",
799 | "video",
800 | "view",
801 | "village",
802 | "visit",
803 | "vote",
804 | "wage",
805 | "wait",
806 | "walk",
807 | "wall",
808 | "want",
809 | "warm",
810 | "wash",
811 | "waste",
812 | "watch",
813 | "water",
814 | "wear",
815 | "wednesday",
816 | "week",
817 | "weigh",
818 | "welcome",
819 | "well",
820 | "west",
821 | "what",
822 | "when",
823 | "where",
824 | "whether",
825 | "which",
826 | "while",
827 | "white",
828 | "whole",
829 | "wide",
830 | "wife",
831 | "will",
832 | "wind",
833 | "window",
834 | "wish",
835 | "with",
836 | "within",
837 | "without",
838 | "woman",
839 | "wonder",
840 | "wood",
841 | "word",
842 | "work",
843 | "world",
844 | "worry",
845 | "worse",
846 | "worth",
847 | "would",
848 | "write",
849 | "wrong",
850 | "year",
851 | "yesterday",
852 | "young"
853 | ]
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "esnext",
5 | "moduleResolution": "node"
6 | },
7 | "include": ["vite.config.ts"]
8 | }
9 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()]
7 | })
8 |
--------------------------------------------------------------------------------