From 9bc5fd1ad1be92c5c5e5d1decee4153ecd581dfc Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Wed, 15 Dec 2021 02:42:58 -0600
Subject: [PATCH] Begin work on the multiplayer lobby view

---
 web-svelte/src/views/lobby/multiplayer.svelte | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 web-svelte/src/views/lobby/multiplayer.svelte

diff --git a/web-svelte/src/views/lobby/multiplayer.svelte b/web-svelte/src/views/lobby/multiplayer.svelte
new file mode 100644
index 0000000..23bc866
--- /dev/null
+++ b/web-svelte/src/views/lobby/multiplayer.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+import SciFiButton from "../../components/SciFi-Button.svelte";
+import Player from "../../components/Player.svelte";
+
+function tempButtonHandler() {};
+</script>
+
+<main>
+	<div>
+		<h1>Gravwell</h1>
+		<div class="sci-fi-box">
+			<h2>Players</h2>
+			<div class="player-box">
+				<Player
+					name="Lorem Ipsupotas"
+					colour="#00aa00"
+				/>
+				<Player
+					name="Player 2"
+					colour="#aaaa00"
+				/>
+				<Player
+					name="Player 3"
+					colour="#00aaaa"
+				/>
+				<Player
+					name="Player 4"
+					colour="#ffaaff"
+				/>
+			</div>
+		</div>
+		<div class="sci-fi-box">
+			<h2>Options</h2>
+		</div>
+		<div class="flex-row">
+			<SciFiButton
+				handler={tempButtonHandler}
+			>
+				Start Game
+			</SciFiButton>
+			<SciFiButton
+				background="#ff0000"
+				handler={tempButtonHandler}
+				>
+				Delete Game
+			</SciFiButton>
+		</div>
+	</div>
+</main>
+
+<style lang="scss">
+main {
+	color: #FFFFFF;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+h1 {
+	font-size: 4rem;
+	font-weight: 100;
+	line-height: 1.1;
+	margin: 2rem auto;
+	max-width: 14rem;
+}
+
+
+.sci-fi-box {
+	border-radius: 10px;
+	border-width: 2px;
+	border-style: solid;
+	border-color: white;
+	margin: 5px;
+	background: rgba(0, 0, 0, 0.5);
+
+	h2 {
+		margin: 0px;
+		margin-top: 10px;
+	}
+}
+
+.player-box {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+
+	> :global(div) {
+		flex-grow: 1;
+	}
+}
+
+.flex-row {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.flex-row > :global(div) {
+	flex-grow: 1;
+}
+
+@media (min-width: 480px) {
+	h1 {
+		max-width: none;
+	}
+}
+</style>