Add styles to main page

2024-05-06 17:52:19 -05:00 · 2024-05-06 17:52:19 -05:00 · 08ab1cfe49
commit 08ab1cfe49
parent 47bff7b927
10 changed files with 261 additions and 24 deletions
--- a/index.html
+++ b/index.html
@ -6,7 +6,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>Solid App</title>
+    <title>Card-jong</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Marcellus&display=swap" rel="stylesheet">
 </head>

 <body>
--- a/package.json
+++ b/package.json
@ -23,6 +23,8 @@
    "vite-plugin-solid": "^2.8.2"
  },
  "dependencies": {
+    "@solidjs/router": "^0.13.3",
+    "axios": "^1.6.8",
    "solid-js": "^1.8.11"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,6 +8,12 @@ importers:

  .:
    dependencies:
+      '@solidjs/router':
+        specifier: ^0.13.3
+        version: 0.13.3(solid-js@1.8.11)
+      axios:
+        specifier: ^1.6.8
+        version: 1.6.8
      solid-js:
        specifier: ^1.8.11
        version: 1.8.11
@ -593,6 +599,11 @@ packages:
    peerDependencies:
      solid-js: ^1.6.12

+  '@solidjs/router@0.13.3':
+    resolution: {integrity: sha512-p8zznlvnN3KySMXqT8irhubgDNTETNa/guaGHU/cZl7kuiPO3PmkWNYfoNCygtEpoxLmLpf62/ZKeyhFdZexsw==}
+    peerDependencies:
+      solid-js: ^1.8.6
+
  '@types/babel__core@7.20.5':
    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}

@ -755,6 +766,9 @@ packages:
    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
    engines: {node: '>= 0.4'}

+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
  autoprefixer@10.4.19:
    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
    engines: {node: ^10 || ^12 || >=14}
@ -766,6 +780,9 @@ packages:
    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
    engines: {node: '>= 0.4'}

+  axios@1.6.8:
+    resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==}
+
  babel-plugin-jsx-dom-expressions@0.37.13:
    resolution: {integrity: sha512-oAEMMIgU0h1DmHn4ZDaBBFc08nsVJciLq9pF7g0ZdpeIDKfY4zXjXr8+/oBjKhXG8nyomhnTodPjeG+/ZXcWXQ==}
    peerDependencies:
@ -846,6 +863,10 @@ packages:
  color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}

+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
  commander@4.1.1:
    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
    engines: {node: '>= 6'}
@ -900,6 +921,10 @@ packages:
    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
    engines: {node: '>= 0.4'}

+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
  didyoumean@1.2.2:
    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}

@ -1055,6 +1080,15 @@ packages:
  flatted@3.3.1:
    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}

+  follow-redirects@1.15.6:
+    resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
  for-each@0.3.3:
    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}

@ -1062,6 +1096,10 @@ packages:
    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
    engines: {node: '>=14'}

+  form-data@4.0.0:
+    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+    engines: {node: '>= 6'}
+
  fraction.js@4.3.7:
    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}

@ -1399,6 +1437,14 @@ packages:
    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
    engines: {node: '>=8.6'}

+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
  minimatch@3.1.2:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}

@ -1579,6 +1625,9 @@ packages:
  prop-types@15.8.1:
    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}

+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
  punycode@2.3.1:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
@ -2464,6 +2513,10 @@ snapshots:
    dependencies:
      solid-js: 1.8.11

+  '@solidjs/router@0.13.3(solid-js@1.8.11)':
+    dependencies:
+      solid-js: 1.8.11
+
  '@types/babel__core@7.20.5':
    dependencies:
      '@babel/parser': 7.22.5
@ -2682,6 +2735,8 @@ snapshots:
      is-array-buffer: 3.0.4
      is-shared-array-buffer: 1.0.3

+  asynckit@0.4.0: {}
+
  autoprefixer@10.4.19(postcss@8.4.38):
    dependencies:
      browserslist: 4.23.0
@ -2696,6 +2751,14 @@ snapshots:
    dependencies:
      possible-typed-array-names: 1.0.0

+  axios@1.6.8:
+    dependencies:
+      follow-redirects: 1.15.6
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
  babel-plugin-jsx-dom-expressions@0.37.13(@babel/core@7.23.7):
    dependencies:
      '@babel/core': 7.23.7
@ -2792,6 +2855,10 @@ snapshots:

  color-name@1.1.4: {}

+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
  commander@4.1.1: {}

  concat-map@0.0.1: {}
@ -2844,6 +2911,8 @@ snapshots:
      has-property-descriptors: 1.0.2
      object-keys: 1.1.1

+  delayed-stream@1.0.0: {}
+
  didyoumean@1.2.2: {}

  dir-glob@3.0.1:
@ -3123,6 +3192,8 @@ snapshots:

  flatted@3.3.1: {}

+  follow-redirects@1.15.6: {}
+
  for-each@0.3.3:
    dependencies:
      is-callable: 1.2.7
@ -3132,6 +3203,12 @@ snapshots:
      cross-spawn: 7.0.3
      signal-exit: 4.1.0

+  form-data@4.0.0:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
  fraction.js@4.3.7: {}

  fs.realpath@1.0.0: {}
@ -3452,6 +3529,12 @@ snapshots:
      braces: 3.0.2
      picomatch: 2.3.1

+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
  minimatch@3.1.2:
    dependencies:
      brace-expansion: 1.1.11
@ -3615,6 +3698,8 @@ snapshots:
      object-assign: 4.1.1
      react-is: 16.13.1

+  proxy-from-env@1.1.0: {}
+
  punycode@2.3.1: {}

  queue-microtask@1.2.3: {}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,7 +0,0 @@
-export default function() {
-    return (
-        <div class="text-slate-600 font-black text-2xl">
-            Hola mundo :D
-        </div>
-    );
-}
--- a/src/index.css
+++ b/src/index.css
@ -1,3 +1,26 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+:root {
+    --c-bg: #151515;
+    --c-on-bg: white;
+
+    --c-bg-2: #202020;
+
+    --c-border-1: #a0a0a0
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --c-bg: #f0f0f0;
+        --c-on-bg: black;
+        --c-bg-2: white;
+    }
+}
+
+body {
+    background-color: var(--c-bg);
+    color: var(--c-on-bg);
+    font-family: "Marcellus", serif;
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,8 +1,9 @@
 /* @refresh reload */
 import { render } from "solid-js/web";
+import {HashRouter, Route} from "@solidjs/router";

 import "./index.css";
-import App from "./App";
+import {Index} from "./pages/Index";

 const root = document.getElementById("root");

@ -10,4 +11,11 @@ if (import.meta.env.DEV && !(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?");
 }

-render(() => <App />, root!);
+render(
+    () => (
+        <HashRouter>
+            <Route path="/" component={Index} />
+        </HashRouter>
+    ),
+    root!,
+);
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@ -0,0 +1,105 @@
+import { A } from "@solidjs/router";
+import { createSignal, onMount, Show } from "solid-js";
+import { backend, UserInfo } from "../utils";
+
+
+export function Index() {
+    const [loading, setLoading] = createSignal(false);
+    const [userInfo, setUserInfo] = createSignal<UserInfo | null>(null);
+    const [error, setError] = createSignal("");
+    const [username, setUsername] = createSignal("");
+
+    onMount(() => {
+        // attempt to get userinfo from localstorage
+        // validate userinfo with backend
+        console.log("validating userinfo in localstorage");
+    });
+
+    // Register a user in the backend, get their user_id, store it in localStorage.
+    const registerUser = async(ev: Event) => {
+        ev.preventDefault();
+
+        setLoading(true);
+        setError("");
+        try {
+            const user = username();
+
+            if (user.length === 0) {
+                throw new Error("Username is empty");
+            }
+
+            const response = await backend.get("/register");
+            console.log(response.data);
+        } catch (_e) {
+            const e = _e as Error;
+            setError(e.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div class="w-[40rem] mx-auto bg-c-bg-2 my-4 p-4 rounded shadow-md">
+            <h1 class="text-c-on-bg text-3xl font-black pb-4">
+                Card-jong
+            </h1>
+            <p>Mahjong with cards</p>
+            <hr />
+            <div class="py-4">
+                <h2 class="text-xl py-2 font-black">Play:</h2>
+                <Show when={userInfo() === null}>
+                    <form onSubmit={(ev) => registerUser(ev)}>
+                        <label for="index-register-name">Enter your name (3 to 20 letters, numbers or undescores):</label>
+                        <br />
+                        <input
+                            id="index-register-name"
+                            class="inline-block px-2 py-1 my-2 border border-c-border-1 rounded-md bg-c-bg text-c-on-bg"
+                            type="text"
+                            value={username()}
+                            required
+                            pattern="[a-zA-Z0-9_]{3,20}"
+                            onInput={(ev) => setUsername(ev.target.value)}
+                        />
+                        <br />
+                        <button
+                            class="inline-block py-2 px-4 rounded bg-teal-500 dark:bg-teal-700 text-white
+                            disabled:opacity-50 disabled:cursor-not-allowed"
+                            type="submit"
+                            disabled={loading()}
+                        >
+                            Register
+                        </button>
+                    </form>
+                </Show>
+                <Show when={userInfo() !== null}>
+                    <p>:D</p>
+                </Show>
+                <Show when={error() !== ""}>
+                    <p class="bg-red-700 text-red-50 inline-block py-1 px-2 my-2 rounded">Error: {error()}</p>
+                </Show>
+            </div>
+            <hr />
+            <div class="py-4">
+                <h2 class="text-xl py-2 font-black">
+                    Learn to play:
+                </h2>
+                <A
+                    class="inline-block py-2 px-4 rounded bg-teal-500 dark:bg-teal-700 text-white
+                    disabled:opacity-50 disabled:cursor-not-allowed"
+                    href="/rules"
+                >
+                    Go to game rules
+                </A>
+            </div>
+        </div>
+    );
+}
+
+
+function Registration() {
+    return (
+        <div>
+            :D
+        </div>
+    );
+}
--- a/src/utils.ts
+++ b/src/utils.ts
@ -0,0 +1,11 @@
+import axios from "axios";
+
+export const backend = axios.create({
+    baseURL: `${import.meta.env.VITE_BACKEND_URL}/api`,
+});
+
+export type UserInfo = {
+    useruiid: number,
+    username: string,
+}
+
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -4,7 +4,14 @@ module.exports = {
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
-        extend: {},
+        extend: {
+            colors: {
+                "c-bg": "var(--c-bg)",
+                "c-on-bg": "var(--c-on-bg)",
+                "c-bg-2": "var(--c-bg-2)",
+                "c-border-1": "var(--c-border-1)",
+            },
+        },
    },
    plugins: [],
 };
--- a/vite.config.mts
+++ b/vite.config.mts
@ -1,20 +1,20 @@
-import { defineConfig } from 'vite';
-import solidPlugin from 'vite-plugin-solid';
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
 // import devtools from 'solid-devtools/vite';

 export default defineConfig({
-  plugins: [
+    plugins: [
    /*
    Uncomment the following line to enable solid-devtools.
    For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
    */
-    // devtools(),
-    solidPlugin(),
-  ],
-  server: {
-    port: 3000,
-  },
-  build: {
-    target: 'esnext',
-  },
+        // devtools(),
+        solidPlugin(),
+    ],
+    server: {
+        port: 3000,
+    },
+    build: {
+        target: "esnext",
+    },
 });