feat: show players in gamemaster view

This commit is contained in:
Settel 2022-09-04 17:46:57 +02:00
parent 604b4f9f08
commit e04dca68bf
7 changed files with 159 additions and 10 deletions

View File

@ -96,6 +96,10 @@ $highscores-text-color: #ffffff;
$admin-tile-background-color: #384048; $admin-tile-background-color: #384048;
$admin-tile-border: none; $admin-tile-border: none;
$admin-tile-text-color: #ffffff; $admin-tile-text-color: #ffffff;
$admin-tile-bottom-icon-background-color: $admin-tile-background-color;
$admin-tile-bottom-icon-border: 1px solid #ffffff;
$admin-tile-bottom-icon-hover-background-color: #485058;
$admin-tile-bottom-icon-hover-border: $admin-tile-bottom-icon-border;
// Engine Debug // Engine Debug
$debug-background-color: lighten($background-primary-color, 10%); $debug-background-color: lighten($background-primary-color, 10%);

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
<polygon points="42,19 23,19 23,0 19,0 19,19 0,19 0,23 19,23 19,42 23,42 23,23 42,23 " style="stroke:#ffffff;fill:#ffffff;"/>
</svg>

After

Width:  |  Height:  |  Size: 488 B

View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 359.615 359.615" style="enable-background:new 0 0 359.615 359.615;" xml:space="preserve">
<g>
<polygon style="fill:#F4CA60;" points="296.117,10.685 256.147,359.615 103.467,359.615 63.497,10.685 89.667,88.325
121.647,183.185 179.807,10.685 237.967,183.185 269.947,88.325 "/>
<polygon style="fill:#F4C647;" points="256.525,30.438 230.161,359.615 129.454,359.615 103.089,30.438 152.264,183.185
179.807,10.685 207.351,183.185 "/>
<polygon style="fill:#FCD983;" points="269.947,88.325 228.327,359.615 131.288,359.615 89.667,88.325 121.647,183.185
179.807,10.685 237.967,183.185 "/>
<circle style="fill:#EA535E;" cx="63.497" cy="17.638" r="17.638"/>
<circle style="fill:#EA6C7C;" cx="103.089" cy="33.538" r="14.638"/>
<circle style="fill:#EA6C7C;" cx="256.525" cy="33.538" r="14.638"/>
<circle style="fill:#EA535E;" cx="296.118" cy="17.638" r="17.638"/>
<g>
<ellipse style="fill:#EA535E;" cx="106.645" cy="285.615" rx="6.319" ry="12.638"/>
<ellipse style="fill:#EA535E;" cx="252.97" cy="285.615" rx="6.319" ry="12.638"/>
<circle style="fill:#EA535E;" cx="140.067" cy="285.615" r="12.638"/>
<circle style="fill:#EA535E;" cx="179.807" cy="285.615" r="12.638"/>
<circle style="fill:#EA535E;" cx="219.548" cy="285.615" r="12.638"/>
</g>
<circle style="fill:#EA535E;" cx="179.807" cy="17.638" r="17.638"/>
<path style="fill:#F4C647;" d="M262.25,342.615H97.365c-4.694,0-8.5,3.806-8.5,8.5v0c0,4.694,3.806,8.5,8.5,8.5H262.25
c4.694,0,8.5-3.806,8.5-8.5v0C270.75,346.42,266.944,342.615,262.25,342.615z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -4,13 +4,21 @@
<div class="admin-tile__body"> <div class="admin-tile__body">
<slot /> <slot />
</div> </div>
<div v-if="iconBottom" class="admin-tile__icon-bottom-container">
<div class="admin-tile__icon-bottom" @click="emit('icon-click')">
<Icon :name="iconBottom" />
</div>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
title?: string, title?: string,
iconBottom?: string,
}>() }>()
const emit = defineEmits(['icon-click'])
</script> </script>
<style lang="scss"> <style lang="scss">
@ -18,6 +26,7 @@ defineProps<{
.admin-tile { .admin-tile {
&__container { &__container {
position: relative;
min-width: 300px; min-width: 300px;
margin: 40px; margin: 40px;
padding: 16px 30px; padding: 16px 30px;
@ -36,5 +45,29 @@ defineProps<{
font-size: 16px; font-size: 16px;
font-family: $font-secondary; font-family: $font-secondary;
} }
&__icon-bottom-container {
display: flex;
position: absolute;
left: 0;
bottom: -24px;
width: 100%;
}
&__icon-bottom {
width: 12px;
height: 12px;
margin: 0 auto;
padding: 20px;
background-color: $admin-tile-bottom-icon-background-color;
border-bottom: $admin-tile-bottom-icon-border;
border-radius: 64px;
cursor: pointer;
&:hover{
background-color: $admin-tile-bottom-icon-hover-background-color;
border-bottom: $admin-tile-bottom-icon-hover-border;
}
}
} }
</style> </style>

View File

@ -1,6 +1,6 @@
<template> <template>
<AdminTile title="Game"> <AdminTile title="Game">
<table> <table class="gameinfo-tile__table">
<tr class="gameinfo-tile__row"> <tr class="gameinfo-tile__row">
<td>{{ $t('name') }}:</td> <td>{{ $t('name') }}:</td>
<td>{{ gameinfo.name }}</td> <td>{{ gameinfo.name }}</td>
@ -98,12 +98,17 @@ const editLangChange = async (): Promise<void> => {
height: 100%; height: 100%;
} }
&__table {
margin-left: -12px;
border-collapse: separate;
border-spacing: 12px 0;
}
&__row { &__row {
height: 24px; height: 24px;
} }
&__edit { &__edit {
margin-left: 24px;
width: 16px; width: 16px;
height: 16px; height: 16px;
cursor: pointer; cursor: pointer;

View File

@ -1,23 +1,35 @@
<template> <template>
<AdminTile title="Players"> <AdminTile title="Players" icon-bottom="add" @icon-click="addPlayer">
<table> <table class="players-tile__table">
<tr> <tr>
<th>{{ $t('name') }}:</th> <th class="players-tile__table-head">{{ $t('name') }}:</th>
<th>{{ $t('num-quotes') }}</th> <th class="players-tile__table-head">{{ $t('num-quotes') }}</th>
<th>{{ $t('score') }}</th> <th class="players-tile__table-head">{{ $t('score') }}</th>
<th>{{ $t('last-logged-in') }}</th> <th class="players-tile__table-head">{{ $t('last-logged-in') }}</th>
</tr>
<tr v-for="player in players" class="players-tile__row" :key="player.id">
<td>
{{ player.name }}
<div v-if="player.role === 'gamemaster'" class="players-tile__is-gamemaster"><Icon name="crown" /></div>
</td>
<td>{{ player.numQuotes }}</td>
<td>{{ player.score }}</td>
<td>{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
</tr> </tr>
</table> </table>
</AdminTile> </AdminTile>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'
import useI18n from '@/composables/useI18n' import useI18n from '@/composables/useI18n'
import useDateFormatter from '@/composables/useDateFormatter';
import type { GameInfo } from '@/composables/engine.d' import type { GameInfo } from '@/composables/engine.d'
defineProps<{ const props = defineProps<{
gameinfo: GameInfo gameinfo: GameInfo
}>() }>()
// const emit = defineEmits(['update'])
const { $t } = useI18n({ const { $t } = useI18n({
name: { en: 'Name', de: 'Name' }, name: { en: 'Name', de: 'Name' },
@ -25,14 +37,44 @@ const { $t } = useI18n({
'score': { en: 'Score', de: 'Score' }, 'score': { en: 'Score', de: 'Score' },
'last-logged-in': { en: 'last logged in', de: 'zuletzt eingeloggt' }, 'last-logged-in': { en: 'last logged in', de: 'zuletzt eingeloggt' },
}) })
const { datetime } = useDateFormatter()
const players = computed(() => {
return props.gameinfo.players.sort((a, b) => a.name.localeCompare(b.name))
})
const addPlayer = () => {
alert('not yet implemented')
}
</script> </script>
<style lang="scss"> <style lang="scss">
.gameinfo-tile { .players-tile {
&__container { &__container {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&__table {
margin: 0 0 16px -12px;
border-collapse: separate;
border-spacing: 12px 0;
}
&__table-head {
text-align: left;
margin: 8px;
}
&__row {
height: 24px;
}
&__is-gamemaster {
display: inline-block;
margin-left: 4px;
width: 16px;
height: 14px;
}
} }
</style> </style>

View File

@ -3,6 +3,7 @@
<TopBar /> <TopBar />
<div class="gamemaster__tiles"> <div class="gamemaster__tiles">
<AdminGameInfoTile :gameinfo="gameinfo" @update="updateGameinfo" /> <AdminGameInfoTile :gameinfo="gameinfo" @update="updateGameinfo" />
<AdminPlayersTile :gameinfo="gameinfo" @update="updateGameinfo" />
<div class="gamemaster__tiles-spacer" /> <div class="gamemaster__tiles-spacer" />
</div> </div>
</div> </div>