update icon and onend for recognition

wangchou · Jun 24, 2019 · 37214da · 37214da
1 parent 4c8b5fa
commit 37214da
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 34 deletions.
diff --git a/echo-mori.sketch b/echo-mori.sketch
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset='utf8'>
     <meta name='viewport' content='width=device-width'>
 
-    <title>Svelte app</title>
+    <title>echo mori</title>
 
     <link rel='icon' type='image/png' href='favicon.png'>
     <link rel='stylesheet' href='global.css'>

diff --git a/src/client/gameFlow.js b/src/client/gameFlow.js
@@ -1,4 +1,4 @@
-import { PlaySpeed, Voices } from './model/constants.js' 
+import { PlaySpeed, Voices } from './model/constants.js'
 import { say, listen } from './speechEngine.js'
 import { comments } from './model/store.js'
 
@@ -7,6 +7,11 @@ const sentences = [
     { text: '今日はいい天気ですね', speed: PlaySpeed.slow, voice: Voices.jaF1 },
     { text: 'そうですね。', speed: PlaySpeed.slow, voice: Voices.jaM1 },
     { text: 'じゃあ、またね。', speed: PlaySpeed.slow, voice: Voices.jaF1 },
+    { text: '今日はいい天気ですね', speed: PlaySpeed.slow, voice: Voices.jaF1 },
+    { text: '今日はいい天気ですね', speed: PlaySpeed.slow, voice: Voices.jaF1 },
+    { text: '今日はいい天気ですね', speed: PlaySpeed.slow, voice: Voices.jaF1 },
+    { text: '今日はいい天気ですね', speed: PlaySpeed.slow, voice: Voices.jaF1 },
+    { text: '今日はいい天気ですね', speed: PlaySpeed.slow, voice: Voices.jaF1 },
 ]
 
 export const playGame = async () => {

diff --git a/src/client/speechEngine.js b/src/client/speechEngine.js
@@ -6,7 +6,6 @@ export let listen = (duration) => {
     recognition.start();
     setTimeout(() => { recognition.stop() }, duration)
 
-
     let promise = new Promise((resolve, reject) => {
         recognition.onresult = (event) => {
             for (var i = event.resultIndex; i < event.results.length; ++i) {
@@ -16,6 +15,10 @@ export let listen = (duration) => {
         recognition.onerror = () => {
             resolve("error")
         }
+        recognition.onend = () => {
+            resolve("聽不清楚")
+        }
+
     })
     return promise
 }

diff --git a/src/client/ui/App.svelte b/src/client/ui/App.svelte
@@ -3,21 +3,6 @@
     import { playGame } from '../gameFlow.js'
 </script>
 
-<style>
-    h1 {
-        color: green;
-        margin: 0px auto;
-        text-align: center;
-    }
-    :global(body) {
-        margin: 4% 0;
-        background: #999;
-    }
-    div.playButton {
-        text-align: center;
-    }
-</style>
-
 <div>
     <h1>
         <ruby>
@@ -28,7 +13,35 @@
         </ruby>
     </h1>
 </div>
+
 <Messenger />
+
 <div class="playButton">
-    <button on:click={playGame}>Play</button>
+    <button on:click={playGame}> Play </button>
 </div>
+
+<style>
+    :global(body) {
+        margin: 4% 0;
+        background: #eee;
+    }
+    h1 {
+        color: #60a030;
+        margin: 0px auto;
+        text-align: center;
+    }
+    div.playButton {
+        padding-top: 10px;
+        text-align: center;
+    }
+    div.playButton button{
+        color: #ddd;
+        background: #a06030;
+        border-color: #000;
+        min-width: 100px;
+    }
+    rt {
+        color: black;
+        font-weight: 400;
+    }
+</style>
diff --git a/src/client/ui/Messenger.svelte b/src/client/ui/Messenger.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { comments } from './model/store.js'
+    import { comments } from '../model/store.js'
     import { beforeUpdate, afterUpdate } from 'svelte'
 
     let div
@@ -13,13 +13,24 @@
         if (autoscroll) div.scrollTo(0, div.scrollHeight)
     })
 </script>
+
+<div class="messenger">
+    <div class="scrollable" bind:this={div}>
+        {#each $comments as comment}
+            <article class={comment.author}>
+                <span>{comment.text}</span>
+            </article>
+        {/each}
+    </div>
+</div>
+
 <style>
-    .chat {
+    .messenger {
         display: flex;
         flex-direction: column;
         height: 400px;
         max-width: 240px;
-        border: 1px solid #eee;
+        border: 1px solid #000;
         margin: 0px auto;
     }
 
@@ -43,7 +54,7 @@
     }
 
     .teacher span {
-        background-color: #eee;
+        background-color: #fff;
         border-radius: 1em 1em 1em 0;
     }
 
@@ -52,14 +63,4 @@
         color: white;
         border-radius: 1em 1em 0 1em;
     }
-</style>
-
-<div class="chat">
-    <div class="scrollable" bind:this={div}>
-        {#each $comments as comment}
-            <article class={comment.author}>
-                <span>{comment.text}</span>
-            </article>
-        {/each}
-    </div>
-</div>
+</style>