From b654e1a0c760f08e23a20342c3b1f00ea383c297 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Tue, 14 Jul 2020 00:59:24 +0200
Subject: [PATCH] :bug: (dev session) change to input to change names

---
 public/index.html             |  5 ++++-
 src/App.vue                   |  2 +-
 src/components/DevSession.vue | 41 ++++++++++++++++++++++++++++++-----
 src/components/ZoneMusic.vue  |  2 +-
 4 files changed, 42 insertions(+), 8 deletions(-)
diff --git a/public/index.html b/public/index.html
index 931887a..21228ea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,user-scalable=no"
+    />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title>Binôme</title>
   </head>
diff --git a/src/App.vue b/src/App.vue
index 84118a1..a049fb5 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/components/DevSession.vue b/src/components/DevSession.vue
index 6bb9ae8..914f318 100644
--- a/src/components/DevSession.vue
+++ b/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>
diff --git a/src/components/ZoneMusic.vue b/src/components/ZoneMusic.vue
index 49f4cea..452d4ec 100644
--- a/src/components/ZoneMusic.vue
+++ b/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 }"
