Aldonu multajn partojn

client/src/index.tsx

@@ -1,16 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom"
-
-const Main = () => <>
-  <h1>Numenera Datasphere</h1>
-  <div>Campaign Settings</div>
-  <div>Player Characters</div>
-  <div>Cyphers and Artifacts</div>
-</>;
-
-const main = () => {
-  ReactDOM.render(<Main />, document.getElementById('root'))
-}
-
-console.log(document.getElementById('root'))
-main()

kliento/.gitignore

@@ -0,0 +1 @@
+build

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",

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 <savanni@luminescent-dreams.com>",
   "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",

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: {
     /* ... */

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 = () => (<nav>
+  <ul className="menu">
+    <li> <Link to="/campaign">Campaign Settings</Link> </li>
+    <li> <Link to="/players">Player Characters</Link> </li>
+    <li> <Link to="/cyphers">Cyphers and Artifacts</Link> </li>
+    <li> <Link to="/battles">Battles</Link> </li>
+  </ul>
+</nav>)
+
+export default MainMenu
+

kliento/src/components/Menu/styles.scss

@@ -0,0 +1,3 @@
+.menu {
+  list-style-type: none;
+}

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) => (<div>
+  <div>{value} / {max}</div> <div>{edge}</div>
+</div>)
+
+export default StatPool

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 = () => (
+  <>
+    <h1>Numenera Datasphere</h1>
+    <div className="columns">
+      <Menu />
+      <Routes>
+        <Route path="/" element={<div>root</div>} />
+        <Route path="campaign" element={<div>campaign</div>} />
+        <Route path="players" element={<PlayerListView />}>
+          <Route path=":name" element={<PlayerListView />} />
+        </Route>
+        <Route path="cyphers" element={<div>cyphers</div>} />
+        <Route path="battles" element={<div>battles</div>} />
+      </Routes>
+    </div>
+  </>)
+
+const main = () => {
+  ReactDOM.render(
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+    , document.getElementById('root')
+  )
+}
+
+main()

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%;
+    }
+}
+

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;
+}

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 (<div>
+    <h2>{name}</h2>
+    <div>{concept}</div>
+    <div className="columns c-2">
+      <div>
+
+      </div>
+
+      <div>
+        <StatPool name="Might" {...might} />
+        <StatPool name="Speed" {...speed} />
+        <StatPool name="Intellect" {...intellect} />
+      </div>
+    </div>
+  </div>)
+}
+
+export default PlayerCharacter

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 (<div>
+    <nav>
+      <Link to="priat">Priat</Link> |
+      <Link to="dorian">Dorian </Link> |
+      <Link to="ember">Ember</Link> |
+      <Link to="lise">Lise</Link>
+    </nav>
+    {params.name ? <PlayerCharacter name={params.name} /> : null }
+  </div>);
+}
+
+export default PlayerListView