54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<div class="dev-session">
|
|
<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',
|
|
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 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>
|
|
|
|
<style lang="scss" scoped>
|
|
.dev-session {
|
|
h2 {
|
|
font-size: 24pt;
|
|
}
|
|
}
|
|
</style>
|