Update the flake, rename the project

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "flake-utils": {
       "locked": {
-        "lastModified": 1637014545,
+        "lastModified": 1659877975,
-        "narHash": "sha256-26IZAc5yzlD9FlDT54io1oqG/bBoyka+FJk5guaX4x4=",
+        "narHash": "sha256-zllb8aq3YO3h8B/U0/J1WBgAL8EX5yWf5pMj3G0NAmc=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "bba5dcc8e0b20ab664967ad83d24d64cb64ec4f4",
+        "rev": "c0e246b9b83f637f4681389ecabcb2681b4f3af0",
         "type": "github"
       },
       "original": {
@@ -17,26 +17,26 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1648648646,
+        "lastModified": 1668459637,
-        "narHash": "sha256-pHAq/GvsP7zRHkUTCs+4d31C0IEtTIuC6/TFASIA+zg=",
+        "narHash": "sha256-HqnWCKujmtu8v0CjzOT0sr7m2AR7+vpbZJOp1R0rodY=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "efea022d6fe0da84aa6613d4ddeafb80de713457",
+        "rev": "16f4e04658c2ab10114545af2f39db17d51bd1bd",
         "type": "github"
       },
       "original": {
         "id": "nixpkgs",
-        "ref": "nixos-21.11",
+        "ref": "nixos-22.05",
         "type": "indirect"
       }
     },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1637453606,
+        "lastModified": 1665296151,
-        "narHash": "sha256-Gy6cwUswft9xqsjWxFYEnx/63/qzaFUwatcbV5GF/GQ=",
+        "narHash": "sha256-uOB0oxqxN9K7XGF1hcnY+PQnlQJ+3bP2vCn/+Ru/bbc=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "8afc4e543663ca0a6a4f496262cd05233737e732",
+        "rev": "14ccaaedd95a488dd7ae142757884d8e125b3363",
         "type": "github"
       },
       "original": {
@@ -52,7 +52,7 @@
         "nixpkgs": "nixpkgs_2"
       },
       "locked": {
-        "narHash": "sha256-PLhquuUzdO9jjtAEwhP0Q2efsumX2Ayh/mdNFtJtgM0=",
+        "narHash": "sha256-WjyKSpFY44ysIHSN3C0L5PKUJuwXDnSg6p5OcYwbZZ4=",
         "type": "tarball",
         "url": "https://github.com/oxalica/rust-overlay/archive/master.tar.gz"
       },

flake.nix

@@ -1,8 +1,8 @@
 {
-  description = "Kampanja Kontrolado";
+  description = "Visions VTT is a new virtual tabletop application specializing in the Cypher System by Monte Cook Games";
 
   inputs = {
-    nixpkgs.url = "nixpkgs/nixos-21.11";
+    nixpkgs.url = "nixpkgs/nixos-22.05";
     oxalica.url = "https://github.com/oxalica/rust-overlay/archive/master.tar.gz";
   };
 
@@ -16,12 +16,12 @@
         let
           rust_overlay = import oxalica;
           pkgs = import nixpkgs { system = "x86_64-linux"; overlays = [ rust_overlay ]; };
-          rust = pkgs.rust-bin.stable."1.59.0".default.override {
+          rust = pkgs.rust-bin.stable."1.65.0".default.override {
             extensions = [ "rust-src" ];
           };
         in
         pkgs.mkShell {
-          name = "kampanja-kontrolada";
+          name = "visions-vtt-shell";
           buildInputs = [
             pkgs.gtk3
             pkgs.libappindicator
@@ -29,7 +29,7 @@
             pkgs.openssl
             pkgs.pkg-config
             pkgs.sqlite
-            pkgs.webkit
+            pkgs.webkitgtk
             rust
           ];
         };

kliento/src/elementoj/Elektilo/Elektilo.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Elektilo from "./Elektilo";
+
+export default {
+  title: "Elementoj/Elektilo",
+  component: Elektilo,
+  argTypes: {
+    aktuala: {
+      options: [ '', 'Adaptable', 'Articulate', 'Rugged', 'Genteel' ],
+      control: { type: 'radio' },
+    },
+  },
+} as ComponentMeta<typeof Elektilo>;
+
+export const ElektilRakonto: ComponentStory<typeof Elektilo> = ({ aktuala }) => <Elektilo elektoj={[
+  "Adaptable",
+  "Articulate",
+  "Rugged",
+  "Genteel",
+]} aktuala={aktuala} />;

kliento/src/elementoj/Elektilo/Elektilo.tsx

@@ -0,0 +1,14 @@
+interface Ecoj {
+  elektoj: string[];
+  aktuala?: string;
+};
+
+const Elektilo = ({ elektoj, aktuala }: Ecoj) => <select>
+  <option selected={!aktuala}></option>
+  {elektoj.map((elekto) => <option selected={aktuala === elekto} value={elekto}>{elekto}</option>)}
+</select>;
+
+
+const bildigu = ( ecoj: Ecoj ) => <Elektilo {...ecoj} />;
+
+export default bildigu;

kliento/src/elementoj/Tipografio/Tipografio.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentMeta } from '@storybook/react';
+
+import { Ligilo, Subtitolo, Teksto, Titolo } from "./Tipografio";
+
+export default {
+  title: 'Elementoj/Tipografioj',
+}
+
+export const TipogafiaRakontoj = () =>
+  <div>
+    <Titolo>Opal Harris</Titolo>
+    <Subtitolo>An Adaptable Jack who Speaks with a Silver Tongue</Subtitolo>
+    <div>
+      <Teksto>This is the descriptor of a focus or some such</Teksto>
+    </div>
+    <div>
+      <Ligilo destino="localhost">A link</Ligilo>
+    </div>
+  </div>
+

kliento/src/elementoj/Tipografio/Tipografio.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import styles from 'styled-components';
+
+interface TitolaEcoj { children: ReactNode };
+const TitolaStilo = styles.h1`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+  font-size: 24px;
+`;
+export const Titolo = ({ children }: TitolaEcoj) => <TitolaStilo>{children}</TitolaStilo>;
+
+interface SubtitolaEcoj { children: ReactNode };
+const SubtitolaStilo = styles.h2`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Subtitolo = ({ children }: SubtitolaEcoj) => <SubtitolaStilo>{children}</SubtitolaStilo>;
+
+interface TekstaEcoj { children: ReactNode };
+const TekstaStilo = styles.span`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Teksto = ({ children }: TekstaEcoj) => <TekstaStilo>{children}</TekstaStilo>;
+
+interface LigilaEcoj { destino: string, children: ReactNode };
+const LigilaStilo = styles.span`
+  font-family: Avantgarde, TeX Gyre Adventor, sans-serif;
+`;
+export const Ligilo = ({ destino, children }: LigilaEcoj) => (
+  <a href={destino}><LigilaStilo>{children}</LigilaStilo></a>
+);
+
+

kliento/src/paĝoj/Paĝo/Paĝo.stories.tsx

@@ -0,0 +1,99 @@
+import { ComponentMeta } from '@storybook/react';
+
+import RolulKreilo from "../RolulKreilo/RolulKreilo";
+import RolulPaĝo from "../Rolulo/Rolulo";
+import Paĝo from './Paĝo';
+
+export default {
+  title: 'Paĝoj/Paĝo',
+  component: Paĝo,
+} as ComponentMeta<typeof Paĝo>;
+
+const priaĵoj = [
+  "Adaptable",
+  "Articulate",
+  "Genteel",
+];
+
+const tipoj = [
+  "Glaive",
+  "Jack",
+  "Nano",
+];
+
+const fokusoj = [
+  "Commands a Starship",
+  "Builds Machines",
+  "Guards the Gate",
+  "Is Always Watching",
+  "Speaks with a Silver Tongue",
+];
+
+const opal = {
+  nomo: "Opal",
+  nivelo: "Tier 1",
+  frazo: "An Adaptable Jack who Speaks with a Silver Tongue",
+  priaĵo: "Adaptable",
+  tipo: "Jack",
+  fokuso: "Speaks with a Silver Tongue",
+  ecGrupoj: [
+    {
+      eco: "Forto",
+      aktuala: 11,
+      maksimuma: 11,
+      avantaĝo: 0,
+    },
+    {
+      eco: "Rapideco",
+      aktuala: 12,
+      maksimuma: 12,
+      avantaĝo: 0,
+    },
+    {
+      eco: "Intelekto",
+      aktuala: 13,
+      maksimuma: 13,
+      avantaĝo: 1
+    }
+  ],
+  kapabloj: [
+    { nomo: "Versatile" },
+    { nomo: "Flex Skill" },
+    { nomo: "Face Morph", kosto: "2+" },
+    { nomo: "Link Senses", kosto: "2" },
+  ],
+  lertecoj: [
+    { nomo: "Perception", nivelo: "Trained", },
+    { nomo: "Resilient", nivelo: "Trained", },
+    { nomo: "Social Interactions", nivelo: "Trained", },
+    { nomo: "Pleasant social interactions", nivelo: "Specialized", },
+    { nomo: "Crafting, Understanding Numenera", nivelo: "Inability", },
+  ],
+  sekvaResaniĝo: "unu ago",
+};
+
+const flankMenuo = [
+  "Opal",
+  "Dorian",
+  "Devan",
+  "Jacine",
+  "Janys",
+];
+
+const topMenuo = [
+  "Elsalutu",
+  "Agordoj",
+];
+
+export const RolulKreilPaĝRakonto = () => (
+  <Paĝo flankMenuo={flankMenuo} topMenuo={topMenuo}>
+    <RolulKreilo rolulo={opal} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
+  </Paĝo>);
+
+export const RulolPaĝRakonto = () => (
+  <Paĝo flankMenuo={flankMenuo} topMenuo={topMenuo}>
+  <RolulPaĝo rolulo={opal} />
+  </Paĝo>
+);
+
+

kliento/src/paĝoj/Paĝo/Paĝo.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+import styled from "styled-components";
+import { Teksto } from "../../elementoj/Tipografio/Tipografio";
+
+interface Ecoj {
+  flankMenuo: string[];
+  topMenuo: string[];
+  children: ReactNode;
+}
+
+const FlankPanelo = styled.div`
+  grid-column: 1;
+  grid-row: 2;
+`
+
+const TopListo = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+`
+
+const TopPanelo = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 2px solid #c0a0b7;
+  grid-column: 1 / span 2;
+  padding: 10px;
+`
+
+const PrecipaPanelo = styled.div`
+  grid-row-start: 2;
+  grid-column-start: 2;
+`
+
+const Ujo = styled.div`
+  height: 100%;
+  background-color: #fcd7b7;
+  color: #552511;
+
+  display: grid;
+  grid-template-columns: 150px auto;
+  grid-template-rows: 40px auto;
+  font-family: sans-serif;
+`;
+
+const bildigu = ({ flankMenuo, topMenuo, children }: Ecoj) => <Ujo>
+  <FlankPanelo>
+    {flankMenuo.map((ejo) => <div><Teksto>{ejo}</Teksto></div>)}
+  </FlankPanelo>
+  <TopPanelo>
+    <TopListo>
+      {topMenuo.map((ejo) => <Teksto>{ejo}</Teksto>)}
+    </TopListo>
+  </TopPanelo>
+  <PrecipaPanelo>
+    {children}
+  </PrecipaPanelo>
+</Ujo>;
+
+export default bildigu;
+

kliento/src/paĝoj/RolulKreilo/RolulKreilo.stories.tsx

@@ -27,5 +27,10 @@ const fokusoj = [
   "Is Always Watching",
 ];
 
-export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{}} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
+export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{
+  nomo: "Opal",
+    priaĵo: "Adaptable",
+    tipo: "Jack",
+    fokuso: "Commands a Starship",
+  }} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
 

kliento/src/paĝoj/RolulKreilo/RolulKreilo.tsx

@@ -1,4 +1,5 @@
-import styled from "styled-components"
+import styled from "styled-components";
+import Elektilo from "../../elementoj/Elektilo/Elektilo";
 
 interface RolulaŜablono {
   nomo?: string;
@@ -17,21 +18,11 @@ interface FrazaKreilaEcoj {
   fokusoj: string[];
 }
 
-interface ElektEcoj {
-  elektoj: string[];
-  aktuala?: string;
-};
-
-const Elekto = ({ elektoj, aktuala }: ElektEcoj) => <select>
-  <option selected={!aktuala}></option>
-  {elektoj.map((elekto) => <option selected={aktuala === elekto} value={elekto}>{elekto}</option>)}
-</select>;
-
 const FrazaKreilo = ( { priaĵo, priaĵoj, tipo, tipoj, fokuso, fokusoj }: FrazaKreilaEcoj) => <div>
-  <Elekto elektoj={priaĵoj} aktuala={priaĵo} />
+  <Elektilo elektoj={priaĵoj} aktuala={priaĵo} />
-  <Elekto elektoj={tipoj} aktuala={tipo} />
+  <Elektilo elektoj={tipoj} aktuala={tipo} />
   who
-  <Elekto elektoj={fokusoj} aktuala={fokuso} />
+  <Elektilo elektoj={fokusoj} aktuala={fokuso} />
 </div>;
 
 interface RolulKreilaEcoj {
@@ -54,8 +45,6 @@ const RolulKreilo = ( { rolulo, priaĵoj, tipoj, fokusoj }: RolulKreilaEcoj ) =>
 </>;
 
 const Ujo = styled.div`
-    background-color: #fcd7b7;
-    color: #552511;
     `;
 
 const bildigu = ( ecoj: RolulKreilaEcoj ) => <Ujo><RolulKreilo {...ecoj} /></Ujo>;

kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 
 import RolulPaĝo from "./Rolulo";
 
@@ -10,6 +10,7 @@ export default {
 
 const opal = {
   nomo: "Opal",
+  nivelo: "(Tier 1)",
   frazo: "An Adaptable Jack who Speaks with a Silver Tongue",
   ecGrupoj: [
     {

kliento/src/paĝoj/Rolulo/Rolulo.tsx

@@ -1,30 +1,37 @@
 import styled from "styled-components"
 import { EcGrupo, Lerteco, Kapablo, Rolulo } from "../../tipoj";
+import { Titolo, Subtitolo, Teksto } from "../../elementoj/Tipografio/Tipografio";
 
 const EcGrupElemento = ( { eco, aktuala, maksimuma, avantaĝo }: EcGrupo ) => <tr>
-  <th key={eco}> {eco} </th>
+  <th key={eco}> <Teksto>{eco}</Teksto> </th>
-  <td> {aktuala} <button>+</button> <button>-</button> </td>
+  <td> <Teksto>{aktuala}</Teksto> <button>+</button> <button>-</button> </td>
-  <td> {maksimuma} </td>
+  <td> <Teksto>{maksimuma}</Teksto> </td>
-  <td> {avantaĝo} </td>
+  <td> <Teksto>{avantaĝo}</Teksto> </td>
 </tr>;
 
 const KapablaElemento = ( { nomo, kosto }: Kapablo ) => <>
-  <dt key={nomo}> {nomo} {kosto && <span>({kosto})</span>} </dt>
+  <dt key={nomo}> <Teksto>{nomo} {kosto && <span>({kosto})</span>}</Teksto> </dt>
 </>;
 
 const LertecaElemento = ( { nomo, nivelo }: Lerteco ) => <tr>
-  <th key={nomo}> {nomo} </th>
+  <th key={nomo}> <Teksto>{nomo}</Teksto> </th>
-  <td> {nivelo} </td>
+  <td> <Teksto>{nivelo}</Teksto> </td>
 </tr>;
 
 interface RolulEcoj {
   rolulo: Rolulo;
 }
 
-const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
+const Vico = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+const RolulPaĝo = ({ rolulo: { nomo, nivelo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
   <>
-    <h1> {nomo} </h1>
+    <Titolo>{nomo} ({nivelo})</Titolo>
-    <h2> {frazo} </h2>
+    <Subtitolo>{frazo}</Subtitolo>
+    <Vico>
       <table>
         {ecGrupoj.map((eco) => <EcGrupElemento {...eco} />)}
       </table>
@@ -32,6 +39,7 @@ const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekva
         <div> Sekva Resaniĝo: {sekvaResaniĝo} </div>
         <div> <button> Resaniĝu </button> </div>
       </div>
+    </Vico>
     <dl>
       {kapabloj.map((kapablo) => <KapablaElemento {...kapablo} />)}
     </dl>
@@ -43,8 +51,6 @@ const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekva
   </>;
 
 const Ujo = styled.div`
-  background-color: #fcd7b7;
-  color: #552511;
 `;
 
 const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;

kliento/src/tipoj.ts

@@ -17,6 +17,7 @@ export interface Kapablo {
 
 export interface Rolulo {
   nomo: string;
+  nivelo: string;
   frazo: string;
   ecGrupoj: EcGrupo[];
   kapabloj: Kapablo[];