Begin work on component for submitting the game code
This commit is contained in:
parent
1b9ba8ef8d
commit
c2ad722758
1 changed files with 51 additions and 0 deletions
51
src/components/GameCode.vue
Normal file
51
src/components/GameCode.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div id="game_code_entry">
|
||||
<h2>
|
||||
Enter a game code:
|
||||
</h2>
|
||||
<input
|
||||
type="text"
|
||||
name="Game Code"
|
||||
v-model="game_code"
|
||||
@keyup.enter="submit_game_code()"
|
||||
>
|
||||
<br>
|
||||
<button
|
||||
@onclick.stop="submit_game_code()"
|
||||
>
|
||||
Confirm URL
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GameCodeEntry',
|
||||
components: {},
|
||||
data() {return {
|
||||
game_code: ``,
|
||||
}},
|
||||
methods: {
|
||||
submit_game_code() {
|
||||
if (this.game_code.length > 0) {
|
||||
this.$emit(`set-game-code`, this.game_code);
|
||||
} else {
|
||||
alert(`Invalid game code. Must have a code`)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
#game_code_entry {
|
||||
text-align: center
|
||||
height: 100vh
|
||||
width: 33vw
|
||||
margin: 0 auto
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 90vw
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue