feat(Server): Add frontend starter

7 files changed, 172 insertions, 0 deletions

diff --git a/server/frontend/src/App.module.css b/server/frontend/src/App.module.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/server/frontend/src/App.module.css
diff --git a/server/frontend/src/App.tsx b/server/frontend/src/App.tsx
new file mode 100644
index 0000000..6773d90
--- /dev/null
+++ b/server/frontend/src/App.tsx
@@ -0,0 +1,11 @@
+import type {Component} from "solid-js";
+import {A} from "@solidjs/router";
+
+const App: Component = () => {
+    return <>
+        Hello World
+        <A href="/test">Test Page</A>
+    </>;
+};
+
+export default App;
diff --git a/server/frontend/src/Test.tsx b/server/frontend/src/Test.tsx
new file mode 100644
index 0000000..6eee2d6
--- /dev/null
+++ b/server/frontend/src/Test.tsx
@@ -0,0 +1,23 @@
+import {A, createAsync} from "@solidjs/router";
+import {client} from "./api.js";
+import {For, Suspense} from "solid-js";
+
+export default function Test() {
+    let items = createAsync(() => client.GET("/item", {
+        params: {
+            query: {
+                itemId: ['HYPERION', 'BAT_WAND']
+            }
+        }
+    }))
+    return <>
+        Test page <A href={"/"}>Back to main</A>
+        <hr/>
+        <Suspense fallback={"Loading items..."}>
+            <p>Here are all Items:</p>
+            <For each={Object.entries(items()?.data || {})}>
+                { ([id, name]) => <li><code>{id}</code>: {name}</li>}
+            </For>
+        </Suspense>
+    </>
+}
\ No newline at end of file
diff --git a/server/frontend/src/api-schema.d.ts b/server/frontend/src/api-schema.d.ts
new file mode 100644
index 0000000..920cd4b
--- /dev/null
+++ b/server/frontend/src/api-schema.d.ts
@@ -0,0 +1,98 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export interface paths {
+    "/profiles": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List all profiles and players known to ledger */
+        get: operations["listProfiles"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/item": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get item names for item ids */
+        get: operations["getItemNames"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+}
+export type webhooks = Record<string, never>;
+export interface components {
+    schemas: never;
+    responses: never;
+    parameters: never;
+    requestBodies: never;
+    headers: never;
+    pathItems: never;
+}
+export type $defs = Record<string, never>;
+export interface operations {
+    listProfiles: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        playerId: string;
+                        profileId: string;
+                    }[];
+                };
+            };
+        };
+    };
+    getItemNames: {
+        parameters: {
+            query?: {
+                itemId?: string[];
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        [key: string]: string;
+                    };
+                };
+            };
+        };
+    };
+}
diff --git a/server/frontend/src/api.ts b/server/frontend/src/api.ts
new file mode 100644
index 0000000..00273ec
--- /dev/null
+++ b/server/frontend/src/api.ts
@@ -0,0 +1,6 @@
+import createClient from "openapi-fetch";
+import type {paths} from "./api-schema.js";
+
+const apiRoot = import.meta.env.DEV ? "//localhost:8080/api" : "/api";
+
+export const client = createClient<paths>({baseUrl: apiRoot});
\ No newline at end of file
diff --git a/server/frontend/src/index.css b/server/frontend/src/index.css
new file mode 100644
index 0000000..4a1df4d
--- /dev/null
+++ b/server/frontend/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/server/frontend/src/index.tsx b/server/frontend/src/index.tsx
new file mode 100644
index 0000000..023872c
--- /dev/null
+++ b/server/frontend/src/index.tsx
@@ -0,0 +1,21 @@
+/* @refresh reload */
+import {render} from "solid-js/web";
+
+import "./index.css";
+import type {RouteDefinition} from "@solidjs/router";
+import {Router} from "@solidjs/router";
+import {lazy} from "solid-js";
+
+const root = document.getElementById("root");
+
+if (!(root instanceof HTMLElement)) {
+    throw new Error(
+        "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
+    );
+}
+const routes: Array<RouteDefinition> = [
+    {path: '/', component: lazy(() => import("./App.tsx"))},
+    {path: "/test/", component: lazy(() => import("./Test.tsx"))}
+]
+
+render(() => <Router>{routes}</Router>, root!);