{"id":19526855,"url":"https://github.com/deepcloudlabs/mastermind-reactjs-with-hooks","last_synced_at":"2026-04-16T11:01:57.276Z","repository":{"id":101719098,"uuid":"393639468","full_name":"deepcloudlabs/mastermind-reactjs-with-hooks","owner":"deepcloudlabs","description":"Reactjs Implementation of MasterMind Game using React Hooks","archived":false,"fork":false,"pushed_at":"2021-08-08T11:19:27.000Z","size":231,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-08T15:55:51.060Z","etag":null,"topics":["hooks-api-react","react","reactjs","useeffect-hook","usestate-hook"],"latest_commit_sha":null,"homepage":"https://www.deepcloudlabs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deepcloudlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-07T09:32:35.000Z","updated_at":"2021-08-08T11:19:30.000Z","dependencies_parsed_at":"2023-06-26T01:57:51.396Z","dependency_job_id":null,"html_url":"https://github.com/deepcloudlabs/mastermind-reactjs-with-hooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepcloudlabs%2Fmastermind-reactjs-with-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepcloudlabs%2Fmastermind-reactjs-with-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepcloudlabs%2Fmastermind-reactjs-with-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepcloudlabs%2Fmastermind-reactjs-with-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepcloudlabs","download_url":"https://codeload.github.com/deepcloudlabs/mastermind-reactjs-with-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240778622,"owners_count":19856060,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks-api-react","react","reactjs","useeffect-hook","usestate-hook"],"created_at":"2024-11-11T01:12:25.583Z","updated_at":"2025-10-25T16:07:26.152Z","avatar_url":"https://github.com/deepcloudlabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reactjs Implementation of MasterMind Game using React Hooks\n\n**Mastermind** is a *simple number guessing game*. Computer picks a **3-digit** random number where all digits are **distinct**. This number is a **secret** and a player tries to find the secret by guessing. Computer guides the player with a hint message summarizing how much the guess is close the secret. Assume that the secret number is **549** and player's first move is **123**. Computer evaluates the input **123** and produces **\"No Match!\"** message, hence there is no digit matched! Player's next move is **456**. Computer again evaluates the input **456** and produces the message **\"-2\"**: The digits **4** and **5** are all matched but at the very wrong places! Player's next move is **567**. Computer again evaluates the input **567** and produces the message **\"+1\"**: Only one digit is matched at the correct place! Player's next move is **584**. Computer again evaluates the input **584** and produces the message **\"+1-1\"**: The digit **5** is matched at the correct place and the digit **4** is matched at the wrong place.  Player's next move is 540. Computer again evaluates the input 540 and produces the message **\"+2\"**: The digits **5** and **4** are all matched at the correct places! Finally the player inputs **549** and wins the game!\n\nInitial state is initialized from **localStroage** if a value is available for the key **\"mastermind\"**. If there is a change in the state, it is immediately stored in **localStorage** using **useEffect()**:\n\n```js\n   let initialGameState = {\n        level: 3,\n        tries: 0,\n        secret: createSecret(3),\n        moves: [],\n        counter: 120,\n        guess: 145,\n        statistics: {\n            wins: 0,\n            loses: 0\n        }\n    };\n\n    let localStorageGame = localStorage.getItem(\"mastermind\");\n    if (localStorageGame === null || localStorageGame === undefined) {\n        localStorage.setItem(\"mastermind\", JSON.stringify(initialGameState));\n    } else {\n        initialGameState = JSON.parse(localStorageGame);\n    }\n    let [game, setGame] = useState(initialGameState);\n\n    useEffect(() =\u003e {\n        localStorage.setItem(\"mastermind\", JSON.stringify(game));\n    });\n\n```\n\nIn order to make the game more **pleasant** for the player we *challange the user* with **the time limit**:\n\n```js\n    useEffect(() =\u003e {\n        let timerId = setInterval(countdown, 1000);\n        return () =\u003e {\n            clearInterval(timerId);\n        }\n    });\n```\n\nYou can use a single state with a complex object or multiple states using **useState()**:\n\n```js\n    let [game, setGame] = useState({\n        level: 3,\n        tries: 0,\n        secret: createSecret(3),\n        moves: [],\n        counter: 120,\n        guess: 145,\n        statistics: {\n            wins: 0,\n            loses: 0\n        }\n    });\n```\n\nversus\n\n```js\n    let [level, setLevel] = useState(3);\n    let [tries, setTries] = useState(0);\n    let [moves, setMoves] = useState([]);\n    . . .\n    let [guess, setGuess] = useState(123);\n```\n\nEvery time you call the setXYZ() methods the component re-renders. Hence the single state case triggers just one re-rendering. Multiple re-rendering usually is not a problem thanks to React's reconsilition algorithm. Though it has a little drawback: the cost of function call. Contrary to single state, multiple states draw a clear boundary between different intensions in updating the state.  \n\nUnlike the **setState()** in class components, the **setState()** returned from **useState()** doesn't merge objects with existing state, it replaces the object entirely. If you want to do a merge, you would need to read the previous state and merge it with the new values yourself. You may try to utilize React Hook's **useReducer()**: \n\n```js\n    function reducer(state, action){\n        let newGame = {...game};\n        switch(action.type) {\n            case 'PLAY':\n                let newGame = {...game};\n                newGame.tries++;\n                if (Number(newGame.guess) === newGame.secret) {\n                    newGame.level++;\n                    if (newGame.level \u003e= 10) {\n                        newGame.statistics.wins++;\n                    }\n                    initGame(newGame);\n                } else {\n                    if (newGame.tries \u003e= 10) {\n                        newGame.statistics.loses++;\n                        initGame(newGame);\n                    } else {\n                        newGame.moves.push(createMove(game.guess, game.secret))\n                    }\n                }              \n                break;\n            case 'TIMEOUT':\n                newGame.tries = 0;\n                newGame.counter = 120;\n                newGame.secret = createSecret(game.level);\n                newGame.moves = [];                \n                newGame.statistics.loses++;\n                break;\n                \n        }\n        return newGame;\n    }\n    \n    . . .\n    \n    const [game, dispatch] = useReducer(reducer, initialState);\n    \n    . . . \n    \n    \u003cbutton onClick={() =\u003e dispatch({type: 'PLAY'})}}  className=\"btn btn-success\"\u003ePlay\u003c/button\u003e\n    \n    . . .\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepcloudlabs%2Fmastermind-reactjs-with-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepcloudlabs%2Fmastermind-reactjs-with-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepcloudlabs%2Fmastermind-reactjs-with-hooks/lists"}