61 lines
No EOL
1 KiB
Vue
61 lines
No EOL
1 KiB
Vue
<template>
|
|
<div id="game_lobby">
|
|
<h1>
|
|
Secret Hitler Online
|
|
</h1>
|
|
<div>
|
|
<h3>Players:</h3>
|
|
<div
|
|
v-for="player in players"
|
|
:key="player"
|
|
class="player"
|
|
>{{ player }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'GameLobby',
|
|
components: {},
|
|
data() {return {
|
|
players: []
|
|
}},
|
|
mounted() {
|
|
this.game_code = sessionStorage.getItem(`game-code`);
|
|
this.is_host = JSON.parse(sessionStorage.getItem(`is-host`));
|
|
this.$nextTick(() => this.getPlayerList());
|
|
},
|
|
methods: {
|
|
getPlayerList() {
|
|
this.$socket.emit(`GetPlayerList`, {
|
|
game_code: this.game_code,
|
|
});
|
|
},
|
|
},
|
|
sockets: {
|
|
PlayerListResponse(data) {
|
|
if (data.success) {
|
|
this.players = data.players;
|
|
} else {
|
|
this.$emit(`alert`, {
|
|
message: data.message,
|
|
classes: [`warning`],
|
|
});
|
|
};
|
|
},
|
|
NewPlayer(data) {
|
|
this.players.push(data.player);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import "../theme.styl"
|
|
|
|
#game_lobby {
|
|
text-align: center
|
|
width: 90vw
|
|
}
|
|
</style> |