Something went wrong. Try again.
Something went wrong. Try again.
1.4 kB · 74 lines
Vue
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475<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 setup lang="ts">import { ref, computed } from 'vue'import { useMainStore } from '@/store'
const props = defineProps<{ position: string isTurn: boolean session: string}>()
const store = useMainStore()
const isDev1 = props.position === '1'
const placeholder = ref(`dev ${props.position}`)
const dev = computed(() => (isDev1 ? store.dev1 : store.dev2))
const setDev = (event: Event) => { const name = (event.target as HTMLInputElement).value isDev1 ? store.setDev1(name) : store.setDev2(name)}
const check = () => { if (!dev.value) { isDev1 ? store.setDev1(placeholder.value) : store.setDev2(placeholder.value) }}</script>
<style lang="scss" scoped>.dev-session { h2 { font-size: 24pt; margin-bottom: 0; }
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>