Move the view components into a views folder rather than mixing them in with the other components.
This commit is contained in:
Oliver-Akins
parent
703d03da3b
commit
3168adb3a5
4 changed files with 192 additions and 0 deletions
0
src/views/Game.vue
Normal file
0
src/views/Game.vue
Normal file
91
src/views/GameCode.vue
Normal file
91
src/views/GameCode.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<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"
|
||||
:disabled="is_host"
|
||||
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) {
|
||||
alert('The game code you have entered is invalid.');
|
||||
this.game_code = ``;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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>
|
||||
35
src/views/Lobby.vue
Normal file
35
src/views/Lobby.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div id="game_code_entry">
|
||||
<h1>
|
||||
Secret Hitler Online
|
||||
</h1>
|
||||
<div>
|
||||
<div
|
||||
v-for="player in players"
|
||||
:key="player.id"
|
||||
class="player"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GameLobby',
|
||||
components: {},
|
||||
data() {return {
|
||||
players: []
|
||||
}},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "../theme.styl"
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="stylus" scoped>
|
||||
@import "../theme.styl"
|
||||
|
||||
</style>
|
||||
191
src/views/WebsocketTesting.vue
Normal file
191
src/views/WebsocketTesting.vue
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<div id="websocket_entry" style="overflow-y: scroll">
|
||||
<h1>
|
||||
Secret Hitler Online
|
||||
</h1>
|
||||
<h3>Very Secret, Much Hitler, Wow Online!</h3>
|
||||
<p>
|
||||
This page is designed to allow triggering individual websocket events for the Websocket Server
|
||||
</p>
|
||||
<div
|
||||
v-for="event in websocket_events"
|
||||
:key="event.event"
|
||||
style="margin: 15px;"
|
||||
>
|
||||
<button
|
||||
@click.stop="handle_event(event.event, event.needs_data, event.data)"
|
||||
style="margin-bottom: 5px;"
|
||||
>
|
||||
Send {{ event.event }}
|
||||
</button>
|
||||
<div
|
||||
v-if="event.needs_data"
|
||||
>
|
||||
<div
|
||||
v-for="datapoint in event.data"
|
||||
:key="datapoint.name"
|
||||
>
|
||||
{{ datapoint.name }}
|
||||
<input v-if="datapoint.type == 'text'" type="text" v-model="datapoint.value">
|
||||
<input v-if="datapoint.type == 'boolean'" type="checkbox" v-model="datapoint.value">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WebsocketTests',
|
||||
components: {},
|
||||
data() {return {
|
||||
websocket_events: [
|
||||
{
|
||||
event: `HostGame`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `username`, value: ``, type: `text`}
|
||||
],
|
||||
return_event: `GameInfo`,
|
||||
},
|
||||
{
|
||||
event: `JoinGame`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `username`, value: ``, type: `text` },
|
||||
{ name: `game_code`, value: ``, type: `text` }
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `StartGame`,
|
||||
needs_data: false,
|
||||
data: [],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `ChancellorNomination`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `target`, value: ``, type: `text` }
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `Vote`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `yes_no`, value: ``, type: `boolean` }
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `PresidentPolicies`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `policy1`, value: ``, type: `text` },
|
||||
{ name: `policy2`, value: ``, type: `text` }
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `VetoRequest`,
|
||||
needs_data: false,
|
||||
data: [],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `VetoConfirm`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `confirm`, value: ``, type: `boolean` }
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `ChancellorPolicy`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `policy`, value: ``, type: `text` },
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `ExecutePlayer`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `target`, value: ``, type: `text` },
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `NextPresident`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `target`, value: ``, type: `text` },
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `ExecutiveConfirmation`,
|
||||
needs_data: false,
|
||||
data: [],
|
||||
return_event: null,
|
||||
},
|
||||
{
|
||||
event: `InvestigateAffiliation`,
|
||||
needs_data: true,
|
||||
data: [
|
||||
{ name: `target`, value: ``, type: `text` },
|
||||
],
|
||||
return_event: null,
|
||||
},
|
||||
]
|
||||
}},
|
||||
methods: {
|
||||
handle_event(event, needs_data, data) {
|
||||
if (needs_data) {
|
||||
var request_data = {};
|
||||
for (var dp of data) {
|
||||
request_data[dp.name] = dp.value;
|
||||
};
|
||||
this.$socket.emit(event, request_data)
|
||||
} else {
|
||||
this.$socket.emit(event)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@import "../theme.styl"
|
||||
|
||||
#websocket_entry {
|
||||
text-align: center
|
||||
margin: 0 auto
|
||||
height: 100vh
|
||||
width: 100vw
|
||||
color: $main-text-colour
|
||||
|
||||
h1, h3 {
|
||||
letter-spacing: $title-letter-spacing
|
||||
}
|
||||
|
||||
p {
|
||||
letter-spacing: $body-letter-spacing
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
width: 100vw
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="stylus" scoped>
|
||||
@import "../theme.styl"
|
||||
|
||||
input[type="text"] {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue