PlayerList

This commit is contained in:
Settel 2021-08-26 12:23:32 +02:00
parent 0548515390
commit 0e67101943
6 changed files with 99 additions and 4 deletions

View File

@ -1,7 +1,14 @@
<template>
<div class="play">
<Quote :text="quote" />
<Sources :sources="sources" />
<div class="play__layout">
<div class="play__layout-playground">
<Quote :text="quote" />
<Sources :sources="sources" />
</div>
<div class="play__layout-right-column">
<PlayerList :players="players" />
</div>
</div>
</div>
</template>
@ -17,6 +24,9 @@ export default {
sources() {
return this.$store.state.round.sources
},
players() {
return this.$store.state.players.players
},
},
}
</script>
@ -35,5 +45,21 @@ body,
position: relative;
width: 100%;
height: 100%;
&__layout {
display: flex;
width: 100%;
height: 100%;
&-playground {
position: relative;
flex-grow: 1;
}
&-right-column {
width: 200px;
margin: 16px 16px 0 0;
}
}
}
</style>

View File

@ -0,0 +1,54 @@
<template>
<div class="player-list">
<div class="player-list__player" v-for="player in players" :key="player.id">
<div class="player-list__player-status">
{{ player.isIdle ? '◯' : '⬤' }}
</div>
<div class="player-list__player-name">
{{ player.name + player.name + player.name + player.name }}
</div>
<div class="player-list__player-score">
{{ player.score || 0 }}
</div>
</div>
</div>
</template>
<script>
export default {
props: ['players'],
}
</script>
<style lang="scss">
.player-list {
padding: 8px 16px;
border: 1px solid #ffffff;
background-color: rgba(64, 32, 128, 0.5);
&__player {
display: flex;
// height: 1.4em;
color: #ffffff;
font-family: Dosis;
font-size: 12px;
&-name {
display: inline;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-status {
margin-right: 8px;
font-size: 8px;
}
&-score {
width: 32px;
margin-left: 16px;
text-align: right;
}
}
}
</style>

View File

@ -23,6 +23,7 @@ export default {
margin: -15px 0 0 -90px;
border: 1px solid #e0e0e0;
border-radius: 10px;
background-color: #402080;
&__source {
width: 100%;
@ -32,7 +33,7 @@ export default {
}
&:hover {
background-color: rgba(128,128,128,0.5);
background-color: #8060c0;
cursor: pointer;
}
}

View File

@ -3,5 +3,6 @@ export default function(data) {
store.commit('engine/setJson', data)
store.commit('game/setStateAndPhase', data.game)
store.commit('players/setPlayers', data.game)
store.commit('round/setRound', data.game)
}

View File

@ -9,7 +9,7 @@ export const mutations = {
const { state: gameState, phase } = game
state.state = gameState
state.phase = phase
} else{
} else {
state.state = ""
state.phase = ""
}

View File

@ -0,0 +1,13 @@
export const state = () => ({
players: [],
})
export const mutations = {
setPlayers(state, game) {
if (game) {
state.players = game.players
} else {
state.players = []
}
},
}