From 83eb1ba94067db9588e961fa2a782d3a34d19a1a Mon Sep 17 00:00:00 2001
From: tsukasa38 <104.tsukasa@gmail.com>
Date: Fri, 11 Jun 2021 08:29:39 +0000
Subject: [PATCH 1/3] Split Genre Component

---
 src/lib/game.svelte           |   2 +-
 src/pages/game/[genre].svelte | 126 +++-------------------------------
 src/pages/game/_view1.svelte  |  32 +++++++++
 src/pages/game/_view2.svelte  |  83 ++++++++++++++++++++++
 src/pages/game/_view3.svelte  |  32 +++++++++
 5 files changed, 156 insertions(+), 119 deletions(-)
 create mode 100644 src/pages/game/_view1.svelte
 create mode 100644 src/pages/game/_view2.svelte
 create mode 100644 src/pages/game/_view3.svelte

diff --git a/src/lib/game.svelte b/src/lib/game.svelte
index 553499e..486886a 100644
--- a/src/lib/game.svelte
+++ b/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);
diff --git a/src/pages/game/[genre].svelte b/src/pages/game/[genre].svelte
index 322ad46..d9b279c 100644
--- a/src/pages/game/[genre].svelte
+++ b/src/pages/game/[genre].svelte
@@ -3,6 +3,9 @@
     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;
 
@@ -15,7 +18,7 @@
     let typed_word_index: number = 0;
     let typed_word_count: number = 0;
     let assign_word_count: number = 10;
-    let status: Status = "prepare";
+    let status: Status = "start";
 
     $: if(status === "run") {
         const target_word: Word = assign_words[typed_word_count];
@@ -47,37 +50,17 @@
         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 {assign_words} {typed_word_count} {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 +75,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>
diff --git a/src/pages/game/_view1.svelte b/src/pages/game/_view1.svelte
new file mode 100644
index 0000000..cb54d65
--- /dev/null
+++ b/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>
diff --git a/src/pages/game/_view2.svelte b/src/pages/game/_view2.svelte
new file mode 100644
index 0000000..6ccb4da
--- /dev/null
+++ b/src/pages/game/_view2.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+    import type { Word } from "../../lib/game.svelte";
+
+    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);
+</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>
diff --git a/src/pages/game/_view3.svelte b/src/pages/game/_view3.svelte
new file mode 100644
index 0000000..33e9b3c
--- /dev/null
+++ b/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>

From 289a9a0c97768b11ab798cc70eee54634a14a5b2 Mon Sep 17 00:00:00 2001
From: tsukasa38 <104.tsukasa@gmail.com>
Date: Fri, 11 Jun 2021 09:10:27 +0000
Subject: [PATCH 2/3] Code Refactoring

---
 src/pages/game/[genre].svelte | 33 ++++-----------------------------
 src/pages/game/_view2.svelte  | 27 ++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/pages/game/[genre].svelte b/src/pages/game/[genre].svelte
index d9b279c..d4d104c 100644
--- a/src/pages/game/[genre].svelte
+++ b/src/pages/game/[genre].svelte
@@ -1,7 +1,7 @@
 <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";
@@ -9,41 +9,16 @@
 
     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 = "start";
-
-    $: 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();
@@ -57,7 +32,7 @@
     <View1 bind:status={status} />
 
     {:else if status === "run"}
-    <View2 {assign_words} {typed_word_count} {typed_word_index} />
+    <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"}
     <View3 bind:status={status} />
diff --git a/src/pages/game/_view2.svelte b/src/pages/game/_view2.svelte
index 6ccb4da..4f4f0f0 100644
--- a/src/pages/game/_view2.svelte
+++ b/src/pages/game/_view2.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
-    import type { Word } from "../../lib/game.svelte";
+    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;
@@ -9,9 +12,31 @@
     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">

From 240bf137e54c121bcc4dfa5750675c7ecb34e7ef Mon Sep 17 00:00:00 2001
From: tsukasa38 <104.tsukasa@gmail.com>
Date: Fri, 11 Jun 2021 10:08:27 +0000
Subject: [PATCH 3/3] v1.3.3 Release

---
 README.md         | 2 +-
 package-lock.json | 2 +-
 package.json      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c2dcb5e..203601c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # タイピングゲーム
 
-**Version 1.3.2 リリース**
+**Version 1.3.3 リリース**
 
 ## 実装済機能
 
diff --git a/package-lock.json b/package-lock.json
index 2b53374..3e6e53b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "typing-game",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index a6c150b..9b22da6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "typing-game",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "scripts": {
     "dev:vite": "vite",
     "dev:routify": "routify",