From b4f4e664e330650b7dcb7e15daf3826e07df20fd Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Mon, 27 Apr 2020 17:50:39 -0500
Subject: [PATCH 01/31] Uploading is now on by default

---
 frontend/src/client/src/layouts/MyLayout.vue  | 2 +-
 frontend/src/client/src/store/common/state.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/client/src/layouts/MyLayout.vue b/frontend/src/client/src/layouts/MyLayout.vue
index 2d70181..a9c48a1 100644
--- a/frontend/src/client/src/layouts/MyLayout.vue
+++ b/frontend/src/client/src/layouts/MyLayout.vue
@@ -104,7 +104,7 @@ export default {
       rightDrawerOpen: false,
       sequenceId: 'Standard',
       student: '',
-      upload: false
+      upload: true
     }
   },
   methods: {
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 4c03c8a..16b3cc0 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -10,7 +10,7 @@ export default {
   sequence: {},
   user: {
     sequenceId: 'Standard',
-    uploading: false,
+    uploading: true,
     name: ''
   },
   retryLimit: 3,

From 2dd4bc4da479e61c03fcb1d8c3b5a6a1b00f7653 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Mon, 27 Apr 2020 17:51:08 -0500
Subject: [PATCH 02/31] Updated version

---
 frontend/src/client/src/store/common/state.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 16b3cc0..278c4b0 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.0.2.0',
+  version: '1.1.0.1',
   patternsLoading: true,
   patterns: {},
   history: {},

From aa1c1d916c3c2f39854a89dffd4b5d70005ae446 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Mon, 27 Apr 2020 19:19:59 -0500
Subject: [PATCH 03/31] Fixed save settings and updated color scheme

---
 .../src/client/src/components/EelCanvas.vue   | 23 ++++-----
 .../src/client/src/components/EelPractice.vue |  8 ++--
 frontend/src/client/src/css/app.sass          |  1 +
 .../src/client/src/css/quasar.variables.sass  | 17 +++----
 frontend/src/client/src/layouts/MyLayout.vue  | 48 +++++++++++++------
 frontend/src/client/src/pages/Index.vue       |  2 +-
 .../src/client/src/store/common/actions.js    |  2 +-
 frontend/src/client/src/store/common/state.js |  2 +-
 8 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 6f3a7c9..c8477cb 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -57,8 +57,7 @@ export default {
       this.middleLineY = this.upperLineY + canvasTopWritingAreaRatio * this.canvas.height
       this.lowerLineY = this.middleLineY + canvasWritingAreaRatio * this.canvas.height
       this.lowestLineY = this.lowerLineY + canvasBottomWritingAreaRatio * this.canvas.height
-      this.canvas.style.background = 'linear-gradient(180deg, #f7feff, #FFFFFF, #f7feff)'
-      this.canvas.style.border = '1px solid #E0F7FA'
+      this.canvas.style.background = '#F9F7F0'
     },
     configureCanvas () {
       this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e), false)
@@ -136,31 +135,29 @@ export default {
     },
     setStrokeStyle (style) {
       this.context.lineCap = 'round'
+      this.context.strokeStyle = '#072A40'
       this.context.setLineDash([])
       if (style === 'START_CIRCLE') {
-        this.context.strokeStyle = '#003300'
-        this.context.fillStyle = 'green'
+        this.context.strokeStyle = 'white'
+        this.context.fillStyle = '#5A8100'
         this.context.lineWidth = 2
       } else if (style === 'END_CIRCLE') {
-        this.context.strokeStyle = '#900000'
-        this.context.fillStyle = 'red'
+        this.context.strokeStyle = 'white'
+        this.context.fillStyle = '#B74803'
         this.context.lineWidth = 2
       } else if (style === 'USER') {
-        this.context.strokeStyle = '#006064'
+        this.context.strokeStyle = '#178CA4'
         this.context.lineWidth = 15
       } else if (style === 'EEL') {
-        this.context.strokeStyle = '#FFD54F'
-        this.context.lineWidth = 8
+        this.context.strokeStyle = '#18B7BE'
+        this.context.lineWidth = 7
       } else if (style === 'PRIMARY_GUIDE') {
-        this.context.strokeStyle = '#3D4849'
         this.context.lineWidth = 6
       } else if (style === 'DOTTED_GUIDE') {
-        this.context.strokeStyle = '#3D4849'
         this.context.lineWidth = 3
         this.context.setLineDash([this.canvas.width * 0.04, this.canvas.width * 0.02875])
       } else if (style === 'MINIMAL_GUIDE') {
-        this.context.strokeStyle = '#667b7d'
-        this.context.lineWidth = 4
+        this.context.lineWidth = 3
       }
     },
     paintLine (from, to) {
diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index cf0ceb9..e9bbc5c 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -3,7 +3,7 @@
     <div class="row justify-center">
       <div class="text-center">
         <q-card class="my-card">
-          <q-card-section class="bg-accent text-white">
+          <q-card-section class="bg-primary text-white">
             <div class="text-h6">
               <span v-if="atStart"> Welcome! </span>
               <span v-if="!atStart && letter != null"> Draw: <b>{{letter}}</b> </span>
@@ -17,9 +17,9 @@
           </q-card-section>
 
           <q-card-actions align="around">
-            <q-btn v-if="atStart" @click="start()" no-caps style="width:100%" color="accent">Start</q-btn>
-            <q-btn v-if="!atStart && letter != null" @click="done()" no-caps icon="fas fa-check" style="width:100%" color="positive"></q-btn>
-            <q-btn v-if="!atStart && letter == null" @click="go()" no-caps style="width:100%" color="accent">Go</q-btn>
+            <q-btn v-if="atStart" @click="start()" no-caps style="width:100%" color="secondary">Start</q-btn>
+            <q-btn v-if="!atStart && letter != null" @click="done()" no-caps icon="fas fa-check" style="width:100%" color="secondary"></q-btn>
+            <q-btn v-if="!atStart && letter == null" @click="go()" no-caps style="width:100%" color="secondary">Go</q-btn>
           </q-card-actions>
         </q-card>
         <q-card class="my-card">
diff --git a/frontend/src/client/src/css/app.sass b/frontend/src/client/src/css/app.sass
index 329abd3..56b9db1 100644
--- a/frontend/src/client/src/css/app.sass
+++ b/frontend/src/client/src/css/app.sass
@@ -2,5 +2,6 @@
 
 a { color: $primary; text-decoration: none; }
 body { font-family: 'Niramit', sans-serif; }
+body { background-color: $background}
 
 @import url('https://fonts.googleapis.com/css?family=Niramit&display=swap');
\ No newline at end of file
diff --git a/frontend/src/client/src/css/quasar.variables.sass b/frontend/src/client/src/css/quasar.variables.sass
index 47576c4..d2e973d 100644
--- a/frontend/src/client/src/css/quasar.variables.sass
+++ b/frontend/src/client/src/css/quasar.variables.sass
@@ -12,13 +12,14 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #4DD0E1
-$secondary : #CE93D8
-$accent    : #006064
+$primary   : #178CA4
+$secondary : #18B7BE
+$accent    : #072A40
 
-$dark      : #1D1D1D
+$background: #F9F7F0
+$dark      : #072A40
 
-$positive  : #21BA45
-$negative  : #C10015
-$info      : #31CCEC
-$warning   : #F2C037
+$positive  : #5A8100
+$negative  : #B74803
+$info      : #18B7BE
+$warning   : #B74803
diff --git a/frontend/src/client/src/layouts/MyLayout.vue b/frontend/src/client/src/layouts/MyLayout.vue
index a9c48a1..d08e40a 100644
--- a/frontend/src/client/src/layouts/MyLayout.vue
+++ b/frontend/src/client/src/layouts/MyLayout.vue
@@ -9,7 +9,8 @@
               <span class="text-white"> Blue Eel </span>
             </router-link>
           </q-toolbar-title>
-          <q-btn flat round dense icon="fas fa-ellipsis-v" @click="rightDrawerOpen = !rightDrawerOpen"/>
+
+          <q-btn flat round dense icon="fas fa-ellipsis-v" label="" @click="rightDrawerOpen = !rightDrawerOpen"/>
         </q-toolbar>
       </q-header>
 
@@ -17,7 +18,8 @@
       v-model="leftDrawerOpen"
       show-if-above
       bordered
-      content-class="bg-grey-2"
+      elevated
+      :content-style="{ backgroundColor: '#f9f7f0' }"
     >
       <q-list>
         <q-item clickable to="tracing">
@@ -58,16 +60,25 @@
         </q-item>
       </q-list>
       <div class="absolute-bottom">
-        <div class="text-right"> v{{$store.state.common.version}} &nbsp; &nbsp; &copy; 2020 </div>
+        <q-list>
+          <q-item>
+            <div style="width:100%"> v{{$store.state.common.version}} </div>
+            <div class="text-right" style="width:100%"> &copy; 2020 </div>
+          </q-item>
+        </q-list>
       </div>
     </q-drawer>
 
+    <q-page-container style="touch-action:none;" touch-action="none" >
+      <router-view />
+    </q-page-container>
+
     <q-drawer
       v-model="rightDrawerOpen"
       side="right"
-      show-if-above
       bordered
-      content-class="bg-grey-2"
+      elevated
+      :content-style="{ backgroundColor: '#f9f7f0' }"
     >
       <q-list>
         <q-item>
@@ -79,15 +90,15 @@
         <q-item>
           <q-toggle
             v-model="upload"
-            color="accent"
+            color="primary"
             label="Upload Practice"
           />
         </q-item>
+        <q-item>
+          <q-btn @click="save()" style="width:100%" color="secondary" icon="fas fa-check"/>
+        </q-item>
       </q-list>
     </q-drawer>
-    <q-page-container style="touch-action:none;" touch-action="none" >
-      <router-view />
-    </q-page-container>
   </q-layout>
 </template>
 
@@ -95,19 +106,28 @@
 export default {
   name: 'MyLayout',
   mounted: function () {
-    this.sequenceId = this.$router.currentRoute.query.seq || 'Standard'
+    this.setSettings()
     this.saveSequence()
   },
   data () {
     return {
       leftDrawerOpen: false,
       rightDrawerOpen: false,
-      sequenceId: 'Standard',
+      sequenceId: '',
       student: '',
-      upload: true
+      upload: false
     }
   },
   methods: {
+    save () {
+      this.saveSequence()
+      this.rightDrawerOpen = false
+    },
+    setSettings (user) {
+      this.student = this.$router.currentRoute.query.student || this.$store.state.common.user.name
+      this.sequenceId = this.$router.currentRoute.query.seq || this.$store.state.common.user.sequenceId
+      this.upload = this.$store.state.common.user.uploading
+    },
     saveSequence () {
       let user = {
         name: this.student,
@@ -119,8 +139,8 @@ export default {
   },
   watch: {
     rightDrawerOpen: function (updated, previous) {
-      if (updated === false) {
-        this.saveSequence()
+      if (updated === true) {
+        this.setSettings(this.$store.state.common.user)
       }
     }
   }
diff --git a/frontend/src/client/src/pages/Index.vue b/frontend/src/client/src/pages/Index.vue
index 79a4663..2024c38 100644
--- a/frontend/src/client/src/pages/Index.vue
+++ b/frontend/src/client/src/pages/Index.vue
@@ -10,7 +10,7 @@
         <h4 class="text-primary"> Writing made simple! </h4>
       </div>
       <div class="row justify-center">
-        <q-btn color="accent" no-caps label="Begin" to="tracing" />
+        <q-btn color="secondary" no-caps label="Begin" to="tracing" />
       </div>
     </div>
   </q-page>
diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index e5182ec..ecca954 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -61,7 +61,7 @@ export function fetchSequence (ctx) {
 export function uploadPractice (ctx, update) {
   let sequenceId = ctx.state.user.sequenceId
   if (sequenceId == null || sequenceId === '') {
-    sequenceId = 'Standard'
+    return
   }
 
   let data = {
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 278c4b0..a49dcdf 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -9,7 +9,7 @@ export default {
   pendingQueue: [],
   sequence: {},
   user: {
-    sequenceId: 'Standard',
+    sequenceId: '',
     uploading: true,
     name: ''
   },

From 7de31334eadc587eb1235ff5aee9e3e148b2fea2 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Mon, 27 Apr 2020 20:06:14 -0500
Subject: [PATCH 04/31] Smoother transition when saving settings

---
 frontend/src/client/src/store/common/actions.js   | 5 +++--
 frontend/src/client/src/store/common/mutations.js | 1 +
 frontend/src/client/src/store/common/state.js     | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index ecca954..2e8fe37 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -41,8 +41,8 @@ export function fetchSequence (ctx) {
   if (ctx.state.user != null && ctx.state.user.sequenceId != null && ctx.state.user.sequenceId === 'jim') {
     sequence = {
       letters: [
-        ['a', 'b'],
-        ['c', 'd']
+        ['j', 'i', 'm'],
+        ['f']
       ],
       words: [
         ['jim', 'rocks']
@@ -53,6 +53,7 @@ export function fetchSequence (ctx) {
     ctx.commit('setReintroduceCount', 1)
   }
   ctx.commit('setSequence', sequence)
+  ctx.commit('resetState', ctx.state.level)
 }
 
 // //////////////////
diff --git a/frontend/src/client/src/store/common/mutations.js b/frontend/src/client/src/store/common/mutations.js
index d61a1fe..a792aaf 100644
--- a/frontend/src/client/src/store/common/mutations.js
+++ b/frontend/src/client/src/store/common/mutations.js
@@ -88,6 +88,7 @@ export function resetState (state, level) {
   state.letter = ''
   state.activeQueue = []
   state.stableQueue = []
+  state.level = level
   if (level === 'word') {
     state.pendingQueue = Array.from(state.sequence.words, block => Array.from(block, word => word))
   } else {
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index a49dcdf..36b49d1 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.1.0.1',
+  version: '1.1.0.2',
   patternsLoading: true,
   patterns: {},
   history: {},
@@ -7,6 +7,7 @@ export default {
   activeQueue: [],
   stableQueue: [],
   pendingQueue: [],
+  level: '',
   sequence: {},
   user: {
     sequenceId: '',

From 83966250549eab101efe9a5487e91fb70791f114 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Tue, 28 Apr 2020 17:54:53 -0500
Subject: [PATCH 05/31] Added endpoint checks to ensure directionality is met

---
 frontend/src/client/src/logic/path.js     |  2 +-
 frontend/src/client/src/logic/validate.js | 27 +++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/client/src/logic/path.js b/frontend/src/client/src/logic/path.js
index c04f9fd..9c4eee9 100644
--- a/frontend/src/client/src/logic/path.js
+++ b/frontend/src/client/src/logic/path.js
@@ -9,7 +9,7 @@ export function size (path) {
     return { x: Math.max(max.x, p.x), y: Math.max(max.y, p.y) }
   })
 
-  return Math.max([maxs.x - mins.x, maxs.y - mins.y])
+  return Math.max(maxs.x - mins.x, maxs.y - mins.y)
 }
 
 export function simplify (originalPath, desiredPoints) {
diff --git a/frontend/src/client/src/logic/validate.js b/frontend/src/client/src/logic/validate.js
index 4060e8c..aecf4c8 100644
--- a/frontend/src/client/src/logic/validate.js
+++ b/frontend/src/client/src/logic/validate.js
@@ -1,6 +1,13 @@
 import * as path from './path.js'
+import * as vector from './vector.js'
 
 export function compare (a, b) {
+  return comparePathLength(a, b) &&
+    comparePoints(a, b, 'start') &&
+    comparePoints(a, b, 'end')
+}
+
+function comparePathLength (a, b) {
   const countA = a.length || 0
   const countB = b.length || 0
   if (countA < 10 || countB < 10) {
@@ -19,3 +26,23 @@ export function compare (a, b) {
   }
   return false
 }
+
+function comparePoints (a, b, typeFilter) {
+  let filteredA = a.filter(point => point.type === typeFilter)
+  let filteredB = b.filter(point => point.type === typeFilter)
+
+  let size = path.size(a)
+  for (let i = 0; i < filteredA.length; i++) {
+    let minDist = size
+    for (let j = 0; j < filteredB.length; j++) {
+      let lineAB = vector.substract(filteredA[i], filteredB[j])
+      let dist = vector.magnitude(lineAB)
+      minDist = Math.min(minDist, dist)
+    }
+    let error = minDist / size
+    if (error > 0.1) {
+      return false
+    }
+  }
+  return true
+}

From c2f3ffbb3c1dc68fd9269b61aeb2a7752179048b Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Tue, 28 Apr 2020 18:08:00 -0500
Subject: [PATCH 06/31] Increased render speed for just start/end points

---
 frontend/src/client/src/components/EelCanvas.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index c8477cb..9960451 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -189,9 +189,15 @@ export default {
       }
       this.animationSegment = 0
       this.animationPoints = points
-      this.animationPaintPath = includePath
+
       let drawTime = 3000 // milliseconds
       this.timePerPoint = drawTime / this.animationPoints.length
+
+      if (includePath === false) {
+        this.animationPoints = points.filter(point => point.type === 'start' || point.type === 'end')
+        this.timePerPoint = 400 // milliseconds
+      }
+
       this.then = Date.now()
       this.now = Date.now()
       this.isAnimating = true
@@ -215,7 +221,7 @@ export default {
         } else if (this.animationPoints[this.animationSegment].type === 'end') {
           this.setStrokeStyle('END_CIRCLE')
           this.paintCircle(this.animationPoints[this.animationSegment], 13)
-        } else if (this.animationPaintPath) {
+        } else {
           this.setStrokeStyle('EEL')
           let endPoint = this.animationPoints[this.animationSegment + 1] || this.animationPoints[this.animationSegment]
           this.paintLine(this.animationPoints[this.animationSegment], endPoint)

From b68909f4485b2f61ebe853dbdae4c8b8bf855092 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Tue, 28 Apr 2020 18:55:34 -0500
Subject: [PATCH 07/31] Added quicker stabilization of strong letters.

---
 frontend/src/client/src/store/common/mutations.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/client/src/store/common/mutations.js b/frontend/src/client/src/store/common/mutations.js
index a792aaf..b4903d5 100644
--- a/frontend/src/client/src/store/common/mutations.js
+++ b/frontend/src/client/src/store/common/mutations.js
@@ -47,6 +47,10 @@ export function recordSuccess (state, letter) {
   if (letterHistory.attempts === 1) {
     letterHistory.singleAttemptSuccesses = letterHistory.singleAttemptSuccesses + 1 || 1
     letterHistory.totalSingleAttemptSuccesses = letterHistory.totalSingleAttemptSuccesses + 1 || 1
+    if (letterHistory.totalAttempts === 1) { // Bonus for getting it right on your very first try
+      letterHistory.singleAttemptSuccesses = letterHistory.singleAttemptSuccesses + 1
+      letterHistory.totalSingleAttemptSuccesses = letterHistory.totalSingleAttemptSuccesses + 1
+    }
   }
   Vue.set(state.history, letter, letterHistory)
 }

From f03b27d3b92cb43b17d67b5f3fbf70e16c8ad662 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Tue, 28 Apr 2020 18:56:20 -0500
Subject: [PATCH 08/31] Forcing new bunches in before reintroduced and
 preloading of patterns

---
 .../src/client/src/components/EelPractice.vue |  5 +--
 .../src/client/src/store/common/actions.js    | 43 +++++++++++++------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index e9bbc5c..86bfa3e 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -67,10 +67,7 @@ export default {
     start () {
       this.atStart = false
       this.$store.dispatch('common/startPractice', this.level)
-      setTimeout(() => {
-        // TODO: Need to wait to fetch first letter... fix this
-        this.refresh()
-      }, 1000)
+      this.refresh()
     },
     done () {
       let recording = this.$refs.whiteboard.getRecording()
diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 2e8fe37..226bec3 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -52,6 +52,21 @@ export function fetchSequence (ctx) {
     ctx.commit('setStabilizeCount', 1)
     ctx.commit('setReintroduceCount', 1)
   }
+  for (let i = 0; i < sequence.letters.length; i++) {
+    let bunch = sequence.letters[i]
+    for (let j = 0; j < bunch.length; j++) {
+      ctx.dispatch('fetchLetter', bunch[j])
+    }
+  }
+  for (let i = 0; i < sequence.words.length; i++) {
+    let bunch = sequence.words[i]
+    for (let j = 0; j < bunch.length; j++) {
+      let word = bunch[j]
+      for (let z = 0; z < word.length; z++) {
+        ctx.dispatch('fetchLetter', word[j])
+      }
+    }
+  }
   ctx.commit('setSequence', sequence)
   ctx.commit('resetState', ctx.state.level)
 }
@@ -114,12 +129,10 @@ export function practiceAttempted (ctx, update) {
 }
 
 export function nextLetter (ctx) {
-  if (ctx.state.activeQueue.length < 2 && ctx.state.pendingQueue.length > 0) {
+  if (ctx.state.activeQueue.length < 1) {
     ctx.dispatch('activateLetters')
-    ctx.dispatch('nextLetter')
-  } else {
-    ctx.commit('nextLetter')
   }
+  ctx.commit('nextLetter')
 }
 
 export function resetLetter (ctx, letter) {
@@ -131,19 +144,21 @@ export function stabilizeLetter (ctx, letter) {
 }
 
 export function activateLetters (ctx) {
-  let countToAdd = Math.min(ctx.state.reintroduceCount, ctx.state.stableQueue.length)
-  for (let i = 0; i < countToAdd; i++) {
+  let countToReintroduce = 0
+
+  if (ctx.state.pendingQueue.length > 0) {
+    ctx.state.isFinalReview = false
+    ctx.commit('activateNextBunch')
+    countToReintroduce = Math.min(ctx.state.reintroduceCount, ctx.state.stableQueue.length)
+  } else if (!ctx.state.isFinalReview) {
+    ctx.state.isFinalReview = true
+    countToReintroduce = ctx.state.stableQueue.length
+  }
+
+  for (let i = 0; i < countToReintroduce; i++) {
     const newLetter = ctx.state.stableQueue[0]
-    ctx.dispatch('fetchLetter', newLetter)
     ctx.commit('reintroduceLetter', newLetter)
   }
-  for (let i = 0; i < ctx.state.pendingQueue[0].length; i++) {
-    const newLetter = ctx.state.pendingQueue[0][i]
-    for (let j = 0; j < newLetter.length; j++) {
-      ctx.dispatch('fetchLetter', newLetter[j])
-    }
-  }
-  ctx.commit('activateNextBunch')
 }
 
 export function lowActive (ctx, level) {

From 99881f3a4a94817f19651a8d1e56d115d455b4d6 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 29 Apr 2020 18:43:40 -0500
Subject: [PATCH 09/31] Added stale fail functionality

---
 .../src/client/src/store/common/actions.js    | 27 ++++++++++++++-----
 .../src/client/src/store/common/mutations.js  | 20 +++++++++++---
 frontend/src/client/src/store/common/state.js |  2 ++
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 226bec3..61c3a8a 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -1,5 +1,7 @@
 import { axios } from 'boot/axios'
 
+const STALE_REINTRODUCE_COUNT = 2
+
 // //////////////////
 // FETCH FROM CLOUD
 // //////////////////
@@ -117,9 +119,14 @@ export function practiceAttempted (ctx, update) {
   }
   if (update.success) {
     ctx.commit('recordSuccess', update.letter)
+    ctx.commit('resetFail')
     ctx.dispatch('nextLetter')
     ctx.dispatch('resetLetter', update.letter)
   } else if (ctx.state.history[update.letter].attempts >= ctx.state.retryLimit) {
+    ctx.commit('incrementFail')
+    if (ctx.state.consecutiveFails >= ctx.state.activeQueue.length) {
+      ctx.dispatch('staleFail')
+    }
     ctx.dispatch('nextLetter')
     ctx.dispatch('resetLetter', update.letter)
   }
@@ -161,10 +168,18 @@ export function activateLetters (ctx) {
   }
 }
 
-export function lowActive (ctx, level) {
-
-}
-
-export function staleFail (ctx, level) {
-
+export function staleFail (ctx) {
+  if (ctx.state.staleFails > (ctx.state.stableQueue.length / STALE_REINTRODUCE_COUNT)) {
+    ctx.dispatch('activateLetters')
+    ctx.commit('resetStaleFail')
+  } else if (ctx.state.stableQueue.length >= STALE_REINTRODUCE_COUNT) {
+    for (let i = 0; i < STALE_REINTRODUCE_COUNT; i++) {
+      const newLetter = ctx.state.stableQueue[0]
+      ctx.commit('reintroduceLetter', newLetter)
+    }
+  } else {
+    ctx.dispatch('activateLetters')
+  }
+  ctx.commit('recordStaleFail')
+  ctx.commit('resetFail')
 }
diff --git a/frontend/src/client/src/store/common/mutations.js b/frontend/src/client/src/store/common/mutations.js
index b4903d5..47b599d 100644
--- a/frontend/src/client/src/store/common/mutations.js
+++ b/frontend/src/client/src/store/common/mutations.js
@@ -41,6 +41,22 @@ export function incrementAttempts (state, letter) {
   Vue.set(state.history, letter, letterHistory)
 }
 
+export function incrementFail (state) {
+  state.consecutiveFails = state.consecutiveFails + 1 || 1
+}
+
+export function resetFail (state) {
+  state.consecutiveFails = 0
+}
+
+export function recordStaleFail (state) {
+  state.staleFails = state.staleFails + 1 || 1
+}
+
+export function resetStaleFail (state) {
+  state.staleFails = 0
+}
+
 export function recordSuccess (state, letter) {
   let letterHistory = state.history[letter] || {}
   letterHistory.success = true
@@ -57,10 +73,8 @@ export function recordSuccess (state, letter) {
 
 export function nextLetter (state) {
   let next = state.activeQueue.shift()
-  if (state.letter != null && state.letter !== '') {
-    state.activeQueue.push(state.letter)
-  }
   state.letter = next
+  state.activeQueue.push(next)
 }
 
 export function stabilizeLetter (state, letter) {
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 36b49d1..ed0e0f2 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -4,6 +4,8 @@ export default {
   patterns: {},
   history: {},
   letter: '',
+  consecutiveFails: 0,
+  staleFails: 0,
   activeQueue: [],
   stableQueue: [],
   pendingQueue: [],

From 7fc381d082201a9249a3af93e9801a9e8956ab40 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 29 Apr 2020 18:53:00 -0500
Subject: [PATCH 10/31] Fixed bug around repeat letters showing up at final
 round

---
 .../src/client/src/store/common/actions.js    | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 61c3a8a..329d132 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -120,36 +120,29 @@ export function practiceAttempted (ctx, update) {
   if (update.success) {
     ctx.commit('recordSuccess', update.letter)
     ctx.commit('resetFail')
+    if (ctx.state.history[update.letter].singleAttemptSuccesses >= ctx.state.stabilizeCount) {
+      ctx.commit('stabilizeLetter', update.letter)
+    }
     ctx.dispatch('nextLetter')
-    ctx.dispatch('resetLetter', update.letter)
+    ctx.commit('resetLetter', update.letter)
   } else if (ctx.state.history[update.letter].attempts >= ctx.state.retryLimit) {
     ctx.commit('incrementFail')
     if (ctx.state.consecutiveFails >= ctx.state.activeQueue.length) {
       ctx.dispatch('staleFail')
     }
     ctx.dispatch('nextLetter')
-    ctx.dispatch('resetLetter', update.letter)
-  }
-  if (ctx.state.history[update.letter].singleAttemptSuccesses >= ctx.state.stabilizeCount) {
-    ctx.dispatch('stabilizeLetter', update.letter)
+    ctx.commit('resetLetter', update.letter)
   }
 }
 
 export function nextLetter (ctx) {
+  console.log(ctx.state)
   if (ctx.state.activeQueue.length < 1) {
     ctx.dispatch('activateLetters')
   }
   ctx.commit('nextLetter')
 }
 
-export function resetLetter (ctx, letter) {
-  ctx.commit('resetLetter', letter)
-}
-
-export function stabilizeLetter (ctx, letter) {
-  ctx.commit('stabilizeLetter', letter)
-}
-
 export function activateLetters (ctx) {
   let countToReintroduce = 0
 

From a1d06f3c0b081854d90ba69de2a085a827325835 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 29 Apr 2020 18:54:07 -0500
Subject: [PATCH 11/31] Removed dead logging

---
 frontend/src/client/src/store/common/actions.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 329d132..45f93f1 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -136,7 +136,6 @@ export function practiceAttempted (ctx, update) {
 }
 
 export function nextLetter (ctx) {
-  console.log(ctx.state)
   if (ctx.state.activeQueue.length < 1) {
     ctx.dispatch('activateLetters')
   }

From 7b3c50ead9fece8f1f5c163b6d2bd1de1439fe58 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 29 Apr 2020 20:44:47 -0500
Subject: [PATCH 12/31] Added custom sequence for Brendan

---
 frontend/src/client/src/store/common/actions.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 45f93f1..fb446ac 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -40,6 +40,17 @@ export function fetchSequence (ctx) {
       ]
     }
   }
+  if (ctx.state.user != null && ctx.state.user.sequenceId != null && ctx.state.user.sequenceId === 'QnJlbmRh') {
+    sequence = {
+      letters: [
+        ['n', 'b', 's', 'r', 'k', 'e', 'p']
+      ],
+      words: [
+        ['trains', 'are', 'cool'],
+        ['planes', 'fly', 'high']
+      ]
+    }
+  }
   if (ctx.state.user != null && ctx.state.user.sequenceId != null && ctx.state.user.sequenceId === 'jim') {
     sequence = {
       letters: [

From 4777f15bd50195d82970e10c53404d18bda7ffe1 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 29 Apr 2020 21:10:22 -0500
Subject: [PATCH 13/31] Changed eel thickness back to 8

---
 frontend/src/client/src/components/EelCanvas.vue | 2 +-
 frontend/src/client/src/store/common/state.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 9960451..66db1b8 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -150,7 +150,7 @@ export default {
         this.context.lineWidth = 15
       } else if (style === 'EEL') {
         this.context.strokeStyle = '#18B7BE'
-        this.context.lineWidth = 7
+        this.context.lineWidth = 8
       } else if (style === 'PRIMARY_GUIDE') {
         this.context.lineWidth = 6
       } else if (style === 'DOTTED_GUIDE') {
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index ed0e0f2..59d2aed 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.1.0.2',
+  version: '1.1.0.4',
   patternsLoading: true,
   patterns: {},
   history: {},

From 9c40eb5ec66507ed25d0032ba1158f08c289273d Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Thu, 30 Apr 2020 18:45:09 -0500
Subject: [PATCH 14/31] Refactored layout to move technique into settings
 rather than be seperate views

---
 .../src/client/src/components/EelPractice.vue | 10 +----
 frontend/src/client/src/layouts/MyLayout.vue  | 45 +++++++------------
 frontend/src/client/src/pages/Freeform.vue    | 16 -------
 frontend/src/client/src/pages/Index.vue       |  2 +-
 frontend/src/client/src/pages/Letter.vue      | 21 +++++++++
 frontend/src/client/src/pages/Pattern.vue     | 16 -------
 frontend/src/client/src/pages/Tracing.vue     | 16 -------
 frontend/src/client/src/router/routes.js      |  4 +-
 .../src/client/src/store/common/actions.js    | 24 +++++++---
 .../src/client/src/store/common/mutations.js  |  4 ++
 frontend/src/client/src/store/common/state.js |  5 ++-
 11 files changed, 66 insertions(+), 97 deletions(-)
 delete mode 100644 frontend/src/client/src/pages/Freeform.vue
 create mode 100644 frontend/src/client/src/pages/Letter.vue
 delete mode 100644 frontend/src/client/src/pages/Pattern.vue
 delete mode 100644 frontend/src/client/src/pages/Tracing.vue

diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index 86bfa3e..9ea6ec3 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -122,15 +122,7 @@ export default {
       this.isCanvasActive = true
     },
     go () {
-      if (this.level === 'tracing') {
-        this.$router.push({ name: 'pattern' })
-      } else if (this.level === 'pattern') {
-        this.$router.push({ name: 'freeform' })
-      } else if (this.level === 'freeform') {
-        this.$router.push({ name: 'word' })
-      } else {
-        this.$router.push({ name: 'congratulations' })
-      }
+      this.$store.dispatch('common/completedTechnique')
     }
   }
 }
diff --git a/frontend/src/client/src/layouts/MyLayout.vue b/frontend/src/client/src/layouts/MyLayout.vue
index d08e40a..3a30e8c 100644
--- a/frontend/src/client/src/layouts/MyLayout.vue
+++ b/frontend/src/client/src/layouts/MyLayout.vue
@@ -22,31 +22,13 @@
       :content-style="{ backgroundColor: '#f9f7f0' }"
     >
       <q-list>
-        <q-item clickable to="tracing">
+        <q-item clickable to="letter">
           <q-item-section avatar>
-            <q-icon name="fas fa-bacon" />
+            <q-icon name="fas fa-pencil-alt" />
           </q-item-section>
           <q-item-section>
-            <q-item-label>Tracing Practice</q-item-label>
-            <q-item-label caption>Practice tracing letters to learn the patterns</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item clickable to="pattern">
-          <q-item-section avatar>
-            <q-icon name="fas fa-draw-polygon" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Pattern Practice</q-item-label>
-            <q-item-label caption>Practice writing letters given a start and finish point</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item clickable to="freeform">
-          <q-item-section avatar>
-            <q-icon name="fas fa-wave-square" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Freeform Practice</q-item-label>
-            <q-item-label caption>Practice writing letters</q-item-label>
+            <q-item-label>Letter Practice</q-item-label>
+            <q-item-label caption>Practice writing individual letters with assistance or freeform </q-item-label>
           </q-item-section>
         </q-item>
         <q-item clickable to="word">
@@ -55,7 +37,7 @@
           </q-item-section>
           <q-item-section>
             <q-item-label>Word Practice</q-item-label>
-            <q-item-label caption>Practice combining letters to make words</q-item-label>
+            <q-item-label caption>Practice combining letters to form complete words</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
@@ -82,10 +64,13 @@
     >
       <q-list>
         <q-item>
-          <q-input v-model="sequenceId" label="Sequence" style="width: 100%" />
+          <q-input v-model="student" label="Student" style="width: 100%" />
         </q-item>
         <q-item>
-          <q-input v-model="student" label="Student" style="width: 100%" />
+          <q-input v-model="sequence" label="Sequence" style="width: 100%" />
+        </q-item>
+        <q-item>
+          <q-select v-model="technique" :options="techniqueOptions" label="Technique" style="width: 100%" />
         </q-item>
         <q-item>
           <q-toggle
@@ -113,8 +98,10 @@ export default {
     return {
       leftDrawerOpen: false,
       rightDrawerOpen: false,
-      sequenceId: '',
+      sequence: '',
       student: '',
+      technique: 'Tracing',
+      techniqueOptions: ['Tracing', 'Pattern', 'Freeform'],
       upload: false
     }
   },
@@ -125,13 +112,15 @@ export default {
     },
     setSettings (user) {
       this.student = this.$router.currentRoute.query.student || this.$store.state.common.user.name
-      this.sequenceId = this.$router.currentRoute.query.seq || this.$store.state.common.user.sequenceId
+      this.sequence = this.$router.currentRoute.query.seq || this.$store.state.common.user.sequence
+      this.technique = this.$router.currentRoute.query.tech || this.$store.state.common.user.technique
       this.upload = this.$store.state.common.user.uploading
     },
     saveSequence () {
       let user = {
         name: this.student,
-        sequenceId: this.sequenceId,
+        sequence: this.sequence,
+        technique: this.technique,
         uploading: this.upload
       }
       this.$store.dispatch('common/loginUser', user)
diff --git a/frontend/src/client/src/pages/Freeform.vue b/frontend/src/client/src/pages/Freeform.vue
deleted file mode 100644
index 779a9a5..0000000
--- a/frontend/src/client/src/pages/Freeform.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <q-page padding>
-    <EelPractice level="freeform"></EelPractice>
-  </q-page>
-</template>
-
-<script>
-import EelPractice from '../components/EelPractice.vue'
-
-export default {
-  name: 'PageFreeform',
-  components: {
-    EelPractice
-  }
-}
-</script>
diff --git a/frontend/src/client/src/pages/Index.vue b/frontend/src/client/src/pages/Index.vue
index 2024c38..ef762a1 100644
--- a/frontend/src/client/src/pages/Index.vue
+++ b/frontend/src/client/src/pages/Index.vue
@@ -10,7 +10,7 @@
         <h4 class="text-primary"> Writing made simple! </h4>
       </div>
       <div class="row justify-center">
-        <q-btn color="secondary" no-caps label="Begin" to="tracing" />
+        <q-btn color="secondary" no-caps label="Begin" to="letter" />
       </div>
     </div>
   </q-page>
diff --git a/frontend/src/client/src/pages/Letter.vue b/frontend/src/client/src/pages/Letter.vue
new file mode 100644
index 0000000..89d2d4f
--- /dev/null
+++ b/frontend/src/client/src/pages/Letter.vue
@@ -0,0 +1,21 @@
+<template>
+  <q-page padding>
+    <EelPractice :level="technique"></EelPractice>
+  </q-page>
+</template>
+
+<script>
+import EelPractice from '../components/EelPractice.vue'
+
+export default {
+  name: 'LetterPattern',
+  components: {
+    EelPractice
+  },
+  computed: {
+    technique: function () {
+      return this.$store.state.common.user.technique.toLowerCase()
+    }
+  }
+}
+</script>
diff --git a/frontend/src/client/src/pages/Pattern.vue b/frontend/src/client/src/pages/Pattern.vue
deleted file mode 100644
index eb8bb67..0000000
--- a/frontend/src/client/src/pages/Pattern.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <q-page padding>
-    <EelPractice level="pattern"></EelPractice>
-  </q-page>
-</template>
-
-<script>
-import EelPractice from '../components/EelPractice.vue'
-
-export default {
-  name: 'PagePattern',
-  components: {
-    EelPractice
-  }
-}
-</script>
diff --git a/frontend/src/client/src/pages/Tracing.vue b/frontend/src/client/src/pages/Tracing.vue
deleted file mode 100644
index 0881fa7..0000000
--- a/frontend/src/client/src/pages/Tracing.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <q-page padding>
-    <EelPractice level="tracing"></EelPractice>
-  </q-page>
-</template>
-
-<script>
-import EelPractice from '../components/EelPractice.vue'
-
-export default {
-  name: 'PageTracing',
-  components: {
-    EelPractice
-  }
-}
-</script>
diff --git a/frontend/src/client/src/router/routes.js b/frontend/src/client/src/router/routes.js
index 2aa3ab6..0daaabb 100644
--- a/frontend/src/client/src/router/routes.js
+++ b/frontend/src/client/src/router/routes.js
@@ -4,9 +4,7 @@ const routes = [
     component: () => import('layouts/MyLayout.vue'),
     children: [
       { name: 'home', path: '', component: () => import('pages/Index.vue') },
-      { name: 'tracing', path: 'tracing', component: () => import('pages/Tracing.vue') },
-      { name: 'pattern', path: 'pattern', component: () => import('pages/Pattern.vue') },
-      { name: 'freeform', path: 'freeform', component: () => import('pages/Freeform.vue') },
+      { name: 'letter', path: 'letter', component: () => import('pages/Letter.vue') },
       { name: 'word', path: 'word', component: () => import('pages/Word.vue') },
       { name: 'congratulations', path: 'congratulations', component: () => import('pages/Congratulations.vue') }
     ]
diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index fb446ac..5f85420 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -28,7 +28,7 @@ export function fetchSequence (ctx) {
       ['feature', 'coming', 'soon']
     ]
   }
-  if (ctx.state.user != null && ctx.state.user.sequenceId != null && ctx.state.user.sequenceId === 'Tm9haCBH') {
+  if (ctx.state.user != null && ctx.state.user.sequence != null && ctx.state.user.sequence === 'Tm9haCBH') {
     sequence = {
       letters: [
         ['n', 't', 'm', 'f'],
@@ -40,7 +40,7 @@ export function fetchSequence (ctx) {
       ]
     }
   }
-  if (ctx.state.user != null && ctx.state.user.sequenceId != null && ctx.state.user.sequenceId === 'QnJlbmRh') {
+  if (ctx.state.user != null && ctx.state.user.sequence != null && ctx.state.user.sequence === 'QnJlbmRh') {
     sequence = {
       letters: [
         ['n', 'b', 's', 'r', 'k', 'e', 'p']
@@ -51,7 +51,7 @@ export function fetchSequence (ctx) {
       ]
     }
   }
-  if (ctx.state.user != null && ctx.state.user.sequenceId != null && ctx.state.user.sequenceId === 'jim') {
+  if (ctx.state.user != null && ctx.state.user.sequence != null && ctx.state.user.sequence === 'jim') {
     sequence = {
       letters: [
         ['j', 'i', 'm'],
@@ -88,8 +88,8 @@ export function fetchSequence (ctx) {
 // UPLOAD TO CLOUD
 // //////////////////
 export function uploadPractice (ctx, update) {
-  let sequenceId = ctx.state.user.sequenceId
-  if (sequenceId == null || sequenceId === '') {
+  let sequence = ctx.state.user.sequence
+  if (sequence == null || sequence === '') {
     return
   }
 
@@ -107,7 +107,7 @@ export function uploadPractice (ctx, update) {
     }
   }
   let filename = `${timestamp}.json`
-  axios.put(`https://eel3-data.s3.us-east-2.amazonaws.com/practice/${sequenceId}/${filename}`, data, config)
+  axios.put(`https://eel3-data.s3.us-east-2.amazonaws.com/practice/${sequence}/${filename}`, data, config)
 }
 
 // //////////////////
@@ -186,3 +186,15 @@ export function staleFail (ctx) {
   ctx.commit('recordStaleFail')
   ctx.commit('resetFail')
 }
+
+export function completedTechnique (ctx) {
+  if (ctx.state.user.technique === 'Tracing') {
+    ctx.commit('setTechnique', 'Pattern')
+  } else if (this.level === 'pattern') {
+    ctx.commit('setTechnique', 'Freeform')
+  } else {
+    ctx.commit('setTechnique', 'Tracing')
+    this.$router.push({ name: 'congratulations' })
+  }
+  ctx.dispatch('startPractice')
+}
diff --git a/frontend/src/client/src/store/common/mutations.js b/frontend/src/client/src/store/common/mutations.js
index 47b599d..386a96d 100644
--- a/frontend/src/client/src/store/common/mutations.js
+++ b/frontend/src/client/src/store/common/mutations.js
@@ -8,6 +8,10 @@ export function setSequence (state, sequence) {
   state.sequence = sequence
 }
 
+export function setTechnique (state, technique) {
+  Vue.set(state.user, 'technique', technique)
+}
+
 export function setRetryLimit (state, limit) {
   state.retryLimit = limit
 }
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 59d2aed..ecc19c2 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -12,9 +12,10 @@ export default {
   level: '',
   sequence: {},
   user: {
-    sequenceId: '',
+    sequence: '',
     uploading: true,
-    name: ''
+    name: '',
+    technique: 'Tracing'
   },
   retryLimit: 3,
   stabilizeCount: 3,

From 780df7638fba0a1251fca03305b0f19f84964e3e Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Thu, 30 Apr 2020 19:07:08 -0500
Subject: [PATCH 15/31] Finished refactor of words. Now technique is decoupled.

---
 frontend/src/client/src/components/EelPractice.vue | 10 +++-------
 frontend/src/client/src/pages/Letter.vue           |  8 +++-----
 frontend/src/client/src/pages/Word.vue             |  5 ++++-
 frontend/src/client/src/store/common/actions.js    | 10 ++++++++--
 frontend/src/client/src/store/common/mutations.js  | 10 +++++++---
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index 9ea6ec3..13452bd 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -41,9 +41,6 @@ export default {
   components: {
     EelCanvas
   },
-  props: {
-    level: String
-  },
   data () {
     return {
       isCanvasActive: false,
@@ -66,7 +63,7 @@ export default {
   methods: {
     start () {
       this.atStart = false
-      this.$store.dispatch('common/startPractice', this.level)
+      this.$store.dispatch('common/startPractice')
       this.refresh()
     },
     done () {
@@ -74,7 +71,6 @@ export default {
       let update = {
         success: this.validateSuccess(),
         letter: this.letter,
-        level: this.level,
         pattern: {
           letter: this.letter,
           dimensions: recording.dimensions,
@@ -105,9 +101,9 @@ export default {
     },
     demonstrateLetter () {
       if (this.$store.state.common.patterns[this.letter]) {
-        if (this.level === 'tracing') {
+        if (this.$store.state.common.user.technique === 'Tracing') {
           this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.letter].path, true)
-        } else if (this.level === 'pattern') {
+        } else if (this.$store.state.common.user.technique === 'Pattern') {
           this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.letter].path, false)
         } else {
           setTimeout(() => {
diff --git a/frontend/src/client/src/pages/Letter.vue b/frontend/src/client/src/pages/Letter.vue
index 89d2d4f..79df1a7 100644
--- a/frontend/src/client/src/pages/Letter.vue
+++ b/frontend/src/client/src/pages/Letter.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page padding>
-    <EelPractice :level="technique"></EelPractice>
+    <EelPractice></EelPractice>
   </q-page>
 </template>
 
@@ -12,10 +12,8 @@ export default {
   components: {
     EelPractice
   },
-  computed: {
-    technique: function () {
-      return this.$store.state.common.user.technique.toLowerCase()
-    }
+  created: function () {
+    this.$store.dispatch('common/changeLevel', 'letter')
   }
 }
 </script>
diff --git a/frontend/src/client/src/pages/Word.vue b/frontend/src/client/src/pages/Word.vue
index 2e688c1..358f0b4 100644
--- a/frontend/src/client/src/pages/Word.vue
+++ b/frontend/src/client/src/pages/Word.vue
@@ -1,6 +1,6 @@
 <template>
   <q-page padding>
-    <EelPractice level="word"></EelPractice>
+    <EelPractice></EelPractice>
   </q-page>
 </template>
 
@@ -11,6 +11,9 @@ export default {
   name: 'PageWord',
   components: {
     EelPractice
+  },
+  created: function () {
+    this.$store.dispatch('common/changeLevel', 'word')
   }
 }
 </script>
diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 5f85420..e6dca26 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -118,14 +118,20 @@ export function loginUser (ctx, user) {
   ctx.dispatch('fetchSequence')
 }
 
-export function startPractice (ctx, level) {
-  ctx.commit('resetState', level)
+export function changeLevel (ctx, level) {
+  ctx.commit('setLevel', level)
+}
+
+export function startPractice (ctx) {
+  ctx.commit('resetState')
   ctx.dispatch('nextLetter')
 }
 
 export function practiceAttempted (ctx, update) {
   ctx.commit('incrementAttempts', update.letter)
   if (ctx.state.user.uploading) {
+    update.technique = ctx.state.user.technique
+    update.level = ctx.state.level
     ctx.dispatch('uploadPractice', update)
   }
   if (update.success) {
diff --git a/frontend/src/client/src/store/common/mutations.js b/frontend/src/client/src/store/common/mutations.js
index 386a96d..9f21f20 100644
--- a/frontend/src/client/src/store/common/mutations.js
+++ b/frontend/src/client/src/store/common/mutations.js
@@ -8,6 +8,11 @@ export function setSequence (state, sequence) {
   state.sequence = sequence
 }
 
+export function setLevel (state, level) {
+  console.log(level)
+  state.level = level
+}
+
 export function setTechnique (state, technique) {
   Vue.set(state.user, 'technique', technique)
 }
@@ -105,13 +110,12 @@ export function reintroduceLetter (state, letter) {
   state.activeQueue.push(letter)
 }
 
-export function resetState (state, level) {
+export function resetState (state) {
   state.history = {}
   state.letter = ''
   state.activeQueue = []
   state.stableQueue = []
-  state.level = level
-  if (level === 'word') {
+  if (state.level === 'word') {
     state.pendingQueue = Array.from(state.sequence.words, block => Array.from(block, word => word))
   } else {
     state.pendingQueue = Array.from(state.sequence.letters, block => Array.from(block, letter => letter))

From 0255cd62acef15a431e30388a3dee2484dace1a3 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Fri, 1 May 2020 00:18:15 -0500
Subject: [PATCH 16/31] Got resizing working. Just need to make canvas
 refresh/redraw on a resize.

---
 frontend/src/client/quasar.conf.js            |  5 +-
 .../src/client/src/components/EelCanvas.vue   | 14 +++--
 .../src/client/src/components/EelPractice.vue | 52 ++++++++-----------
 frontend/src/client/src/pages/Letter.vue      |  2 +-
 frontend/src/client/src/pages/Word.vue        |  2 +-
 frontend/src/client/src/store/common/state.js |  2 +-
 6 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/frontend/src/client/quasar.conf.js b/frontend/src/client/quasar.conf.js
index 3f4b482..9f78536 100644
--- a/frontend/src/client/quasar.conf.js
+++ b/frontend/src/client/quasar.conf.js
@@ -102,9 +102,8 @@ module.exports = function (ctx) {
         short_name: 'Blue Eel',
         description: 'Learn to read',
         display: 'standalone',
-        orientation: 'portrait',
-        background_color: '#81d4fa',
-        theme_color: '#b3e5fc',
+        background_color: '#178CA4',
+        theme_color: '#178CA4',
         icons: [
           {
             'src': 'statics/icons/icon-128x128.png',
diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 66db1b8..2f73bcf 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -1,9 +1,13 @@
 <template>
-  <canvas style="touch-action:none;" touch-action="none" id="mainCanvas" ref="mainCanvas"></canvas>
+  <canvas
+    style="touch-action:none;"
+    touch-action="none"
+    id="mainCanvas"
+    ref="mainCanvas">
+  </canvas>
 </template>
 
 <script>
-
 export default {
   name: 'EelCanvas',
   props: {
@@ -44,9 +48,9 @@ export default {
     styleCanvas () {
       this.heightInMM = 85
       const pixelRatio = 1 // window.devicePixelRatio || 1
-      this.canvas.style.width = '300px'
-      this.canvas.style.height = `${this.heightInMM}mm`
-      this.canvas.style.height = `${this.canvas.clientHeight * 7 / 5}px`
+      this.canvas.style.width = '100%'
+      this.canvas.style.height = '98%'
+      // this.canvas.style.height = `${this.canvas.clientHeight * 7 / 5}px`
       this.canvas.width = this.canvas.clientWidth * pixelRatio
       this.canvas.height = this.canvas.clientHeight * pixelRatio
       const canvasTopMarginRatio = 5 / this.heightInMM
diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index 13452bd..486666b 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -1,35 +1,27 @@
 <template>
-  <div>
-    <div class="row justify-center">
-      <div class="text-center">
-        <q-card class="my-card">
-          <q-card-section class="bg-primary text-white">
-            <div class="text-h6">
-              <span v-if="atStart"> Welcome! </span>
-              <span v-if="!atStart && letter != null"> Draw: <b>{{letter}}</b> </span>
-              <span v-if="!atStart && letter == null"> You are ready for the next level! </span>
-            </div>
-            <div class="text-subtitle2">
-              <span v-if="atStart"> Click start when you are ready to begin. </span>
-              <span v-if="!atStart && letter != null"> {{feedback}} </span>
-              <span v-if="!atStart && letter == null"> Amazing!  </span>
-            </div>
-          </q-card-section>
-
-          <q-card-actions align="around">
-            <q-btn v-if="atStart" @click="start()" no-caps style="width:100%" color="secondary">Start</q-btn>
-            <q-btn v-if="!atStart && letter != null" @click="done()" no-caps icon="fas fa-check" style="width:100%" color="secondary"></q-btn>
-            <q-btn v-if="!atStart && letter == null" @click="go()" no-caps style="width:100%" color="secondary">Go</q-btn>
-          </q-card-actions>
-        </q-card>
-        <q-card class="my-card">
-          <q-card-section>
-            <EelCanvas v-on:animationcomplete="demoComplete()" :active="isCanvasActive" ref="whiteboard"></EelCanvas>
-          </q-card-section>
-        </q-card>
+  <q-card class="column col-12 text-center">
+    <q-card-section class="bg-primary text-white">
+      <div class="text-h6">
+        <span v-if="atStart"> Welcome! </span>
+        <span v-if="!atStart && letter != null"> Try <b>{{letter}}</b> </span>
+        <span v-if="!atStart && letter == null"> You are ready for the next level! </span>
+      </div>
+      <div class="text-subtitle2">
+        <span v-if="atStart"> Click start when you are ready to begin. </span>
+        <span v-if="!atStart && letter != null"> {{feedback}} </span>
+        <span v-if="!atStart && letter == null"> Amazing!  </span>
       </div>
-    </div>
-  </div>
+    </q-card-section>
+
+    <q-card-actions align="around">
+      <q-btn v-if="atStart" @click="start()" no-caps style="width:100%" color="secondary">Start</q-btn>
+      <q-btn v-if="!atStart && letter != null" @click="done()" no-caps icon="fas fa-check" style="width:100%" color="secondary"></q-btn>
+      <q-btn v-if="!atStart && letter == null" @click="go()" no-caps style="width:100%" color="secondary">Go</q-btn>
+    </q-card-actions>
+    <q-card-section class="col">
+      <EelCanvas v-on:animationcomplete="demoComplete()" :active="isCanvasActive" ref="whiteboard"></EelCanvas>
+    </q-card-section>
+  </q-card>
 </template>
 
 <script>
diff --git a/frontend/src/client/src/pages/Letter.vue b/frontend/src/client/src/pages/Letter.vue
index 79df1a7..92de826 100644
--- a/frontend/src/client/src/pages/Letter.vue
+++ b/frontend/src/client/src/pages/Letter.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page padding>
+  <q-page padding class="row items-stretch">
     <EelPractice></EelPractice>
   </q-page>
 </template>
diff --git a/frontend/src/client/src/pages/Word.vue b/frontend/src/client/src/pages/Word.vue
index 358f0b4..dd31705 100644
--- a/frontend/src/client/src/pages/Word.vue
+++ b/frontend/src/client/src/pages/Word.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page padding>
+  <q-page padding class="row items-stretch">
     <EelPractice></EelPractice>
   </q-page>
 </template>
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index ecc19c2..32a3533 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.1.0.4',
+  version: '1.1.0.5',
   patternsLoading: true,
   patterns: {},
   history: {},

From bdbd00f7142cf143f13caa17ef3ae7cc222d4692 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Fri, 1 May 2020 20:38:05 -0500
Subject: [PATCH 17/31] Resizing works for letters

---
 .../src/client/src/components/EelCanvas.vue   | 32 +++++++---
 .../src/client/src/components/EelPractice.vue | 36 +++++------
 frontend/src/client/src/logic/path.js         | 22 +++++--
 frontend/src/client/src/logic/pattern.js      | 13 ++++
 frontend/src/client/src/logic/validate.js     | 63 ++++++++++++++-----
 5 files changed, 122 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/client/src/logic/pattern.js

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 2f73bcf..bc428c3 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -1,13 +1,16 @@
 <template>
-  <canvas
-    style="touch-action:none;"
-    touch-action="none"
-    id="mainCanvas"
-    ref="mainCanvas">
-  </canvas>
+    <canvas
+      style="touch-action:none;"
+      touch-action="none"
+      id="mainCanvas"
+      ref="mainCanvas">
+      <q-resize-observer @resize="onResize" debounce="1200" />
+    </canvas>
 </template>
 
 <script>
+import { dimensions, scale, move } from '../logic/path.js'
+
 export default {
   name: 'EelCanvas',
   props: {
@@ -26,6 +29,12 @@ export default {
     this.clear()
   },
   methods: {
+    onResize () {
+      if (this.canvas) {
+        this.styleCanvas()
+        this.clear()
+      }
+    },
     record () {
       this.recordedPoints = []
       this.isRecording = true
@@ -187,7 +196,16 @@ export default {
       this.paintLine({ x: 0, y: this.middleLineY }, { x: this.canvas.width, y: this.middleLineY })
       this.setStrokeStyle('USER')
     },
-    draw (points, includePath) {
+    fit (pattern) {
+      let patternHeight = pattern.dimensions.lowerGuidePixels - pattern.dimensions.upperGuidePixels
+      let canvasHeight = this.lowerLineY - this.upperLineY
+      let scaledPath = scale(pattern.path, canvasHeight / patternHeight)
+      let dims = dimensions(scaledPath)
+      scaledPath = move(scaledPath, { x: 0.5 * this.canvas.width - dims.c.x, y: 0 })
+      return scaledPath
+    },
+    draw (pattern, includePath) {
+      let points = this.fit(pattern)
       if (!points || points.length < 0) {
         return
       }
diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index 486666b..db3ce2a 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -3,20 +3,20 @@
     <q-card-section class="bg-primary text-white">
       <div class="text-h6">
         <span v-if="atStart"> Welcome! </span>
-        <span v-if="!atStart && letter != null"> Try <b>{{letter}}</b> </span>
-        <span v-if="!atStart && letter == null"> You are ready for the next level! </span>
+        <span v-if="!atStart && expression != null"> Try <b>{{expression}}</b> </span>
+        <span v-if="!atStart && expression == null"> You are ready for the next level! </span>
       </div>
       <div class="text-subtitle2">
         <span v-if="atStart"> Click start when you are ready to begin. </span>
-        <span v-if="!atStart && letter != null"> {{feedback}} </span>
-        <span v-if="!atStart && letter == null"> Amazing!  </span>
+        <span v-if="!atStart && expression != null"> {{feedback}} </span>
+        <span v-if="!atStart && expression == null"> Amazing!  </span>
       </div>
     </q-card-section>
 
     <q-card-actions align="around">
       <q-btn v-if="atStart" @click="start()" no-caps style="width:100%" color="secondary">Start</q-btn>
-      <q-btn v-if="!atStart && letter != null" @click="done()" no-caps icon="fas fa-check" style="width:100%" color="secondary"></q-btn>
-      <q-btn v-if="!atStart && letter == null" @click="go()" no-caps style="width:100%" color="secondary">Go</q-btn>
+      <q-btn v-if="!atStart && expression != null" @click="done()" no-caps icon="fas fa-check" style="width:100%" color="secondary"></q-btn>
+      <q-btn v-if="!atStart && expression == null" @click="go()" no-caps style="width:100%" color="secondary">Go</q-btn>
     </q-card-actions>
     <q-card-section class="col">
       <EelCanvas v-on:animationcomplete="demoComplete()" :active="isCanvasActive" ref="whiteboard"></EelCanvas>
@@ -46,7 +46,7 @@ export default {
         return !this.$store.state.common.complete
       }
     },
-    letter: {
+    expression: {
       get () {
         return this.$store.state.common.letter
       }
@@ -62,9 +62,9 @@ export default {
       let recording = this.$refs.whiteboard.getRecording()
       let update = {
         success: this.validateSuccess(),
-        letter: this.letter,
+        expression: this.expression,
         pattern: {
-          letter: this.letter,
+          letter: this.expression,
           dimensions: recording.dimensions,
           path: recording.path
         }
@@ -79,24 +79,24 @@ export default {
     },
     refresh () {
       this.$refs.whiteboard.clear()
-      this.demonstrateLetter()
+      this.demonstrateExpression()
     },
     validateSuccess () {
-      let recording = this.$refs.whiteboard.getRecording().path
-      for (let i = 0; i < this.letter.length; i++) {
-        let currentPattern = this.$store.state.common.patterns[this.letter[i]]
-        if (!compare(currentPattern.path, recording)) {
+      let recordedPattern = this.$refs.whiteboard.getRecording()
+      for (let i = 0; i < this.expression.length; i++) {
+        let currentPattern = this.$store.state.common.patterns[this.expression[i]]
+        if (!compare(currentPattern, recordedPattern)) {
           return false
         }
       }
       return true
     },
-    demonstrateLetter () {
-      if (this.$store.state.common.patterns[this.letter]) {
+    demonstrateExpression () {
+      if (this.$store.state.common.patterns[this.expression]) {
         if (this.$store.state.common.user.technique === 'Tracing') {
-          this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.letter].path, true)
+          this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.expression], true)
         } else if (this.$store.state.common.user.technique === 'Pattern') {
-          this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.letter].path, false)
+          this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.expression], false)
         } else {
           setTimeout(() => {
             this.demoComplete()
diff --git a/frontend/src/client/src/logic/path.js b/frontend/src/client/src/logic/path.js
index 9c4eee9..a174512 100644
--- a/frontend/src/client/src/logic/path.js
+++ b/frontend/src/client/src/logic/path.js
@@ -1,6 +1,6 @@
 import * as Vector from './vector'
 
-export function size (path) {
+export function dimensions (path) {
   let mins = path.reduce((min, p) => {
     return { x: Math.min(min.x, p.x), y: Math.min(min.y, p.y) }
   })
@@ -9,7 +9,21 @@ export function size (path) {
     return { x: Math.max(max.x, p.x), y: Math.max(max.y, p.y) }
   })
 
-  return Math.max(maxs.x - mins.x, maxs.y - mins.y)
+  return {
+    h: maxs.y - mins.y,
+    w: maxs.x - mins.x,
+    c: {
+      x: 0.5 * (mins.x + maxs.x),
+      y: 0.5 * (mins.y + maxs.y)
+    },
+    min: mins,
+    max: maxs
+  }
+}
+
+export function size (path) {
+  let d = dimensions(path)
+  return Math.max(d.h, d.w)
 }
 
 export function simplify (originalPath, desiredPoints) {
@@ -42,13 +56,13 @@ export function length (path) {
 
 export function move (path, v) {
   return path.map((p) => {
-    return { x: p.x + v.x, y: p.y + v.y }
+    return { x: p.x + v.x, y: p.y + v.y, type: p.type }
   })
 }
 
 export function scale (path, scale) {
   return path.map((p) => {
-    return { x: p.x * scale, y: p.y * scale }
+    return { x: p.x * scale, y: p.y * scale, type: p.type }
   })
 }
 
diff --git a/frontend/src/client/src/logic/pattern.js b/frontend/src/client/src/logic/pattern.js
new file mode 100644
index 0000000..cb08286
--- /dev/null
+++ b/frontend/src/client/src/logic/pattern.js
@@ -0,0 +1,13 @@
+import * as Path from './path'
+
+export function normalize (pattern) {
+  if (!pattern.path || pattern.path.length < 1) {
+    return []
+  }
+  let patternHeight = pattern.dimensions.lowerGuidePixels - pattern.dimensions.upperGuidePixels
+  let normalizedHeight = 100
+  let scaledPath = Path.scale(pattern.path, normalizedHeight / patternHeight)
+  let dims = Path.dimensions(scaledPath)
+  scaledPath = Path.move(scaledPath, { x: -1 * dims.min.x, y: -1 * dims.min.y })
+  return scaledPath
+}
diff --git a/frontend/src/client/src/logic/validate.js b/frontend/src/client/src/logic/validate.js
index aecf4c8..00a32b4 100644
--- a/frontend/src/client/src/logic/validate.js
+++ b/frontend/src/client/src/logic/validate.js
@@ -1,10 +1,14 @@
-import * as path from './path.js'
-import * as vector from './vector.js'
+import * as Path from './path.js'
+import * as Vector from './vector.js'
+import * as Pattern from './pattern.js'
 
 export function compare (a, b) {
-  return comparePathLength(a, b) &&
-    comparePoints(a, b, 'start') &&
-    comparePoints(a, b, 'end')
+  let pathA = Pattern.normalize(a)
+  let pathB = Pattern.normalize(b)
+  return comparePathLength(pathA, pathB) &&
+    comparePoints(pathA, pathB, 'start') &&
+    comparePoints(pathA, pathB, 'end') &&
+    compareDimensions(pathA, pathB)
 }
 
 function comparePathLength (a, b) {
@@ -14,29 +18,29 @@ function comparePathLength (a, b) {
     return false
   }
   if (countA > countB) {
-    a = path.simplify(a, countB)
+    a = Path.simplify(a, countB)
   } else {
-    b = path.simplify(b, countA)
+    b = Path.simplify(b, countA)
   }
-  let lengthA = path.length(a)
-  let lengthB = path.length(b)
+  let lengthA = Path.length(a)
+  let lengthB = Path.length(b)
   let error = Math.abs(lengthA - lengthB) / lengthA
-  if (error < 0.125) {
-    return true
+  if (error > 0.125) {
+    return false
   }
-  return false
+  return true
 }
 
 function comparePoints (a, b, typeFilter) {
   let filteredA = a.filter(point => point.type === typeFilter)
   let filteredB = b.filter(point => point.type === typeFilter)
 
-  let size = path.size(a)
+  let size = Path.size(a)
   for (let i = 0; i < filteredA.length; i++) {
     let minDist = size
     for (let j = 0; j < filteredB.length; j++) {
-      let lineAB = vector.substract(filteredA[i], filteredB[j])
-      let dist = vector.magnitude(lineAB)
+      let lineAB = Vector.substract(filteredA[i], filteredB[j])
+      let dist = Vector.magnitude(lineAB)
       minDist = Math.min(minDist, dist)
     }
     let error = minDist / size
@@ -46,3 +50,32 @@ function comparePoints (a, b, typeFilter) {
   }
   return true
 }
+
+function compareDimensions (a, b) {
+  let dimA = Path.dimensions(a)
+  let dimB = Path.dimensions(b)
+  console.log(dimA)
+  console.log(dimB)
+
+  let errorW = Math.abs(dimA.w - dimB.w) / dimA.w
+  if (errorW > 0.125) {
+    return false
+  }
+
+  let errorH = Math.abs(dimA.h - dimB.h) / dimB.h
+  if (errorH > 0.125) {
+    return false
+  }
+
+  let errorCx = Math.abs(dimA.c.x - dimB.c.x) / dimA.w
+  if (errorCx > 0.1) {
+    return false
+  }
+
+  let errorCy = Math.abs(dimA.c.y - dimB.c.y) / dimA.h
+  if (errorCy > 0.1) {
+    return false
+  }
+
+  return true
+}

From c197833331406ec0d3eae1153dd0b97bcb42b07b Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Sat, 2 May 2020 12:01:13 -0500
Subject: [PATCH 18/31] Refactored pattern model to represent typography
 nomenclature and allow for pattern based concatenation

---
 .../src/client/src/components/EelCanvas.vue   | 81 ++++++++++---------
 .../src/client/src/components/EelPractice.vue | 42 +++++-----
 frontend/src/client/src/logic/path.js         | 17 ++--
 frontend/src/client/src/logic/pattern.js      | 26 ++++--
 frontend/src/client/src/logic/validate.js     | 14 ++--
 frontend/src/client/src/model/boundary.ts     |  9 +++
 frontend/src/client/src/model/pattern.ts      |  5 ++
 frontend/src/client/src/model/point.ts        |  5 ++
 frontend/src/client/src/model/pointType.ts    |  4 +
 .../src/client/src/store/common/actions.js    | 67 ++++++++-------
 .../src/client/src/store/common/mutations.js  | 68 ++++++++--------
 frontend/src/client/src/store/common/state.js |  2 +-
 12 files changed, 197 insertions(+), 143 deletions(-)
 create mode 100644 frontend/src/client/src/model/boundary.ts
 create mode 100644 frontend/src/client/src/model/pattern.ts
 create mode 100644 frontend/src/client/src/model/point.ts
 create mode 100644 frontend/src/client/src/model/pointType.ts

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index bc428c3..620a99e 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -14,7 +14,8 @@ import { dimensions, scale, move } from '../logic/path.js'
 export default {
   name: 'EelCanvas',
   props: {
-    active: Boolean
+    active: Boolean,
+    aspectRatio: Number
   },
   data () {
     return {
@@ -24,15 +25,13 @@ export default {
   mounted: function () {
     this.canvas = this.$refs.mainCanvas
     this.context = this.canvas.getContext('2d')
-    this.styleCanvas()
-    this.configureCanvas()
-    this.clear()
+    this.configureListeners()
+    this.configureSize()
   },
   methods: {
     onResize () {
       if (this.canvas) {
-        this.styleCanvas()
-        this.clear()
+        this.configureSize()
       }
     },
     record () {
@@ -42,37 +41,37 @@ export default {
     getRecording () {
       this.isRecording = false
       return {
-        dimensions: {
-          heightMM: this.heightInMM,
-          heightPixels: this.canvas.height,
-          widthPixels: this.canvas.width,
-          upperGuidePixels: this.upperLineY,
-          middleGuidePixels: this.middleLineY,
-          lowerGuidePixels: this.lowerLineY,
-          lowestGuidePixels: this.lowestLineY
-        },
+        boundary: this.boundary,
         path: this.recordedPoints
       }
     },
-    styleCanvas () {
-      this.heightInMM = 85
+    configureSize () {
       const pixelRatio = 1 // window.devicePixelRatio || 1
       this.canvas.style.width = '100%'
       this.canvas.style.height = '98%'
-      // this.canvas.style.height = `${this.canvas.clientHeight * 7 / 5}px`
+      if (this.aspectRatio !== null && this.aspectRatio !== 0) {
+        let allowableAspectRatio = this.canvas.clientWidth / this.canvas.clientHeight
+        if (allowableAspectRatio < this.aspectRatio) {
+          this.canvas.style.height = `${this.canvas.clientWidth / this.aspectRatio}px`
+        }
+      }
       this.canvas.width = this.canvas.clientWidth * pixelRatio
       this.canvas.height = this.canvas.clientHeight * pixelRatio
-      const canvasTopMarginRatio = 5 / this.heightInMM
-      const canvasTopWritingAreaRatio = 25 / this.heightInMM
-      const canvasWritingAreaRatio = 25 / this.heightInMM
-      const canvasBottomWritingAreaRatio = 25 / this.heightInMM
-      this.upperLineY = canvasTopMarginRatio * this.canvas.height
-      this.middleLineY = this.upperLineY + canvasTopWritingAreaRatio * this.canvas.height
-      this.lowerLineY = this.middleLineY + canvasWritingAreaRatio * this.canvas.height
-      this.lowestLineY = this.lowerLineY + canvasBottomWritingAreaRatio * this.canvas.height
-      this.canvas.style.background = '#F9F7F0'
+      this.configureGuidelines()
+      this.clear()
     },
-    configureCanvas () {
+    configureGuidelines () {
+      this.boundary = {
+        top: 0,
+        ascenderLine: this.canvas.height * (5) / 85,
+        capLine: this.canvas.height * (5) / 85,
+        meanLine: this.canvas.height * (5 + 25) / 85,
+        baseLine: this.canvas.height * (5 + 25 + 25) / 85,
+        beardLine: this.canvas.height * (5 + 25 + 25 + 25) / 85,
+        bottom: this.canvas.height
+      }
+    },
+    configureListeners () {
       this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e), false)
       this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e), false)
       this.canvas.addEventListener('mouseup', (e) => this.handleMouseUp(e), false)
@@ -164,12 +163,12 @@ export default {
       } else if (style === 'EEL') {
         this.context.strokeStyle = '#18B7BE'
         this.context.lineWidth = 8
-      } else if (style === 'PRIMARY_GUIDE') {
+      } else if (style === 'CAP_LINE' || style === 'BASE_LINE') {
         this.context.lineWidth = 6
-      } else if (style === 'DOTTED_GUIDE') {
+      } else if (style === 'MEAN_LINE') {
         this.context.lineWidth = 3
         this.context.setLineDash([this.canvas.width * 0.04, this.canvas.width * 0.02875])
-      } else if (style === 'MINIMAL_GUIDE') {
+      } else if (style === 'BEARD_LINE') {
         this.context.lineWidth = 3
       }
     },
@@ -186,19 +185,21 @@ export default {
       this.context.stroke()
     },
     clear () {
+      this.canvas.style.background = '#F9F7F0'
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-      this.setStrokeStyle('PRIMARY_GUIDE')
-      this.paintLine({ x: 0, y: this.lowerLineY }, { x: this.canvas.width, y: this.lowerLineY })
-      this.paintLine({ x: 0, y: this.upperLineY }, { x: this.canvas.width, y: this.upperLineY })
-      this.setStrokeStyle('MINIMAL_GUIDE')
-      this.paintLine({ x: 0, y: this.lowestLineY }, { x: this.canvas.width, y: this.lowestLineY })
-      this.setStrokeStyle('DOTTED_GUIDE')
-      this.paintLine({ x: 0, y: this.middleLineY }, { x: this.canvas.width, y: this.middleLineY })
+      this.setStrokeStyle('CAP_LINE')
+      this.paintLine({ x: 0, y: this.boundary.capLine }, { x: this.canvas.width, y: this.boundary.capLine })
+      this.setStrokeStyle('BASE_LINE')
+      this.paintLine({ x: 0, y: this.boundary.baseLine }, { x: this.canvas.width, y: this.boundary.baseLine })
+      this.setStrokeStyle('BEARD_LINE')
+      this.paintLine({ x: 0, y: this.boundary.beardLine }, { x: this.canvas.width, y: this.boundary.beardLine })
+      this.setStrokeStyle('MEAN_LINE')
+      this.paintLine({ x: 0, y: this.boundary.meanLine }, { x: this.canvas.width, y: this.boundary.meanLine })
       this.setStrokeStyle('USER')
     },
     fit (pattern) {
-      let patternHeight = pattern.dimensions.lowerGuidePixels - pattern.dimensions.upperGuidePixels
-      let canvasHeight = this.lowerLineY - this.upperLineY
+      let patternHeight = pattern.boundary.baseLine - pattern.boundary.capLine
+      let canvasHeight = this.boundary.baseLine - this.boundary.capLine
       let scaledPath = scale(pattern.path, canvasHeight / patternHeight)
       let dims = dimensions(scaledPath)
       scaledPath = move(scaledPath, { x: 0.5 * this.canvas.width - dims.c.x, y: 0 })
diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index db3ce2a..35f809e 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -19,7 +19,12 @@
       <q-btn v-if="!atStart && expression == null" @click="go()" no-caps style="width:100%" color="secondary">Go</q-btn>
     </q-card-actions>
     <q-card-section class="col">
-      <EelCanvas v-on:animationcomplete="demoComplete()" :active="isCanvasActive" ref="whiteboard"></EelCanvas>
+      <EelCanvas
+        v-on:animationcomplete="demoComplete()"
+        :active="isCanvasActive"
+        :aspectRatio="canvasWidth/canvasHeight"
+        ref="whiteboard">
+      </EelCanvas>
     </q-card-section>
   </q-card>
 </template>
@@ -36,19 +41,16 @@ export default {
   data () {
     return {
       isCanvasActive: false,
+      canvasWidth: 1,
+      canvasHeight: 1,
       atStart: true,
       feedback: 'Have fun!'
     }
   },
   computed: {
-    complete: {
-      get () {
-        return !this.$store.state.common.complete
-      }
-    },
     expression: {
       get () {
-        return this.$store.state.common.letter
+        return this.$store.state.common.expression
       }
     }
   },
@@ -64,7 +66,7 @@ export default {
         success: this.validateSuccess(),
         expression: this.expression,
         pattern: {
-          letter: this.expression,
+          expression: this.expression,
           dimensions: recording.dimensions,
           path: recording.path
         }
@@ -81,27 +83,27 @@ export default {
       this.$refs.whiteboard.clear()
       this.demonstrateExpression()
     },
+    generatePattern () {
+      return this.$store.state.common.patterns[this.expression]
+    },
     validateSuccess () {
       let recordedPattern = this.$refs.whiteboard.getRecording()
       for (let i = 0; i < this.expression.length; i++) {
-        let currentPattern = this.$store.state.common.patterns[this.expression[i]]
-        if (!compare(currentPattern, recordedPattern)) {
+        if (!compare(this.generatePattern(), recordedPattern)) {
           return false
         }
       }
       return true
     },
     demonstrateExpression () {
-      if (this.$store.state.common.patterns[this.expression]) {
-        if (this.$store.state.common.user.technique === 'Tracing') {
-          this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.expression], true)
-        } else if (this.$store.state.common.user.technique === 'Pattern') {
-          this.$refs.whiteboard.draw(this.$store.state.common.patterns[this.expression], false)
-        } else {
-          setTimeout(() => {
-            this.demoComplete()
-          }, 1500)
-        }
+      if (this.$store.state.common.user.technique === 'Tracing') {
+        this.$refs.whiteboard.draw(this.generatePattern(), true)
+      } else if (this.$store.state.common.user.technique === 'Pattern') {
+        this.$refs.whiteboard.draw(this.generatePattern(), false)
+      } else {
+        setTimeout(() => {
+          this.demoComplete()
+        }, 1500)
       }
     },
     demoComplete (event) {
diff --git a/frontend/src/client/src/logic/path.js b/frontend/src/client/src/logic/path.js
index a174512..53c994a 100644
--- a/frontend/src/client/src/logic/path.js
+++ b/frontend/src/client/src/logic/path.js
@@ -1,13 +1,18 @@
 import * as Vector from './vector'
 
 export function dimensions (path) {
-  let mins = path.reduce((min, p) => {
-    return { x: Math.min(min.x, p.x), y: Math.min(min.y, p.y) }
-  })
+  let mins = { x: 0, y: 0 }
+  let maxs = { x: 0, y: 0 }
 
-  let maxs = path.reduce((max, p) => {
-    return { x: Math.max(max.x, p.x), y: Math.max(max.y, p.y) }
-  })
+  if (path !== null && path.length > 0) {
+    mins = path.reduce((min, p) => {
+      return { x: Math.min(min.x, p.x), y: Math.min(min.y, p.y) }
+    })
+
+    maxs = path.reduce((max, p) => {
+      return { x: Math.max(max.x, p.x), y: Math.max(max.y, p.y) }
+    })
+  }
 
   return {
     h: maxs.y - mins.y,
diff --git a/frontend/src/client/src/logic/pattern.js b/frontend/src/client/src/logic/pattern.js
index cb08286..261f64a 100644
--- a/frontend/src/client/src/logic/pattern.js
+++ b/frontend/src/client/src/logic/pattern.js
@@ -1,13 +1,25 @@
 import * as Path from './path'
 
 export function normalize (pattern) {
-  if (!pattern.path || pattern.path.length < 1) {
-    return []
+  const normalizedCapHeight = 100
+  let patternCapHeight = pattern.boundary.baseLine - pattern.boundary.capLine
+  let scaleFactor = normalizedCapHeight / patternCapHeight
+
+  let normalizedBoundary = {
+    top: pattern.boundary.top * scaleFactor,
+    ascenderLine: pattern.boundary.ascenderLine * scaleFactor,
+    capLine: pattern.boundary.capLine * scaleFactor,
+    meanLine: pattern.boundary.meanLine * scaleFactor,
+    baseLine: pattern.boundary.baseLine * scaleFactor,
+    beardLine: pattern.boundary.beardLine * scaleFactor,
+    bottom: pattern.boundary.bottom * scaleFactor
   }
-  let patternHeight = pattern.dimensions.lowerGuidePixels - pattern.dimensions.upperGuidePixels
-  let normalizedHeight = 100
-  let scaledPath = Path.scale(pattern.path, normalizedHeight / patternHeight)
+  let scaledPath = Path.scale(pattern.path, scaleFactor)
   let dims = Path.dimensions(scaledPath)
-  scaledPath = Path.move(scaledPath, { x: -1 * dims.min.x, y: -1 * dims.min.y })
-  return scaledPath
+  let normalizedPath = Path.move(scaledPath, { x: -1 * dims.min.x })
+  return {
+    letter: pattern.letter,
+    boundary: normalizedBoundary,
+    path: normalizedPath
+  }
 }
diff --git a/frontend/src/client/src/logic/validate.js b/frontend/src/client/src/logic/validate.js
index 00a32b4..75a763f 100644
--- a/frontend/src/client/src/logic/validate.js
+++ b/frontend/src/client/src/logic/validate.js
@@ -3,12 +3,12 @@ import * as Vector from './vector.js'
 import * as Pattern from './pattern.js'
 
 export function compare (a, b) {
-  let pathA = Pattern.normalize(a)
-  let pathB = Pattern.normalize(b)
-  return comparePathLength(pathA, pathB) &&
-    comparePoints(pathA, pathB, 'start') &&
-    comparePoints(pathA, pathB, 'end') &&
-    compareDimensions(pathA, pathB)
+  let patternA = Pattern.normalize(a)
+  let patternB = Pattern.normalize(b)
+  return comparePathLength(patternA.path, patternB.path) &&
+    comparePoints(patternA.path, patternB.path, 'start') &&
+    comparePoints(patternA.path, patternB.path, 'end') &&
+    compareDimensions(patternA.path, patternB.path)
 }
 
 function comparePathLength (a, b) {
@@ -54,8 +54,6 @@ function comparePoints (a, b, typeFilter) {
 function compareDimensions (a, b) {
   let dimA = Path.dimensions(a)
   let dimB = Path.dimensions(b)
-  console.log(dimA)
-  console.log(dimB)
 
   let errorW = Math.abs(dimA.w - dimB.w) / dimA.w
   if (errorW > 0.125) {
diff --git a/frontend/src/client/src/model/boundary.ts b/frontend/src/client/src/model/boundary.ts
new file mode 100644
index 0000000..1e38545
--- /dev/null
+++ b/frontend/src/client/src/model/boundary.ts
@@ -0,0 +1,9 @@
+interface Boundary {
+    top: Number,
+    ascenderLine: Number,
+    capLine: Number,
+    meanLine: Number,
+    baseLine: Number,
+    beardLine: Number,
+    bottom: Number
+}
\ No newline at end of file
diff --git a/frontend/src/client/src/model/pattern.ts b/frontend/src/client/src/model/pattern.ts
new file mode 100644
index 0000000..81a417c
--- /dev/null
+++ b/frontend/src/client/src/model/pattern.ts
@@ -0,0 +1,5 @@
+interface Pattern {
+    letter: String,
+    boundary: Boundary,
+    path: [Point]
+}
\ No newline at end of file
diff --git a/frontend/src/client/src/model/point.ts b/frontend/src/client/src/model/point.ts
new file mode 100644
index 0000000..fae8d05
--- /dev/null
+++ b/frontend/src/client/src/model/point.ts
@@ -0,0 +1,5 @@
+interface Point {
+    x: Number,
+    y: Number,
+    type: PointType
+}
\ No newline at end of file
diff --git a/frontend/src/client/src/model/pointType.ts b/frontend/src/client/src/model/pointType.ts
new file mode 100644
index 0000000..d751109
--- /dev/null
+++ b/frontend/src/client/src/model/pointType.ts
@@ -0,0 +1,4 @@
+enum PointType {
+    start,
+    end
+}
\ No newline at end of file
diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index e6dca26..14272a9 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -9,14 +9,27 @@ export function fetchLetter (ctx, letter) {
   if (ctx.state.patterns[letter] == null) {
     axios.get(`https://eel3-data.s3.us-east-2.amazonaws.com/patterns/${letter}/master.json`)
       .then(res => {
-        ctx.commit('setPattern', res.data)
+        let pattern = {
+          boundary: res.data.boundary || {
+            top: 0,
+            ascenderLine: res.data.dimensions.upperGuidePixels,
+            capLine: res.data.dimensions.upperGuidePixels,
+            meanLine: res.data.dimensions.middleGuidePixels,
+            baseLine: res.data.dimensions.lowerGuidePixels,
+            beardLine: res.data.dimensions.lowestGuidePixels,
+            bottom: res.data.dimensions.heightPixels
+          },
+          letter: res.data.letter,
+          path: res.data.path
+        }
+        ctx.commit('setPattern', pattern)
       }).catch(err => err) // TODO: Properly catch error
   }
 }
 
 export function fetchSequence (ctx) {
   let sequence = {
-    letters: [
+    expressions: [
       ['b', 'c', 'd', 'f'],
       ['g', 'h', 'l', 'r', 's', 't'],
       ['a', 'e', 'i', 'o', 'u'],
@@ -30,7 +43,7 @@ export function fetchSequence (ctx) {
   }
   if (ctx.state.user != null && ctx.state.user.sequence != null && ctx.state.user.sequence === 'Tm9haCBH') {
     sequence = {
-      letters: [
+      expressions: [
         ['n', 't', 'm', 'f'],
         ['i', 'a', 'c']
       ],
@@ -42,7 +55,7 @@ export function fetchSequence (ctx) {
   }
   if (ctx.state.user != null && ctx.state.user.sequence != null && ctx.state.user.sequence === 'QnJlbmRh') {
     sequence = {
-      letters: [
+      expressions: [
         ['n', 'b', 's', 'r', 'k', 'e', 'p']
       ],
       words: [
@@ -53,7 +66,7 @@ export function fetchSequence (ctx) {
   }
   if (ctx.state.user != null && ctx.state.user.sequence != null && ctx.state.user.sequence === 'jim') {
     sequence = {
-      letters: [
+      expressions: [
         ['j', 'i', 'm'],
         ['f']
       ],
@@ -65,8 +78,8 @@ export function fetchSequence (ctx) {
     ctx.commit('setStabilizeCount', 1)
     ctx.commit('setReintroduceCount', 1)
   }
-  for (let i = 0; i < sequence.letters.length; i++) {
-    let bunch = sequence.letters[i]
+  for (let i = 0; i < sequence.expressions.length; i++) {
+    let bunch = sequence.expressions[i]
     for (let j = 0; j < bunch.length; j++) {
       ctx.dispatch('fetchLetter', bunch[j])
     }
@@ -124,42 +137,42 @@ export function changeLevel (ctx, level) {
 
 export function startPractice (ctx) {
   ctx.commit('resetState')
-  ctx.dispatch('nextLetter')
+  ctx.dispatch('nextExpression')
 }
 
 export function practiceAttempted (ctx, update) {
-  ctx.commit('incrementAttempts', update.letter)
+  ctx.commit('incrementAttempts', update.expression)
   if (ctx.state.user.uploading) {
     update.technique = ctx.state.user.technique
     update.level = ctx.state.level
     ctx.dispatch('uploadPractice', update)
   }
   if (update.success) {
-    ctx.commit('recordSuccess', update.letter)
+    ctx.commit('recordSuccess', update.expression)
     ctx.commit('resetFail')
-    if (ctx.state.history[update.letter].singleAttemptSuccesses >= ctx.state.stabilizeCount) {
-      ctx.commit('stabilizeLetter', update.letter)
+    if (ctx.state.history[update.expression].singleAttemptSuccesses >= ctx.state.stabilizeCount) {
+      ctx.commit('stabilizeexpression', update.expression)
     }
-    ctx.dispatch('nextLetter')
-    ctx.commit('resetLetter', update.letter)
-  } else if (ctx.state.history[update.letter].attempts >= ctx.state.retryLimit) {
+    ctx.dispatch('nextExpression')
+    ctx.commit('resetExpression', update.expression)
+  } else if (ctx.state.history[update.expression].attempts >= ctx.state.retryLimit) {
     ctx.commit('incrementFail')
     if (ctx.state.consecutiveFails >= ctx.state.activeQueue.length) {
       ctx.dispatch('staleFail')
     }
-    ctx.dispatch('nextLetter')
-    ctx.commit('resetLetter', update.letter)
+    ctx.dispatch('nextExpression')
+    ctx.commit('resetExpression', update.expression)
   }
 }
 
-export function nextLetter (ctx) {
+export function nextExpression (ctx) {
   if (ctx.state.activeQueue.length < 1) {
-    ctx.dispatch('activateLetters')
+    ctx.dispatch('activateexpressions')
   }
-  ctx.commit('nextLetter')
+  ctx.commit('nextExpression')
 }
 
-export function activateLetters (ctx) {
+export function activateexpressions (ctx) {
   let countToReintroduce = 0
 
   if (ctx.state.pendingQueue.length > 0) {
@@ -172,22 +185,22 @@ export function activateLetters (ctx) {
   }
 
   for (let i = 0; i < countToReintroduce; i++) {
-    const newLetter = ctx.state.stableQueue[0]
-    ctx.commit('reintroduceLetter', newLetter)
+    const newexpression = ctx.state.stableQueue[0]
+    ctx.commit('reintroduceexpression', newexpression)
   }
 }
 
 export function staleFail (ctx) {
   if (ctx.state.staleFails > (ctx.state.stableQueue.length / STALE_REINTRODUCE_COUNT)) {
-    ctx.dispatch('activateLetters')
+    ctx.dispatch('activateexpressions')
     ctx.commit('resetStaleFail')
   } else if (ctx.state.stableQueue.length >= STALE_REINTRODUCE_COUNT) {
     for (let i = 0; i < STALE_REINTRODUCE_COUNT; i++) {
-      const newLetter = ctx.state.stableQueue[0]
-      ctx.commit('reintroduceLetter', newLetter)
+      const newexpression = ctx.state.stableQueue[0]
+      ctx.commit('reintroduceexpression', newexpression)
     }
   } else {
-    ctx.dispatch('activateLetters')
+    ctx.dispatch('activateexpressions')
   }
   ctx.commit('recordStaleFail')
   ctx.commit('resetFail')
diff --git a/frontend/src/client/src/store/common/mutations.js b/frontend/src/client/src/store/common/mutations.js
index 9f21f20..a18d5a7 100644
--- a/frontend/src/client/src/store/common/mutations.js
+++ b/frontend/src/client/src/store/common/mutations.js
@@ -33,21 +33,21 @@ export function setPattern (state, pattern) {
   Vue.set(state.patterns, pattern.letter, pattern)
 }
 
-export function resetLetter (state, letter) {
-  let letterHistory = state.history[letter] || {}
-  letterHistory.previousAttempts = letterHistory.attempts || 0
-  if (letterHistory.previousAttempts > 1) {
-    letterHistory.totalSingleAttemptSuccesses = 0
+export function resetExpression (state, expression) {
+  let expressionHistory = state.history[expression] || {}
+  expressionHistory.previousAttempts = expressionHistory.attempts || 0
+  if (expressionHistory.previousAttempts > 1) {
+    expressionHistory.totalSingleAttemptSuccesses = 0
   }
-  letterHistory.attempts = 0
-  Vue.set(state.history, letter, letterHistory)
+  expressionHistory.attempts = 0
+  Vue.set(state.history, expression, expressionHistory)
 }
 
-export function incrementAttempts (state, letter) {
-  let letterHistory = state.history[letter] || {}
-  letterHistory.attempts = letterHistory.attempts + 1 || 1
-  letterHistory.totalAttempts = letterHistory.totalAttempts + 1 || 1
-  Vue.set(state.history, letter, letterHistory)
+export function incrementAttempts (state, expression) {
+  let expressionHistory = state.history[expression] || {}
+  expressionHistory.attempts = expressionHistory.attempts + 1 || 1
+  expressionHistory.totalAttempts = expressionHistory.totalAttempts + 1 || 1
+  Vue.set(state.history, expression, expressionHistory)
 }
 
 export function incrementFail (state) {
@@ -66,58 +66,58 @@ export function resetStaleFail (state) {
   state.staleFails = 0
 }
 
-export function recordSuccess (state, letter) {
-  let letterHistory = state.history[letter] || {}
-  letterHistory.success = true
-  if (letterHistory.attempts === 1) {
-    letterHistory.singleAttemptSuccesses = letterHistory.singleAttemptSuccesses + 1 || 1
-    letterHistory.totalSingleAttemptSuccesses = letterHistory.totalSingleAttemptSuccesses + 1 || 1
-    if (letterHistory.totalAttempts === 1) { // Bonus for getting it right on your very first try
-      letterHistory.singleAttemptSuccesses = letterHistory.singleAttemptSuccesses + 1
-      letterHistory.totalSingleAttemptSuccesses = letterHistory.totalSingleAttemptSuccesses + 1
+export function recordSuccess (state, expression) {
+  let expressionHistory = state.history[expression] || {}
+  expressionHistory.success = true
+  if (expressionHistory.attempts === 1) {
+    expressionHistory.singleAttemptSuccesses = expressionHistory.singleAttemptSuccesses + 1 || 1
+    expressionHistory.totalSingleAttemptSuccesses = expressionHistory.totalSingleAttemptSuccesses + 1 || 1
+    if (expressionHistory.totalAttempts === 1) { // Bonus for getting it right on your very first try
+      expressionHistory.singleAttemptSuccesses = expressionHistory.singleAttemptSuccesses + 1
+      expressionHistory.totalSingleAttemptSuccesses = expressionHistory.totalSingleAttemptSuccesses + 1
     }
   }
-  Vue.set(state.history, letter, letterHistory)
+  Vue.set(state.history, expression, expressionHistory)
 }
 
-export function nextLetter (state) {
+export function nextExpression (state) {
   let next = state.activeQueue.shift()
-  state.letter = next
+  state.expression = next
   state.activeQueue.push(next)
 }
 
-export function stabilizeLetter (state, letter) {
-  var index = state.activeQueue.indexOf(letter)
+export function stabilizeExpression (state, expression) {
+  var index = state.activeQueue.indexOf(expression)
   if (index !== -1) {
     state.activeQueue.splice(index, 1)
   }
-  state.stableQueue.push(letter)
+  state.stableQueue.push(expression)
 }
 
 export function activateNextBunch (state) {
   let nextBunch = state.pendingQueue.shift()
   while (nextBunch.length > 0) {
-    let letter = nextBunch.shift()
-    state.activeQueue.push(letter)
+    let expression = nextBunch.shift()
+    state.activeQueue.push(expression)
   }
 }
 
-export function reintroduceLetter (state, letter) {
-  var index = state.stableQueue.indexOf(letter)
+export function reintroduceExpression (state, expression) {
+  var index = state.stableQueue.indexOf(expression)
   if (index !== -1) {
     state.stableQueue.splice(index, 1)
   }
-  state.activeQueue.push(letter)
+  state.activeQueue.push(expression)
 }
 
 export function resetState (state) {
   state.history = {}
-  state.letter = ''
+  state.expression = ''
   state.activeQueue = []
   state.stableQueue = []
   if (state.level === 'word') {
     state.pendingQueue = Array.from(state.sequence.words, block => Array.from(block, word => word))
   } else {
-    state.pendingQueue = Array.from(state.sequence.letters, block => Array.from(block, letter => letter))
+    state.pendingQueue = Array.from(state.sequence.expressions, block => Array.from(block, expression => expression))
   }
 }
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 32a3533..c0d067b 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -3,7 +3,7 @@ export default {
   patternsLoading: true,
   patterns: {},
   history: {},
-  letter: '',
+  expression: '',
   consecutiveFails: 0,
   staleFails: 0,
   activeQueue: [],

From a324832e335d4c317ffaf74051ddaa3e89fed274 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Sat, 2 May 2020 13:16:51 -0500
Subject: [PATCH 19/31] Words are working!

---
 .../src/client/src/components/EelCanvas.vue   | 47 ++++++++++++-------
 .../src/client/src/components/EelPractice.vue | 24 +++++-----
 frontend/src/client/src/logic/path.js         |  1 +
 frontend/src/client/src/logic/pattern.js      | 27 ++++++++++-
 .../src/client/src/store/common/actions.js    |  2 +-
 .../src/client/src/store/common/mutations.js  |  1 -
 6 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 620a99e..52f45ea 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -14,12 +14,17 @@ import { dimensions, scale, move } from '../logic/path.js'
 export default {
   name: 'EelCanvas',
   props: {
-    active: Boolean,
-    aspectRatio: Number
+    active: Boolean
   },
   data () {
     return {
-      recordedPoints: []
+      recordedPoints: [],
+      aspectRatio: 1
+    }
+  },
+  watch: {
+    aspectRatio: function () {
+      this.configureSize()
     }
   },
   mounted: function () {
@@ -135,8 +140,10 @@ export default {
       this.endDraw(this.prevPoint)
     },
     endDraw (point) {
-      point.type = 'end'
-      this.segmentDraw(point)
+      if (point) {
+        point.type = 'end'
+        this.segmentDraw(point)
+      }
       this.drawing = false
     },
     handleMouseLeave (event) {
@@ -149,7 +156,13 @@ export default {
       this.context.lineCap = 'round'
       this.context.strokeStyle = '#072A40'
       this.context.setLineDash([])
-      if (style === 'START_CIRCLE') {
+      if (style === 'USER') {
+        this.context.strokeStyle = '#178CA4'
+        this.context.lineWidth = 15
+      } else if (style === 'EEL') {
+        this.context.strokeStyle = '#18B7BE'
+        this.context.lineWidth = 8
+      } else if (style === 'START_CIRCLE') {
         this.context.strokeStyle = 'white'
         this.context.fillStyle = '#5A8100'
         this.context.lineWidth = 2
@@ -157,12 +170,6 @@ export default {
         this.context.strokeStyle = 'white'
         this.context.fillStyle = '#B74803'
         this.context.lineWidth = 2
-      } else if (style === 'USER') {
-        this.context.strokeStyle = '#178CA4'
-        this.context.lineWidth = 15
-      } else if (style === 'EEL') {
-        this.context.strokeStyle = '#18B7BE'
-        this.context.lineWidth = 8
       } else if (style === 'CAP_LINE' || style === 'BASE_LINE') {
         this.context.lineWidth = 6
       } else if (style === 'MEAN_LINE') {
@@ -197,6 +204,10 @@ export default {
       this.paintLine({ x: 0, y: this.boundary.meanLine }, { x: this.canvas.width, y: this.boundary.meanLine })
       this.setStrokeStyle('USER')
     },
+    setAspectRatio (pattern) {
+      this.aspectRatio = dimensions(pattern).ar
+      this.configureSize()
+    },
     fit (pattern) {
       let patternHeight = pattern.boundary.baseLine - pattern.boundary.capLine
       let canvasHeight = this.boundary.baseLine - this.boundary.capLine
@@ -205,18 +216,22 @@ export default {
       scaledPath = move(scaledPath, { x: 0.5 * this.canvas.width - dims.c.x, y: 0 })
       return scaledPath
     },
-    draw (pattern, includePath) {
+    draw (pattern, technique) {
+      this.setAspectRatio(pattern)
       let points = this.fit(pattern)
-      if (!points || points.length < 0) {
-        return
+      if (!points || points.length < 0 || technique === 'Freeform') {
+        setTimeout(() => {
+          this.$emit('animationcomplete')
+        }, 1200)
       }
+
       this.animationSegment = 0
       this.animationPoints = points
 
       let drawTime = 3000 // milliseconds
       this.timePerPoint = drawTime / this.animationPoints.length
 
-      if (includePath === false) {
+      if (technique === 'Pattern') {
         this.animationPoints = points.filter(point => point.type === 'start' || point.type === 'end')
         this.timePerPoint = 400 // milliseconds
       }
diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index 35f809e..fe9c9bb 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -22,7 +22,6 @@
       <EelCanvas
         v-on:animationcomplete="demoComplete()"
         :active="isCanvasActive"
-        :aspectRatio="canvasWidth/canvasHeight"
         ref="whiteboard">
       </EelCanvas>
     </q-card-section>
@@ -32,6 +31,7 @@
 <script>
 import EelCanvas from '../components/EelCanvas.vue'
 import { compare } from '../logic/validate.js'
+import { concatenate } from '../logic/pattern.js'
 
 export default {
   name: 'EelPractice',
@@ -41,8 +41,6 @@ export default {
   data () {
     return {
       isCanvasActive: false,
-      canvasWidth: 1,
-      canvasHeight: 1,
       atStart: true,
       feedback: 'Have fun!'
     }
@@ -84,7 +82,14 @@ export default {
       this.demonstrateExpression()
     },
     generatePattern () {
-      return this.$store.state.common.patterns[this.expression]
+      let patterns = []
+      for (let i = 0; i < this.expression.length; i++) {
+        let pattern = this.$store.state.common.patterns[this.expression[i]]
+        if (pattern) {
+          patterns.push(pattern)
+        }
+      }
+      return concatenate(patterns)
     },
     validateSuccess () {
       let recordedPattern = this.$refs.whiteboard.getRecording()
@@ -96,15 +101,8 @@ export default {
       return true
     },
     demonstrateExpression () {
-      if (this.$store.state.common.user.technique === 'Tracing') {
-        this.$refs.whiteboard.draw(this.generatePattern(), true)
-      } else if (this.$store.state.common.user.technique === 'Pattern') {
-        this.$refs.whiteboard.draw(this.generatePattern(), false)
-      } else {
-        setTimeout(() => {
-          this.demoComplete()
-        }, 1500)
-      }
+      let pattern = this.generatePattern()
+      this.$refs.whiteboard.draw(pattern, this.$store.state.common.user.technique)
     },
     demoComplete (event) {
       this.feedback = 'Begin'
diff --git a/frontend/src/client/src/logic/path.js b/frontend/src/client/src/logic/path.js
index 53c994a..89461c5 100644
--- a/frontend/src/client/src/logic/path.js
+++ b/frontend/src/client/src/logic/path.js
@@ -17,6 +17,7 @@ export function dimensions (path) {
   return {
     h: maxs.y - mins.y,
     w: maxs.x - mins.x,
+    ar: (maxs.x - mins.x) / (maxs.y - mins.y),
     c: {
       x: 0.5 * (mins.x + maxs.x),
       y: 0.5 * (mins.y + maxs.y)
diff --git a/frontend/src/client/src/logic/pattern.js b/frontend/src/client/src/logic/pattern.js
index 261f64a..c1f435f 100644
--- a/frontend/src/client/src/logic/pattern.js
+++ b/frontend/src/client/src/logic/pattern.js
@@ -16,10 +16,35 @@ export function normalize (pattern) {
   }
   let scaledPath = Path.scale(pattern.path, scaleFactor)
   let dims = Path.dimensions(scaledPath)
-  let normalizedPath = Path.move(scaledPath, { x: -1 * dims.min.x })
+  let normalizedPath = Path.move(scaledPath, { x: -1 * dims.min.x, y: 0 })
   return {
     letter: pattern.letter,
     boundary: normalizedBoundary,
     path: normalizedPath
   }
 }
+
+export function concatenate (patterns) {
+  let normalizedPatterns = patterns.map((p) => {
+    return normalize(p)
+  })
+  let sumWidth = normalizedPatterns.reduce((sum, pattern) => {
+    let dims = Path.dimensions(pattern.path)
+    return sum + dims.w
+  }, 0)
+  let gutter = 0.4 * sumWidth / normalizedPatterns.length
+  let concatenatedPath = []
+  let expression = ''
+  for (let i = 0; i < normalizedPatterns.length; i++) {
+    let startX = Path.dimensions(concatenatedPath).max.x + gutter || 0
+    let translatedPath = Path.move(normalizedPatterns[i].path, { x: startX, y: 0 })
+    concatenatedPath = concatenatedPath.concat(translatedPath)
+    expression += normalizedPatterns[i].letter
+  }
+
+  return {
+    letter: expression,
+    boundary: normalizedPatterns[0].boundary,
+    path: concatenatedPath
+  }
+}
diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 14272a9..2fbb5fa 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -38,7 +38,7 @@ export function fetchSequence (ctx) {
       ['q', 'w', 'x', 'y', 'z']
     ],
     words: [
-      ['feature', 'coming', 'soon']
+      ['hi', 'have', 'fun']
     ]
   }
   if (ctx.state.user != null && ctx.state.user.sequence != null && ctx.state.user.sequence === 'Tm9haCBH') {
diff --git a/frontend/src/client/src/store/common/mutations.js b/frontend/src/client/src/store/common/mutations.js
index a18d5a7..332052c 100644
--- a/frontend/src/client/src/store/common/mutations.js
+++ b/frontend/src/client/src/store/common/mutations.js
@@ -9,7 +9,6 @@ export function setSequence (state, sequence) {
 }
 
 export function setLevel (state, level) {
-  console.log(level)
   state.level = level
 }
 

From df6476c37d14b4cd9c3a4c62e7ca942810c66e40 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Sat, 2 May 2020 13:21:24 -0500
Subject: [PATCH 20/31] Removed unnecessary watcher

---
 frontend/src/client/src/components/EelCanvas.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 52f45ea..662e3a7 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -22,11 +22,6 @@ export default {
       aspectRatio: 1
     }
   },
-  watch: {
-    aspectRatio: function () {
-      this.configureSize()
-    }
-  },
   mounted: function () {
     this.canvas = this.$refs.mainCanvas
     this.context = this.canvas.getContext('2d')

From 67a7eb36cbac807cc2e5a26563bf3dc05a88985e Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Sat, 2 May 2020 13:30:22 -0500
Subject: [PATCH 21/31] Fixed camel-casing of expression

---
 .../src/client/src/store/common/actions.js     | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/client/src/store/common/actions.js b/frontend/src/client/src/store/common/actions.js
index 2fbb5fa..4bcd730 100644
--- a/frontend/src/client/src/store/common/actions.js
+++ b/frontend/src/client/src/store/common/actions.js
@@ -151,7 +151,7 @@ export function practiceAttempted (ctx, update) {
     ctx.commit('recordSuccess', update.expression)
     ctx.commit('resetFail')
     if (ctx.state.history[update.expression].singleAttemptSuccesses >= ctx.state.stabilizeCount) {
-      ctx.commit('stabilizeexpression', update.expression)
+      ctx.commit('stabilizeExpression', update.expression)
     }
     ctx.dispatch('nextExpression')
     ctx.commit('resetExpression', update.expression)
@@ -167,12 +167,12 @@ export function practiceAttempted (ctx, update) {
 
 export function nextExpression (ctx) {
   if (ctx.state.activeQueue.length < 1) {
-    ctx.dispatch('activateexpressions')
+    ctx.dispatch('activateExpressions')
   }
   ctx.commit('nextExpression')
 }
 
-export function activateexpressions (ctx) {
+export function activateExpressions (ctx) {
   let countToReintroduce = 0
 
   if (ctx.state.pendingQueue.length > 0) {
@@ -185,22 +185,22 @@ export function activateexpressions (ctx) {
   }
 
   for (let i = 0; i < countToReintroduce; i++) {
-    const newexpression = ctx.state.stableQueue[0]
-    ctx.commit('reintroduceexpression', newexpression)
+    const newExpression = ctx.state.stableQueue[0]
+    ctx.commit('reintroduceExpression', newExpression)
   }
 }
 
 export function staleFail (ctx) {
   if (ctx.state.staleFails > (ctx.state.stableQueue.length / STALE_REINTRODUCE_COUNT)) {
-    ctx.dispatch('activateexpressions')
+    ctx.dispatch('activateExpressions')
     ctx.commit('resetStaleFail')
   } else if (ctx.state.stableQueue.length >= STALE_REINTRODUCE_COUNT) {
     for (let i = 0; i < STALE_REINTRODUCE_COUNT; i++) {
-      const newexpression = ctx.state.stableQueue[0]
-      ctx.commit('reintroduceexpression', newexpression)
+      const newExpression = ctx.state.stableQueue[0]
+      ctx.commit('reintroduceExpression', newExpression)
     }
   } else {
-    ctx.dispatch('activateexpressions')
+    ctx.dispatch('activateExpressions')
   }
   ctx.commit('recordStaleFail')
   ctx.commit('resetFail')

From 3bfb943cad1a7800a6eada7394adc08fdfc0ca2e Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Sat, 2 May 2020 13:38:05 -0500
Subject: [PATCH 22/31] Fixed validate that was too stringent on thin letters.

---
 frontend/src/client/src/logic/path.js     |  5 -----
 frontend/src/client/src/logic/validate.js | 13 ++++++++-----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/src/client/src/logic/path.js b/frontend/src/client/src/logic/path.js
index 89461c5..b606788 100644
--- a/frontend/src/client/src/logic/path.js
+++ b/frontend/src/client/src/logic/path.js
@@ -27,11 +27,6 @@ export function dimensions (path) {
   }
 }
 
-export function size (path) {
-  let d = dimensions(path)
-  return Math.max(d.h, d.w)
-}
-
 export function simplify (originalPath, desiredPoints) {
   let p = originalPath.slice(0, originalPath.length)
   let ptsToBeRemoved = p.length - desiredPoints
diff --git a/frontend/src/client/src/logic/validate.js b/frontend/src/client/src/logic/validate.js
index 75a763f..2de9dee 100644
--- a/frontend/src/client/src/logic/validate.js
+++ b/frontend/src/client/src/logic/validate.js
@@ -35,7 +35,9 @@ function comparePoints (a, b, typeFilter) {
   let filteredA = a.filter(point => point.type === typeFilter)
   let filteredB = b.filter(point => point.type === typeFilter)
 
-  let size = Path.size(a)
+  let dimA = Path.dimensions(a)
+  let size = Math.max(dimA.w, dimA.h)
+
   for (let i = 0; i < filteredA.length; i++) {
     let minDist = size
     for (let j = 0; j < filteredB.length; j++) {
@@ -54,23 +56,24 @@ function comparePoints (a, b, typeFilter) {
 function compareDimensions (a, b) {
   let dimA = Path.dimensions(a)
   let dimB = Path.dimensions(b)
+  let size = Math.max(dimA.w, dimA.h)
 
-  let errorW = Math.abs(dimA.w - dimB.w) / dimA.w
+  let errorW = Math.abs(dimA.w - dimB.w) / size
   if (errorW > 0.125) {
     return false
   }
 
-  let errorH = Math.abs(dimA.h - dimB.h) / dimB.h
+  let errorH = Math.abs(dimA.h - dimB.h) / size
   if (errorH > 0.125) {
     return false
   }
 
-  let errorCx = Math.abs(dimA.c.x - dimB.c.x) / dimA.w
+  let errorCx = Math.abs(dimA.c.x - dimB.c.x) / size
   if (errorCx > 0.1) {
     return false
   }
 
-  let errorCy = Math.abs(dimA.c.y - dimB.c.y) / dimA.h
+  let errorCy = Math.abs(dimA.c.y - dimB.c.y) / size
   if (errorCy > 0.1) {
     return false
   }

From 1337de2ef55a41339909a430e2fe3b15ae30a16b Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Sat, 2 May 2020 13:41:49 -0500
Subject: [PATCH 23/31] Don't try to animate if no expression to animate

---
 frontend/src/client/src/components/EelPractice.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/client/src/components/EelPractice.vue b/frontend/src/client/src/components/EelPractice.vue
index fe9c9bb..d92a458 100644
--- a/frontend/src/client/src/components/EelPractice.vue
+++ b/frontend/src/client/src/components/EelPractice.vue
@@ -101,8 +101,10 @@ export default {
       return true
     },
     demonstrateExpression () {
-      let pattern = this.generatePattern()
-      this.$refs.whiteboard.draw(pattern, this.$store.state.common.user.technique)
+      if (this.expression && this.expression.length > 0) {
+        let pattern = this.generatePattern()
+        this.$refs.whiteboard.draw(pattern, this.$store.state.common.user.technique)
+      }
     },
     demoComplete (event) {
       this.feedback = 'Begin'

From 16a93ff51618cf419dd6608e7226f0b7ac9c226e Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Sat, 2 May 2020 13:47:45 -0500
Subject: [PATCH 24/31] Updated build version

---
 frontend/src/client/src/store/common/state.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index c0d067b..00d0977 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.1.0.5',
+  version: '1.1.0.6',
   patternsLoading: true,
   patterns: {},
   history: {},

From c9405a93e350c158cad4c39753e330d28a1bdf72 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 6 May 2020 16:58:25 -0500
Subject: [PATCH 25/31] Fixed spacing by hardcoding

---
 frontend/src/client/src/logic/pattern.js      | 8 ++------
 frontend/src/client/src/store/common/state.js | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/frontend/src/client/src/logic/pattern.js b/frontend/src/client/src/logic/pattern.js
index c1f435f..3440f6e 100644
--- a/frontend/src/client/src/logic/pattern.js
+++ b/frontend/src/client/src/logic/pattern.js
@@ -25,18 +25,14 @@ export function normalize (pattern) {
 }
 
 export function concatenate (patterns) {
+  const SPACING = 15
   let normalizedPatterns = patterns.map((p) => {
     return normalize(p)
   })
-  let sumWidth = normalizedPatterns.reduce((sum, pattern) => {
-    let dims = Path.dimensions(pattern.path)
-    return sum + dims.w
-  }, 0)
-  let gutter = 0.4 * sumWidth / normalizedPatterns.length
   let concatenatedPath = []
   let expression = ''
   for (let i = 0; i < normalizedPatterns.length; i++) {
-    let startX = Path.dimensions(concatenatedPath).max.x + gutter || 0
+    let startX = Path.dimensions(concatenatedPath).max.x + SPACING || 0
     let translatedPath = Path.move(normalizedPatterns[i].path, { x: startX, y: 0 })
     concatenatedPath = concatenatedPath.concat(translatedPath)
     expression += normalizedPatterns[i].letter
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 00d0977..b820707 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.1.0.6',
+  version: '1.1.0.7',
   patternsLoading: true,
   patterns: {},
   history: {},

From 0c57fcf256b97ee5684afb6258be0de153bcaa29 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 6 May 2020 16:59:43 -0500
Subject: [PATCH 26/31] Updated spacing variable name

---
 frontend/src/client/src/logic/pattern.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/client/src/logic/pattern.js b/frontend/src/client/src/logic/pattern.js
index 3440f6e..71a2065 100644
--- a/frontend/src/client/src/logic/pattern.js
+++ b/frontend/src/client/src/logic/pattern.js
@@ -25,14 +25,14 @@ export function normalize (pattern) {
 }
 
 export function concatenate (patterns) {
-  const SPACING = 15
+  const normalizedSpacing = 15
   let normalizedPatterns = patterns.map((p) => {
     return normalize(p)
   })
   let concatenatedPath = []
   let expression = ''
   for (let i = 0; i < normalizedPatterns.length; i++) {
-    let startX = Path.dimensions(concatenatedPath).max.x + SPACING || 0
+    let startX = Path.dimensions(concatenatedPath).max.x + normalizedSpacing || 0
     let translatedPath = Path.move(normalizedPatterns[i].path, { x: startX, y: 0 })
     concatenatedPath = concatenatedPath.concat(translatedPath)
     expression += normalizedPatterns[i].letter

From 28941d7bd7ce30fd580461cb071c21605bcb6f2c Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 6 May 2020 17:11:27 -0500
Subject: [PATCH 27/31] Only resizing on draw

---
 frontend/src/client/src/components/EelCanvas.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 662e3a7..647325d 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -4,7 +4,7 @@
       touch-action="none"
       id="mainCanvas"
       ref="mainCanvas">
-      <q-resize-observer @resize="onResize" debounce="1200" />
+      <!-- <q-resize-observer @resize="onResize" debounce="1200" /> -->
     </canvas>
 </template>
 
@@ -26,12 +26,12 @@ export default {
     this.canvas = this.$refs.mainCanvas
     this.context = this.canvas.getContext('2d')
     this.configureListeners()
-    this.configureSize()
+    this.clear()
   },
   methods: {
     onResize () {
       if (this.canvas) {
-        this.configureSize()
+        // this.configureSize()
       }
     },
     record () {
@@ -58,7 +58,6 @@ export default {
       this.canvas.width = this.canvas.clientWidth * pixelRatio
       this.canvas.height = this.canvas.clientHeight * pixelRatio
       this.configureGuidelines()
-      this.clear()
     },
     configureGuidelines () {
       this.boundary = {
@@ -187,8 +186,10 @@ export default {
       this.context.stroke()
     },
     clear () {
+      this.configureSize()
       this.canvas.style.background = '#F9F7F0'
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+      console.log(this.boundary)
       this.setStrokeStyle('CAP_LINE')
       this.paintLine({ x: 0, y: this.boundary.capLine }, { x: this.canvas.width, y: this.boundary.capLine })
       this.setStrokeStyle('BASE_LINE')
@@ -201,7 +202,6 @@ export default {
     },
     setAspectRatio (pattern) {
       this.aspectRatio = dimensions(pattern).ar
-      this.configureSize()
     },
     fit (pattern) {
       let patternHeight = pattern.boundary.baseLine - pattern.boundary.capLine
@@ -213,6 +213,7 @@ export default {
     },
     draw (pattern, technique) {
       this.setAspectRatio(pattern)
+      this.clear()
       let points = this.fit(pattern)
       if (!points || points.length < 0 || technique === 'Freeform') {
         setTimeout(() => {

From cbb036b2456847b5a112a452b653e65162562419 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 6 May 2020 17:12:55 -0500
Subject: [PATCH 28/31] Removed logging

---
 frontend/src/client/src/components/EelCanvas.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index 647325d..a373df2 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -189,7 +189,6 @@ export default {
       this.configureSize()
       this.canvas.style.background = '#F9F7F0'
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-      console.log(this.boundary)
       this.setStrokeStyle('CAP_LINE')
       this.paintLine({ x: 0, y: this.boundary.capLine }, { x: this.canvas.width, y: this.boundary.capLine })
       this.setStrokeStyle('BASE_LINE')

From 8154196a83678886b100e4cd6dbf1af976728cbc Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 27 May 2020 16:31:47 -0500
Subject: [PATCH 29/31] Fixed mobile resize not occurring.

---
 .../src/client/src/components/EelCanvas.vue   | 22 +++++++++++++------
 frontend/src/client/src/store/common/state.js |  2 +-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index a373df2..e44a703 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -11,6 +11,12 @@
 <script>
 import { dimensions, scale, move } from '../logic/path.js'
 
+const ASCENDER_RATIO = (5) / 85
+const CAPLINE_RATIO = (5) / 85
+const MEANLINE_RATIO = (5 + 25) / 85
+const BASELINE_RATIO = (5 + 25 + 25) / 85
+const BEARDLINE_RATIO = (5 + 25 + 25 + 25) / 85
+
 export default {
   name: 'EelCanvas',
   props: {
@@ -52,7 +58,9 @@ export default {
       if (this.aspectRatio !== null && this.aspectRatio !== 0) {
         let allowableAspectRatio = this.canvas.clientWidth / this.canvas.clientHeight
         if (allowableAspectRatio < this.aspectRatio) {
-          this.canvas.style.height = `${this.canvas.clientWidth / this.aspectRatio}px`
+          const wordHeight = this.canvas.clientWidth * 0.92 / this.aspectRatio
+          let totalHeight = wordHeight / (BASELINE_RATIO - CAPLINE_RATIO)
+          this.canvas.style.height = `${totalHeight}px`
         }
       }
       this.canvas.width = this.canvas.clientWidth * pixelRatio
@@ -62,11 +70,11 @@ export default {
     configureGuidelines () {
       this.boundary = {
         top: 0,
-        ascenderLine: this.canvas.height * (5) / 85,
-        capLine: this.canvas.height * (5) / 85,
-        meanLine: this.canvas.height * (5 + 25) / 85,
-        baseLine: this.canvas.height * (5 + 25 + 25) / 85,
-        beardLine: this.canvas.height * (5 + 25 + 25 + 25) / 85,
+        ascenderLine: this.canvas.height * ASCENDER_RATIO,
+        capLine: this.canvas.height * CAPLINE_RATIO,
+        meanLine: this.canvas.height * MEANLINE_RATIO,
+        baseLine: this.canvas.height * BASELINE_RATIO,
+        beardLine: this.canvas.height * BEARDLINE_RATIO,
         bottom: this.canvas.height
       }
     },
@@ -200,7 +208,7 @@ export default {
       this.setStrokeStyle('USER')
     },
     setAspectRatio (pattern) {
-      this.aspectRatio = dimensions(pattern).ar
+      this.aspectRatio = dimensions(pattern.path).ar
     },
     fit (pattern) {
       let patternHeight = pattern.boundary.baseLine - pattern.boundary.capLine
diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index b820707..4b3f8e3 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.1.0.7',
+  version: '1.1.0.8',
   patternsLoading: true,
   patterns: {},
   history: {},

From 2ce2569ee34fcb3052fd44687166efef7ca14d33 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 27 May 2020 16:47:39 -0500
Subject: [PATCH 30/31] Fixed default aspectratio of 1

---
 frontend/src/client/src/components/EelCanvas.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/client/src/components/EelCanvas.vue b/frontend/src/client/src/components/EelCanvas.vue
index e44a703..274da41 100644
--- a/frontend/src/client/src/components/EelCanvas.vue
+++ b/frontend/src/client/src/components/EelCanvas.vue
@@ -24,8 +24,7 @@ export default {
   },
   data () {
     return {
-      recordedPoints: [],
-      aspectRatio: 1
+      recordedPoints: []
     }
   },
   mounted: function () {

From fd95e0b0fbc9fcb752163f80f8b910f8440b0304 Mon Sep 17 00:00:00 2001
From: Jim Hill <jim.hill.r@gmail.com>
Date: Wed, 27 May 2020 17:00:45 -0500
Subject: [PATCH 31/31] Changed version number

---
 frontend/src/client/src/store/common/state.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/client/src/store/common/state.js b/frontend/src/client/src/store/common/state.js
index 4b3f8e3..56a8ca5 100644
--- a/frontend/src/client/src/store/common/state.js
+++ b/frontend/src/client/src/store/common/state.js
@@ -1,5 +1,5 @@
 export default {
-  version: '1.1.0.8',
+  version: '1.1.0.9',
   patternsLoading: true,
   patterns: {},
   history: {},