feat: show players in gamemaster view
This commit is contained in:
Settel
parent
604b4f9f08
commit
e04dca68bf
@ -96,6 +96,10 @@ $highscores-text-color: #ffffff;
|
||||
$admin-tile-background-color: #384048;
|
||||
$admin-tile-border: none;
|
||||
$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
|
||||
$debug-background-color: lighten($background-primary-color, 10%);
|
||||
|
||||
6
client/src/assets/icons/add.svg
Normal file
6
client/src/assets/icons/add.svg
Normal 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 |
58
client/src/assets/icons/crown.svg
Normal file
58
client/src/assets/icons/crown.svg
Normal 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 |
@ -4,13 +4,21 @@
|
||||
<div class="admin-tile__body">
|
||||
<slot />
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title?: string,
|
||||
iconBottom?: string,
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['icon-click'])
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -18,6 +26,7 @@ defineProps<{
|
||||
|
||||
.admin-tile {
|
||||
&__container {
|
||||
position: relative;
|
||||
min-width: 300px;
|
||||
margin: 40px;
|
||||
padding: 16px 30px;
|
||||
@ -36,5 +45,29 @@ defineProps<{
|
||||
font-size: 16px;
|
||||
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>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<AdminTile title="Game">
|
||||
<table>
|
||||
<table class="gameinfo-tile__table">
|
||||
<tr class="gameinfo-tile__row">
|
||||
<td>{{ $t('name') }}:</td>
|
||||
<td>{{ gameinfo.name }}</td>
|
||||
@ -98,12 +98,17 @@ const editLangChange = async (): Promise<void> => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__table {
|
||||
margin-left: -12px;
|
||||
border-collapse: separate;
|
||||
border-spacing: 12px 0;
|
||||
}
|
||||
|
||||
&__row {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&__edit {
|
||||
margin-left: 24px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -1,23 +1,35 @@
|
||||
<template>
|
||||
<AdminTile title="Players">
|
||||
<table>
|
||||
<AdminTile title="Players" icon-bottom="add" @icon-click="addPlayer">
|
||||
<table class="players-tile__table">
|
||||
<tr>
|
||||
<th>{{ $t('name') }}:</th>
|
||||
<th>{{ $t('num-quotes') }}</th>
|
||||
<th>{{ $t('score') }}</th>
|
||||
<th>{{ $t('last-logged-in') }}</th>
|
||||
<th class="players-tile__table-head">{{ $t('name') }}:</th>
|
||||
<th class="players-tile__table-head">{{ $t('num-quotes') }}</th>
|
||||
<th class="players-tile__table-head">{{ $t('score') }}</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>
|
||||
</table>
|
||||
</AdminTile>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import useI18n from '@/composables/useI18n'
|
||||
import useDateFormatter from '@/composables/useDateFormatter';
|
||||
import type { GameInfo } from '@/composables/engine.d'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
gameinfo: GameInfo
|
||||
}>()
|
||||
// const emit = defineEmits(['update'])
|
||||
|
||||
const { $t } = useI18n({
|
||||
name: { en: 'Name', de: 'Name' },
|
||||
@ -25,14 +37,44 @@ const { $t } = useI18n({
|
||||
'score': { en: 'Score', de: 'Score' },
|
||||
'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>
|
||||
|
||||
<style lang="scss">
|
||||
.gameinfo-tile {
|
||||
.players-tile {
|
||||
&__container {
|
||||
width: 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>
|
||||
@ -3,6 +3,7 @@
|
||||
<TopBar />
|
||||
<div class="gamemaster__tiles">
|
||||
<AdminGameInfoTile :gameinfo="gameinfo" @update="updateGameinfo" />
|
||||
<AdminPlayersTile :gameinfo="gameinfo" @update="updateGameinfo" />
|
||||
<div class="gamemaster__tiles-spacer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user