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
+82 -3
View File
@@ -648,6 +648,7 @@ watch(
>
<div class="scoreboard-preview__side">
<div class="scoreboard-preview__side-inner">
<div class="scoreboard-preview__image-column">
<div class="scoreboard-preview__image-wrap">
<img
v-if="leftPanelImage"
@@ -662,6 +663,25 @@ watch(
Left image
</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 class="scoreboard-preview__controls">
<QSelect
v-model="scoreboardStore.scoreboard.leftPlayerId"
@@ -746,6 +766,7 @@ watch(
</div>
</div>
<div class="scoreboard-preview__center">
<div class="scoreboard-preview__score-controls">
<div class="scoreboard-preview__score-side">
<QBtn
@@ -790,6 +811,24 @@ watch(
</div>
</div>
<div class="scoreboard-preview__actions">
<QBtn
color="secondary"
outline
round
icon="swap_horiz"
@click="scoreboardStore.swapPlayers"
/>
<QBtn
color="secondary"
outline
round
icon="restart_alt"
@click="scoreboardStore.resetScores"
/>
</div>
</div>
<div class="scoreboard-preview__side scoreboard-preview__side--right">
<div class="scoreboard-preview__side-inner">
<div class="scoreboard-preview__controls">
@@ -873,6 +912,7 @@ watch(
</template>
</QSelect>
</div>
<div class="scoreboard-preview__image-column">
<div class="scoreboard-preview__image-wrap">
<img
v-if="rightPanelImage"
@@ -887,6 +927,25 @@ watch(
Right image
</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>
</QCard>
@@ -1220,6 +1279,13 @@ watch(
align-items: center;
}
.scoreboard-preview__image-column {
width: min(100%, 320px);
display: flex;
flex-direction: column;
gap: 8px;
}
.scoreboard-preview__side-inner {
width: 100%;
display: grid;
@@ -1237,11 +1303,11 @@ watch(
}
.scoreboard-preview__side .scoreboard-preview__image-wrap {
.scoreboard-preview__side .scoreboard-preview__image-column {
justify-self: start;
}
.scoreboard-preview__side--right .scoreboard-preview__image-wrap {
.scoreboard-preview__side--right .scoreboard-preview__image-column {
justify-self: end;
}
@@ -1304,6 +1370,13 @@ watch(
color: rgba(255, 255, 255, 0.92);
}
.scoreboard-preview__center {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.scoreboard-preview__score-controls {
display: flex;
align-items: center;
@@ -1311,6 +1384,12 @@ watch(
gap: 18px;
}
.scoreboard-preview__actions {
display: flex;
align-items: center;
gap: 10px;
}
.scoreboard-preview__score-side {
display: inline-flex;
flex-direction: column;
@@ -1365,7 +1444,7 @@ watch(
gap: 12px;
}
.scoreboard-preview__score-controls {
.scoreboard-preview__center {
order: -1;
justify-self: center;
}