hangman-react-game 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -5
- package/src/index.tsx +4 -2
- package/dist/index.d.mts +0 -2
- package/dist/index.mjs +0 -10
- package/dist/index.mjs.map +0 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hangman-react-game",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"
|
|
3
|
+
"version": "1.0.5",
|
|
4
|
+
"type": "module",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
7
7
|
"exports": {
|
|
@@ -18,9 +18,6 @@
|
|
|
18
18
|
"react-dom": "^19.0.0"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@rollup/plugin-babel": "^6.0.3",
|
|
22
|
-
"@rollup/plugin-commonjs": "^24.0.1",
|
|
23
|
-
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
24
21
|
"@types/react": "^19.1.13",
|
|
25
22
|
"@types/react-dom": "^19.1.9",
|
|
26
23
|
"rollup": "^3.29.0",
|
package/src/index.tsx
CHANGED
package/dist/index.d.mts
DELETED
package/dist/index.mjs
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
// src/hooks/useGame.tsx
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
|
|
4
|
-
// src/components/Hangman.tsx
|
|
5
|
-
import { useEffect as useEffect2 } from "react";
|
|
6
|
-
import { jsx } from "react/jsx-runtime";
|
|
7
|
-
|
|
8
|
-
// src/components/Game.tsx
|
|
9
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
10
|
-
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useGame.tsx","../src/components/Hangman.tsx","../src/components/Game.tsx"],"sourcesContent":["import {useEffect, useState} from \"react\";\r\n\r\nconst MAX_FAILED_ATTEMPTS = 10;\r\nconst wordDictionary = [\r\n \"apple\",\r\n \"banana\",\r\n \"cherry\",\r\n \"date\",\r\n \"elderberry\",\r\n \"fig\",\r\n \"grape\",\r\n \"honeydew\",\r\n \"kiwi\",\r\n \"lemon\",\r\n \"mango\",\r\n \"nectarine\",\r\n \"orange\",\r\n \"papaya\",\r\n \"quince\",\r\n \"raspberry\",\r\n \"strawberry\",\r\n \"tangerine\",\r\n \"ugli\",\r\n \"vanilla\",\r\n \"watermelon\",\r\n \"xigua\",\r\n \"yellow\",\r\n \"zucchini\",\r\n \"abstract\",\r\n \"breeze\",\r\n \"cactus\",\r\n \"dolphin\",\r\n \"eagle\",\r\n \"forest\",\r\n \"giraffe\",\r\n \"horizon\",\r\n \"island\",\r\n \"jungle\",\r\n \"kaleidoscope\",\r\n \"lighthouse\",\r\n \"mountain\",\r\n \"nebula\",\r\n \"ocean\",\r\n \"prairie\",\r\n \"quasar\",\r\n \"rainbow\",\r\n \"sunrise\",\r\n \"tornado\",\r\n \"universe\",\r\n \"volcano\",\r\n \"whale\",\r\n \"xerox\",\r\n \"yacht\",\r\n \"zephyr\",\r\n \"albatross\",\r\n \"butterfly\",\r\n \"chameleon\",\r\n \"dinosaur\",\r\n \"elephant\",\r\n \"flamingo\",\r\n \"gazelle\",\r\n \"hippopotamus\",\r\n \"iguana\",\r\n \"jellyfish\",\r\n \"kangaroo\",\r\n \"lion\",\r\n \"monkey\",\r\n \"narwhal\",\r\n \"octopus\",\r\n \"penguin\",\r\n \"quail\",\r\n \"rhinoceros\",\r\n \"squirrel\",\r\n \"turtle\",\r\n \"umbrella\",\r\n \"vulture\",\r\n \"walrus\",\r\n \"xylophone\",\r\n \"yak\",\r\n \"zebra\",\r\n \"astronomy\",\r\n \"biology\",\r\n \"chemistry\",\r\n \"democracy\",\r\n \"ecosystem\",\r\n \"fossil\",\r\n \"genetics\",\r\n \"hypothesis\",\r\n \"innovation\",\r\n \"jurisdiction\",\r\n \"kinetic\",\r\n \"laboratory\",\r\n \"meteorology\",\r\n \"neuroscience\",\r\n \"observation\",\r\n \"physics\",\r\n \"quantum\",\r\n \"robotics\",\r\n \"synthesis\",\r\n \"theorem\",\r\n \"unicorn\",\r\n \"velocity\",\r\n \"wavelength\",\r\n \"xenon\",\r\n \"youth\",\r\n \"zenith\",\r\n \"bamboozlement\",\r\n \"flabbergasted\",\r\n \"hypothetical\",\r\n \"juxtaposition\",\r\n \"labyrinthine\",\r\n \"nebulousness\",\r\n \"quintessential\",\r\n \"sesquipedalian\",\r\n \"transcendental\",\r\n \"unpredictable\",\r\n \"verisimilitude\",\r\n \"whippersnapper\",\r\n \"xenotransplant\",\r\n \"yesteryear\",\r\n \"zigzaggedness\"\r\n];\r\n\r\nconst useGame = () => {\r\n // Should fetch random word from a dictionary (maybe vary by language)\r\n const [word, setWord] = useState(\"\");\r\n const [guessedLetters, setGuessedLetters] = useState<string[]>([]);\r\n const [failedAttempts, setFailedAttempts] = useState<number>(0);\r\n const [hasEnded, setHasEnded] = useState(false);\r\n const [hasWon, setHasWon] = useState(false);\r\n\r\n const censorWord = (w: string) => w.split(\"\").map(x => (guessedLetters.includes(x) || x === \" \" ? x : \"_\") + \" \").join(\"\");\r\n const newWord = () => setWord( wordDictionary[Math.floor( Math.random() * wordDictionary.length )]);\r\n \r\n const guessLetter = async (letter : string) => {\r\n if(!hasEnded && letter.length === 1){\r\n if(!word.includes(letter)) \r\n setFailedAttempts(failedAttempts+1);\r\n setGuessedLetters([...guessedLetters, letter]);\r\n }\r\n }\r\n \r\n useEffect(()=> newWord(), [])\r\n useEffect(()=> {\r\n setGuessedLetters([]);\r\n setFailedAttempts(0);\r\n setHasEnded(false);\r\n setHasWon(false);\r\n }, [word]);\r\n \r\n useEffect(()=> {\r\n if(failedAttempts >= MAX_FAILED_ATTEMPTS)\r\n setHasEnded(true);\r\n }, [failedAttempts]);\r\n \r\n useEffect(()=> {\r\n if(word && !censorWord(word).includes(\"_\")) {\r\n setHasWon(true);\r\n setHasEnded(true);\r\n }\r\n }, [guessedLetters]);\r\n\r\n return {\r\n newWord,\r\n hasEnded,\r\n hasWon,\r\n failedAttempts,\r\n guessLetter,\r\n guessedLetters,\r\n word : hasEnded ? word : censorWord(word)\r\n };\r\n}\r\nexport default useGame;","import { ReactElement, useEffect } from \"react\";\r\n\r\ntype HangmanProps = {\r\n failedAttempts: number\r\n}\r\n\r\nconst Hangman = ({failedAttempts} : HangmanProps) => {\r\n useEffect(() => {}, [failedAttempts]);\r\n const hangmanParts : ReactElement[] = [\r\n // ROD\r\n <line x1=\"20\" y1=\"230\" x2=\"100\" y2=\"230\" stroke=\"black\" />,\r\n <line x1=\"60\" y1=\"20\" x2=\"60\" y2=\"230\" stroke=\"black\" />,\r\n <line x1=\"60\" y1=\"20\" x2=\"140\" y2=\"20\" stroke=\"black\" />,\r\n <line x1=\"140\" y1=\"20\" x2=\"140\" y2=\"50\" stroke=\"black\" />,\r\n // HEAD\r\n <circle cx=\"140\" cy=\"70\" r=\"20\" stroke=\"black\" />,\r\n // BODY\r\n <line x1=\"140\" y1=\"90\" x2=\"140\" y2=\"150\" stroke=\"black\" />,\r\n // ARMS\r\n <line x1=\"140\" y1=\"120\" x2=\"120\" y2=\"100\" stroke=\"black\" />,\r\n <line x1=\"140\" y1=\"120\" x2=\"160\" y2=\"100\" stroke=\"black\" />,\r\n // LEGS\r\n <line x1=\"140\" y1=\"150\" x2=\"120\" y2=\"180\" stroke=\"black\" />,\r\n <line x1=\"140\" y1=\"150\" x2=\"160\" y2=\"180\" stroke=\"black\" />\r\n ];\r\n return (\r\n <svg height=\"250\" width=\"200\">\r\n {hangmanParts.slice(0, failedAttempts)}\r\n </svg>\r\n )\r\n}\r\nexport default Hangman;","import useGame from \"../hooks/useGame\";\r\nimport Hangman from \"./Hangman\";\r\n\r\nconst Game = () => {\r\n const {\r\n newWord,\r\n hasEnded,\r\n hasWon,\r\n failedAttempts,\r\n guessLetter,\r\n guessedLetters,\r\n word \r\n } = useGame();\r\n return (\r\n <div>\r\n <h1>Hangman game</h1>\r\n <div className=\"word\">\r\n <p>{word}</p>\r\n </div>\r\n <div className=\"hangman-illustrtion\">\r\n <Hangman failedAttempts={failedAttempts} />\r\n </div>\r\n <div className=\"guessButtons\">\r\n {\"abcdefghijklmnopqrstuvwxyz\".split(\"\").map(x => (\r\n <button key={x} onClick={() => guessLetter(x)} disabled={hasEnded || guessedLetters.includes(x)}>{x}</button>\r\n ))}\r\n </div>\r\n {hasEnded && (\r\n <div className=\"game-over\">\r\n {hasWon && (<h1>Yay, you won</h1>)}\r\n {!hasWon && (<h1>Too bad, you lose</h1>)}\r\n </div>\r\n )}\r\n <button onClick={newWord}>New word</button>\r\n </div>\r\n )\r\n};\r\nexport default Game;"],"mappings":";AAAA,SAAQ,WAAW,gBAAe;;;ACAlC,SAAuB,aAAAA,kBAAiB;AAUpC;;;ACKQ,gBAAAC,MAaI,YAbJ;","names":["useEffect","jsx"]}
|