From 9ea4630f8bcd23819e7c2406aed09070a611caa0 Mon Sep 17 00:00:00 2001 From: Savanni D'Gerinel Date: Tue, 28 Dec 2021 21:13:49 -0500 Subject: [PATCH] Aldonu multajn partojn --- client/src/index.tsx | 16 ----- kliento/.gitignore | 1 + {client => kliento}/package-lock.json | 86 ++++++++++++++++++++++- {client => kliento}/package.json | 8 ++- {client => kliento}/public/index.html | 0 {client => kliento}/snowpack.config.js | 5 +- kliento/src/components/Menu/index.tsx | 16 +++++ kliento/src/components/Menu/styles.scss | 3 + kliento/src/components/StatPool/index.tsx | 15 ++++ kliento/src/index.tsx | 35 +++++++++ kliento/src/styles.scss | 28 ++++++++ kliento/src/types.ts | 15 ++++ kliento/src/views/PlayerCharacter.tsx | 27 +++++++ kliento/src/views/PlayerListView.tsx | 20 ++++++ {client => kliento}/tsconfig.json | 0 15 files changed, 255 insertions(+), 20 deletions(-) delete mode 100644 client/src/index.tsx create mode 100644 kliento/.gitignore rename {client => kliento}/package-lock.json (98%) rename {client => kliento}/package.json (76%) rename {client => kliento}/public/index.html (100%) rename {client => kliento}/snowpack.config.js (80%) create mode 100644 kliento/src/components/Menu/index.tsx create mode 100644 kliento/src/components/Menu/styles.scss create mode 100644 kliento/src/components/StatPool/index.tsx create mode 100644 kliento/src/index.tsx create mode 100644 kliento/src/styles.scss create mode 100644 kliento/src/types.ts create mode 100644 kliento/src/views/PlayerCharacter.tsx create mode 100644 kliento/src/views/PlayerListView.tsx rename {client => kliento}/tsconfig.json (100%) diff --git a/client/src/index.tsx b/client/src/index.tsx deleted file mode 100644 index 9a3a45c..0000000 --- a/client/src/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react" -import ReactDOM from "react-dom" - -const Main = () => <> -

Numenera Datasphere

-
Campaign Settings
-
Player Characters
-
Cyphers and Artifacts
-; - -const main = () => { - ReactDOM.render(
, document.getElementById('root')) -} - -console.log(document.getElementById('root')) -main() diff --git a/kliento/.gitignore b/kliento/.gitignore new file mode 100644 index 0000000..378eac2 --- /dev/null +++ b/kliento/.gitignore @@ -0,0 +1 @@ +build diff --git a/client/package-lock.json b/kliento/package-lock.json similarity index 98% rename from client/package-lock.json rename to kliento/package-lock.json index ca8114b..2276dcc 100644 --- a/client/package-lock.json +++ b/kliento/package-lock.json @@ -1,5 +1,5 @@ { - "name": "datasphere-client", + "name": "kliento", "version": "1.0.0", "lockfileVersion": 1, "requires": true, @@ -397,6 +397,14 @@ "@babel/helper-plugin-utils": "^7.16.5" } }, + "@babel/runtime": { + "version": "7.16.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz", + "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, "@babel/template": { "version": "7.16.0", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.0.tgz", @@ -1206,6 +1214,29 @@ "@sinonjs/commons": "^1.7.0" } }, + "@snowpack/plugin-react-refresh": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@snowpack/plugin-react-refresh/-/plugin-react-refresh-2.5.0.tgz", + "integrity": "sha512-3rYkwayAA+65IIYLXMEFqQwtBGbII9IidMJo1yXuj35kTEg9TdZrofoqcHaSts2sv2Nz0TD6v7BWRPdvCU0uIw==", + "dev": true, + "requires": { + "@babel/core": "^7.0.0", + "@babel/plugin-syntax-class-properties": "^7.10.0", + "react-refresh": "^0.9.0" + } + }, + "@snowpack/plugin-sass": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@snowpack/plugin-sass/-/plugin-sass-1.4.0.tgz", + "integrity": "sha512-Hzz/TYt4IKcjrInv+FyujLohtJHadZCUdz5nnfh1N7MwplHFmxgLuKiT8tsiafHFAGsuR+4ZpFTqLeSyQTHAhQ==", + "dev": true, + "requires": { + "execa": "^5.0.0", + "find-up": "^5.0.0", + "npm-run-path": "^4.0.1", + "sass": "^1.3.0" + } + }, "@snowpack/plugin-typescript": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@snowpack/plugin-typescript/-/plugin-typescript-1.2.1.tgz", @@ -3289,6 +3320,14 @@ "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true }, + "history": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz", + "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hosted-git-info": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz", @@ -3431,6 +3470,12 @@ "minimatch": "^3.0.4" } }, + "immutable": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz", + "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==", + "dev": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -5885,6 +5930,29 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "react-refresh": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", + "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==", + "dev": true + }, + "react-router": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", + "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz", + "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==", + "requires": { + "history": "^5.2.0", + "react-router": "6.2.1" + } + }, "read-cmd-shim": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz", @@ -5937,6 +6005,11 @@ "picomatch": "^2.2.1" } }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + }, "regexpp": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz", @@ -6085,6 +6158,17 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.45.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.45.1.tgz", + "integrity": "sha512-pwPRiq29UR0o4X3fiQyCtrESldXvUQAAE0QmcJTpsI4kuHHcLzZ54M1oNBVIXybQv8QF2zfkpFcTxp8ta97dUA==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "saxes": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", diff --git a/client/package.json b/kliento/package.json similarity index 76% rename from client/package.json rename to kliento/package.json index 28d4c17..9364e22 100644 --- a/client/package.json +++ b/kliento/package.json @@ -1,5 +1,5 @@ { - "name": "datasphere-client", + "name": "kliento", "version": "1.0.0", "description": "", "main": "src/main.tsx", @@ -11,10 +11,14 @@ "author": "Savanni D'Gerinel ", "license": "AGPL-3.0-or-later", "dependencies": { + "history": "^5.2.0", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "react-router-dom": "^6.2.1" }, "devDependencies": { + "@snowpack/plugin-react-refresh": "^2.5.0", + "@snowpack/plugin-sass": "^1.4.0", "@snowpack/plugin-typescript": "^1.2.1", "@types/react": "^17.0.35", "@types/react-dom": "^17.0.11", diff --git a/client/public/index.html b/kliento/public/index.html similarity index 100% rename from client/public/index.html rename to kliento/public/index.html diff --git a/client/snowpack.config.js b/kliento/snowpack.config.js similarity index 80% rename from client/snowpack.config.js rename to kliento/snowpack.config.js index 2eff94f..3c76d40 100644 --- a/client/snowpack.config.js +++ b/kliento/snowpack.config.js @@ -7,8 +7,11 @@ module.exports = { public: { url: '/', static: true }, src: { url: '/dist' }, }, + routes: [ + { match: 'routes', src: '/.*', dest: '/' }, + ], plugins: [ - /* ... */ + '@snowpack/plugin-sass', ], packageOptions: { /* ... */ diff --git a/kliento/src/components/Menu/index.tsx b/kliento/src/components/Menu/index.tsx new file mode 100644 index 0000000..611f832 --- /dev/null +++ b/kliento/src/components/Menu/index.tsx @@ -0,0 +1,16 @@ +import React from "react" +import { Link } from "react-router-dom" + +import "./styles.css" + +const MainMenu = () => () + +export default MainMenu + diff --git a/kliento/src/components/Menu/styles.scss b/kliento/src/components/Menu/styles.scss new file mode 100644 index 0000000..7e9542b --- /dev/null +++ b/kliento/src/components/Menu/styles.scss @@ -0,0 +1,3 @@ +.menu { + list-style-type: none; +} diff --git a/kliento/src/components/StatPool/index.tsx b/kliento/src/components/StatPool/index.tsx new file mode 100644 index 0000000..c2dae2c --- /dev/null +++ b/kliento/src/components/StatPool/index.tsx @@ -0,0 +1,15 @@ +import React from "react" +import ReactDOM from "react-dom" + +interface StatPoolProps { + name: string; + value: number; + max: number; + edge: number; +} + +const StatPool = ({ name, value, max, edge }: StatPoolProps) => (
+
{value} / {max}
{edge}
+
) + +export default StatPool diff --git a/kliento/src/index.tsx b/kliento/src/index.tsx new file mode 100644 index 0000000..615f7a6 --- /dev/null +++ b/kliento/src/index.tsx @@ -0,0 +1,35 @@ +import React from "react" +import ReactDOM from "react-dom" +import { BrowserRouter, Route, Routes, useParams } from "react-router-dom"; + +import Menu from "./components/Menu" +import PlayerListView from "./views/PlayerListView" +import "./styles.scss" + +const App = () => ( + <> +

Numenera Datasphere

+
+ + + root
} /> + campaign} /> + }> + } /> + + cyphers} /> + battles} /> + + + ) + +const main = () => { + ReactDOM.render( + + + + , document.getElementById('root') + ) +} + +main() diff --git a/kliento/src/styles.scss b/kliento/src/styles.scss new file mode 100644 index 0000000..cf2051c --- /dev/null +++ b/kliento/src/styles.scss @@ -0,0 +1,28 @@ +body { + background-color: rgb(200, 190, 180); +} + +.columns { + display: flex; + // border: 1px solid red; + margin: auto; + padding: 1em; + + > * { + margin: 0 1em 0 1em; + } + + & > :first-child { + margin: 0 1em 0 0; + } + & > :last-child { + margin: 0 0 0 1em; + } +} + +.c-2 { + > div { + width: 50%; + } +} + diff --git a/kliento/src/types.ts b/kliento/src/types.ts new file mode 100644 index 0000000..6267c84 --- /dev/null +++ b/kliento/src/types.ts @@ -0,0 +1,15 @@ +type StatPool = { + value: number; + max: number; + edge: number; +} + +export type PlayerCharacter = { + name: string; + concept: string; + effort: number; + cypherLimit: number; + might: StatPool; + speed: StatPool; + intellect: StatPool; +} diff --git a/kliento/src/views/PlayerCharacter.tsx b/kliento/src/views/PlayerCharacter.tsx new file mode 100644 index 0000000..5f4a1bf --- /dev/null +++ b/kliento/src/views/PlayerCharacter.tsx @@ -0,0 +1,27 @@ +import React from "react" +import ReactDOM from "react-dom" + +import StatPool from "../components/StatPool" +import { PlayerCharacter } from "../types" + +interface PlayerCharacterProps extends PlayerCharacter { } + +const PlayerCharacter = ({ name, might, speed, intellect }: PlayerCharacterProps) => { + return (
+

{name}

+
{concept}
+
+
+ +
+ +
+ + + +
+
+
) +} + +export default PlayerCharacter diff --git a/kliento/src/views/PlayerListView.tsx b/kliento/src/views/PlayerListView.tsx new file mode 100644 index 0000000..7cbc9c5 --- /dev/null +++ b/kliento/src/views/PlayerListView.tsx @@ -0,0 +1,20 @@ +import React from "react" +import ReactDOM from "react-dom" +import { Link, Route, Routes, useParams } from "react-router-dom"; + +import PlayerCharacter from "./PlayerCharacter"; + +const PlayerListView = () => { + let params = useParams(); + return (
+ + {params.name ? : null } +
); +} + +export default PlayerListView diff --git a/client/tsconfig.json b/kliento/tsconfig.json similarity index 100% rename from client/tsconfig.json rename to kliento/tsconfig.json