Merge branch '99-typing-gameをspaに対応させる' into typing-game

ShotaTanemura · Aug 2, 2024 · 0af6dd3 · 0af6dd3
2 parents 2eade2f + 5bbf584
commit 0af6dd3
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 58 deletions.
diff --git a/typing-game/index.html b/typing-game/index.html
@@ -6,31 +6,12 @@
     <title>タイピングゲーム</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
-  <div id="start">
-    <button id="startButton" class="button">スタート</button>
-  </div>
-  <div id="game" class="hidden">
-    <div id="timer">10</div>
-    <div id="word"></div>
-    <div id="inputDisplay"></div>
-    <!-- 入力された文字を表示するための要素 -->
-    <div id="score">0</div>
-    <canvas id="timerCanvas" width="200" height="200"></canvas>
-  </div>
-  <div id="result" class="hidden">
-    <div id="finalScore"></div>
-    <button id="restartButton" class="button">リスタート</button>
-  </div>
-  <div id="playersImage">
-    <img
-      src="img/person-use-notePc.png"
-      alt="Image of player"
-      class="player1"
-    />
-  </div>
-  <script src="scripts/gameController.js" type="module"></script>
-  <script src="scripts/loadWords.js" type="module"></script>
-  <script src="scripts/uiController.js" type="module"></script>
-  <script src="scripts/inputHandler.js" type="module"></script>
-  <script src="scripts/main.js" type="module"></script>
-</html>
+  <body>
+    <div id="app"></div>
+    <script src="scripts/gameController.js" type="module"></script>
+    <script src="scripts/loadWords.js" type="module"></script>
+    <script src="scripts/uiController.js" type="module"></script>
+    <script src="scripts/inputHandler.js" type="module"></script>
+    <script src="scripts/main.js" type="module"></script>
+  </body>
+</html>
diff --git a/typing-game/scripts/gameController.js b/typing-game/scripts/gameController.js
@@ -10,8 +10,7 @@ const gameController = (function () {
   let startTime;
   let maxTime = 15; // 初期タイマー値
   let penaltyTime; // ペナルティ時間を追跡するための変数
-  const canvas = document.getElementById("timerCanvas");
-  const ctx = canvas.getContext("2d");
+  let canvas, ctx;
   let words = [];
 
   async function initializeGame() {
@@ -26,7 +25,13 @@ const gameController = (function () {
     }
   }
 
+  function initializeCanvas() {
+    canvas = document.getElementById("timerCanvas");
+    ctx = canvas.getContext("2d");
+  }
+
   function startGame() {
+    initializeCanvas();
     score = 0;
     timeLeft = maxTime;
     penaltyTime = 0; // ペナルティ時間をリセット
@@ -124,4 +129,4 @@ const gameController = (function () {
   };
 })();
 
-export { gameController };
+export { gameController };
diff --git a/typing-game/scripts/inputHandler.js b/typing-game/scripts/inputHandler.js
@@ -1,16 +1,24 @@
 import { gameController } from "./gameController.js";
 
 const inputHandler = (function() {
-
+    
     function handleInput(value) {
         const currentWord = gameController.getCurrentWord();
         if (value === currentWord) {
             gameController.handleCorrectInput();
         }
     }
 
+    function resetInput() {
+        const inputDisplay = document.getElementById('inputDisplay');
+        if (inputDisplay) {
+            inputDisplay.textContent = '';
+        }
+    }
+
     return {
         handleInput,
+        resetInput
     };
 })();
 

diff --git a/typing-game/scripts/loadWords.js b/typing-game/scripts/loadWords.js
@@ -9,8 +9,9 @@ export async function loadWords() {
     return [];
   }
 }
+
 // CSVをパースする関数
 function parseCSV(data) {
   const rows = data.split("\n");
   return rows.slice(1).map((row) => row.trim()); // ヘッダーを除いてトリムされた単語を返す
-}
+}
diff --git a/typing-game/scripts/main.js b/typing-game/scripts/main.js
@@ -1,6 +1,8 @@
 import { gameController } from './gameController.js';
+import { uiController } from './uiController.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
+    uiController.initializeUI();
     const gameInitialized = await gameController.initializeGame();
     if (gameInitialized) {
         document.getElementById('startButton').addEventListener('click', () => {
@@ -9,4 +11,4 @@ document.addEventListener('DOMContentLoaded', async () => {
     } else {
         console.error('Failed to initialize game.');
     }
-});
+});
diff --git a/typing-game/scripts/uiController.js b/typing-game/scripts/uiController.js
@@ -2,19 +2,59 @@ import { gameController } from './gameController.js';
 import { inputHandler } from './inputHandler.js';
 
 const uiController = (function() {
-    const startButton = document.getElementById("startButton");
-    const restartButton = document.getElementById("restartButton");
-    const startDiv = document.getElementById("start");
-    const gameDiv = document.getElementById("game");
-    const resultDiv = document.getElementById("result");
-    const wordDiv = document.getElementById("word");
-    const timerDiv = document.getElementById("timer");
-    const scoreDiv = document.getElementById("score");
-    const finalScoreDiv = document.getElementById("finalScore");
+    let startButton, restartButton, startDiv, gameDiv, resultDiv, wordDiv, timerDiv, scoreDiv, finalScoreDiv;
 	const amount = 2; // ぺナルティ時間の増加量
 
     let inputLength;
 
+    function initializeUI() {
+        const app = document.getElementById('app');
+
+        app.innerHTML = `
+            <div id="start">
+                <button id="startButton" class="button">スタート</button>
+            </div>
+            <div id="game" class="hidden">
+                <div id="timer">10</div>
+                <div id="word"></div>
+                <div id="inputDisplay"></div>
+                <div id="score">0</div>
+                <canvas id="timerCanvas" width="200" height="200"></canvas>
+            </div>
+            <div id="result" class="hidden">
+                <div id="finalScore"></div>
+                <button id="restartButton" class="button">リスタート</button>
+            </div>
+            <div id="playersImage">
+                <img src="img/person-use-notePc.png" alt="Image of player" class="player1" />
+            </div>
+        `;
+
+        startButton = document.getElementById("startButton");
+        restartButton = document.getElementById("restartButton");
+        startDiv = document.getElementById("start");
+        gameDiv = document.getElementById("game");
+        resultDiv = document.getElementById("result");
+        wordDiv = document.getElementById("word");
+        timerDiv = document.getElementById("timer");
+        scoreDiv = document.getElementById("score");
+        finalScoreDiv = document.getElementById("finalScore");
+
+        startButton.addEventListener("click", () => {
+            startDiv.classList.add("hidden");
+            gameDiv.classList.remove("hidden");
+            enableTextInput();
+            gameController.startGame();
+            inputLength = 0;
+        });
+
+        restartButton.addEventListener("click", () => {
+            resultDiv.classList.add("hidden");
+            startDiv.classList.remove("hidden");
+            disableTextInput();
+        });
+    }
+
     function enableTextInput() {
         document.addEventListener('keydown', handleKeyDown);
     }
@@ -40,22 +80,8 @@ const uiController = (function() {
         }
     }
 
-    startButton.addEventListener("click", () => {
-        startDiv.classList.add("hidden");
-        gameDiv.classList.remove("hidden");
-        enableTextInput();
-        gameController.startGame();
-        inputLength = 0;
-    });
-
-    restartButton.addEventListener("click", () => {
-        resultDiv.classList.add("hidden");
-        startDiv.classList.remove("hidden");
-        disableTextInput();
-    });
-
     function displayWord(word) {
-        wordDiv.innerHTML = ''; // 前の単語をクリア
+        wordDiv.innerHTML = '';
         for (let char of word) {
             const span = document.createElement('span');
             span.textContent = char;
@@ -81,6 +107,7 @@ const uiController = (function() {
     }
 
     return {
+        initializeUI,
         displayWord,
         updateTimer,
         updateScore,