savanni
/
visions-vtt
1
0
Fork 0
Code Issues 22 Pull Requests Projects 7 Releases Wiki Activity

Aldonu la RolulPaĝon kaj electu du kolorojn

This commit is contained in:
Savanni D'Gerinel 2022-04-02 11:41:57 -04:00
parent a60fb7b601
commit 8d9a2775f4
6 changed files with 216 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
kliento/package-lock.json generated
View File

@ -1521,8 +1521,7 @@
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
"dev": true
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/serialize": {
"version": "0.11.16",
@ -1576,14 +1575,12 @@
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
"dev": true
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
"dev": true
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@emotion/utils": {
"version": "0.11.3",
@ -8220,6 +8217,16 @@
"@types/unist": "*"
}
},
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dev": true,
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/html-minifier-terser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@ -8455,6 +8462,17 @@
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
"integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
},
"@types/styled-components": {
"version": "5.1.24",
"resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.24.tgz",
"integrity": "sha512-mz0fzq2nez+Lq5IuYammYwWgyLUE6OMAJTQL9D8hFLP4Pkh7gVYJii/VQWxq8/TK34g/OrkehXaFNdcEKcItug==",
"dev": true,
"requires": {
"@types/hoist-non-react-statics": "*",
"@types/react": "*",
"csstype": "^3.0.2"
}
},
"@types/tapable": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
@ -9647,11 +9665,22 @@
"react-docgen": "^5.0.0"
}
},
"babel-plugin-styled-components": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz",
"integrity": "sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.16.0",
"@babel/helper-module-imports": "^7.16.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11",
"picomatch": "^2.3.0"
}
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
"dev": true
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-transform-react-remove-prop-types": {
"version": "0.4.24",
@ -10291,6 +10320,11 @@
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -11228,6 +11262,11 @@
"postcss-selector-parser": "^6.0.9"
}
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-declaration-sorter": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@ -11332,6 +11371,16 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@ -14034,7 +14083,6 @@
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dev": true,
"requires": {
"react-is": "^16.7.0"
}
@ -20445,8 +20493,7 @@
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
"dev": true
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "2.0.0",
@ -21095,6 +21142,33 @@
"inline-style-parser": "0.1.1"
}
},
"styled-components": {
"version": "5.3.5",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz",
"integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^1.1.0",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1.12.0",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
},
"dependencies": {
"@emotion/is-prop-valid": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
"integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
"requires": {
"@emotion/memoize": "^0.7.4"
}
}
}
},
"stylehacks": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",

2
kliento/package.json
View File

@ -14,6 +14,7 @@
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"styled-components": "^5.3.5",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4"
},
@ -66,6 +67,7 @@
"@storybook/react": "^6.4.20",
"@storybook/testing-library": "0.0.9",
"@tauri-apps/cli": "^1.0.0-rc.8",
"@types/styled-components": "^5.1.24",
"cross-env": "^7.0.3",
"webpack": "^5.71.0"
}

32
kliento/src/paĝoj/Rolulo.stories.tsx
View File

@ -1,32 +0,0 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { RolulPaĝo } from "./Rolulo";
export default {
title: 'Paĝoj/RolulPaĝo',
component: RolulPaĝo,
} as ComponentMeta<typeof RolulPaĝo>;
const opal = {
nomo: "Opal",
ecGrupoj: {
"forto": {
aktuala: 11,
maksimuma: 11,
avantaĝo: 0,
},
"rapideco": {
aktuala: 12,
maksimuma: 12,
avantaĝo: 0,
},
"intelekto": {
aktuala: 13,
maksimuma: 13,
avantaĝo: 1
}
},
};
export const RolulPaĝRakonto = () => <RolulPaĝo rolulo={opal} />

18
kliento/src/paĝoj/Rolulo.tsx
View File

@ -1,18 +0,0 @@
interface EcGrupo {
aktuala: number;
maksimuma: number;
avantaĝo: number;
}
interface Rolulo {
nomo: string;
ecGrupoj: { [key: string]: EcGrupo };
}
interface RolulEcoj {
rolulo: Rolulo;
}
export const RolulPaĝo = ({ rolulo: { nomo } }: RolulEcoj) =>
<div>{nomo}</div>;

51
kliento/src/paĝoj/Rolulo/Rolulo.stories.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import RolulPaĝo from "./Rolulo";
export default {
title: 'Paĝoj/RolulPaĝo',
component: RolulPaĝo,
} as ComponentMeta<typeof RolulPaĝo>;
const opal = {
nomo: "Opal",
frazo: "An Adaptable Jack who 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",
};
export const RolulPaĝRakonto = () => <RolulPaĝo rolulo={opal} />

78
kliento/src/paĝoj/Rolulo/Rolulo.tsx Normal file
View File

@ -0,0 +1,78 @@
import styled from "styled-components"
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>
<td> {aktuala} <button>+</button> <button>-</button> </td>
<td> {maksimuma} </td>
<td> {avantaĝo} </td>
</tr>;
const KapablaElemento = ( { nomo, kosto }: Kapablo ) => <>
<dt key={nomo}> {nomo} {kosto && <span>({kosto})</span>} </dt>
</>;
const LertecaElemento = ( { nomo, nivelo }: Lerteco ) => <tr>
<th key={nomo}> {nomo} </th>
<td> {nivelo} </td>
</tr>;
export const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekvaResaniĝo } }: RolulEcoj) =>
<>
<h1> {nomo} </h1>
<h2> {frazo} </h2>
<table>
{ecGrupoj.map((eco) => <EcGrupElemento {...eco} />)}
</table>
<div>
<div> Sekva Resaniĝo: {sekvaResaniĝo} </div>
<div> <button> Resaniĝu </button> </div>
</div>
<dl>
{kapabloj.map((kapablo) => <KapablaElemento {...kapablo} />)}
</dl>
<table>
<tbody>
{lertecoj.map((lerteco) => <LertecaElemento {...lerteco} />)}
</tbody>
</table>
</>;
const Ujo = styled.div`
# background-color: #fff5dc;
background-color: #fcd7b7;
color: #552511;
`;
const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;
export default bildigu;