✨ (dev) can rename dev

src/components/DevSession.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="dev-session">
-    <h1>dev {{ position }}</h1>
+    <h1 contenteditable @input="({ target }) => setDev(target.innerText)">
+      {{ dev || `dev ${position}` }}
+    </h1>
     <h2 v-show="isTurn">{{ session }}</h2>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
+import { useGetters, useActions } from 'vuex-composition-helpers'
+import { GetterTree } from 'vuex'
+import { State, RootActions } from '@/store'
 
 export default defineComponent({
   name: 'DevSession',
@@ -14,6 +19,27 @@ export default defineComponent({
     position: { type: String, required: true },
     isTurn: { type: Boolean, required: true },
     session: { type: String, required: true }
+  },
+  setup(props) {
+    const { dev1, dev2 } = useGetters<GetterTree<State, State>>([
+      'dev1',
+      'dev2'
+    ])
+    const { setDev1, setDev2 } = useActions<RootActions>(['setDev1', 'setDev2'])
+
+    const isDev1 = props.position === '1'
+
+    const dev = isDev1 ? dev1 : dev2
+
+    const setDev = (name: string) => {
+      const newName = (name ?? '').replace(/(\r\n|\n|\r)/gm, '').trim()
+      isDev1 ? setDev1(newName) : setDev2(newName)
+    }
+
+    return {
+      dev,
+      setDev
+    }
   }
 })
 </script>