Merge split-genre-component Branch

README.md

@@ -1,6 +1,6 @@
 # タイピングゲーム
 
-**Version 1.3.2 リリース**
+**Version 1.3.3 リリース**
 
 ## 実装済機能
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "typing-game",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "scripts": {
     "dev:vite": "vite",
     "dev:routify": "routify",

src/lib/game.svelte

@@ -6,7 +6,7 @@
         hiragana: string;
     };
 
-    export type Status = "prepare" | "run" | "finish";
+    export type Status = "start" | "run" | "finish";
 
     function generateRandomInt(max: number): number {
         return Math.floor(Math.random() * max);

src/pages/game/[genre].svelte

@@ -1,83 +1,41 @@
 <script lang="ts">
     import { onMount } from "svelte";
+    import { generateWords } from "../../lib/game.svelte";
     import type { Word, Status } from "../../lib/game.svelte";
-    import { generateWords, checkKey } from "../../lib/game.svelte";
     import KeyBoard from "../../components/KeyBoard.svelte";
+    import View1 from "./_view1.svelte";
+    import View2 from "./_view2.svelte";
+    import View3 from "./_view3.svelte";
 
     export let genre: string;
 
+    let status: Status = "start";
+
     let WORDS: Word[] = null;
     let assign_words: Word[] = null;
 
     let typed_key: string = "";
-    let typed_word: string = "";
-
     let typed_word_index: number = 0;
     let typed_word_count: number = 0;
     let assign_word_count: number = 10;
-    let status: Status = "prepare";
-
-    $: if(status === "run") {
-        const target_word: Word = assign_words[typed_word_count];
-        const target_char: string = target_word.romaji[typed_word_index];
-
-        if(checkKey(typed_key)) {
-            typed_word = target_word.romaji.slice(0, typed_word_index) + typed_key;
-
-            if(typed_key === target_char){
-                typed_word_index += 1;
 
-                if(typed_word_index === target_word.romaji.length) {
-                    typed_word_index = 0;
-                    typed_word_count += 1;
-                    typed_word = "";
-
-                    if(typed_word_count === assign_word_count) {
-                        typed_word_count = 0;
-                        status = "finish";
-                        typed_key = "";
-                    }
-                }
-            }
-        }
-    }
 
     onMount(async () => {
         WORDS = await (await fetch(`/data/${genre}.json/`)).json();
         assign_words = generateWords(WORDS, assign_word_count);
     });
 
-    function start(): void {
-        status = "run";
-    }
-
-    function retry(): void {
-        status = "prepare";
-        assign_words = generateWords(WORDS, assign_word_count);
-    }
-
 </script>
 
 <main>
-    {#if status === "prepare"}
-    <div class="prepareContainer">
-        <button class="startButton" on:click={start}>スタート</button>
-    </div>
+    {#if status === "start"}
+    <View1 bind:status={status} />
 
     {:else if status === "run"}
-    <div class="runContainer">
-        <p class="name">
-            {assign_words[typed_word_count].name}
-        </p>
-        <p class="romaji">
-            <span class="correctString">{assign_words[typed_word_count].romaji.slice(0, typed_word_index)}</span>{assign_words[typed_word_count].romaji.slice(typed_word_index)}
-        </p>
-    </div>
+    <View2 bind:status={status} typed_key={typed_key} assign_words={assign_words} typed_word_count={typed_word_count} typed_word_index={typed_word_index} />
 
     {:else if status === "finish"}
-    <div class="finishContainer">
-        <button class="retryButton" on:click={retry}>リトライ</button>
-    </div>
+    <View3 bind:status={status} />
     {/if}
 
     <KeyBoard bind:typed_key={typed_key} />
@@ -92,97 +50,4 @@
 		flex-direction: column;
 		justify-content: space-evenly;
     }
-    .prepareContainer {
-        display: flex;
-        align-items: center;
-        background-color: #ffffff;
-        border-radius: 50%;
-        padding: 2rem 4rem;
-    }
-    .runContainer {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        background-color: #ffffff;
-        border-radius: 50%;
-        padding: 3.5rem 7rem;
-        transition: all 1s;
-    }
-    .finishContainer {
-        display: flex;
-        align-items: center;
-        background-color: #ffffff;
-        border-radius: 50%;
-        padding: 2rem 4rem;
-    }
-    .startButton {
-        border: none;
-        outline: none;
-        padding: 1rem;
-        cursor: pointer;
-        color: #ffffff;
-        font-weight: bold;
-        border-radius: .25rem;
-        background-color: #057fff;
-        box-shadow: 0px 2px 2px 2px #dcdcdc;
-    }
-    .retryButton {
-        border: none;
-        outline: none;
-        padding: 1rem;
-        cursor: pointer;
-        color: #ffffff;
-        font-weight: bold;
-        border-radius: .25rem;
-        background-color: #057fff;
-        box-shadow: 0px 2px 2px 2px #dcdcdc;
-    }
-    .name {
-        margin: 0;
-        padding: .25rem;
-        font-size: 3.5rem;
-        font-weight: bold;
-    }
-    .romaji {
-        margin: 0;
-        padding: .25rem;
-        font-size: 3.5rem;
-        font-weight: bold;
-    }
-    .correctString {
-        color: darkorange;
-    }
-	@media (max-height: 640px) {
-		.runContainer {
-            padding: 3rem 6rem;
-        }
-        .name {
-            font-size: 3rem;
-        }
-        .romaji {
-            font-size: 3rem;
-        }
-	}
-    @media (max-height: 520px) {
-		.runContainer {
-            padding: 2rem 4rem;
-        }
-        .name {
-            font-size: 2.5rem;
-        }
-        .romaji {
-            font-size: 2.5rem;
-        }
-	}
-    @media (max-height: 440px) {
-		.runContainer {
-            padding: 1rem 4rem;
-        }
-        .name {
-            font-size: 2rem;
-        }
-        .romaji {
-            font-size: 2rem;
-        }
-	}
 </style>

src/pages/game/_view1.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type { Status } from "../../lib/game.svelte";
+    
+    export let status: Status;
+</script>
+
+<div class="container">
+    <button class="startButton" on:click={() => status = "run"}>スタート</button>
+</div>
+
+<style>
+    button {
+        border: none;
+        outline: none;
+        cursor: pointer;
+    }
+    .container {
+        display: flex;
+        align-items: center;
+        background-color: #ffffff;
+        border-radius: 50%;
+        padding: 2rem 4rem;
+    }
+    .startButton {
+        padding: 1rem;
+        color: #ffffff;
+        font-weight: bold;
+        border-radius: .25rem;
+        background-color: #057fff;
+        box-shadow: 0px 2px 2px 2px #dcdcdc;
+    }
+</style>

src/pages/game/_view2.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { checkKey } from "../../lib/game.svelte";
+    import type { Word, Status } from "../../lib/game.svelte";
+
+    export let status: Status;
+    export let typed_key: string;
+    export let assign_words: Word[];
+    export let typed_word_count: number;
+    export let typed_word_index: number;
+
+    let name: string;
+    let romaji_head: string;
+    let romaji_tail: string;
+
+
+    $: name = assign_words[typed_word_count].name;
+    $: romaji_head = assign_words[typed_word_count].romaji.slice(0, typed_word_index);
+    $: romaji_tail = assign_words[typed_word_count].romaji.slice(typed_word_index);
+
+
+    $: if(checkKey(typed_key)) {
+        const target_word: Word = assign_words[typed_word_count];
+        const target_char: string = target_word.romaji[typed_word_index];
+
+        if(typed_key === target_char) {
+            typed_word_index += 1;
+
+            if(typed_word_index === target_word.romaji.length) {
+                typed_word_index = 0;
+                typed_word_count += 1;
+
+                if(typed_word_count === assign_words.length) {
+                    typed_word_count = 0;
+                    status = "finish";
+                }
+            }
+        }
+    }
+
+</script>
+
+<div class="container">
+    <p class="name">{name}</p>
+    <p class="romaji">
+        <span class="correct">{romaji_head}</span>{romaji_tail}
+    </p>
+</div>
+
+<style>
+    p {
+        margin: 0;
+    }
+    .container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        background-color: #ffffff;
+        border-radius: 50%;
+        padding: 3.5rem 7rem;
+        transition: all 1s;
+    }
+    .name {
+        padding: .25rem;
+        font-size: 3.5rem;
+        font-weight: bold;
+    }
+    .romaji {
+        padding: .25rem;
+        font-size: 3.5rem;
+        font-weight: bold;
+    }
+    .correct {
+        color: darkorange;
+    }
+    @media (max-height: 640px) {
+		.container {
+            padding: 3rem 6rem;
+        }
+        .name {
+            font-size: 3rem;
+        }
+        .romaji {
+            font-size: 3rem;
+        }
+	}
+    @media (max-height: 520px) {
+		.container {
+            padding: 2rem 4rem;
+        }
+        .name {
+            font-size: 2.5rem;
+        }
+        .romaji {
+            font-size: 2.5rem;
+        }
+	}
+    @media (max-height: 440px) {
+		.container {
+            padding: 1rem 4rem;
+        }
+        .name {
+            font-size: 2rem;
+        }
+        .romaji {
+            font-size: 2rem;
+        }
+	}
+</style>

src/pages/game/_view3.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type { Status } from "../../lib/game.svelte";
+
+    export let status: Status;
+</script>
+
+<div class="container">
+    <button class="retryButton" on:click={() => status = "start"}>リトライ</button>
+</div>
+
+<style>
+    button {
+        border: none;
+        outline: none;
+        cursor: pointer;
+    }
+    .container {
+        display: flex;
+        align-items: center;
+        background-color: #ffffff;
+        border-radius: 50%;
+        padding: 2rem 4rem;
+    }
+    .retryButton {
+        padding: 1rem;
+        color: #ffffff;
+        font-weight: bold;
+        border-radius: .25rem;
+        background-color: #057fff;
+        box-shadow: 0px 2px 2px 2px #dcdcdc;
+    }
+</style>