Secret-Hitler-Online/src/App.vue

<template>
	<div id="app">
		<transition mode="out-in" name="top-slide">
			<div
				v-if="alert.message"
				class="alert-bar"
				:class="alert.classes"
			>
				<div v-html="alert.message"></div>
			</div>
		</transition>
		<img class="icon" src="favicon.svg" alt="Secret Hitler Online Logo" width="50" height="50">
		<WS-Test
			v-if="state == 'ws-test'"
		/>
		<Join-Or-Host
			v-else-if="state == 'game-type'"
			@go-to="go_to"
			@alert="alert = $event"
		/>
		<Game-Code
			v-else-if="state == 'game-code'"
			@go-to="go_to"
			@alert="alert = $event"
		/>
		<Game-Lobby
			v-else-if="state == 'lobby'"
			@go-to="go_to"
			@alert="alert = $event"
		/>
		<In-Game
			v-else-if="state == 'in-game'"
			@go-to="go_to"
			@alert="alert = $event"
		/>
	</div>
</template>

<script>
import GameView from './views/Game';
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,
		'In-Game': GameView,
	},
	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 kick players and start the
				game.
			in-game - The main processing for all the game.
		*/
		state: `game-type`,
		alert: {
			message: ``,
			classes: []
		},
	}},
	methods: {
		go_to(state) {
			if (this.alert.message) {
				setTimeout(() => {
					this.alert = {
						message: ``,
						classes: [],
					};
				}, 5000);
			};
			this.state = state;
		},
	},
	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>
@import "./css/colours.css";
@import "./css/animations.css";

html, body, #app {
	font-family: var(--fonts);
	font-style: normal;
	overflow-x: hidden;
	padding: 0;
	margin: 0;
}

h1, h2, h3 {
	letter-spacing: var(--title-letter-spacing);
}

p {
	letter-spacing: var(--body-letter-spacing);
}

#app {
	background-color: var(--main-background-colour);
	color: var(--main-text-colour);
	height: 100vh;
	width: 100vw;
}

#app > div {
	margin: 0 auto;
}

#app > .icon {
	position: absolute;
	left: 10px;
	top: 10px;
}

.alert-bar {
	justify-content: center;
	position: absolute;
	display: flex;
	padding: 3px;
	width: 100vw;
	z-index: 2;
	left: 0;
	top: 0;
}

.alert-bar.error {
	background-color: var(--error-background-colour);
	color: var(--error-text-colour);
}
.alert-bar.warning {
	background-color: var(--warning-background-colour);
	color: var(--warning-text-colour);
}
.alert-bar.info {
	background-color: var(--info-background-colour);
	color: var(--info-text-colour);
}

input[type="text"], button {
	background-color: var(--input-background);
	border-radius: var(--input-border-radius);
	border-color: var(--input-border-colour);
	border-width: var(--input-border-width);
	color: var(--input-text);
	border-style: solid;
	text-align: center;
	padding: 10px 15px;
	outline: none;
}

input[type="text"]:disabled, button:disabled,
input[type="text"]:hover:disabled, button:hover:disabled {
	background-color: var(--input-background-disabled);
	border-color: var(--input-border-colour-disabled);
	color: var(--input-text-disabled);
}

input[type="text"].warning {
	border-color: var(--input-border-colour-warning);
}
input[type="text"].error {
	border-color: var(--input-border-colour-error);
}
input[type="text"]:focus {
	border-color: var(--input-border-colour-focus);
}

button {
	letter-spacing: var(--input-letter-spacing);
	font-family: var(--fonts);
	font-size: 17px;
	margin: 5px;
}
button:hover {
	background-color: var(--input-background-hover);
}
button:active {
	background-color: var(--input-background-active);
}
</style>