Create view to choose whether to host or join a game.

This commit is contained in:
Oliver-Akins 2020-09-27 16:16:00 -06:00
parent a4bb47fa35
commit 6b8c918310
2 changed files with 62 additions and 34 deletions

62
src/views/JoinHost.vue Normal file
View file

@ -0,0 +1,62 @@
<template>
<div id="game_code_entry">
<h1>
Secret Hitler Online
</h1>
<div>
<button
@click.stop="join_game()"
>Join a Game</button>
<button
@click.stop="host_game()"
>Host a Game</button>
</div>
</div>
</template>
<script>
export default {
name: 'JoinHost',
components: {},
data() {return {}},
sockets: {
HostInformation(data) {
console.log(data)
if (data.success) {
sessionStorage.setItem(`game-code`, data.game_code);
this.$emit(`is-host`, true);
this.$emit(`go-to`, `lobby`);
} else {
this.error = data.error_message
};
}
},
methods: {
host_game() {
let username = ``;
do {
username = prompt(`Enter a username:`, ``);
if (!username) {
return
}
} while (username.length == 0);
this.$socket.emit(`HostGame`, {
username: username
});
},
join_game() {
this.$emit(`go-to`, ``)
},
},
}
</script>
<style lang="stylus" scoped>
@import "../theme.styl"
button {
width: 100%
margin: 5px
}
</style>