91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
<template>
|
|
<div class="dev-session">
|
|
<input
|
|
:value="dev"
|
|
@input="setDev"
|
|
@blur="check"
|
|
type="text"
|
|
:placeholder="placeholder"
|
|
/>
|
|
<h2 v-show="isTurn">{{ session }}</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, computed } 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',
|
|
props: {
|
|
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 placeholder = ref(`dev ${props.position}`)
|
|
|
|
const dev = computed(() => (isDev1 ? dev1.value : dev2.value))
|
|
|
|
const setDev = (event: InputEvent) => {
|
|
const name = (event.target as HTMLInputElement).value
|
|
isDev1 ? setDev1(name) : setDev2(name)
|
|
}
|
|
|
|
const check = () => {
|
|
if (!dev.value) {
|
|
isDev1 ? setDev1(placeholder.value) : setDev2(placeholder.value)
|
|
}
|
|
}
|
|
|
|
return {
|
|
placeholder,
|
|
dev,
|
|
setDev,
|
|
check
|
|
}
|
|
}
|
|
})
|
|
</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: $serif-font-family;
|
|
box-sizing: content-box;
|
|
color: $color;
|
|
text-align: center;
|
|
font-size: 2.5rem;
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|