foundersandcoders · AlexVOiceover · Jun 8, 2025 · Jun 6, 2025 · Jun 7, 2025 · Jun 7, 2025
diff --git a/src/app.css b/src/app.css
@@ -2,22 +2,34 @@
 @import '@fontsource/metropolis';
 
 @theme {
-	--pink: #d600a8;
-	--black: #000000;
-	--white: #ffffff;
-	--light-pink: #ff2ed2;
-	--teal: #00a7a8;
-	--yellow: #ffcb00;
-	--orange: #ec5d2a;
-	--green: #29e2a3;
-	--purple: #7900d6;
-	--bright-blue: #2235e2;
-	--dark-purple: #4d1b9b;
+	--color-black: #000000;
+	--color-blue-bright: #2235e2;
+	--color-green: #29e2a3;
+	--color-orange: #ec5d2a;
+	--color-pink: #d600a8;
+	--color-pink-light: #ff2ed2;
+	--color-purple: #7900d6;
+	--color-purple-dark: #4d1b9b;
+	--color-teal: #00a7a8;
+	--color-white: #ffffff;
+	--color-yellow: #ffcb00;
 	--font-family-sans: Metropolis, Arial;
 }
 
 body {
-	background-color: var(--white);
-	color: var(--black);
+	background-color: var(--color-white);
+	color: var(--color-black);
 	font-family: var(--font-family-sans);
 }
+
+.dev {
+	margin: 1rem;
+	outline: 2px dashed var(--color-teal);
+	padding: 1rem;
+}
+
+.tile { outline-color: var(--color-blue-bright); }
+
+.list { outline-color: var(--color-purple); }
+
+.button { outline-color: var(--color-pink); }
diff --git a/src/app.html b/src/app.html
@@ -6,6 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
+
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>

diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<div class="dev">
+	<h1>header</h1>
+</div>
diff --git a/src/lib/components/logic/dev.svelte.ts b/src/lib/components/logic/dev.svelte.ts
@@ -0,0 +1,19 @@
+let tileNum = $state(0);
+
+export function setTileNum(num: number) {
+  tileNum = num;
+}
+
+export function getTileNum(): number {
+  return tileNum;
+}
+
+let listNum = $state(0);
+
+export function setListNum(num: number) {
+  listNum = num;
+}
+
+export function getListNum(): number {
+  return listNum;
+}
diff --git a/src/lib/components/logic/view.svelte.ts b/src/lib/components/logic/view.svelte.ts
@@ -0,0 +1,11 @@
+import type { View } from "$lib/types/ui";
+
+let view = $state<View>("dash");
+
+export function setView(newView: View) {
+  view = newView;
+};
+
+export function getView(): View {
+  return view;
+}
diff --git a/src/lib/components/main.svelte b/src/lib/components/main.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { getView } from "$lib/components/logic/view.svelte";
+
+	import Dash from "$lib/components/view/dash.svelte";
+	import List from "$lib/components/view/list.svelte";
+	import Detail from "$lib/components/view/detail.svelte";
+</script>
+
+<div class="dev">
+	<h1>main</h1>
+
+	{#if getView() === "dash"}
+		<Dash />
+	{:else if getView() === "list"}
+		<List />
+	{:else if getView() === "detail"}
+		<Detail />
+	{/if}
+</div>
diff --git a/src/lib/components/view/dash.svelte b/src/lib/components/view/dash.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { setView } from "$lib/components/logic/view.svelte";
+	import { setListNum, setTileNum, getTileNum } from "$lib/components/logic/dev.svelte";
+	import { randomNum } from "$lib/utils/random";
+
+	setTileNum(randomNum());
+
+	const tileCountNum = getTileNum();
+	const tileCountText = tileCountNum === 1 ? "tile" : "tiles";
+
+	const onclick = (listNum: number) => {
+		setListNum(listNum);
+		setView("list");
+	};
+</script>
+
+<div class="dev">
+	<h1>view/dash</h1>
+
+	<p>There should be {tileCountNum} {tileCountText}</p>
+
+	{#each [...Array(tileCountNum)] as _, i}
+		{@const thisList = randomNum()}
+		<button on:click={() => onclick(thisList)} class="dev tile">
+			<p>Tile {i + 1}</p>
+			<p>{thisList} Entries</p>
+		</button>
+	{/each}
+</div>
diff --git a/src/lib/components/view/detail.svelte b/src/lib/components/view/detail.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { setView } from "$lib/components/logic/view.svelte";
+
+	const onBackClick = () => {
+		setView("list");
+	};
+</script>
+
+<div class="dev">
+	<h1>view/detail</h1>
+
+	<button onclick={onBackClick} class="dev button">
+		Back
+	</button>
+</div>
diff --git a/src/lib/components/view/list.svelte b/src/lib/components/view/list.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { setView } from "$lib/components/logic/view.svelte";
+	import { getListNum } from "$lib/components/logic/dev.svelte";
+
+	let entries = $state(getListNum());
+
+	const onBackClick = () => {
+		setView("dash");
+	};
+
+	const onListClick = () => {
+		setView("detail");
+	};
+</script>
+
+<div class="dev">
+	<h1>view/list</h1>
+
+	<button onclick={onBackClick} class="dev button">
+		Back
+	</button>
+
+	<p>There should be {entries} List Items</p>
+
+	{#each [...Array(entries)] as _, i}
+		<button onclick={onListClick} class="dev list">
+			List Item {i + 1}
+		</button>
+	{/each}
+</div>
diff --git a/src/lib/types/ui.ts b/src/lib/types/ui.ts
@@ -0,0 +1 @@
+export type View = "dash" | "list" | "detail";
diff --git a/src/lib/utils/random.ts b/src/lib/utils/random.ts
@@ -0,0 +1,3 @@
+export function randomNum() {
+  return Math.ceil(Math.random() * 10);
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import '../app.css';
+	import Header from "$lib/components/header.svelte";
 
 	let { children } = $props();
 </script>
 
+<Header />
+
 {@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
-<h1>Welcome to SvelteKit</h1>
-<p>
-	Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
-</p>
+<script lang="ts">
+	import Main from "$lib/components/main.svelte";
+</script>
+
+<Main />
diff --git a/vite.config.ts b/vite.config.ts
@@ -4,7 +4,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()],
+	plugins: [
+		tailwindcss(),
+		sveltekit()
+	],
 	test: {
 		workspace: [
 			{