Ekkonstrui la paĝon por redakti/krei rolulon

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ComponentMeta } from "@storybook/react";
+
+import RolulKreilo from "./RolulKreilo";
+
+export default {
+  title: "Paĝoj/RolulKreilo",
+  component: RolulKreilo,
+} as ComponentMeta<typeof RolulKreilo>;
+
+const priaĵoj = [
+  "Adaptable",
+  "Articulate",
+  "Genteel",
+];
+
+const tipoj = [
+  "Glaive",
+  "Jack",
+  "Nano",
+];
+
+const fokusoj = [
+  "Commands a Starship",
+  "Builds Machines",
+  "Guards the Gate",
+  "Is Always Watching",
+];
+
+export const RolulKreilaRakonto = () => <RolulKreilo rolulo={{}} priaĵoj={priaĵoj} tipoj={tipoj} fokusoj={fokusoj} />
+

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

@@ -0,0 +1,64 @@
+import styled from "styled-components"
+
+interface RolulaŜablono {
+  nomo?: string;
+  priaĵo?: string;
+  tipo?: string;
+  fokuso?: string;
+}
+
+interface FrazaKreilaEcoj {
+  priaĵo?: string;
+  tipo?: string;
+  fokuso?: string;
+
+  priaĵoj: string[];
+  tipoj: string[];
+  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} />
+  <Elekto elektoj={tipoj} aktuala={tipo} />
+  who
+  <Elekto elektoj={fokusoj} aktuala={fokuso} />
+</div>;
+
+interface RolulKreilaEcoj {
+  rolulo: RolulaŜablono;
+  priaĵoj: string[];
+  tipoj: string[];
+  fokusoj: string[];
+}
+
+const RolulKreilo = ( { rolulo, priaĵoj, tipoj, fokusoj }: RolulKreilaEcoj ) => <>
+  <input type="text" value={rolulo.nomo}></input>
+  <FrazaKreilo
+    priaĵo={rolulo.priaĵo}
+    tipo={rolulo.tipo}
+    fokuso={rolulo.fokuso}
+    priaĵoj={priaĵoj}
+    tipoj={tipoj}
+    fokusoj={fokusoj}
+  />
+</>;
+
+const Ujo = styled.div`
+    background-color: #fcd7b7;
+    color: #552511;
+    `;
+
+const bildigu = ( ecoj: RolulKreilaEcoj ) => <Ujo><RolulKreilo {...ecoj} /></Ujo>;
+
+export default bildigu;
+

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

@@ -1,34 +1,5 @@
 import styled from "styled-components"
-
+import { EcGrupo, Lerteco, Kapablo, Rolulo } from "../../tipoj";
-interface EcGrupo {
-  eco: string;
-  aktuala: number;
-  maksimuma: number;
-  avantaĝo: number;
-}
-
-interface Lerteco {
-  nomo: string;
-  nivelo: string;
-}
-
-interface Kapablo {
-  nomo: string;
-  kosto?: string;
-}
-
-interface Rolulo {
-  nomo: string;
-  frazo: string;
-  ecGrupoj: EcGrupo[];
-  kapabloj: Kapablo[];
-  lertecoj: Lerteco[];
-  sekvaResaniĝo: string;
-}
-
-interface RolulEcoj {
-  rolulo: Rolulo;
-}
 
 const EcGrupElemento = ( { eco, aktuala, maksimuma, avantaĝo }: EcGrupo ) => <tr>
   <th key={eco}> {eco} </th>
@@ -46,7 +17,11 @@ const LertecaElemento = ( { nomo, nivelo }: Lerteco ) => <tr>
   <td> {nivelo} </td>
 </tr>;
 
-export const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
+interface RolulEcoj {
+  rolulo: Rolulo;
+}
+
+const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
   <>
     <h1> {nomo} </h1>
     <h2> {frazo} </h2>
@@ -68,7 +43,6 @@ export const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj
   </>;
 
 const Ujo = styled.div`
-  # background-color: #fff5dc;
   background-color: #fcd7b7;
   color: #552511;
 `;

kliento/src/tipoj.ts

@@ -0,0 +1,26 @@
+export interface EcGrupo {
+  eco: string;
+  aktuala: number;
+  maksimuma: number;
+  avantaĝo: number;
+}
+
+export interface Lerteco {
+  nomo: string;
+  nivelo: string;
+}
+
+export interface Kapablo {
+  nomo: string;
+  kosto?: string;
+}
+
+export interface Rolulo {
+  nomo: string;
+  frazo: string;
+  ecGrupoj: EcGrupo[];
+  kapabloj: Kapablo[];
+  lertecoj: Lerteco[];
+  sekvaResaniĝo: string;
+}
+