Kreu paĝon
This commit is contained in:
parent
fcfcc1be12
commit
681a3dc660
|
@ -0,0 +1,98 @@
|
||||||
|
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",
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { ReactNode } from "react";
|
||||||
|
import styled from "styled-components"
|
||||||
|
|
||||||
|
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;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const bildigu = ({ flankMenuo, topMenuo, children }: Ecoj) => <Ujo>
|
||||||
|
<FlankPanelo>
|
||||||
|
{flankMenuo.map((ejo) => <div>{ejo}</div>)}
|
||||||
|
</FlankPanelo>
|
||||||
|
<TopPanelo>
|
||||||
|
<TopListo>
|
||||||
|
{topMenuo.map((ejo) => <div>{ejo}</div>)}
|
||||||
|
</TopListo>
|
||||||
|
</TopPanelo>
|
||||||
|
<PrecipaPanelo>
|
||||||
|
{children}
|
||||||
|
</PrecipaPanelo>
|
||||||
|
</Ujo>;
|
||||||
|
|
||||||
|
export default bildigu;
|
||||||
|
|
|
@ -45,8 +45,6 @@ const RolulKreilo = ( { rolulo, priaĵoj, tipoj, fokusoj }: RolulKreilaEcoj ) =>
|
||||||
</>;
|
</>;
|
||||||
|
|
||||||
const Ujo = styled.div`
|
const Ujo = styled.div`
|
||||||
background-color: #fcd7b7;
|
|
||||||
color: #552511;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const bildigu = ( ecoj: RolulKreilaEcoj ) => <Ujo><RolulKreilo {...ecoj} /></Ujo>;
|
const bildigu = ( ecoj: RolulKreilaEcoj ) => <Ujo><RolulKreilo {...ecoj} /></Ujo>;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
import { ComponentMeta } from '@storybook/react';
|
||||||
|
|
||||||
import RolulPaĝo from "./Rolulo";
|
import RolulPaĝo from "./Rolulo";
|
||||||
|
|
||||||
|
|
|
@ -43,8 +43,6 @@ const RolulPaĝo = ({ rolulo: { nomo, frazo, ecGrupoj, kapabloj, lertecoj, sekva
|
||||||
</>;
|
</>;
|
||||||
|
|
||||||
const Ujo = styled.div`
|
const Ujo = styled.div`
|
||||||
background-color: #fcd7b7;
|
|
||||||
color: #552511;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;
|
const bildigu = ( ecoj: RolulEcoj ) => <Ujo><RolulPaĝo {...ecoj} /></Ujo>;
|
||||||
|
|
Loading…
Reference in New Issue