108 lines
No EOL
1.8 KiB
Vue
108 lines
No EOL
1.8 KiB
Vue
<template>
|
|
<div id="game_code_entry">
|
|
<h1>
|
|
Secret Hitler Online
|
|
</h1>
|
|
<div>
|
|
<label for="username">Username:</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="User Name"
|
|
v-model="username"
|
|
@keyup.enter.stop="$refs.gamecode.focus()"
|
|
>
|
|
<br>
|
|
<label for="gamecode">Game Code:</label>
|
|
<input
|
|
ref="gamecode"
|
|
type="text"
|
|
id="gamecode"
|
|
name="Game Code"
|
|
v-model="game_code"
|
|
@keyup.enter.stop="try_game_code"
|
|
>
|
|
<br>
|
|
<button
|
|
@click.stop="try_game_code"
|
|
>
|
|
Join Game
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'GameCodeEntry',
|
|
components: {},
|
|
data() {return {
|
|
game_code: ``,
|
|
username: ``,
|
|
}},
|
|
methods: {
|
|
try_game_code() {
|
|
if (this.game_code.length > 0) {
|
|
this.$socket.emit(`JoinGame`, {
|
|
game_code: this.game_code,
|
|
username: this.username,
|
|
})
|
|
} else {
|
|
alert(`Please a enter game code before proceeding.`)
|
|
}
|
|
},
|
|
},
|
|
sockets: {
|
|
GameJoined(data) {
|
|
if (!data.success) {
|
|
this.$emit(`alert`, {
|
|
message: data.message,
|
|
classes: [`warning`],
|
|
});
|
|
return;
|
|
};
|
|
sessionStorage.setItem(`game-code`, this.game_code);
|
|
sessionStorage.setItem(`is-host`, false);
|
|
this.$emit(`go-to`, `lobby`);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
@import "../theme.styl"
|
|
|
|
#game_code_entry {
|
|
text-align: center
|
|
margin: 0 auto
|
|
height: 100vh
|
|
width: 50vw
|
|
color: $main-text-colour
|
|
|
|
h1, h3 {
|
|
letter-spacing: $title-letter-spacing
|
|
}
|
|
|
|
p {
|
|
letter-spacing: $body-letter-spacing
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
width: 90vw
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="stylus" scoped>
|
|
@import "../theme.styl"
|
|
|
|
#game_code_entry {
|
|
label {
|
|
font-size: 1.2em
|
|
}
|
|
input[type="text"] {
|
|
margin-bottom: 10px
|
|
margin-left: 10px
|
|
text-align: left
|
|
}
|
|
}
|
|
</style> |