Merge pull request #101 from Oliver-Akins/dev

v1.3.1

web/src/components/GameBoard.vue

@@ -99,6 +99,18 @@
 		>
 			{{ visible ? `Hide` : `Show` }} Past Questions
 		</button>
+		<a
+			href="https://playghostwriter.com"
+			target="_blank"
+			id="game-logo-link"
+		>
+			<img
+				id="game-logo"
+				src="/assets/ghost_writer_logo.png"
+				alt="Ghost Writer Logo"
+				rel="noopener"
+			>
+		</a>
 		<transition name="expand-from-left">
 			<past-questions v-if="visible" @error="$emit(`error`, $event)" />
 		</transition>
@@ -206,6 +218,16 @@ export default {
 	background: var(--board-background-moon), var(--board-background);
 }
 
+#game-logo-link {
+	position: absolute;
+	z-index: 1;
+	top: 7px;
+	height: 10%
+}
+#game-logo {
+	height: 100%;
+}
+
 h2 {
 	margin: 12px 0;
 }

web/src/components/Hand.vue

@@ -184,7 +184,8 @@ export default {
 @import "../css/style.css";
 
 #PlayerHand {
-	background-color: var(--hand-background);
+	background: var(--hand-background);
+	color: var(--hand-text);
 	margin: 0 auto;
 	padding: 0px;
 	width: 95%;

web/src/css/theme.css

@@ -39,6 +39,7 @@
 
 	/* Hand colours */
 	--hand-background: rgba(255, 255, 255, 0.2);
+	--hand-text: var(--dark-font-colour);
 
 	/*
 		The colours for the cards in the hands of the players

web/src/views/CreateJoin.vue

@@ -1,6 +1,14 @@
 <template>
 	<div id="CreateJoinGame" class="maximize view">
-		<h1>Ghost Writer Online</h1>
+		<div class="centre" id="logo-header">
+			<a href="http://playghostwriter.com" target="_blank" rel="noopener">
+				<img
+					src="/assets/ghost_writer_logo.png"
+					alt="Ghost Writer Logo"
+					height="200"
+				>
+			</a>
+		</div>
 		<button
 			@click.stop="createGame()"
 		>Create Game</button>
@@ -149,6 +157,10 @@ export default {
 	align-items: center;
 }
 
+#logo-header {
+	margin-top: 10vh;
+}
+
 button {
 	background-color: var(--background2);
 	color: var(--background2-text);

web/src/views/Lobby.vue

@@ -1,6 +1,14 @@
 <template>
 	<div id="GameLobby" class="maximize view">
-		<h1 class="centre">Ghost Writer Online</h1>
+		<div class="centre" id="logo-header">
+			<a href="http://playghostwriter.com" target="_blank" rel="noopener">
+				<img
+					src="/assets/ghost_writer_logo.png"
+					alt="Ghost Writer Logo"
+					height="150px"
+				>
+			</a>
+		</div>
 		<div class="flex-row">
 			<button
 				class="clickable"
@@ -138,6 +146,10 @@ export default {
 	display: flex;
 }
 
+#logo-header {
+	margin-top: 5vh;
+}
+
 .flex-row {
 	justify-content: center;
 	align-items: stretch;