Improve code readibility

jarjan · jarjan · commit fea3113e543d · 2022-02-06T00:49:17.000+01:00
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "nano-staged": "0.5.0",
-    "preact-cli": "3.3.3",
+    "preact-cli": "3.3.4",
     "prettier": "2.5.1",
     "simple-git-hooks": "2.7.0",
     "sirv-cli": "2.0.2"
diff --git a/src/components/Board.js b/src/components/Board.js
@@ -1,6 +1,9 @@
 import cls from "classnames";
+import { useContext } from "preact/hooks";
 
-const Tile = ({ value, isAnswered, isCorrect, isExact }) => {
+import { GameContext } from "../game/provider";
+
+export const Tile = ({ value, isAnswered, isCorrect, isExact }) => {
   return (
     <span
       class={cls("board__tile", {
@@ -15,7 +18,9 @@ const Tile = ({ value, isAnswered, isCorrect, isExact }) => {
   );
 };
 
-const Board = ({ answers, guess, chance, tips }) => {
+export const Board = () => {
+  const { answers, guess, chance, tips } = useContext(GameContext);
+
   return (
     <div class="board">
       {answers.map((answer, i) => {
@@ -57,5 +62,3 @@ const Board = ({ answers, guess, chance, tips }) => {
     </div>
   );
 };
-
-export default Board;
diff --git a/src/components/Game.js b/src/components/Game.js
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,15 @@
+import { useContext } from "preact/hooks";
+
+import { GameContext } from "../game/provider";
+
+export const Header = () => {
+  const { gameover, untilNextWord } = useContext(GameContext);
+
+  return (
+    <div class="header">
+      <h1>Қазақша Wordle!</h1>
+      {gameover && <small>Келесі сөзге дейін {untilNextWord}</small>}
+      <hr />
+    </div>
+  );
+};
diff --git a/src/components/Keyboard.js b/src/components/Keyboard.js
@@ -1,7 +1,18 @@
 import cls from "classnames";
-import { useCallback } from "preact/hooks";
+import { useCallback, useContext } from "preact/hooks";
 
-const Key = ({ value, label, onClick, isAnswered, isCorrect, isExact }) => (
+import keys from "../constants/keys.json";
+
+import { GameContext } from "../game/provider";
+
+export const Key = ({
+  value,
+  label,
+  onClick,
+  isAnswered,
+  isCorrect,
+  isExact,
+}) => (
   <button
     id={value}
     class={cls("keyboard__key", {
@@ -17,7 +28,10 @@ const Key = ({ value, label, onClick, isAnswered, isCorrect, isExact }) => (
   </button>
 );
 
-const Keyboard = ({ onLetter, onRemove, onEnter, keys, keyTips }) => {
+export const Keyboard = () => {
+  const { gameover, keyTips, onLetter, onRemove, onEnter } =
+    useContext(GameContext);
+
   const handleClick = useCallback(
     (e) => {
       switch (e.target.id) {
@@ -34,6 +48,10 @@ const Keyboard = ({ onLetter, onRemove, onEnter, keys, keyTips }) => {
     [onEnter, onRemove, onLetter]
   );
 
+  if (gameover) {
+    return null;
+  }
+
   return (
     <div class="keyboard">
       {keys.map((row, index) => (
@@ -54,5 +72,3 @@ const Keyboard = ({ onLetter, onRemove, onEnter, keys, keyTips }) => {
     </div>
   );
 };
-
-export default Keyboard;
diff --git a/src/components/Toast.js b/src/components/Toast.js
@@ -1,29 +1,12 @@
 import cls from "classnames";
-import { createContext } from "preact";
-import { useState } from "preact/hooks";
+import { useContext } from "preact/hooks";
 
-export const ToastContext = createContext({ setToast: () => {} });
+import { GameContext } from "../game/provider";
 
-const Toast = ({ children }) => {
-  const [showToast, setShowToast] = useState(false);
-  const [toastMessage, setToastMessage] = useState("");
-
-  const setToast = (message) => {
-    setShowToast(true);
-    setToastMessage(message);
-
-    setTimeout(() => {
-      setShowToast(false);
-      setToastMessage("");
-    }, 3000);
-  };
+export const Toast = () => {
+  const { showToast, toastMessage } = useContext(GameContext);
 
   return (
-    <ToastContext.Provider value={{ setToast }}>
-      <div className={cls("toast", { show: showToast })}>{toastMessage}</div>
-      {children}
-    </ToastContext.Provider>
+    <div className={cls("toast", { show: showToast })}>{toastMessage}</div>
   );
 };
-
-export default Toast;
diff --git a/src/constants/keys.json b/src/constants/keys.json
diff --git a/src/constants/words.json b/src/constants/words.json
diff --git a/src/game/hooks.js b/src/game/hooks.js
@@ -1,8 +1,6 @@
-import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
 
-import words from "./words.json";
-
-import { ToastContext } from "./components/Toast";
+import words from "../constants/words.json";
 
 export const timestamp = 1642628391000;
 export const todayWord = words[Math.floor((Date.now() - timestamp) / 86400000)];
@@ -14,8 +12,25 @@ const initialTips = [[], [], [], [], [], []];
 const initialChance = initialAnswers.findIndex((answer) => answer === "") || 0;
 const initialGameover = window.localStorage.getItem("wordle") === todayWord;
 
+const useToast = () => {
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+
+  const setToast = (message) => {
+    setShowToast(true);
+    setToastMessage(message);
+
+    setTimeout(() => {
+      setShowToast(false);
+    }, 3000);
+  };
+
+  return { showToast, toastMessage, setToast };
+};
+
 export const useGame = () => {
-  const { setToast } = useContext(ToastContext);
+  const { showToast, toastMessage, setToast } = useToast();
+
   const [answers, setAnswers] = useState(initialAnswers);
   const [tips, setTips] = useState(initialTips);
   const [keyTips, setKeyTips] = useState({});
@@ -72,27 +87,27 @@ export const useGame = () => {
     }
   }, [gameover]);
 
-  const handleGameover = () => {
+  const onGameover = () => {
     setGameover(true);
     window.localStorage.setItem("wordle", todayWord);
   };
 
-  const handleLetter = (letter) => {
+  const onLetter = (letter) => {
     if (guess.length < 5) {
       setGuess(guess + letter);
     }
   };
 
-  const handleRemove = () => {
+  const onRemove = () => {
     if (guess.length > 0) {
       setGuess(guess.slice(0, -1));
     }
   };
 
-  const handleEnter = () => {
+  const onEnter = () => {
     if (!gameover) {
       if (guess === todayWord) {
-        handleGameover();
+        onGameover();
         setToast("Жарайсын! Кешірек келсең жаңа сөз пайда болады");
       }
 
@@ -114,21 +129,25 @@ export const useGame = () => {
       }
     }
     if (chance === 5) {
-      handleGameover();
+      onGameover();
       setToast("Келесі рет сәті түсер");
     }
   };
 
   return {
+    showToast,
+    toastMessage,
+    setToast,
+
     answers,
     guess,
     chance,
     gameover,
     untilNextWord,
     tips,
     keyTips,
-    handleLetter,
-    handleRemove,
-    handleEnter,
+    onLetter,
+    onRemove,
+    onEnter,
   };
 };
diff --git a/src/game/provider.js b/src/game/provider.js
@@ -0,0 +1,60 @@
+import { createContext } from "preact";
+
+import { useGame } from "./hooks";
+
+export const GameContext = createContext({
+  setToast: () => {},
+  showToast: false,
+  toastMessage: "",
+
+  answers: [],
+  guess: "",
+  chance: 0,
+  gameover: false,
+  untilNextWord: "",
+  tips: [],
+  keyTips: {},
+  onLetter: () => {},
+  onRemove: () => {},
+  onEnter: () => {},
+});
+
+export const GameProvider = ({ children }) => {
+  const {
+    setToast,
+    showToast,
+    toastMessage,
+    answers,
+    guess,
+    chance,
+    gameover,
+    untilNextWord,
+    tips,
+    keyTips,
+    onLetter,
+    onRemove,
+    onEnter,
+  } = useGame();
+
+  return (
+    <GameContext.Provider
+      value={{
+        setToast,
+        showToast,
+        toastMessage,
+        answers,
+        guess,
+        chance,
+        gameover,
+        untilNextWord,
+        tips,
+        keyTips,
+        onLetter,
+        onRemove,
+        onEnter,
+      }}
+    >
+      {children}
+    </GameContext.Provider>
+  );
+};
diff --git a/src/index.js b/src/index.js
@@ -1,14 +1,21 @@
 import "./style";
 
-import Game from "./components/Game";
-import Toast from "./components/Toast";
+import { GameProvider } from "./game/provider";
+
+import { Toast } from "./components/Toast";
+import { Board } from "./components/Board";
+import { Keyboard } from "./components/Keyboard";
+import { Header } from "./components/Header";
 
 export default function App() {
   return (
-    <div class="wordle">
-      <Toast>
-        <Game />
-      </Toast>
-    </div>
+    <GameProvider>
+      <div class="wordle">
+        <Toast />
+        <Header />
+        <Board />
+        <Keyboard />
+      </div>
+    </GameProvider>
   );
 }
diff --git a/src/template.html b/src/template.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		<meta name="mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-capable" content="yes">
-		<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
+		<link rel="apple-touch-icon" href="/assets/icon.png">
 		<% preact.headEnd %>
 	</head>
 	<body>
diff --git a/yarn.lock b/yarn.lock
