✨ (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>

src/store/index.ts

@@ -7,11 +7,15 @@ Vue.use(Vuex)
 export interface State {
   interval: number
   withMusic: boolean
+  dev1: string | null
+  dev2: string | null
 }
 
 export interface RootActions extends ActionTree<State, State> {
   setInterval: (ctx: ActionContext<State, State>, payload: number) => void
   setWithMusic: (ctx: ActionContext<State, State>, payload: boolean) => void
+  setDev1: (ctx: ActionContext<State, State>, payload: string) => void
+  setDev2: (ctx: ActionContext<State, State>, payload: string) => void
 }
 
 const vuexLocal = new VuexPersistence<State>({
@@ -21,15 +25,21 @@ const vuexLocal = new VuexPersistence<State>({
 
 const SET_INTERVAL = 'SET_INTERVAL'
 const WITH_MUSIC = 'WITH_MUSIC'
+const SET_DEV_1 = 'SET_DEV_1'
+const SET_DEV_2 = 'SET_DEV_2'
 
 const store = new Vuex.Store<State>({
   state: {
     interval: 5,
-    withMusic: true
+    withMusic: true,
+    dev1: null,
+    dev2: null
   },
   getters: {
     interval: ({ interval }) => interval,
-    withMusic: ({ withMusic }) => withMusic
+    withMusic: ({ withMusic }) => withMusic,
+    dev1: ({ dev1 }) => dev1,
+    dev2: ({ dev2 }) => dev2
   },
   mutations: {
     [SET_INTERVAL](state, interval: number) {
@@ -37,6 +47,12 @@ const store = new Vuex.Store<State>({
     },
     [WITH_MUSIC](state, withMusic: boolean) {
       state.withMusic = withMusic
+    },
+    [SET_DEV_1](state, dev1: string) {
+      state.dev1 = dev1
+    },
+    [SET_DEV_2](state, dev2: string) {
+      state.dev2 = dev2
     }
   },
   actions: {
@@ -45,8 +61,14 @@ const store = new Vuex.Store<State>({
         commit(SET_INTERVAL, interval)
       }
     },
-    setWithMusic({ commit }, withMusic: number) {
+    setWithMusic({ commit }, withMusic: boolean) {
       commit(WITH_MUSIC, withMusic)
+    },
+    setDev1({ commit }, dev1: string) {
+      commit(SET_DEV_1, dev1)
+    },
+    setDev2({ commit }, dev2: string) {
+      commit(SET_DEV_2, dev2)
     }
   },
   plugins: [vuexLocal.plugin]

src/views/Home.vue

@@ -2,8 +2,18 @@
   <div class="home">
     <IntervalInput :editable="timeState === 'stopped'" />
     <section class="developers">
-      <DevSession position="1" :is-turn="isDev1Turn" :session="session" />
-      <DevSession position="2" :is-turn="!isDev1Turn" :session="session" />
+      <DevSession
+        class="dev-session"
+        position="1"
+        :is-turn="isDev1Turn"
+        :session="session"
+      />
+      <DevSession
+        class="dev-session"
+        position="2"
+        :is-turn="!isDev1Turn"
+        :session="session"
+      />
     </section>
     <div class="global-time">{{ time }}</div>
     <div class="actions">
@@ -121,6 +131,10 @@ export default defineComponent({
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
+
+  .dev-session {
+    flex: 1;
+  }
 }
 
 .global-time {