Add options to the lobby screen

web-svelte/src/views/lobby/multiplayer.svelte

@@ -1,10 +1,23 @@
 <script lang="ts">
+import OptionInfo from "../../components/modals/OptionInfo.svelte";
+import SciFiCheckbox from "../../components/SciFi-Checkbox.svelte";
 import SciFiButton from "../../components/SciFi-Button.svelte";
 import Player from "../../components/Player.svelte";
 
 function tempButtonHandler() {};
+
+let optionsModal = false;
+function toggleOptionsModal() {
+	console.log(`Toggling options modal`)
+	optionsModal = !optionsModal;
+}
 </script>
 
+<OptionInfo
+	open="{optionsModal}"
+	on:close="{toggleOptionsModal}"
+/>
+
 <main>
 	<div>
 		<h1>Gravwell</h1>
@@ -12,13 +25,14 @@ function tempButtonHandler() {};
 			<h2>Players</h2>
 			<div class="player-box">
 				<Player
-					name="Lorem Ipsupotas"
+					name="Player 1"
 					colour="#00aa00"
 				/>
 				<Player
 					name="Player 2"
 					colour="#aaaa00"
 				/>
+				<div class="divider"></div>
 				<Player
 					name="Player 3"
 					colour="#00aaaa"
@@ -30,15 +44,54 @@ function tempButtonHandler() {};
 			</div>
 		</div>
 		<div class="sci-fi-box">
+			<div class="info-button-container">
+				<SciFiButton
+					handler={toggleOptionsModal}
+					height="60px"
+					width="60px"
+				>
+					<div style="display: flex; align-items: center; justify-content: center;">
+						<span class="material-icons">help_outline</span>
+					</div>
+				</SciFiButton>
+			</div>
 			<h2>Options</h2>
+			<div class="options-box">
+				<SciFiCheckbox
+					name="No Secrets"
+					id="no-secrets"
+				>
+					No Secrets
+				</SciFiCheckbox>
+				<SciFiCheckbox
+					name="Hardcore Mode"
+					id="hardcore"
+				>
+					Hardcore Mode
+				</SciFiCheckbox>
+				<SciFiCheckbox
+					name="Warp Gate Activated"
+					id="warp-gate"
+				>
+					Warp Gate Activated!
+				</SciFiCheckbox>
+				<SciFiCheckbox
+					name="Chaos Theory"
+					id="chaos-theory"
+				>
+					Chaos Theory
+				</SciFiCheckbox>
+			</div>
 		</div>
 		<div class="flex-row">
 			<SciFiButton
+				title="Starts the game"
 				handler={tempButtonHandler}
 			>
 				Start Game
 			</SciFiButton>
 			<SciFiButton
+				title="Delete the lobby, preventing further games from being played"
 				background="#ff0000"
 				handler={tempButtonHandler}
 				>
@@ -55,7 +108,6 @@ main {
 	height: 100%;
 	text-align: center;
 	display: flex;
-	align-items: center;
 	justify-content: center;
 }
 
@@ -63,8 +115,6 @@ h1 {
 	font-size: 4rem;
 	font-weight: 100;
 	line-height: 1.1;
-	margin: 2rem auto;
-	max-width: 14rem;
 }
 
 
@@ -75,6 +125,7 @@ h1 {
 	border-color: white;
 	margin: 5px;
 	background: rgba(0, 0, 0, 0.5);
+	position: relative;
 
 	h2 {
 		margin: 0px;
@@ -87,11 +138,29 @@ h1 {
 	flex-wrap: wrap;
 	justify-content: center;
 
+	> .divider {
+		width: 100%;
+	}
+
 	> :global(div) {
 		flex-grow: 1;
 	}
 }
 
+.options-box {
+	padding-bottom: 5px;
+	display: flex;
+	justify-content: space-evenly;
+	flex-wrap: wrap;
+
+}
+
+.info-button-container {
+	position: absolute;
+	top: -2px;
+	right: -2px;
+}
+
 .flex-row {
 	display: flex;
 	align-items: center;