From 08ab1cfe49ff8bf4a054b43b32da746bfd11d28a Mon Sep 17 00:00:00 2001 From: Araozu Date: Mon, 6 May 2024 17:52:19 -0500 Subject: [PATCH] Add styles to main page --- index.html | 5 +- package.json | 2 + pnpm-lock.yaml | 85 ++++++++++++++++++++++++ src/App.tsx | 7 -- src/index.css | 23 +++++++ src/index.tsx | 12 +++- src/pages/Index.tsx | 105 ++++++++++++++++++++++++++++++ src/utils.ts | 11 ++++ tailwind.config.js | 9 ++- vite.config.ts => vite.config.mts | 26 ++++---- 10 files changed, 261 insertions(+), 24 deletions(-) delete mode 100644 src/App.tsx create mode 100644 src/pages/Index.tsx create mode 100644 src/utils.ts rename vite.config.ts => vite.config.mts (50%) diff --git a/index.html b/index.html index 3d834a6..3ae5949 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,10 @@ - Solid App + Card-jong + + + diff --git a/package.json b/package.json index 7e5eef9..fd7fb59 100644 --- 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" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13dcb7c..340e00e 100644 --- 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: {} diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index aa1a739..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function() { - return ( -
- Hola mundo :D -
- ); -} diff --git a/src/index.css b/src/index.css index b5c61c9..2834f56 100644 --- 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; +} diff --git a/src/index.tsx b/src/index.tsx index bcf5f51..64783a4 100644 --- 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(() => , root!); +render( + () => ( + + + + ), + root!, +); diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..c2d1020 --- /dev/null +++ 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(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 ( +
+

+ Card-jong +

+

Mahjong with cards

+
+
+

Play:

+ +
registerUser(ev)}> + +
+ setUsername(ev.target.value)} + /> +
+ +
+ + +

:D

+ + +

Error: {error()}

+ +
+
+
+

+ Learn to play: +

+ + Go to game rules + +
+
+ ); +} + + +function Registration() { + return ( +
+ :D +
+ ); +} diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..0a846a3 --- /dev/null +++ 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, +} + diff --git a/tailwind.config.js b/tailwind.config.js index 2cd1130..8de6e9f 100644 --- 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: [], }; diff --git a/vite.config.ts b/vite.config.mts similarity index 50% rename from vite.config.ts rename to vite.config.mts index 74fce7e..e13aad7 100644 --- a/vite.config.ts +++ 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", + }, });