{"id":23333786,"url":"https://github.com/pedrodevvv/secret_word","last_synced_at":"2025-04-07T12:13:17.070Z","repository":{"id":155226516,"uuid":"605616219","full_name":"PedroDeVvV/Secret_Word","owner":"PedroDeVvV","description":"Primeiro projeto em React, utilizando hooks para gerenciamento de estados","archived":false,"fork":false,"pushed_at":"2023-03-07T16:45:21.000Z","size":541,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T14:44:38.754Z","etag":null,"topics":["hooks","javascript","usecallback","useeffect","usestate"],"latest_commit_sha":null,"homepage":"https://secret-word-gray-nine.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PedroDeVvV.png","metadata":{"files":{"readme":".github/README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-02-23T14:38:30.000Z","updated_at":"2023-02-23T20:19:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"92b3fbb0-3f54-4d0f-b258-5e9a51ad450a","html_url":"https://github.com/PedroDeVvV/Secret_Word","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/PedroDeVvV%2FSecret_Word","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroDeVvV%2FSecret_Word/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroDeVvV%2FSecret_Word/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroDeVvV%2FSecret_Word/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PedroDeVvV","download_url":"https://codeload.github.com/PedroDeVvV/Secret_Word/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648976,"owners_count":20972945,"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","javascript","usecallback","useeffect","usestate"],"created_at":"2024-12-21T00:32:20.026Z","updated_at":"2025-04-07T12:13:17.052Z","avatar_url":"https://github.com/PedroDeVvV.png","language":"JavaScript","readme":"## Secret Word\n\u003chr\u003e\n\n\u003ch2\u003e🕹️Jogo similar ao jogo da forca\u003c/h2\u003e\n\nMeu primeiro projeto em React.JS, trabalhando com os hook's useState, useEffect e useCallback, pude compreender melhor o gerenciamento de estados entre componentes na prática.\nO jogo conta com algumas categorias de palavras, como fruta, parte do corpo, marcas de carro, partes de computador, programação, entre outros tipos. O usuário tem 4 chances de acertar uma letra, e uma nova palavra é gerada a cada vitória, no final é apresentado a pontualção acumulada.\n\n\u003ch2\u003e⚙️Prévia de funcionamento\u003c/h2\u003e\n\n![preview](./img.gif)\u003cbr\u003e\n🔗[Clique aqui para jogar!](https://secret-word-gray-nine.vercel.app/)\n\n## 👨🏻‍💻Descrição do código\n- Detalhamento código do componente principal do projeto, para facilitar o entendimento do código, segue a descrição.\n    \n    ### **Imports**\n    \n    ```jsx\n     \n    import \"./App.css\";\n    import { useCallback, useEffect, useState } from \"react\";\n    import { wordsList } from \"./data/words\";\n    import StartScreen from \"./components/StartScreen\";\n    import Game from \"./components/Game\";\n    import End from \"./components/End\";\n    \n    ```\n    \n    O código começa importando os recursos necessários para a aplicação, incluindo o CSS, as bibliotecas React, os dados do jogo (palavras e categorias), e os componentes.\n    \n    ### **Variáveis e Constantes**\n    \n    ```jsx\n     \n    const stages = [\n      { id: 1, name: \"start\" },\n      { id: 2, name: \"game\" },\n      { id: 3, name: \"end\" },\n    ];\n    \n    const guessesQty = 4; \n    \n    ```\n    \n    Essas são constantes usadas em toda a aplicação. **`stages`** contém as etapas do jogo (início, jogo e fim) e **`guessesQty`** contém a quantidade de tentativas permitidas.\n    \n    ### **Estados**\n    \n    ```jsx\n     \n    const [gameStage, setGameStage] = useState(stages[0].name);\n    const [words] = useState(wordsList);\n    \n    const [pickedWord, setPickedWord] = useState(\"\");\n    const [pickedCategory, setPictureCategory] = useState(\"\");\n    const [letters, setLetters] = useState([]);\n    \n    const [guessedLetters, setGuessedLetters] = useState([]);\n    const [wrongLetters, setWrongLetters] = useState([]);\n    const [guesses, setGuesses] = useState(guessesQty);\n    const [score, setScore] = useState(0);\n    \n    ```\n    \n    Essas são as variáveis de estado usadas na aplicação. Cada variável de estado é definida usando o hook **`useState`**, que retorna uma dupla de valor e função para atualizar esse valor. Cada estado é usado para armazenar informações diferentes: \n    \u003cul\u003e\n    \u003cli\u003estages é uma constante que armazena um array de objetos com as etapas do jogo: start, game e end.\u003c/li\u003e\n    \u003cli\u003eguessesQty é a quantidade de chances que o jogador terá para adivinhar a palavra.\u003c/li\u003e\n    \u003cli\u003egameStage é o estado que armazena a etapa atual do jogo.\u003c/li\u003e\n    \u003cli\u003ewords é o estado que armazena a lista de palavras que serão utilizadas no jogo.\u003c/li\u003e\n    \u003cli\u003epickedWord é a palavra escolhida aleatoriamente pela aplicação.\u003c/li\u003e\n    \u003cli\u003epickedCategory é a categoria da palavra escolhida.\u003c/li\u003e\n    \u003cli\u003eletters é um array com as letras da palavra escolhida.\u003c/li\u003e\n    \u003cli\u003eguessedLetters é um array com as letras que foram adivinhadas corretamente pelo jogador.\u003c/li\u003e\n    \u003cli\u003ewrongLetters é um array com as letras que não fazem parte da palavra, colocadas pelo jogador.\u003c/li\u003e\n    \u003cli\u003eguesses é a quantidade de chances restantes que o jogador tem, optei por 4 inicialmente.\u003c/li\u003e\n    \u003cli\u003escore é a pontuação do jogador.\u003c/li\u003e\n    \u003c/ul\u003e\n    \n    ### **Funções**\n    \n    ```jsx\n     \n    const pickWordAndCategory = useCallback(() =\u003e {\n      const categories = Object.keys(words);\n      const category =\n        categories[Math.floor(Math.random() * Object.keys(categories).length)];\n      const word =\n        words[category][Math.floor(Math.random() * words[category].length)];\n      return { word, category };\n    }, [words]);\n    \n    const startGame = useCallback(() =\u003e {\n      clearLetterStates();\n      const { category, word } = pickWordAndCategory();\n      let wordLetters = word.split(\"\");\n      wordLetters = wordLetters.map((l) =\u003e l.toLowerCase());\n      setPickedWord(word);\n      setPictureCategory(category);\n      setLetters(wordLetters);\n      setGameStage(stages[1].name);\n    }, [pickWordAndCategory]);\n    \n    const verifyLetter = (letter) =\u003e {\n      const normalizedLetter = letter.toLowerCase();\n      if (\n        guessedLetters.includes(normalizedLetter) ||\n        wrongLetters.includes(normalizedLetter)\n      ) {\n        return;\n      }\n      if (letters.includes(normalizedLetter)) {\n        setGuessedLetters((actualGuessedLetters) =\u003e [\n          ...actualGuessedLetters,\n          normalizedLetter,\n        ]);\n      } else {\n        setWrongLetters((actualWrongLetters) =\u003e [\n          ...actualWrongLetters,\n          normalizedLetter,\n        ]);\n        setGuesses((actualGuesses) =\u003e actualGuesses - 1);\n    \n    ```\n    \u003ch3\u003eDetalhamento das funções\u003c/h3\u003e\n    \u003cul\u003e\n   \u003cli\u003e pickWordAndCategory(): Essa função é responsável por selecionar aleatoriamente uma categoria e uma palavra da lista de palavras disponíveis. É usada para iniciar um novo jogo.\u003c/li\u003e\n\n   \u003cli\u003e startGame(): Essa função é chamada quando o jogador clica no botão de iniciar o jogo. Ela chama a função pickWordAndCategory() para escolher uma palavra e uma categoria aleatórias, transforma a palavra em uma lista de letras, atualiza os estados do jogo e muda a etapa do jogo para \"game\".\u003c/li\u003e\n\n    \u003cli\u003everifyLetter(letter): Essa função é chamada quando o jogador digita uma letra no input de letras. Ela verifica se a letra já foi usada antes (tanto nas letras certas quanto nas erradas), e caso contrário, verifica se a letra faz parte da palavra escolhida. Se a letra faz parte da palavra, ela é adicionada ao estado guessedLetters. Caso contrário, é adicionada ao estado wrongLetters e o número de tentativas restantes é decrementado em 1.\u003c/li\u003e\n\n    \u003cli\u003eclearLetterStates(): Essa função é chamada quando um novo jogo é iniciado, e é responsável por limpar os estados guessedLetters e wrongLetters.\u003c/li\u003e\n\n    \u003cli\u003euseEffect(): Essa é uma função do React que é usada para executar algum código quando um determinado estado muda. O código dentro dela será executado sempre que o valor de alguma das variáveis passadas como segundo argumento mudar. No código apresentado, há duas chamadas a useEffect:\n\n    A primeira é responsável por verificar se o número de tentativas restantes chegou a zero, e se sim, mudar a etapa do jogo para \"end\".\n    A segunda é responsável por verificar se o jogador adivinhou todas as letras da palavra escolhida, e se sim, adicionar 100 pontos à pontuação e iniciar um novo jogo.\n    retry(): Essa função é chamada quando o jogador clica no botão de \"jogar novamente\" na tela de fim de jogo. Ela zera a pontuação e as tentativas restantes, e muda a etapa do jogo para \"start\".\u003c/li\u003e\n    \u003c/ul\u003e\n- \n    \n\n## 🛠️Tecnologias\n\n* HTML\n* CSS\n* JavaScript\n* React\n* NPM\n* Visual Studio Code\n\n## 📞 Contato\n\n📩E-mail: pedrohgs2004@gmail.com \u003cbr\u003e\n🌐Linkedin: https://www.linkedin.com/in/pedro-henrique-g-silva-a2100a23a/?originalSubdomain=br\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrodevvv%2Fsecret_word","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedrodevvv%2Fsecret_word","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrodevvv%2Fsecret_word/lists"}