0.0.1

src/app.css

@@ -0,0 +1,52 @@
+html {
+	height: 100vh;
+}
+
+body {
+	margin: 0;
+	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+		"Lucida Sans", Arial, sans-serif;
+	color: white;
+	height: 100%;
+}
+body::before {
+	z-index: -1;
+	content: "";
+	font-size: 28px;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+#app {
+	height: 100%;
+	background: radial-gradient(rgb(24, 82, 65), rgb(1, 42, 16));
+}
+
+.full {
+	height: 100%;
+	width: 100%;
+}
+
+.center {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.column {
+	display: flex;
+	flex-direction: column;
+}
+
+.free {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.fixed-br {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+}

src/app.tsx

@@ -1,12 +1,28 @@
-import { createSignal } from "solid-js";
 import "./app.css";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
+import { Suspense } from "solid-js";
+import pkg from "~/../package.json";
+
+const Version = () => (
+	<div class="full free">
+		<span style={{ margin: "5px", "font-size": "0.8rem" }} class="fixed-br">
+			v{pkg.version}
+		</span>
+	</div>
+);
 
 export default function App() {
-	const [count, setCount] = createSignal(0);
-
 	return (
-		<main>
-			<h1>here will be games</h1>
-		</main>
+		<Router
+			root={(props) => (
+				<>
+					<Suspense>{props.children}</Suspense>
+					<Version />
+				</>
+			)}
+		>
+			<FileRoutes />
+		</Router>
 	);
 }

src/components/Card.tsx

@@ -0,0 +1,13 @@
+import { Component, createResource, Suspense } from "solid-js";
+
+export default (() => {
+	const [svgPath] = createResource(
+		() => import(`~/../assets/views/cards/CLUB-1.svg`)
+	);
+
+	return (
+		<Suspense>
+			<img src={svgPath()?.default} />
+		</Suspense>
+	);
+}) satisfies Component;

src/components/Game.tsx

@@ -0,0 +1,15 @@
+import { JSX } from "solid-js";
+import Card from "./Card";
+
+export default () => {
+	return (
+		<div
+			class="full center column"
+			style={{ "row-gap": "20px", "font-size": "32px" }}
+		>
+			games
+			<Card />
+			coming soon
+		</div>
+	);
+};

src/renaissance.ts

@@ -1,4 +1,4 @@
-import { Board, Card, Hand, Pile, Stack, Suit } from "./cards";
+import { Board, Card, Hand, Pile, Stack, Suit } from "./types/cards";
 import { clone } from "./fn";
 
 const AGG: Suit = "spades";

src/routes/index.tsx

@@ -0,0 +1,5 @@
+import Game from "../components/Game";
+
+export default () => {
+	return <Game />;
+};