flake.lock

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

flake.nix

@@ -1,8 +1,8 @@
 {
-  description = "Visions VTT is a new virtual tabletop application specializing in the Cypher System by Monte Cook Games";
+  description = "Kampanja Kontrolado";
 
   inputs = {
-    nixpkgs.url = "nixpkgs/nixos-22.05";
+    nixpkgs.url = "nixpkgs/nixos-21.11";
     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.65.0".default.override {
+          rust = pkgs.rust-bin.stable."1.59.0".default.override {
             extensions = [ "rust-src" ];
           };
         in
         pkgs.mkShell {
-          name = "visions-vtt-shell";
+          name = "kampanja-kontrolada";
           buildInputs = [
             pkgs.gtk3
             pkgs.libappindicator
@@ -29,7 +29,7 @@
             pkgs.openssl
             pkgs.pkg-config
             pkgs.sqlite
-            pkgs.webkitgtk
+            pkgs.webkit
             rust
           ];
         };

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

@@ -1,22 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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,10 +27,5 @@ const fokusoj = [
   "Is Always Watching",
 ];
 
-export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{
+export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{}} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
-  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,5 +1,4 @@
-import styled from "styled-components";
+import styled from "styled-components"
-import Elektilo from "../../elementoj/Elektilo/Elektilo";
 
 interface RolulaŜablono {
   nomo?: string;
@@ -18,11 +17,21 @@ 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>
-  <Elektilo elektoj={priaĵoj} aktuala={priaĵo} />
+  <Elekto elektoj={priaĵoj} aktuala={priaĵo} />
-  <Elektilo elektoj={tipoj} aktuala={tipo} />
+  <Elekto elektoj={tipoj} aktuala={tipo} />
   who
-  <Elektilo elektoj={fokusoj} aktuala={fokuso} />
+  <Elekto elektoj={fokusoj} aktuala={fokuso} />
 </div>;
 
 interface RolulKreilaEcoj {
@@ -45,6 +54,8 @@ 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 { ComponentMeta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import RolulPaĝo from "./Rolulo";
 
@@ -10,7 +10,6 @@ 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,45 +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}> <Teksto>{eco}</Teksto> </th>
+  <th key={eco}> {eco} </th>
-  <td> <Teksto>{aktuala}</Teksto> <button>+</button> <button>-</button> </td>
+  <td> {aktuala} <button>+</button> <button>-</button> </td>
-  <td> <Teksto>{maksimuma}</Teksto> </td>
+  <td> {maksimuma} </td>
-  <td> <Teksto>{avantaĝo}</Teksto> </td>
+  <td> {avantaĝo} </td>
 </tr>;
 
 const KapablaElemento = ( { nomo, kosto }: Kapablo ) => <>
-  <dt key={nomo}> <Teksto>{nomo} {kosto && <span>({kosto})</span>}</Teksto> </dt>
+  <dt key={nomo}> {nomo} {kosto && <span>({kosto})</span>} </dt>
 </>;
 
 const LertecaElemento = ( { nomo, nivelo }: Lerteco ) => <tr>
-  <th key={nomo}> <Teksto>{nomo}</Teksto> </th>
+  <th key={nomo}> {nomo} </th>
-  <td> <Teksto>{nivelo}</Teksto> </td>
+  <td> {nivelo} </td>
 </tr>;
 
 interface RolulEcoj {
   rolulo: Rolulo;
 }
 
-const Vico = styled.div`
+const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
-  display: flex;
-  gap: 15px;
-`;
-
-const RolulPaĝo = ({ rolulo: { nomo, nivelo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
   <>
-    <Titolo>{nomo} ({nivelo})</Titolo>
+    <h1> {nomo} </h1>
-    <Subtitolo>{frazo}</Subtitolo>
+    <h2> {frazo} </h2>
-    <Vico>
+    <table>
-      <table>
+      {ecGrupoj.map((eco) => <EcGrupElemento {...eco} />)}
-        {ecGrupoj.map((eco) => <EcGrupElemento {...eco} />)}
+    </table>
-      </table>
+    <div>
-      <div>
+      <div> Sekva Resaniĝo: {sekvaResaniĝo} </div>
-        <div> Sekva Resaniĝo: {sekvaResaniĝo} </div>
+      <div> <button> Resaniĝu </button> </div>
-        <div> <button> Resaniĝu </button> </div>
+    </div>
-      </div>
-    </Vico>
     <dl>
       {kapabloj.map((kapablo) => <KapablaElemento {...kapablo} />)}
     </dl>
@@ -51,6 +43,8 @@ const RolulPaĝo = ({ rolulo: { nomo, nivelo, frazo, ecGrupoj, kapabloj, lerteco
   </>;
 
 const Ujo = styled.div`
+  background-color: #fcd7b7;
+  color: #552511;
 `;
 
 const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;

kliento/src/tipoj.ts

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