feat: #3 作成済Wordleをデプロイ

Suke-H · Feb 10, 2024 · 861ea25 · 861ea25
1 parent 4e31ad4
commit 861ea25
Show file tree

Hide file tree

Showing 8 changed files with 394 additions and 82 deletions.
diff --git a/index.html b/index.html
@@ -1,10 +1,9 @@
-<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/maton.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>WORDLE(demo) | kakutory</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/maton.png b/public/maton.png
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,35 +1,47 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
+import { useState } from 'react';
+
+import { Answer } from './components/answer';
+import { Keyboard } from './components/keyboard';
+
+export const App = (): JSX.Element =>{
+    // 6*5の配列の初期化
+    const initAnswerList: string[][] = new Array(6);
+    for (let i=0; i<6; i++){
+        initAnswerList[i] = new Array(5).fill("");
+    }
+
+    // 回答一覧
+    // キーボードの文字入力により更新
+    const [ answerList, setAnswerList ] = useState<string[][]>(initAnswerList);
+
+    // 回答の判定を行うフラグ
+    // キーボードのEnter入力により更新
+    const [ judge, setJudge ] = useState<boolean>(false);
 
-export default App
+    // 現在の状態
+    // playing: ゲーム中
+    // success: 成功
+    // fail: 失敗
+    const [ gameStatus, setGameStatus ] = useState<string>("playing");
+
+    // 正解単語
+    const [ answerWord ] = useState<string>("MARIO");
+
+    return (
+        <div className="App">
+
+            <Answer 
+                answerList={answerList}
+                judge={judge}
+                setJudge={setJudge}
+                answerWord={answerWord}
+                gameStatus={gameStatus}
+                setGameStatus={setGameStatus}
+            />
+            <Keyboard 
+                setAnswerList={setAnswerList}
+                setJudge={setJudge}
+            />
+        </div>
+    );
+}
diff --git a/src/components/answer.tsx b/src/components/answer.tsx
@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+
+type Props = {
+    answerList: string[][];
+    judge: boolean;
+    setJudge: React.Dispatch<React.SetStateAction<boolean>>;
+    answerWord: string;
+    gameStatus: string;
+    setGameStatus: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const Answer = (props: Props) => {
+
+    // 回答のCSSスタイル
+    const answerStyle: React.CSSProperties = {
+        borderSpacing: '6px 6px',
+        display: 'flex',
+        justifyContent: 'center',
+        marginBottom: '40px',
+        marginTop: '100px',
+    };
+
+    /* td要素のCSSスタイル */
+    // Whiteスタイル
+    const whiteTdStyle: React.CSSProperties = {
+        border: '2px solid rgb(217, 217, 217)',
+        width: '60px',
+        height: '70px',
+
+        fontSize: '30px',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        lineHeight: '60px',
+
+        // 文字色
+        color: 'Black',  // 背景色Whiteの時のみ
+
+        // 背景色
+        backgroundColor: 'White',
+
+    };
+
+    // Blackスタイル
+    const blackTdStyle = {...whiteTdStyle};
+    blackTdStyle['color'] = 'White';
+    blackTdStyle['backgroundColor'] = '3a3a3c';
+
+    // Yellowスタイル
+    const yellowTdStyle = {...whiteTdStyle};
+    yellowTdStyle['color'] = 'White';
+    yellowTdStyle['backgroundColor'] = 'b59f3b';
+
+    // Greenスタイル
+    const greenTdStyle = {...whiteTdStyle};
+    greenTdStyle['color'] = 'White';
+    greenTdStyle['backgroundColor'] = '538d4e';
+
+    // ラウンド
+    const [ round, setRound ] = useState<number>(0);
+
+    // リストの初期化
+    const initMatchList: string[][] = new Array(6);
+    for (let i=0; i<6; i++){
+        initMatchList[i] = new Array(5).fill("White");
+    }
+
+    // 回答欄のCSSリスト
+    // White: 判定していない
+    // Black: 文字も位置も無一致
+    // Yellow: 文字のみ一致
+    // Green: 文字も位置も一致
+    // const [ matchList, setMatchList ] = useState<string[][]>(initMatchList);
+
+    // リストの初期化
+    const initMatchStyleList: React.CSSProperties[][] = new Array(6);
+    for (let i=0; i<6; i++){
+        initMatchStyleList[i] = new Array(5).fill(whiteTdStyle);
+    }
+
+    // 回答欄のCSSリスト
+    // White: 判定していない
+    // Black: 文字も位置も無一致
+    // Yellow: 文字のみ一致
+    // Green: 文字も位置も一致
+    const [ matchStyleList, setMatchStyleList ] = useState<React.CSSProperties[][]>(initMatchStyleList);
+
+    // 単語一致判定
+    const wordMatchJudgement = () => {
+        // 一度ディープコピーする
+        const tmpMatchStyleList = Array.from(matchStyleList);
+
+        // 1文字ずつ判定
+        for (let i=0; i<5; i++){
+
+            // 文字が一致
+            if (props.answerWord.indexOf(props.answerList[round-1][i]) !== -1){
+
+                // 位置も一致(Green)
+                if (props.answerList[round-1][i] === props.answerWord[i]){
+                    tmpMatchStyleList[round-1][i] = greenTdStyle;
+                }
+
+                // 文字だけ一致(Yellow)
+                else {
+                    tmpMatchStyleList[round-1][i] = yellowTdStyle;
+                }
+            }
+
+            // 文字も位置も一致していない(Black)
+            else {
+                tmpMatchStyleList[round-1][i] = blackTdStyle;
+            }
+        }
+
+        console.log(tmpMatchStyleList[round-1]);
+        return tmpMatchStyleList;
+    }
+
+    // クリア判定
+    const clearJudgement = () => {
+
+        // ワードを抽出
+        const wordList = [];
+        for (let j = 0; j < 5; j++) {
+            wordList.push(props.answerList[round-1][j]);
+        }
+        const submitWord = wordList.join("");
+        console.log(submitWord);
+
+        if (submitWord == props.answerWord){
+            alert("clear!!");
+            return "success";
+        }
+
+        else if (round == 6) {
+            alert("fail...");
+            return "fail";
+        }
+
+        return "playing";
+    }
+
+
+    // Appコンポーネントのjudgeが変化した時に呼ばれる
+    useEffect(() => {
+
+        // Enterを押したら
+        if (props.judge === true){
+            // 一度フラグをおろす
+            props.setJudge(false);
+        }
+
+        // フラグをおろしてからここへ
+        else {
+            // コンポーネント初期化時にここを通る
+            if (round == 0){
+                setRound(round+1); // ラウンドを1に
+                return;
+            }
+
+            // ゲーム継続中なら
+            if (props.gameStatus == "playing"){
+                // 単語一致判定
+                const tmpMatchStyleList = wordMatchJudgement();
+
+                // クリア判定
+                clearJudgement();
+
+                // スタイル更新
+                setMatchStyleList(tmpMatchStyleList);
+                // ラウンド更新
+                setRound(round+1);
+
+                console.log(tmpMatchStyleList[0]);
+            }
+        }
+
+    }, [props.judge]);
+
+
+    return (
+        // mapにより回答table作成
+        <div className="Answer">
+
+            <table id="answer" style={answerStyle}>
+                <tbody>
+                    {props.answerList.map((answer, i) => (
+                        <tr key={i}>
+                            {answer.map((letter, j) => (
+                                <td key={j} style={matchStyleList[i][j]}>{letter}</td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+
+        </div>            
+    );
+}