Merge pull request #22 from Suke-H/keyboard-color-code

キーボードの色分け
Suke-H · Mar 9, 2024 · 76473d0 · 76473d0
2 parents e9a3b9a + 69d036c
commit 76473d0
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,8 @@ import { Keyboard } from "./components/keyboard";
 import { Notes } from "./components/notes";
 import { ShareResultButton } from "./components/ShareResultButton";
 
+import { AlphabetMatch } from "./interfaces/AlphabetMatch";
+
 import { pushedEnterProcess } from "./game_logics/pushedEnterProcess";
 import { getTodaysWord } from "./utils/getTodaysWord";
 import { makeGameResultText } from "./utils/makeGameResultText";
@@ -19,6 +21,17 @@ export const App = (): JSX.Element => {
 	for (let i = 0; i < 6; i++) {
 		initMatchList[i] = new Array(5).fill("White");
 	}
+	// 全アルファベットを'NoUse'で初期化する関数
+	const initializeAlphabetMatch = (): AlphabetMatch => {
+		const result: AlphabetMatch = {};
+		for (let charCode = 65; charCode <= 90; charCode++) {
+		const letter = String.fromCharCode(charCode);
+		result[letter] = 'NoUse';
+		}
+		return result;
+	};
+	// アルファベットの判定リストを初期化
+	const initAlphabetMatch = initializeAlphabetMatch();
 
 	/* State */
 	const [answerList, setAnswerList] = useState<string[][]>(initAnswerList); // 回答欄の文字列
@@ -28,6 +41,7 @@ export const App = (): JSX.Element => {
 	const [todaysNo, setTodaysNo] = useState<number>(0); // 今日が何回目か
 	const [round, setRound] = useState<number>(0); // ラウンド(現在の行番号+1)
 	const [columncnt, setColumncnt] = useState(0); // 現在の列番号
+	const [alphabetMatch, setAlphabetMatch] = useState<AlphabetMatch>(initAlphabetMatch); // アルファベットの判定リスト
 
 	// 初回レンダリング時
 	useEffect(() => {
@@ -40,7 +54,7 @@ export const App = (): JSX.Element => {
 	useEffect(() => {
 		if (!judge) return;
 
-		pushedEnterProcess(correctAnswer, answerList, matchList,round,setMatchList)
+		pushedEnterProcess(correctAnswer, answerList, matchList, round, setMatchList, setAlphabetMatch)
 			.then((isValid) => {
 			/* 単語が妥当でない場合 */
                 if (!isValid) {
@@ -80,6 +94,7 @@ export const App = (): JSX.Element => {
 			answerList={answerList} 
 			setAnswerList={setAnswerList} 
 			setJudge={setJudge} 
+			alphabetMatch={alphabetMatch}
 		/>
 		<ShareResultButton 
 			resultText={makeGameResultText(matchList, todaysNo)}

diff --git a/src/components/keyboard.tsx b/src/components/keyboard.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-// import axios from "axios";
+import { AlphabetMatch } from "../interfaces/AlphabetMatch";
 
 type appProps = {
 	round: number;
@@ -9,6 +9,7 @@ type appProps = {
 	answerList: string[][];
 	setAnswerList: React.Dispatch<React.SetStateAction<string[][]>>;
 	setJudge: React.Dispatch<React.SetStateAction<boolean>>;
+	alphabetMatch: AlphabetMatch;
 };
 
 type Props = {
@@ -20,8 +21,11 @@ type Props = {
 	setAnswerList: React.Dispatch<React.SetStateAction<string[][]>>;
 	keyLayout: string[];
 	setJudge: React.Dispatch<React.SetStateAction<boolean>>;
+	alphabetMatch: AlphabetMatch;
 };
 
+
+// アルファベットの判定リストを表す型をAlphabetMatchに変更
 const KeyboardRow = (props: Props) => {
 	const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 	const updateDimensions = () => {
@@ -91,7 +95,7 @@ const KeyboardRow = (props: Props) => {
 
 	// ボタンのCSSスタイル
 	const buttonStyle: React.CSSProperties = {
-		backgroundColor: "rgb(217, 217, 217)",
+		backgroundColor: "d9d9d9",
 		borderRadius: "4px",
 		border: "none",
 		width: windowWidth < 600 ? "30px" : "45px",
@@ -103,10 +107,36 @@ const KeyboardRow = (props: Props) => {
 
 	// EnterとDeleteのCSSスタイル
 	// buttonStyleとの差分のみ記述
-		const enterAndDeleteButtonStyle: React.CSSProperties = {
+	const enterAndDeleteButtonStyle: React.CSSProperties = {
+		...buttonStyle,
+		width: windowWidth < 600 ? "50px" : "70px",
+	};
+
+	// AlphabetMatchの結果に基づくスタイル
+	const matchStyles: Record<string, React.CSSProperties> = {
+		NoUse: {}, // NoUseはデフォルトスタイルを使用
+		Green: { backgroundColor: "538d4e" },
+		Yellow: { backgroundColor: "b59f3b" },
+		Black: { backgroundColor: "3a3a3c"},
+	};
+
+	// スタイルを決定する関数
+	const getButtonStyle = (key: string, matchResult: Record<string, string>) => {
+		// EnterとDelete用のスタイル
+		if (key === "Enter" || key === "Delete") {
+		return {
 			...buttonStyle,
-			width: windowWidth < 600 ? "50px" : "70px",
+			...enterAndDeleteButtonStyle,
+			...matchStyles[matchResult[key]], // matchResultからスタイルを適用
 		};
+		}
+
+		// 通常キー用のスタイル
+		return {
+		...buttonStyle,
+		...matchStyles[matchResult[key]], // matchResultからスタイルを適用
+		};
+	};
 
 	return (
 		// mapによりキーボードtable作成
@@ -117,7 +147,7 @@ const KeyboardRow = (props: Props) => {
 				<td id="alphabet-key" key={i}>
 				{/* EnterとDeleteのときのみstyleを変更 */}
 				<button value={key} onClick={handleClick} 
-							style={key == "Enter" || key == "Delete" ? enterAndDeleteButtonStyle : buttonStyle}>
+							style={getButtonStyle(key, props.alphabetMatch)}>
 					{key}
 				</button>
 				</td>
@@ -164,6 +194,8 @@ const KeyboardRow = (props: Props) => {
 		"Delete",
 	];
 
+
+
 	return (
 		<div className="Keyboard">
 		<KeyboardRow
@@ -175,6 +207,7 @@ const KeyboardRow = (props: Props) => {
 			setAnswerList={props.setAnswerList}
 			keyLayout={upKeyLayout}
 			setJudge={props.setJudge}
+			alphabetMatch={props.alphabetMatch}
 		/>
 		<KeyboardRow
 			round={props.round}
@@ -185,6 +218,7 @@ const KeyboardRow = (props: Props) => {
 			setAnswerList={props.setAnswerList}
 			keyLayout={middleKeyLayout}
 			setJudge={props.setJudge}
+			alphabetMatch={props.alphabetMatch}
 		/>
 		<KeyboardRow
 			round={props.round}
@@ -195,6 +229,7 @@ const KeyboardRow = (props: Props) => {
 			setAnswerList={props.setAnswerList}
 			keyLayout={downKeyLayout}
 			setJudge={props.setJudge}
+			alphabetMatch={props.alphabetMatch}
 		/>
 		</div>
 	);

diff --git a/src/game_logics/pushedEnterProcess.ts b/src/game_logics/pushedEnterProcess.ts
@@ -2,12 +2,15 @@ import { checkWordValidity } from "./checkWordValidity";
 import { checkWordMatch } from "./checkWordMatch";
 import { checkClear } from "./checkClear";
 
+import { AlphabetMatch } from "../interfaces/AlphabetMatch";
+
 export const pushedEnterProcess = async ( 
 		correctAnswer: string,
 		answerList: string[][],
 		matchList: string[][],
 		round: number,
 		setMatchList: React.Dispatch<React.SetStateAction<string[][]>>,
+		setAlphabetMatch: React.Dispatch<React.SetStateAction<AlphabetMatch>>
 	) : Promise<boolean> => {
 
 	// 単語の妥当性判定
@@ -18,9 +21,18 @@ export const pushedEnterProcess = async (
 	const tmpMatchList = checkWordMatch(correctAnswer, answerList, matchList, round);
 	// クリア判定
 	checkClear(correctAnswer, answerList, round);
-
 	// スタイル更新
 	setMatchList(tmpMatchList);
 
+	// アルファベットの判定リスト更新
+	const newMatch: AlphabetMatch = {};
+	for (let i = 0; i < correctAnswer.length; i++) {
+		newMatch[answerList[round - 1][i]] = tmpMatchList[round - 1][i] as "Green" | "Yellow" | "Black";
+	}
+	setAlphabetMatch((prevMatch: AlphabetMatch) => ({
+		...prevMatch,
+		...newMatch
+	}));
+
 	return true;
 }
diff --git a/src/interfaces/AlphabetMatch.ts b/src/interfaces/AlphabetMatch.ts
@@ -0,0 +1,7 @@
+// アルファベットの判定を表す型を定義
+type LetterJudgement = 'Green' | 'Yellow' | 'Black' | 'NoUse';
+
+export interface AlphabetMatch {
+    [key: string]: LetterJudgement;
+}
+