Pandipipas/scoreko-dev
1
0
Fork 0
mirror of https://github.com/Pandipipas/scoreko-dev.git synced 2026-06-06 11:42:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add commentary panel and Tekken-inspired OBS overlay

Browse Source
This commit is contained in:
Pandipipas
2026-02-12 00:13:18 +01:00
parent 6d28cfb87e
commit 3ee36c03df
11 changed files with 419 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboard/example/components/CommentaryPanel.vue
+77
View File
@@ -0,0 +1,77 @@
<script setup lang="ts">
import { useCommentaryStore } from '../stores/commentary';
const commentaryStore = useCommentaryStore();
</script>
<template>
<div class="commentary-panel">
<div class="row items-center q-mb-md">
<div class="text-h4">
Commentary
</div>
<QSpace />
<QBtn
color="secondary"
outline
icon="swap_horiz"
label="Intercambiar lados"
@click="commentaryStore.swapCommentators"
/>
</div>
<div class="row q-col-gutter-lg">
<div class="col-12 col-md-6">
<QCard
flat
bordered
>
<QCardSection>
<div class="text-subtitle1 text-weight-bold">
Left side
</div>
</QCardSection>
<QSeparator />
<QCardSection>
<QInput
v-model="commentaryStore.leftCommentator"
label="Commentator"
dense
outlined
/>
</QCardSection>
</QCard>
</div>
<div class="col-12 col-md-6">
<QCard
flat
bordered
>
<QCardSection>
<div class="text-subtitle1 text-weight-bold">
Right side
</div>
</QCardSection>
<QSeparator />
<QCardSection>
<QInput
v-model="commentaryStore.rightCommentator"
label="Commentator"
dense
outlined
/>
</QCardSection>
</QCard>
</div>
</div>
</div>
</template>
<style scoped>
.commentary-panel {
display: flex;
flex-direction: column;
gap: 16px;
}
</style>