kemkas/kemkas-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP varazskonyv

Browse Source
This commit is contained in:
Balint Morasz
2024-07-23 15:10:11 +02:00
parent c8fd1396d1
commit c358b0389c
9 changed files with 104 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+7 -6
View File
@@ -14,13 +14,14 @@ See deployment repo at: [https://github.com/morbalint/kemkas-deployment](https:/
## Coding readmes
For frontend only see: [Frontend README](./Kemkas.Web/frontend/README.md)
For frontend only see: [Frontend README](./frontend/README.md)
To start development, spin up the docker-compose.yaml file and use the launchSettings.json to start the backend and frontend dev servers.
To start development, spin up the docker-compose.yaml file and use yarn to start frontend dev server.
For the first time setup:
1. start the DB from the docker compose (required for the backend)
2. launch the project with the launchSettings file (will generate SSL certs)
3. spin up the proxy from docker compose (needs the SSL certs)
```shell
dotnet dev-certs https --clean && \
dotnet dev-certs https --format PEM --no-password -ep ~/.aspnet/https/kemkas.pem --trust
```
Later start the docker compose first and the project launch settings after the DB is up and running.
Later start the docker compose first and the project launch settings after the DB is up and running.
frontend/src/second-edition/components/LevelUps.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ function LevelUp(props: {
return <div>
<div className='row mt-3'>
<h5 className='col align-self-center'>{szint}. Szint</h5>
<h4 className='col align-self-center'>{szint}. Szint</h4>
</div>
{osztaly !== Osztaly2E.Druida &&
<MultiClassOsztalySelector2E
frontend/src/second-edition/components/MasodlagosErtekek.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export function MasodlagosErtekekPresenter(props: MasodlagosErtekekView) {
return <>
<div className='row'>
<h5 className='col align-self-center'>Másodlagos értékek</h5>
<h4 className='col align-self-center'>Másodlagos értékek (első szinten)</h4>
</div>
<div className='row'>
<div className='col-lg-6'>
frontend/src/second-edition/components/Tulajdonsagok2E.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ function Tulajdonsagok(props: {
const tulajdonsagok = props.tulajdonsagok ?? karakter.tulajdonsagok
return <>
<div className='row'>
<h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
<h4 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h4>
<div className='col-sm-2 m-2'>
<button className='btn btn-dark' type='button' data-testid="tulajdonsag-dobas"
onClick={() => dispatch(rollAbilities())}>Dobás
frontend/src/second-edition/components/Varazskonyv.tsx
+25
View File
@@ -0,0 +1,25 @@
import {Osztaly2E} from "../domain-models/osztaly2E";
import {ClassSpells, KarakterVarazslat} from "../domain-models/varazslat";
import VarazskonyvSzint from "./VarazskonyvSzint";
import React from "react";
function Varazskonyv(props: { osztaly: Osztaly2E, varazslatok: KarakterVarazslat[] }) {
const {osztaly, varazslatok} = props;
const classSpells = ClassSpells(osztaly)
const spells = varazslatok.map(v => classSpells.find(x => x.id === v.id)).filter(x => !!x)
return <>
<div className='row my-2'>
<h4 className='col align-self-center'>{osztaly === Osztaly2E.Varazslo ? "Varázslói" : "Illúzionista"} Varázskönyv</h4>
</div>
<VarazskonyvSzint osztaly={osztaly} level={0} varazslatok={varazslatok}/>
{spells.some(v => v.szint === 0) && <VarazskonyvSzint osztaly={osztaly} level={1} varazslatok={varazslatok}/>}
{spells.some(v => v.szint === 1) && <VarazskonyvSzint osztaly={osztaly} level={2} varazslatok={varazslatok}/>}
{spells.some(v => v.szint === 2) && <VarazskonyvSzint osztaly={osztaly} level={3} varazslatok={varazslatok}/>}
{spells.some(v => v.szint === 3) && <VarazskonyvSzint osztaly={osztaly} level={4} varazslatok={varazslatok}/>}
{spells.some(v => v.szint === 4) && <VarazskonyvSzint osztaly={osztaly} level={5} varazslatok={varazslatok}/>}
</>;
}
export default Varazskonyv
frontend/src/second-edition/components/VarazskonyvSzint.tsx
+55
View File
@@ -0,0 +1,55 @@
import {Osztaly2E} from "../domain-models/osztaly2E";
import {ClassSpells, KarakterVarazslat} from "../domain-models/varazslat";
import {useDispatch} from "react-redux";
import {AppDispatch} from "../../store";
import VarazslatSelector from "../display-components/VarazslatSelector";
import {addVarazslat, removeVarazslat, setVarazslat} from "../domain-models/characterSlice";
import React from "react";
function VarazskonyvSzint(props: { osztaly: Osztaly2E, level: number, varazslatok: KarakterVarazslat[] }) {
const {level, osztaly, varazslatok} = props;
const dispatch = useDispatch.withTypes<AppDispatch>()()
const classSpells = ClassSpells(osztaly)
const leveledSpells = classSpells.filter(v => v.szint === level)
const selectedSpells = varazslatok.map(v => {
return leveledSpells.find(x => x.id === v.id)
}).filter(x => !!x)
const availableSpells = leveledSpells.filter(v => varazslatok.every(x => x.id !== v.id))
return <>
<div className='row my-2'>
<h5 className='col align-self-center'>{level}. Szintű varázslatok</h5>
</div>
{selectedSpells.map((v, i) => (
<React.Fragment key={`VarazslatSelector-${i}`}>
<div className='row m-2'>
<VarazslatSelector
selected={v.id}
available={[v, ...availableSpells]}
dataTestId={`varazskonyv_varazslo_1_${v.id}`}
onChange={(nextId) => dispatch(setVarazslat({prev: v.id, next: nextId}))}
/>
<div className="col-lg-2 col-md-3 col-sm-4">
<button
className='btn btn-outline-dark w-100'
type='button'
onClick={() => dispatch(removeVarazslat(v.id))}>Elvesz
</button>
</div>
</div>
<div className="row m-2">
<span>{v?.leiras}</span>
{v?.megfordithato && <u>Megfordítható{' '}</u>}
{v?.komponens && <b>Kötelező komponens: {v.komponens}{' '}</b>}
{v?.opcionalis_komponens && <i>Opcionális komponens: {v.opcionalis_komponens}{' '}</i>}
</div>
</React.Fragment>))}
{availableSpells.length > 0 && <button className='btn btn-outline-dark ms-2'
onClick={() => dispatch(addVarazslat(availableSpells[0].id))}>
Új varázslat hozzáadása
</button>}
</>;
}
export default VarazskonyvSzint
frontend/src/second-edition/components/Varazslatok.tsx
+5 -52
View File
@@ -1,65 +1,18 @@
import React from "react";
import {ClassSpells, KarakterVarazslat} from "../domain-models/varazslat";
import {getClassLevels} from "../domain-models/szintlepes";
import {useDispatch, useSelector} from "react-redux";
import {AppDispatch, RootState} from "../../store";
import {addVarazslat, characterSelector, setVarazslat} from "../domain-models/characterSlice";
import {useSelector} from "react-redux";
import {RootState} from "../../store";
import {characterSelector} from "../domain-models/characterSlice";
import {Osztaly2E} from "../domain-models/osztaly2E";
import VarazslatSelector from "../display-components/VarazslatSelector";
function VarazskonyvSzint(props: {osztaly: Osztaly2E, level: number, varazslatok: KarakterVarazslat[]}) {
const {level, osztaly, varazslatok} = props;
const dispatch = useDispatch.withTypes<AppDispatch>()()
const classSpells = ClassSpells(osztaly)
const leveledSpells = classSpells.filter(v => v.szint === level)
const selectedSpells = varazslatok.map(v => {
return leveledSpells.find(x => x.id === v.id)
}).filter(x => !!x)
const availableSpells = leveledSpells.filter(v => varazslatok.every(x => x.id !== v.id))
return <>
<h5>{level}. Szintű varázslatok</h5>
{selectedSpells.map((v, i) => (
<VarazslatSelector
key={`${i}VarazslatSelector`}
selected={v.id}
available={[v, ...availableSpells]}
dataTestId={`varazskonyv_varazslo_1_${v.id}`}
onChange={(nextId) => dispatch(setVarazslat({prev: v.id, next: nextId}))}
/>))}
{availableSpells.length > 0 && <button className='btn btn-outline-dark'
onClick={() => dispatch(addVarazslat(availableSpells[0].id))}>
Új varázslat hozzáadása
</button>}
</>;
}
function Varazskonyv(props: {osztaly: Osztaly2E, varazslatok: KarakterVarazslat[] }) {
const {osztaly, varazslatok } = props;
const classSpells = ClassSpells(osztaly)
const spells = varazslatok.map(v => classSpells.find(x => x.id === v.id)).filter(x => !!x)
return <>
<h3>Varázslói Varázskönyv</h3>
<VarazskonyvSzint osztaly={osztaly} level={0} varazslatok={varazslatok} />
{spells.some(v => v.szint === 0) && <VarazskonyvSzint osztaly={osztaly} level={1} varazslatok={varazslatok} />}
{spells.some(v => v.szint === 1) && <VarazskonyvSzint osztaly={osztaly} level={2} varazslatok={varazslatok} />}
{spells.some(v => v.szint === 2) && <VarazskonyvSzint osztaly={osztaly} level={3} varazslatok={varazslatok} />}
{spells.some(v => v.szint === 3) && <VarazskonyvSzint osztaly={osztaly} level={4} varazslatok={varazslatok} />}
{spells.some(v => v.szint === 4) && <VarazskonyvSzint osztaly={osztaly} level={5} varazslatok={varazslatok} />}
</>;
}
import Varazskonyv from "./Varazskonyv";
function Varazslatok() {
const karakter = useSelector.withTypes<RootState>()(characterSelector)
const classLevels = getClassLevels(karakter.szintlepesek)
return <>
{classLevels[Osztaly2E.Varazslo] > 0 && <Varazskonyv osztaly={Osztaly2E.Varazslo} varazslatok={karakter.varazslatok} />}
{classLevels[Osztaly2E.Illuzionista] > 0 && <Varazskonyv osztaly={Osztaly2E.Illuzionista} varazslatok={karakter.varazslatok} />}
</>
}
frontend/src/second-edition/domain-models/characterSlice.ts
+7 -3
View File
@@ -96,14 +96,17 @@ export const characterSlice = createSlice({
setFelszereles: (state, action: {payload: KarakterFelszereles}) => {
state.felszereles = action.payload;
},
addVarazslat: (state, action: {payload: string}) => {
state.varazslatok = [...state.varazslatok, {id: action.payload, bekeszitve: false}];
},
setVarazslat: (state, action: {payload: {prev: string, next: string}}) => {
let spell = state.varazslatok.find(x => x.id === action.payload.prev)
if (spell !== undefined) {
spell.id = action.payload.next
}
},
addVarazslat: (state, action: {payload: string}) => {
state.varazslatok = [...state.varazslatok, {id: action.payload, bekeszitve: false}];
removeVarazslat: (state, action: {payload: string}) => {
state.varazslatok = [...state.varazslatok.filter(x => x.id !== action.payload)];
},
}
})
@@ -159,8 +162,9 @@ export const {
setKepzettsegek,
setTolvajKepzettsegek,
setFelszereles,
setVarazslat,
addVarazslat,
setVarazslat,
removeVarazslat,
} = characterSlice.actions
export const characterSelector = characterSlice.selectSlice
frontend/src/second-edition/pages/CreateCharacter2E.tsx
+2 -2
View File
@@ -99,14 +99,14 @@ function CreateCharacter2E(props: {
<div className='p-3'>
<form onSubmit={async (event) => event.preventDefault()}>
<div className='row'>
<h5 className='col align-self-center'>Származás</h5>
<h4 className='col align-self-center'>Származás</h4>
</div>
<Szarmazas/>
<hr/>
<Tulajdonsagok2E/>
<hr/>
<div className='row'>
<h5 className='col align-self-center'>Tanult</h5>
<h4 className='col align-self-center'>Tanult</h4>
</div>
<OsztalySelector2E />
{karakter.szintlepesek[0].osztaly === Osztaly2E.Harcos && <HarcosFegyverSpecializacio szint={1}/>}