julien/binome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 (dev session) change to input to change names

Browse Source
This commit is contained in:
Julien Calixte
2020-07-14 00:59:24 +02:00
parent ed102aff58
commit b654e1a0c7
4 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/index.html
View File

@@ -3,7 +3,10 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <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" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>Binôme</title> <title>Binôme</title>
</head> </head>

2
src/App.vue
View File

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

41
src/components/DevSession.vue
View File

@@ -1,12 +1,17 @@
<template> <template>
<div class="dev-session"> <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> <h2 v-show="isTurn">{{ session }}</h2>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from '@vue/composition-api' import { defineComponent, ref } from '@vue/composition-api'
import { useGetters, useActions } from 'vuex-composition-helpers' import { useGetters, useActions } from 'vuex-composition-helpers'
import { GetterTree } from 'vuex' import { GetterTree } from 'vuex'
import { State, RootActions } from '@/store' import { State, RootActions } from '@/store'
@@ -27,15 +32,18 @@ export default defineComponent({
const isDev1 = props.position === '1' 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 setDev = (event: InputEvent) => {
const name = (event.target as HTMLElement).innerText const name = (event.target as HTMLInputElement).value
isDev1 ? setDev1(name) : setDev2(name) isDev1 ? setDev1(name) : setDev2(name)
} }
return { return {
dev: dev || `dev ${props.position}`, placeholder,
dev,
setDev setDev
} }
} }
@@ -43,9 +51,32 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/styles/variables';
.dev-session { .dev-session {
h2 { h2 {
font-size: 24pt; 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> </style>

2
src/components/ZoneMusic.vue
View File

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