settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: add reload button to gamemaster view

Browse Source
This commit is contained in:
Settel 2022-09-13 09:20:09 +02:00
parent 9e0403cbf2
commit 453a29afbd
3 changed files with 87 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
client/src/assets/icons/reload.svg Normal file
View File

@ -0,0 +1,59 @@
<?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 488.482 488.482" style="enable-background:new 0 0 488.482 488.482;" xml:space="preserve">
<g>
<g>
<path d="M456.382,359.741l4.1-6.6c1.2-2.3,2.4-4.6,3.5-6.9c2.3-4.7,4.8-9.2,6.8-14c3.7-9.7,7.7-19.3,10.1-29.4
c3.1-10,4.4-20.3,6.1-30.6c0.7-5.2,0.7-10.4,1.1-15.6l0.4-7.8v-0.5v-0.2v-0.1v-1.1v-0.9l-0.1-1.8l-0.2-3.6l-0.6-14.3l-2.3-16.2
c-0.4-2.7-0.7-5.5-1.3-8l-1.9-7.6c-1.4-5-2.4-10.2-4.2-15.1c-6.4-19.9-16.1-38.7-27.7-56c-12.1-17.1-26.6-32.3-42.7-45.6
c-15.7-13-33.1-24.5-52-33.1c-7.5-3.2-15.3-6.1-23-8.8l-11.9-3.2c-4-1-7.9-2.3-12-2.8l-12.2-2l-6.1-1l-6.2-0.4l-12.3-0.7l-3.1-0.2
h-0.8h-0.2h-1.2h-0.4l-1.4,0.1l-5.6,0.2l-11.3,0.5c-1.8,0-4,0.4-6.1,0.7l-6.4,0.9l-12.8,1.9l-12,3c-4,1.1-8.1,1.8-11.9,3.4
l-11.6,4.2l-5.8,2.2l-5.6,2.7l-11.1,5.4c-58.8,30.5-101.2,89.3-112,153.5c-0.6,4.6-1.1,9.1-1.5,13.4c-0.4,4.3-0.8,8.5-0.5,12.5
c0.1,2.4,0.2,4.6,0.4,6.9c-11.1-17.4-23.7-33.9-34-51.8c-0.8-1.4-5.2-1.7-7.7-1c-4.9,1.3-7.2,5.4-8.1,9.7
c-2.9,14.3,0.3,27.3,6.4,38.6c11.5,21.3,22.1,43.2,35.8,63.2l0.3,0.5c0.5,0.7,1,1.4,1.7,2.1c7,7.6,18.9,8.1,26.6,1
c4.9-4.5,9.6-9.2,14.1-14.2c3.1-2.3,6.2-4.5,9.2-6.9c19.1-15,37.5-30.9,52.7-50.1c4.3-5.5,5.5-12.7-1-19.1
c-5.9-5.8-13.6-7.1-19.5-3.1c-10.6,7.2-21.3,14.3-30.6,23c-8.6,8-16.8,16.4-24.9,24.9c0.5-1.6,1-3.3,1.5-5.2
c1.5-5.2,3-11.1,4.2-17.9c0.4-3.4,1.7-6.8,2.4-10.5c0.8-3.7,1.6-7.5,2.4-11.5c7-28.5,20.7-55.1,39.3-77.5
c18.5-22.5,42.5-40,68.5-52.3c5.1-2.8,10.7-4.5,16.1-6.6c5.4-2.3,11-3.5,16.7-5.1c2.8-0.7,5.6-1.7,8.4-2.1l8.2-1.3l8.3-1.4
l9.5-0.6c23.4-1.5,46.9,1.1,69.2,8.2c44.7,13.9,84.1,45.4,107.3,86.8l6,14.7c1.1,2.4,1.8,5,2.6,7.5l2.3,7.6
c1.8,5,2.6,10.2,3.7,15.3l1.6,7.7c0.4,2.5,0.5,5,0.8,7.5l0.8,7.4c0.1,1.3,0.3,2.4,0.4,3.8l0.1,4.3l0.1,8.6l0.1,4.3v2.1v0.5v0.3
v0.1c0,0.2,0-1.6,0-0.8l-0.1,1l-1.3,15.6c-0.5,5.2-1.8,10.3-2.6,15.4c-8.3,40.6-29.6,78.7-61.3,105.6
c-15.7,13.6-33.6,24.5-52.9,32.2c-4.9,1.7-9.7,3.8-14.7,5.2l-15.1,3.9l-14.6,2.3c-2.2,0.5-5.2,0.6-8.1,0.8l-8.6,0.5l-4.3,0.2
l-1.7,0.1h-0.4h-1l-7.8-0.2c-5.2-0.4-10.4-0.7-15.5-1.5c-10.3-1.4-20.4-3.7-30.3-6.9c-19.8-6.3-38.3-16.3-54.6-28.9
c-2.9-2.3-7.1-4.6-10.9-6.4c-3.8-1.6-8.1-3.9-10.3-4.3c-4.6-1-5.7,1-4.5,5c0.6,1.9,1.7,4.4,3.3,7.1c1.6,2.6,3.6,5.5,6.1,8.5
c16.3,20,40.6,38,70.1,48.8c14.7,5.4,30.6,9.1,47.1,10.4l6.2,0.4l1.5,0.1l0.8,0.1h0.4h0.2h0.8h2.9c3.9-0.1,7.8-0.1,11.8-0.2
l5.9-0.1l6.4-0.8l12.9-1.7c40.2-7.1,78.4-25.4,108.8-53.2C432.182,393.241,445.882,377.541,456.382,359.741z" style="stroke:#ffffff;fill:#ffffff;"/>
</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>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

25
client/src/components/admin/InfoTile.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="admin-tile__container">
<div class="admin-tile__title">{{ title }}</div>
<div v-if="iconTop" class="admin-tile__icon-top" @click="emit('icon-top-click')"><Icon :name="iconTop" /></div>
<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')">
<div class="admin-tile__icon-bottom" @click="emit('icon-bottom-click')">
<Icon :name="iconBottom" />
</div>
</div>
@ -15,10 +16,11 @@
<script setup lang="ts">
defineProps<{
title?: string,
iconTop?: string,
iconBottom?: string,
}>()
const emit = defineEmits(['icon-click'])
const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
</script>
<style lang="scss">
@ -41,6 +43,10 @@ const emit = defineEmits(['icon-click'])
font-family: $font-primary;
}
&__action-button {
background-color: red;
}
&__body {
font-size: 16px;
font-family: $font-secondary;
@ -54,6 +60,21 @@ const emit = defineEmits(['icon-click'])
width: 100%;
}
&__icon-top {
position: absolute;
right: 8px;
top: 8px;
width: 24px;
height: 24px;
padding: 8px;
border-radius: 24px;
cursor: pointer;
&:hover {
background-color: $admin-tile-bottom-icon-hover-background-color;
}
}
&__icon-bottom {
width: 12px;
height: 12px;

6
client/src/components/admin/PlayersTile.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<AdminInfoTile title="Players" icon-bottom="add" @icon-click="addPlayer">
<AdminInfoTile title="Players" icon-top="reload" @icon-top-click="reload" icon-bottom="add" @icon-bottom-click="addPlayer">
<table class="players-tile__table">
<tr>
<th class="players-tile__table-head">{{ $t('name') }}:</th>
@ -17,7 +17,7 @@
</td>
<td class="players-tile__cell">{{ player.numQuotes }}</td>
<td class="players-tile__cell">{{ player.score }}</td>
<td class="players-tile__cell">{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
<td class="players-tile__cell">{{ !player.isIdle ? 'online' : player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
</tr>
</table>
</AdminInfoTile>
@ -47,7 +47,7 @@ const { $t } = useI18n({
'last-logged-in': { en: 'last logged in', de: 'zuletzt eingeloggt' },
})
const { datetime } = useDateFormatter()
const reload = () => emit('update')
const players = computed(() => {
return props.gameinfo.players.sort((a, b) => a.name.localeCompare(b.name))
})