168 lines
No EOL
3.5 KiB
Vue
168 lines
No EOL
3.5 KiB
Vue
<template>
|
|
<div id="app">
|
|
<transition mode="out-in" name="top-slide">
|
|
<div
|
|
v-if="alert.message"
|
|
class="alert-bar"
|
|
:class="alert.classes"
|
|
>
|
|
<div>{{ alert.message }}</div>
|
|
</div>
|
|
</transition>
|
|
<WS-Test
|
|
v-if="state == 'ws-test'"
|
|
/>
|
|
<Join-Or-Host
|
|
v-else-if="state == 'game-type'"
|
|
@go-to="state = $event"
|
|
@alert="alert = $event"
|
|
/>
|
|
<Game-Code
|
|
v-else-if="state == 'game-code'"
|
|
@go-to="state = $event"
|
|
/>
|
|
<Game-Lobby
|
|
v-else-if="state == 'lobby'"
|
|
@alert="alert = $event"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GameLobby from './views/Lobby';
|
|
import JoinHost from './views/JoinHost';
|
|
import GameCodeEntry from './views/GameCode';
|
|
import WebsocketTests from './views/WebsocketTesting';
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
'WS-Test': WebsocketTests,
|
|
'Game-Code': GameCodeEntry,
|
|
'Join-Or-Host': JoinHost,
|
|
'Game-Lobby': GameLobby,
|
|
},
|
|
data() {return {
|
|
/*
|
|
The different states are used to indicate what part of the game players
|
|
should be seeing.
|
|
|
|
Valid values:
|
|
ws-test - Purely development driven, allows testing the socket
|
|
events on the server
|
|
game-type - The first screen that the user will see, this is when
|
|
the user will choose to join an existing game or create a new
|
|
one
|
|
game-code - This is displayed when users are joining a game, it
|
|
allows entering a username and game code, if the game code
|
|
is supplied in the URL Search Parameters, default to that,
|
|
otherwise leave the field empty.
|
|
lobby - When the player is in the lobby, this displays all the
|
|
players in the game so far, and updates as new players join.
|
|
If the player is the host, they can re-arrange the presidential
|
|
order by dragging and dropping the list of players, they also
|
|
get a "Start Game" button that allows them to, well... start
|
|
the game.
|
|
*/
|
|
state: `game-type`,
|
|
alert: {
|
|
message: ``,
|
|
classes: []
|
|
},
|
|
}},
|
|
methods: {},
|
|
sockets: {
|
|
disconnect() {
|
|
this.alert = {
|
|
message: `Disconnected from the server. Attempting to reconnect.`,
|
|
classes: [`error`]
|
|
};
|
|
},
|
|
connect_error() {
|
|
this.alert = {
|
|
message: `Error: Failed to connect to the server.`,
|
|
classes: [`error`]
|
|
}
|
|
},
|
|
connect() {
|
|
this.alert = {
|
|
message: ``,
|
|
classes: []
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
@import "theme.styl"
|
|
@import "./css/animations.css"
|
|
|
|
html, body, #app {
|
|
font-family: $fonts
|
|
font-style: normal
|
|
overflow: hidden
|
|
padding: 0
|
|
margin: 0
|
|
}
|
|
|
|
#app {
|
|
background-color: $main-background-colour
|
|
color: $main-text-colour
|
|
height: 100vh
|
|
width: 100vw
|
|
}
|
|
|
|
.alert-bar {
|
|
justify-content: center
|
|
position: absolute
|
|
display: flex
|
|
width: 100vw
|
|
z-index: 1
|
|
left: 0
|
|
top: 0
|
|
}
|
|
|
|
.alert-bar.error {
|
|
background-color: $error-background-colour
|
|
color: $error-text-colour
|
|
}
|
|
|
|
.input {
|
|
background-color: $input-background
|
|
border-radius: $input-border-radius
|
|
border-color: $input-border-colour
|
|
border-width: $input-border-width
|
|
border-style: solid
|
|
text-align: center
|
|
padding: 10px 15px
|
|
color: $input-text
|
|
outline: none
|
|
}
|
|
|
|
input[type="text"] {
|
|
@extend .input
|
|
}
|
|
input[type="text"].warning {
|
|
border-color: $input-border-colour-warning
|
|
}
|
|
input[type="text"].error {
|
|
border-color: $input-border-colour-error
|
|
}
|
|
input[type="text"]:focus {
|
|
border-color: $input-border-colour-focus
|
|
}
|
|
|
|
button {
|
|
@extend .input
|
|
font-family: $fonts
|
|
letter-spacing: $input-letter-spacing
|
|
font-size: 17px
|
|
}
|
|
button:hover {
|
|
background-color: $input-background-hover
|
|
}
|
|
button:active {
|
|
background-color: $input-background-active
|
|
}
|
|
</style> |