Oliver/Secret-Hitler-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move the view components into a views folder rather than mixing them in with the other components.

Browse source
This commit is contained in:
Oliver-Akins 2020-09-27 16:12:35 -06:00
parent 703d03da3b
commit 3168adb3a5
4 changed files with 192 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

191
src/views/WebsocketTesting.vue Normal file
View 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>