fernando
/
card-jong-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add styles to main page

master
Araozu 2024-05-06 17:52:19 -05:00
parent 47bff7b927
commit 08ab1cfe49
10 changed files with 261 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -6,7 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" /> <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> </head>
<body> <body>

2
package.json
View File

@ -23,6 +23,8 @@
"vite-plugin-solid": "^2.8.2" "vite-plugin-solid": "^2.8.2"
}, },
"dependencies": { "dependencies": {
"@solidjs/router": "^0.13.3",
"axios": "^1.6.8",
"solid-js": "^1.8.11" "solid-js": "^1.8.11"
} }
} }

85
pnpm-lock.yaml
View File

@ -8,6 +8,12 @@ importers:
.: .:
dependencies: 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: solid-js:
specifier: ^1.8.11 specifier: ^1.8.11
version: 1.8.11 version: 1.8.11
@ -593,6 +599,11 @@ packages:
peerDependencies: peerDependencies:
solid-js: ^1.6.12 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': '@types/babel__core@7.20.5':
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
@ -755,6 +766,9 @@ packages:
resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==} resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
asynckit@0.4.0:
resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
autoprefixer@10.4.19: autoprefixer@10.4.19:
resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
engines: {node: ^10 || ^12 || >=14} engines: {node: ^10 || ^12 || >=14}
@ -766,6 +780,9 @@ packages:
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
axios@1.6.8:
resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==}
babel-plugin-jsx-dom-expressions@0.37.13: babel-plugin-jsx-dom-expressions@0.37.13:
resolution: {integrity: sha512-oAEMMIgU0h1DmHn4ZDaBBFc08nsVJciLq9pF7g0ZdpeIDKfY4zXjXr8+/oBjKhXG8nyomhnTodPjeG+/ZXcWXQ==} resolution: {integrity: sha512-oAEMMIgU0h1DmHn4ZDaBBFc08nsVJciLq9pF7g0ZdpeIDKfY4zXjXr8+/oBjKhXG8nyomhnTodPjeG+/ZXcWXQ==}
peerDependencies: peerDependencies:
@ -846,6 +863,10 @@ packages:
color-name@1.1.4: color-name@1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} 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: commander@4.1.1:
resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
engines: {node: '>= 6'} engines: {node: '>= 6'}
@ -900,6 +921,10 @@ packages:
resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
delayed-stream@1.0.0:
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
engines: {node: '>=0.4.0'}
didyoumean@1.2.2: didyoumean@1.2.2:
resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
@ -1055,6 +1080,15 @@ packages:
flatted@3.3.1: flatted@3.3.1:
resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} 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: for-each@0.3.3:
resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@ -1062,6 +1096,10 @@ packages:
resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==} resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
engines: {node: '>=14'} engines: {node: '>=14'}
form-data@4.0.0:
resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
engines: {node: '>= 6'}
fraction.js@4.3.7: fraction.js@4.3.7:
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
@ -1399,6 +1437,14 @@ packages:
resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==} resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
engines: {node: '>=8.6'} 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: minimatch@3.1.2:
resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
@ -1579,6 +1625,9 @@ packages:
prop-types@15.8.1: prop-types@15.8.1:
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
proxy-from-env@1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
punycode@2.3.1: punycode@2.3.1:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'} engines: {node: '>=6'}
@ -2464,6 +2513,10 @@ snapshots:
dependencies: dependencies:
solid-js: 1.8.11 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': '@types/babel__core@7.20.5':
dependencies: dependencies:
'@babel/parser': 7.22.5 '@babel/parser': 7.22.5
@ -2682,6 +2735,8 @@ snapshots:
is-array-buffer: 3.0.4 is-array-buffer: 3.0.4
is-shared-array-buffer: 1.0.3 is-shared-array-buffer: 1.0.3
asynckit@0.4.0: {}
autoprefixer@10.4.19(postcss@8.4.38): autoprefixer@10.4.19(postcss@8.4.38):
dependencies: dependencies:
browserslist: 4.23.0 browserslist: 4.23.0
@ -2696,6 +2751,14 @@ snapshots:
dependencies: dependencies:
possible-typed-array-names: 1.0.0 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): babel-plugin-jsx-dom-expressions@0.37.13(@babel/core@7.23.7):
dependencies: dependencies:
'@babel/core': 7.23.7 '@babel/core': 7.23.7
@ -2792,6 +2855,10 @@ snapshots:
color-name@1.1.4: {} color-name@1.1.4: {}
combined-stream@1.0.8:
dependencies:
delayed-stream: 1.0.0
commander@4.1.1: {} commander@4.1.1: {}
concat-map@0.0.1: {} concat-map@0.0.1: {}
@ -2844,6 +2911,8 @@ snapshots:
has-property-descriptors: 1.0.2 has-property-descriptors: 1.0.2
object-keys: 1.1.1 object-keys: 1.1.1
delayed-stream@1.0.0: {}
didyoumean@1.2.2: {} didyoumean@1.2.2: {}
dir-glob@3.0.1: dir-glob@3.0.1:
@ -3123,6 +3192,8 @@ snapshots:
flatted@3.3.1: {} flatted@3.3.1: {}
follow-redirects@1.15.6: {}
for-each@0.3.3: for-each@0.3.3:
dependencies: dependencies:
is-callable: 1.2.7 is-callable: 1.2.7
@ -3132,6 +3203,12 @@ snapshots:
cross-spawn: 7.0.3 cross-spawn: 7.0.3
signal-exit: 4.1.0 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: {} fraction.js@4.3.7: {}
fs.realpath@1.0.0: {} fs.realpath@1.0.0: {}
@ -3452,6 +3529,12 @@ snapshots:
braces: 3.0.2 braces: 3.0.2
picomatch: 2.3.1 picomatch: 2.3.1
mime-db@1.52.0: {}
mime-types@2.1.35:
dependencies:
mime-db: 1.52.0
minimatch@3.1.2: minimatch@3.1.2:
dependencies: dependencies:
brace-expansion: 1.1.11 brace-expansion: 1.1.11
@ -3615,6 +3698,8 @@ snapshots:
object-assign: 4.1.1 object-assign: 4.1.1
react-is: 16.13.1 react-is: 16.13.1
proxy-from-env@1.1.0: {}
punycode@2.3.1: {} punycode@2.3.1: {}
queue-microtask@1.2.3: {} queue-microtask@1.2.3: {}

7
src/App.tsx
View File

@ -1,7 +0,0 @@
export default function() {
return (
<div class="text-slate-600 font-black text-2xl">
Hola mundo :D
</div>
);
}

23
src/index.css
View File

@ -1,3 +1,26 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @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;
}

12
src/index.tsx
View File

@ -1,8 +1,9 @@
/* @refresh reload */ /* @refresh reload */
import { render } from "solid-js/web"; import { render } from "solid-js/web";
import {HashRouter, Route} from "@solidjs/router";
import "./index.css"; import "./index.css";
import App from "./App"; import {Index} from "./pages/Index";
const root = document.getElementById("root"); 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?"); 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!,
);

105
src/pages/Index.tsx Normal file
View File

@ -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>
);
}

11
src/utils.ts Normal file
View File

@ -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,
}

9
tailwind.config.js
View File

@ -4,7 +4,14 @@ module.exports = {
"./src/**/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}",
], ],
theme: { 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: [], plugins: [],
}; };

6
vite.config.ts → vite.config.mts
View File

@ -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'; // import devtools from 'solid-devtools/vite';
export default defineConfig({ export default defineConfig({
@ -15,6 +15,6 @@ export default defineConfig({
port: 3000, port: 3000,
}, },
build: { build: {
target: 'esnext', target: "esnext",
}, },
}); });