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

Add character selectors under preview images and center actions

Browse Source
This commit is contained in:
Pandipipas
2026-02-13 14:08:40 +01:00
parent 818ac56f53
commit 26855eb43f
1 changed files with 139 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboard/example/components/ScoreboardPanel.vue
+139 -60
View File
@@ -648,19 +648,39 @@ watch(
> >
<div class="scoreboard-preview__side"> <div class="scoreboard-preview__side">
<div class="scoreboard-preview__side-inner"> <div class="scoreboard-preview__side-inner">
<div class="scoreboard-preview__image-wrap"> <div class="scoreboard-preview__image-column">
<img <div class="scoreboard-preview__image-wrap">
v-if="leftPanelImage" <img
:src="leftPanelImage" v-if="leftPanelImage"
:alt="`${leftDisplayName || 'Left'} preview`" :src="leftPanelImage"
class="scoreboard-preview__image" :alt="`${leftDisplayName || 'Left'} preview`"
> class="scoreboard-preview__image"
<div >
v-else <div
class="scoreboard-preview__empty" v-else
> class="scoreboard-preview__empty"
Left image >
Left image
</div>
</div> </div>
<QSelect
v-model="scoreboardStore.scoreboard.leftCharacter"
v-model:input-value="leftCharacterInput"
:options="characterOptions"
option-value="value"
option-label="label"
emit-value
map-options
label="Character"
dense
use-input
input-debounce="0"
hide-selected
fill-input
clearable
class="scoreboard-preview__field scoreboard-preview__character-field"
:disable="!scoreboardStore.scoreboard.game"
/>
</div> </div>
<div class="scoreboard-preview__controls"> <div class="scoreboard-preview__controls">
<QSelect <QSelect
@@ -746,46 +766,65 @@ watch(
</div> </div>
</div> </div>
<div class="scoreboard-preview__score-controls"> <div class="scoreboard-preview__center">
<div class="scoreboard-preview__score-side"> <div class="scoreboard-preview__score-controls">
<QBtn <div class="scoreboard-preview__score-side">
flat <QBtn
dense flat
round dense
size="sm" round
icon="add" size="sm"
@click="adjustLeftScore(1)" icon="add"
/> @click="adjustLeftScore(1)"
<span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.leftScore }}</span> />
<QBtn <span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.leftScore }}</span>
flat <QBtn
dense flat
round dense
size="sm" round
icon="remove" size="sm"
@click="adjustLeftScore(-1)" icon="remove"
/> @click="adjustLeftScore(-1)"
/>
</div>
<span class="scoreboard-preview__dash">-</span>
<div class="scoreboard-preview__score-side">
<QBtn
flat
dense
round
size="sm"
icon="add"
@click="adjustRightScore(1)"
/>
<span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.rightScore }}</span>
<QBtn
flat
dense
round
size="sm"
icon="remove"
@click="adjustRightScore(-1)"
/>
</div>
</div> </div>
<span class="scoreboard-preview__dash">-</span> <div class="scoreboard-preview__actions">
<div class="scoreboard-preview__score-side">
<QBtn <QBtn
flat color="secondary"
dense outline
round round
size="sm" icon="swap_horiz"
icon="add" @click="scoreboardStore.swapPlayers"
@click="adjustRightScore(1)"
/> />
<span class="scoreboard-preview__score-value">{{ scoreboardStore.scoreboard.rightScore }}</span>
<QBtn <QBtn
flat color="secondary"
dense outline
round round
size="sm" icon="restart_alt"
icon="remove" @click="scoreboardStore.resetScores"
@click="adjustRightScore(-1)"
/> />
</div> </div>
</div> </div>
@@ -873,19 +912,39 @@ watch(
</template> </template>
</QSelect> </QSelect>
</div> </div>
<div class="scoreboard-preview__image-wrap"> <div class="scoreboard-preview__image-column">
<img <div class="scoreboard-preview__image-wrap">
v-if="rightPanelImage" <img
:src="rightPanelImage" v-if="rightPanelImage"
:alt="`${rightDisplayName || 'Right'} preview`" :src="rightPanelImage"
class="scoreboard-preview__image" :alt="`${rightDisplayName || 'Right'} preview`"
> class="scoreboard-preview__image"
<div >
v-else <div
class="scoreboard-preview__empty" v-else
> class="scoreboard-preview__empty"
Right image >
Right image
</div>
</div> </div>
<QSelect
v-model="scoreboardStore.scoreboard.rightCharacter"
v-model:input-value="rightCharacterInput"
:options="characterOptions"
option-value="value"
option-label="label"
emit-value
map-options
label="Character"
dense
use-input
input-debounce="0"
hide-selected
fill-input
clearable
class="scoreboard-preview__field scoreboard-preview__character-field"
:disable="!scoreboardStore.scoreboard.game"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -1220,6 +1279,13 @@ watch(
align-items: center; align-items: center;
} }
.scoreboard-preview__image-column {
width: min(100%, 320px);
display: flex;
flex-direction: column;
gap: 8px;
}
.scoreboard-preview__side-inner { .scoreboard-preview__side-inner {
width: 100%; width: 100%;
display: grid; display: grid;
@@ -1237,11 +1303,11 @@ watch(
} }
.scoreboard-preview__side .scoreboard-preview__image-wrap { .scoreboard-preview__side .scoreboard-preview__image-column {
justify-self: start; justify-self: start;
} }
.scoreboard-preview__side--right .scoreboard-preview__image-wrap { .scoreboard-preview__side--right .scoreboard-preview__image-column {
justify-self: end; justify-self: end;
} }
@@ -1304,6 +1370,13 @@ watch(
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
} }
.scoreboard-preview__center {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.scoreboard-preview__score-controls { .scoreboard-preview__score-controls {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1311,6 +1384,12 @@ watch(
gap: 18px; gap: 18px;
} }
.scoreboard-preview__actions {
display: flex;
align-items: center;
gap: 10px;
}
.scoreboard-preview__score-side { .scoreboard-preview__score-side {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@@ -1365,7 +1444,7 @@ watch(
gap: 12px; gap: 12px;
} }
.scoreboard-preview__score-controls { .scoreboard-preview__center {
order: -1; order: -1;
justify-self: center; justify-self: center;
} }