Aldonu la RolulPaĝon kaj electu du kolorojn
This commit is contained in:
parent
a60fb7b601
commit
8d9a2775f4
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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} />
|
|
@ -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>;
|
||||
|
|
@ -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} />
|
|
@ -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;
|
Loading…
Reference in New Issue