11 changed files with 54 additions and 269 deletions
--- a/README.md
+++ b/README.md
@ -1,12 +1,34 @@
-# Card-jong (frontend)
+## Usage
-Card-jong is a Mahjong-like game, but uses
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
 2 decks of cards instead of tiles.
-Has a SolidJS frontend and will connect to a
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
 Go backend, which will have all the game logic
 and state.
-This frontend will only render the state received
+```bash
-from the backend.
+$ npm install # or pnpm install or yarn install
 ```
 ### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
 ## Available Scripts
 In the project directory, you can run:
 ### `npm run dev` or `npm start`
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br>
 ### `npm run build`
 Builds the app for production to the `dist` folder.<br>
 It correctly bundles Solid in production mode and optimizes the build for the best performance.
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 ## Deployment
 You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
--- a/index.html
+++ b/index.html
@ -6,10 +6,7 @@
    <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>Card-jong</title>
+    <title>Solid App</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,8 +23,6 @@
    "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,12 +8,6 @@ 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
@ -599,11 +593,6 @@ 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==}
@ -766,9 +755,6 @@ 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}
@ -780,9 +766,6 @@ 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:
@ -863,10 +846,6 @@ 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'}
@ -921,10 +900,6 @@ 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==}
@ -1080,15 +1055,6 @@ 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==}
@ -1096,10 +1062,6 @@ 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==}
@ -1437,14 +1399,6 @@ 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==}
@ -1625,9 +1579,6 @@ 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'}
@ -2513,10 +2464,6 @@ 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
@ -2735,8 +2682,6 @@ 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
@ -2751,14 +2696,6 @@ 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
@ -2855,10 +2792,6 @@ 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: {}
@ -2911,8 +2844,6 @@ 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:
@ -3192,8 +3123,6 @@ snapshots:
  flatted@3.3.1: {}
  follow-redirects@1.15.6: {}
  for-each@0.3.3:
    dependencies:
      is-callable: 1.2.7
@ -3203,12 +3132,6 @@ 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: {}
@ -3529,12 +3452,6 @@ 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
@ -3698,8 +3615,6 @@ 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
@ -0,0 +1,7 @@
 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,26 +1,3 @@
@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,9 +1,8 @@
 /* @refresh reload */
 import { render } from "solid-js/web";
 import {HashRouter, Route} from "@solidjs/router";
 import "./index.css";
-import {Index} from "./pages/Index";
+import App from "./App";
 const root = document.getElementById("root");
@ -11,11 +10,4 @@ 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(
+render(() => <App />, root!);
    () => (
        <HashRouter>
            <Route path="/" component={Index} />
        </HashRouter>
    ),
    root!,
 );
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@ -1,105 +0,0 @@
 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
@ -1,11 +0,0 @@
 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,14 +4,7 @@ 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,5 +1,5 @@
-import { defineConfig } from "vite";
+import { defineConfig } from 'vite';
-import solidPlugin from "vite-plugin-solid";
+import solidPlugin from 'vite-plugin-solid';
 // import devtools from 'solid-devtools/vite';
 export default defineConfig({
@ -15,6 +15,6 @@ export default defineConfig({
    port: 3000,
  },
  build: {
-        target: "esnext",
+    target: 'esnext',
  },
 });