Begin implementation of the site with Svelte

web-svelte/src/App.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+
+// Library imports
+import Particles from "svelte-particles";
+
+// View imports
+import Home from "./views/home.svelte";
+
+// Store imports
+import { state } from "./stores";
+</script>
+
+<!-- Static particles across all of our pages -->
+<div id="particles">
+	<Particles url="/particlesConfig.json" />
+</div>
+
+<!-- The state the game is in -->
+{#if $state == "main-menu"}
+	<Home />
+{/if}
+
+<style lang="scss">
+#particles {
+	position: fixed;
+	z-index: -100000;
+}
+</style>

web-svelte/src/components/SciFi-Button.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	export let height: string|number = 50;
+	export let width: string|number = "unset";
+	export let handler: (e: Event) => unknown;
+
+	// Add the units to the height value if not provided, and ensure that the
+	// provided height is not less than 50 (the default)
+	$: if (typeof(height) == "string") {
+		if (height.match(/[0-9]$/)) {
+			if (height.match(/^[0-4]?[0-9]$/)) {
+				height = `50`;
+			};
+			height = `${height}px`;
+		};
+	} else {
+		if (height < 50) {
+			height = 50;
+		};
+		height = `${height}px`;
+	};
+
+
+	// Add the units to the width value if not provided
+	$: if (typeof(width) == "string") {
+		if (width.match(/[0-9]$/)) {
+			width = `${width}px`;
+		};
+	} else {
+		width = `${width}px`;
+	};
+</script>
+
+<div
+	style="--height: {height}; --width: {width};"
+	class="button-container"
+>
+	<button on:click={handler}>
+		<slot></slot>
+	</button>
+</div>
+
+<style lang="scss">
+div.button-container {
+	display: inline-block;
+	position: relative;
+	margin: 10px;
+	width: var(--width);
+	height: var(--height);
+}
+
+$button-background: #0a0;
+
+button {
+	background: $button-background;
+	border-radius: 5px;
+	border: 3px solid $button-background;
+	box-sizing: border-box;
+	font-family: 'Orbitron', sans-serif;
+	height: calc(100% - 20px);
+	margin: 10px;
+	padding: 5px 7px;
+	transition: all .5s ease;
+	transition: opacity .2s ease;
+	width: calc(100% - 20px);
+
+	&:active {
+		opacity: .2;
+		outline: none;
+	}
+
+	&:hover {
+		background-color: transparent;
+		border-radius: 20px;
+		color: white;
+
+		&:before {
+			border-radius: min(calc(((var(--height) - 20px) / 2) + 5px), 25px);
+			border: 2px $button-background solid;
+		}
+	}
+
+	&:before {
+		content: ' ';
+		border: 2px transparent solid;
+		position: absolute;
+		left: 5px;
+		top: 5px;
+		box-sizing: border-box;
+		width: calc(100% - 10px);
+		height: calc(calc(100% - 20px) + 10px);
+		transition: all .7s ease;
+	}
+}
+</style>

web-svelte/src/main.ts

@@ -0,0 +1,7 @@
+import App from './App.svelte'
+
+const app = new App({
+	target: document.getElementById('app')
+})
+
+export default app

web-svelte/src/stores.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const state = writable("main-menu");

web-svelte/src/views/home.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+import SciFiButton from "../components/SciFi-Button.svelte";
+
+
+function testHandler() {
+	console.log(`Hello there!`);
+};
+</script>
+
+<main>
+	<div>
+		<h1>Gravwell</h1>
+		<div class="sci-fi-box">
+			<h2>Multiplayer</h2>
+			<div class="flex-row">
+				<SciFiButton
+					handler={testHandler}
+				>
+					Join Game
+				</SciFiButton>
+				<SciFiButton
+					handler={testHandler}
+				>
+					Host Game
+				</SciFiButton>
+			</div>
+		</div>
+		<br>
+		<div class="sci-fi-box">
+			<h2>Singleplayer</h2>
+			<div class="flex-row">
+				<SciFiButton
+					handler={testHandler}
+				>
+					Start Game
+				</SciFiButton>
+			</div>
+		</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;
+	}
+}
+
+.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>

web-svelte/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />