From 1a85e9855b500d2fe81ea9be1bb38105af5d56b6 Mon Sep 17 00:00:00 2001
From: Jeff <rustyangel@gmail.com>
Date: Sun, 26 Apr 2020 22:22:24 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20shareable=20URL=20404=20(#?=
 =?UTF-8?q?119)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_.vue                                   | 29 +++++++++++++++++++
 pages/index.vue                               |  2 +-
 .../start/_start/end/_end/angle/_deg.vue      | 17 -----------
 store/index.js                                | 10 +++++--
 4 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 pages/_.vue
 delete mode 100644 pages/mode/_mode/start/_start/end/_end/angle/_deg.vue

diff --git a/pages/_.vue b/pages/_.vue
new file mode 100644
index 0000000..dd24719
--- /dev/null
+++ b/pages/_.vue
@@ -0,0 +1,29 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    /**
+     * Parse the route params from the path and commit to store.
+     * @todo Add param validation and error page redirects.
+     */
+    middleware({ params, store, redirect }) {
+        let { pathMatch } = params
+        let re = /mode\/([a-z]+)\/start\/([a-z0-9]+)\/end\/([a-z0-9]+)\/angle\/(\d+)/g
+        let [found] = [...pathMatch.matchAll(re)]
+
+        store.dispatch('changeMode', found[1])
+        store.dispatch('changeColor', { color: `#${found[2]}`, stop: 0 })
+        store.dispatch('changeColor', { color: `#${found[3]}`, stop: 1 })
+        store.dispatch('rotate', found[4])
+    },
+
+    /**
+     * Redirect to main page without changing browser history.
+     */
+    created: function() {
+        this.$router.replace('/')
+    },
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 34b3124..872226f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -144,7 +144,7 @@ export default {
         },
 
         changeColorStop(color, stop) {
-            this.$store.commit('changeColor', { color, stop })
+            this.$store.dispatch('changeColor', { color, stop })
         },
     },
 }
diff --git a/pages/mode/_mode/start/_start/end/_end/angle/_deg.vue b/pages/mode/_mode/start/_start/end/_end/angle/_deg.vue
deleted file mode 100644
index 49523e9..0000000
--- a/pages/mode/_mode/start/_start/end/_end/angle/_deg.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-    <div></div>
-</template>
-
-<script>
-export default {
-    middleware({ params, store, redirect }) {
-        let { mode } = params
-
-        store.dispatch('changeMode', mode)
-    },
-
-    created: function() {
-        this.$router.replace('/')
-    },
-}
-</script>
diff --git a/store/index.js b/store/index.js
index 070388d..25703a2 100644
--- a/store/index.js
+++ b/store/index.js
@@ -17,7 +17,7 @@ export const state = () => ({
 })
 
 export const mutations = {
-    rotate(state, direction) {
+    CHANGE_ANGLE(state, direction) {
         state.direction = direction
     },
 
@@ -25,7 +25,7 @@ export const mutations = {
         state.colorMode = mode
     },
 
-    changeColor(state, { color, stop }) {
+    CHANGE_STOP(state, { color, stop }) {
         state.colorStops[stop].color.hex = color
     },
 }
@@ -39,6 +39,10 @@ export const actions = {
     },
 
     rotate({ commit }, direction) {
-        commit('rotate', direction)
+        commit('CHANGE_ANGLE', Number.parseInt(direction))
+    },
+
+    changeColor({ commit }, { color, stop }) {
+        commit('CHANGE_STOP', { color, stop })
     },
 }