🐛 (dev session) change to input to change names

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="plume">
+  <div id="app">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="120"

src/components/DevSession.vue

@@ -1,12 +1,17 @@
 <template>
   <div class="dev-session">
-    <h1 contenteditable @input="setDev">{{ dev }}</h1>
+    <input
+      :value="dev"
+      @input="setDev"
+      type="text"
+      :placeholder="placeholder"
+    />
     <h2 v-show="isTurn">{{ session }}</h2>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, ref } from '@vue/composition-api'
 import { useGetters, useActions } from 'vuex-composition-helpers'
 import { GetterTree } from 'vuex'
 import { State, RootActions } from '@/store'
@@ -27,15 +32,18 @@ export default defineComponent({
 
     const isDev1 = props.position === '1'
 
-    const dev = isDev1 ? dev1 : dev2
+    const placeholder = ref(`dev ${props.position}`)
+
+    const dev = (isDev1 ? dev1.value : dev2.value) || placeholder
 
     const setDev = (event: InputEvent) => {
-      const name = (event.target as HTMLElement).innerText
+      const name = (event.target as HTMLInputElement).value
       isDev1 ? setDev1(name) : setDev2(name)
     }
 
     return {
-      dev: dev || `dev ${props.position}`,
+      placeholder,
+      dev,
       setDev
     }
   }
@@ -43,9 +51,32 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/variables';
+
 .dev-session {
   h2 {
     font-size: 24pt;
   }
+
+  input {
+    margin: 0;
+    border: 0;
+    padding: 0;
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
+    background: none;
+    line-height: 1;
+    font-family: $font-family;
+    box-sizing: content-box;
+    color: $color;
+    text-align: center;
+    font-size: 1.5rem;
+    width: 100%;
+
+    &:focus {
+      outline: none;
+    }
+  }
 }
 </style>

src/components/ZoneMusic.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="zone-music">
+  <div class="zone-music plume">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
         <span :class="{ selected: !withMusic, disabled: withMusic }"