{"version":3,"sources":["context/theme-context.js","components/hint/hint.component.jsx","components/letter/Letter.component.jsx","components/letters/Letters.component.jsx","utils/helpers.js","components/guessing/Guessing.component.jsx","components/hangmanFigure/HangmanFigure.component.jsx","App.jsx","reportWebVitals.js","index.js"],"names":["themes","dark","backgroundColor","color","light","initialState","theme","toggle","ThemeContext","React","createContext","ThemeProvider","children","useState","setDark","useEffect","isDark","localStorage","getItem","Provider","value","setItem","JSON","stringify","Hint","letters","Math","floor","random","length","Letter","letterValue","handleClick","isCorrect","clicked","setClicked","className","type","onClick","style","Letters","handleClickTop","word","lettersList","map","letter","includes","Guessing","currentWord","correctLetters","setLetters","forEach","HangmanFigure","wrongLetters","stroke","errors","height","width","x1","y1","x2","y2","cx","cy","r","App","getRandomWord","randomWords","setCurrentWord","useContext","setCorrectLetters","setWrongLetters","remainingLetters","setRemainingLetters","hint","setHint","showHint","setShowHint","showHintButton","setShowHintButton","chances","randomWord","split","filter","getRemainingLetters","outline","boxShadow","marginTop","toUpperCase","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.a5a4e860.chunk.js","sourcesContent":["import React from \"react\";\n\nconst themes = {\n  dark: {\n    backgroundColor: \"black\",\n    color: \"white\",\n  },\n  light: {\n    backgroundColor: \"white\",\n    color: \"black\",\n  },\n};\n\nconst initialState = {\n  dark: false,\n  theme: themes.light,\n  toggle: () => {},\n};\nconst ThemeContext = React.createContext(initialState);\n\nfunction ThemeProvider({ children }) {\n  const [dark, setDark] = React.useState(false); // Default theme is light\n\n  // On mount, read the preferred theme from the persistence\n  React.useEffect(() => {\n    const isDark = localStorage.getItem(\"dark\") === \"true\";\n    setDark(isDark);\n  }, [dark]);\n\n  // To toggle between dark and light modes\n  const toggle = () => {\n    const isDark = !dark;\n    localStorage.setItem(\"dark\", JSON.stringify(isDark));\n    setDark(isDark);\n  };\n\n  const theme = dark ? themes.dark : themes.light;\n\n  return (\n    <ThemeContext.Provider value={{ theme, dark, toggle }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport { ThemeProvider, ThemeContext };\n","const Hint = (letters) => {\n  // pass an array of unused letters that are part of the word (letters)\n  return letters[Math.floor(Math.random() * letters.length)];\n};\n\nexport default Hint;\n","import React, { useState } from \"react\";\nimport \"./letter.styles.css\";\n\nconst Letter = ({ letterValue, handleClick, isCorrect }) => {\n  const [clicked, setClicked] = useState(false);\n\n  const handleonClick = () => {\n    setClicked(true);\n    handleClick(letterValue);\n  };\n  let backgroundColor;\n  if (clicked && isCorrect) {\n    backgroundColor = \"green\";\n  } else if (clicked && !isCorrect) {\n    backgroundColor = \"red\";\n  }\n\n  return (\n    <button\n      className=\"letter\"\n      type=\"button\"\n      onClick={handleonClick}\n      style={{ backgroundColor }}\n    >\n      {letterValue}\n    </button>\n  );\n};\n\nexport default Letter;\n","import React from \"react\";\nimport Letter from \"../letter/Letter.component\";\nimport \"./letters.styles.css\";\nimport { alphabets } from \"../../utils/helpers\";\n\nconst Letters = ({ handleClickTop, word }) => {\n  // get 26 alphabets from alphabet function in helpers\n  const letters = alphabets();\n  const handleClick = (letterValue) => {\n    handleClickTop(letterValue);\n  };\n  const lettersList = letters.map((letter) => {\n    const isCorrect = word.includes(letter);\n    return (\n      <Letter\n        letterValue={letter}\n        handleClick={handleClick}\n        isCorrect={isCorrect}\n        key={letter}\n      />\n    );\n  });\n  return (\n    <div className=\"letters\">\n      {/* Get the letters of the english alphabet from the helpers. Pass each alphabet to the letter component with the help of a map function. */}\n      {lettersList}\n    </div>\n  );\n};\n\nexport default Letters;\n","export const checkWinner = (correct, wrong, word) => {\n  // Accept 3 arguments (correct, wrong and word)\n  /* Define condition for win and loop it. */\n  /* Define condition for lose */\n  let status = \"winner\";\n\n  // Check for win\n  word.split(\"\").forEach((letter) => {\n    if (!correct.includes(letter)) {\n      status = \"\";\n    }\n  });\n\n  // Check for lose\n  if (wrong.length === 6) {\n    status = \"loser\";\n  }\n\n  return status;\n};\n\nexport const alphabets = () => {\n  /* Get alphabets of the English language */\n  const alphabet = [\n    \"a\",\n    \"b\",\n    \"c\",\n    \"d\",\n    \"e\",\n    \"f\",\n    \"g\",\n    \"h\",\n    \"i\",\n    \"j\",\n    \"k\",\n    \"l\",\n    \"m\",\n    \"n\",\n    \"o\",\n    \"p\",\n    \"q\",\n    \"r\",\n    \"s\",\n    \"t\",\n    \"u\",\n    \"v\",\n    \"w\",\n    \"x\",\n    \"y\",\n    \"z\",\n  ];\n\n  return alphabet;\n};\n\nexport const getRemainingLetters = (currentWord, correctLetters) => {\n  /* Get remaining letters of the word */\n  const letters = currentWord.split(\"\");\n  const remainingLetters = letters.filter((letter) => {\n    return !correctLetters.includes(letter);\n  });\n  return remainingLetters;\n};\n","import React, { useEffect, useState } from \"react\";\n\nconst Guessing = ({ currentWord, correctLetters }) => {\n  const [letters, setLetters] = useState([]);\n\n  useEffect(() => {\n    [...currentWord].forEach((letter) => {\n      if (correctLetters.includes(letter)) {\n        // eslint-disable-next-line no-shadow\n        setLetters((letters) => [...letters, `${letter} `]);\n      } else {\n        // eslint-disable-next-line no-shadow\n        setLetters((letters) => [...letters, \"_ \"]);\n      }\n    });\n    return () => {\n      setLetters([]);\n    };\n  }, [currentWord, correctLetters]);\n\n  return <div>{letters}</div>;\n};\n\nexport default Guessing;\n","import React from \"react\";\nimport \"./hangmanFigure.styles.css\";\n\nconst HangmanFigure = ({ wrongLetters, stroke }) => {\n  const errors = wrongLetters.length;\n\n  return (\n    <svg\n      height=\"250\"\n      width=\"200\"\n      className=\"figure-container\"\n      style={{ stroke }}\n    >\n      {/* <!-- Rod --> */}\n      <line x1=\"60\" y1=\"20\" x2=\"140\" y2=\"20\" />\n      <line x1=\"140\" y1=\"20\" x2=\"140\" y2=\"50\" />\n      <line x1=\"60\" y1=\"20\" x2=\"60\" y2=\"230\" />\n      <line x1=\"20\" y1=\"230\" x2=\"100\" y2=\"230\" />\n\n      {/* <!-- Head --> */}\n      {errors > 0 && <circle cx=\"140\" cy=\"70\" r=\"20\" />}\n      {/* <!-- Body --> */}\n      {errors > 1 && <line x1=\"140\" y1=\"90\" x2=\"140\" y2=\"150\" />}\n      {/* <!-- Arms --> */}\n      {errors > 2 && <line x1=\"140\" y1=\"120\" x2=\"120\" y2=\"100\" />}\n      {errors > 3 && <line x1=\"140\" y1=\"120\" x2=\"160\" y2=\"100\" />}\n      {/* <!-- Legs --> */}\n      {errors > 4 && <line x1=\"140\" y1=\"150\" x2=\"120\" y2=\"180\" />}\n      {errors > 5 && <line x1=\"140\" y1=\"150\" x2=\"160\" y2=\"180\" />}\n    </svg>\n  );\n};\n\nexport default HangmanFigure;\n","import React, { useEffect } from \"react\";\nimport \"./App.css\";\nimport randomWords from \"random-words\";\nimport { ThemeContext } from \"./context/theme-context\";\nimport Hint from \"./components/hint/hint.component\";\nimport { getRemainingLetters } from \"./utils/helpers\";\nimport Letters from \"./components/letters/Letters.component\";\nimport Guessing from \"./components/guessing/Guessing.component\";\nimport HangmanFigure from \"./components/hangmanFigure/HangmanFigure.component\";\n\nconst App = () => {\n  function getRandomWord() {\n    if (randomWords().length > 8) {\n      return randomWords();\n    }\n    return getRandomWord();\n  }\n  const [currentWord, setCurrentWord] = React.useState(\"\");\n  const { theme, toggle, dark } = React.useContext(ThemeContext);\n  const [correctLetters, setCorrectLetters] = React.useState(\"\");\n  const [wrongLetters, setWrongLetters] = React.useState(\"\");\n  const [remainingLetters, setRemainingLetters] = React.useState([]);\n  const [hint, setHint] = React.useState(\"\");\n  const [showHint, setShowHint] = React.useState(false);\n  const [showHintButton, setShowHintButton] = React.useState(true);\n  const chances = wrongLetters.length < 6 ? 6 - wrongLetters.length : 0;\n\n  const handleClickTop = (letter) => {\n    if (currentWord.includes(letter) === true) {\n      setCorrectLetters(correctLetters + letter);\n    } else if (!wrongLetters.includes(letter)) {\n      setWrongLetters(wrongLetters + letter);\n    }\n  };\n  useEffect(() => {\n    const randomWord = getRandomWord();\n    setCurrentWord(randomWord);\n  }, []);\n  useEffect(() => {\n    setRemainingLetters(getRemainingLetters(currentWord, correctLetters));\n  }, [correctLetters, currentWord]);\n  return (\n    <div\n      className=\"App\"\n      style={{\n        backgroundColor: theme.backgroundColor,\n        color: theme.color,\n        height: \"100vh\",\n      }}\n    >\n      <button\n        type=\"button\"\n        onClick={toggle}\n        style={{\n          backgroundColor: theme.backgroundColor,\n          color: theme.color,\n          outline: \"none\",\n          boxShadow: `4px 4px 4px 4px ${theme.color}`,\n          marginTop: \"20px\",\n        }}\n        data-testid=\"toggle-theme-btn\"\n      >\n        Toggle to {!dark ? \"Dark\" : \"Light\"} theme\n      </button>\n      <h1> Hangman</h1> <br />\n      {showHint && <h3 className=\"hint\">{hint.toUpperCase()}</h3>}\n      <HangmanFigure stroke={theme.color} wrongLetters={wrongLetters} />\n      {chances !== 0 && remainingLetters.length !== 0 && (\n        <>\n          {\" \"}\n          <Guessing\n            currentWord={currentWord}\n            remainingLetters={remainingLetters}\n            correctLetters={correctLetters}\n          />\n          <Letters handleClickTop={handleClickTop} word={currentWord} />\n          <div>Chances left: {chances}</div>\n        </>\n      )}\n      {/* Maintain a state for correct letters, wrong letters, remaining letters. For this, the Letters component and the Hangman component as well as the Guessing component should be imported.\n      Wrong letters is passed as a prop to HangmanFigure Component, correct letters passed to Guessing. */}{\" \"}\n      {wrongLetters.length === 5 && showHintButton && (\n        <button\n          type=\"button\"\n          style={{\n            backgroundColor: theme.backgroundColor,\n            color: theme.color,\n            outline: \"none\",\n            boxShadow: `4px 4px 4px 4px ${theme.color}`,\n            marginTop: \"20px\",\n          }}\n          onClick={() => {\n            setHint(Hint(remainingLetters));\n            setShowHint(true);\n            setShowHintButton(false);\n          }}\n        >\n          Hint\n        </button>\n      )}\n      {chances === 0 ||\n        (remainingLetters.length === 0 && (\n          <>\n            <div>\n              {remainingLetters.length === 0\n                ? `You guessed it correctly, the word was ${currentWord}`\n                : `Correct Word was: ${currentWord}`}\n            </div>\n            <button\n              type=\"button\"\n              style={{\n                backgroundColor: theme.backgroundColor,\n                color: theme.color,\n                outline: \"none\",\n                marginTop: \"20px\",\n              }}\n              onClick={() => {\n                setCurrentWord(getRandomWord());\n                setCorrectLetters(\"\");\n                setWrongLetters(\"\");\n                setRemainingLetters([]);\n                setShowHint(false);\n                setShowHintButton(true);\n              }}\n            >\n              Play Again!\n            </button>\n          </>\n        ))}\n    </div>\n  );\n};\n\nexport default App;\n","const reportWebVitals = (onPerfEntry) => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import(\"web-vitals\").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\nimport { ThemeProvider } from \"./context/theme-context\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <ThemeProvider>\n      <App />\n    </ThemeProvider>\n  </React.StrictMode>,\n  document.getElementById(\"root\")\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}