so far: faj2E, osztaly2E, kepzettsegek2E (with some bugs)
This commit is contained in:
2024-01-09 22:58:50 +01:00
committed by Bálint Mórász
parent e51bde66da
commit d56d7c9899
31 changed files with 1883 additions and 95 deletions
@@ -0,0 +1,43 @@
import React from "react";
import {Faj2E, FajDescription, FajLabel, FajSpecials} from "../domain-models/faj2E";
function FajSelector2E(props: { faj: Faj2E, changeFaj: (val: Faj2E) => void }) {
const {faj, changeFaj} = props
return <>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label'>Faj</label>
<select className='col form-select' value={faj} onChange={e => changeFaj(e.target.value as Faj2E)}>
<option key={Faj2E.Ember} value={Faj2E.Ember}>{FajLabel(Faj2E.Ember)}</option>
<optgroup label='más emberi népek'>
<option key={Faj2E.Amazon} value={Faj2E.Amazon}>{FajLabel(Faj2E.Amazon)}</option>
<option key={Faj2E.Birodalmi} value={Faj2E.Birodalmi}>{FajLabel(Faj2E.Birodalmi)}</option>
<option key={Faj2E.Eszaki} value={Faj2E.Eszaki}>{FajLabel(Faj2E.Eszaki)}</option>
<option key={Faj2E.Nomad} value={Faj2E.Nomad}>{FajLabel(Faj2E.Nomad)}</option>
<option key={Faj2E.Osember} value={Faj2E.Osember}>{FajLabel(Faj2E.Osember)}</option>
</optgroup>
<optgroup label='nem emberi fajok'>
<option key={Faj2E.Elf} value={Faj2E.Elf}>{FajLabel(Faj2E.Elf)}</option>
<option key={Faj2E.Felelf} value={Faj2E.Felelf}>{FajLabel(Faj2E.Felelf)}</option>
<option key={Faj2E.Felork} value={Faj2E.Felork}>{FajLabel(Faj2E.Felork)}</option>
<option key={Faj2E.Felszerzet}
value={Faj2E.Felszerzet}>{FajLabel(Faj2E.Felszerzet)}</option>
<option key={Faj2E.Gnom} value={Faj2E.Gnom}>{FajLabel(Faj2E.Gnom)}</option>
<option key={Faj2E.Torpe} value={Faj2E.Torpe}>{FajLabel(Faj2E.Torpe)}</option>
</optgroup>
</select>
</div>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 form-label'></label>
<div className='col'>
<p className='row pt-2'>
{FajDescription(faj)}
</p>
<ul>
{FajSpecials(faj).map(((special, i) => (<li key={faj + i}>{special}</li>)))}
</ul>
</div>
</div>
</>
}
export default FajSelector2E
@@ -0,0 +1,38 @@
// import React from "react";
// import fegyverek from "../domain-models/fegyver.json"
// import {defaultFegyverID, GetFegyver} from "../domain-models/felszereles";
//
// function HarcosFegyverSpecializacio(props: {
// specialization: string,
// existingSpecializations: string[],
// changeSpecialization: (specialization: string) => void
// szint: number
// }) {
// const {
// specialization,
// existingSpecializations,
// changeSpecialization,
// szint
// } = props
// const fegyver = GetFegyver(specialization)
// const pickableFegyverek = fegyverek.data.filter(f => f.Id === specialization || existingSpecializations.filter(x => x === f.Id).length < (szint < 9 ? 1 : 2))
// const kozelharciPickable = pickableFegyverek.filter(f => f.Type === 'kozelharci')
// const tavolsagiPickable = pickableFegyverek.filter(f => f.Type === 'lofegyver')
//
// return <>
// <div className='row m-2'>
// <label className='col-md-2 col-sm-3 col-form-label' >Fegyver specializáció</label>
// <select className='col form-select' value={fegyver?.Id || defaultFegyverID} onChange={e => changeSpecialization(e.target.value)}>
// <optgroup label="Közelharci">
// {kozelharciPickable.map(f => <option key={`spec-${szint}-${f.Id}`} value={f.Id}>{f.Name}</option>)}
// </optgroup>
// <optgroup label="Távolsági">
// {tavolsagiPickable.map(f => <option key={`spec-${szint}-${f.Id}`} value={f.Id}>{f.Name}</option>)}
// </optgroup>
// </select>
// {fegyver == null && <span className='form-field-error'>Ismeretlen fegyver: {specialization}</span>}
// </div>
// </>
// }
//
// export default HarcosFegyverSpecializacio
@@ -0,0 +1,27 @@
import React from "react";
import {AllJellemIDs, GetJellem, JellemID} from "../domain-models/jellem";
function JellemSelector(props: {selected: JellemID, changeJellem: (val: JellemID) => void}) {
const { selected, changeJellem } = props
const jellem = GetJellem(selected)
return <>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label'>Jellem</label>
<select className='col form-select' value={selected} onChange={e => changeJellem(e.target.value as JellemID)}>
{AllJellemIDs.map((id) => (
<option key={id} value={id}>{GetJellem(id).Label}</option>
))}
</select>
</div>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 form-label'></label>
<div className='col'>
<p className='row pt-2'>
{jellem.Description}
</p>
</div>
</div>
</>
}
export default JellemSelector
@@ -0,0 +1,89 @@
import React from "react";
import KepzettsegSelector from "./KepzettsegSelector2E";
import {
Kepzettseg,
Kepzettsegek,
KepzettsegId,
TolvajKepzettsegList,
} from "../domain-models/kepzettsegek2E";
import {arraySetN} from "../../util";
function InternalKepzettsegekSelector(props: {
title: string,
numberOfKepzettseg: number,
getKepzettsegListaN: (n: number) => Kepzettseg[],
kepzettsegek: KepzettsegId[],
changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
}) {
const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
const klist = Array.from(new Array(numberOfKepzettseg).keys())
const preCalculated: {
kepzettsegek: Kepzettseg[],
changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
selected: Kepzettseg,
}[] = [];
for (let i = 0; i < numberOfKepzettseg; i++) {
preCalculated.push({
kepzettsegek: getKepzettsegListaN(i),
selected: Kepzettsegek[kepzettsegek[i]],
changeKepzettseg: (newKepzettseg: KepzettsegId) => changeKepzettsegek(arraySetN(kepzettsegek, i, newKepzettseg))
})
}
return <>
<div className='row m-2'>
<label className='col-lg-2 col-md-12 col-form-label'>{title}</label>
<div className='col'>
{klist.map((idx) =>
<KepzettsegSelector
key={title+idx}
kepzettsegek={preCalculated[idx].kepzettsegek}
selected={preCalculated[idx].selected}
changeKepzettseg={preCalculated[idx].changeKepzettseg}
/>)
}
</div>
</div>
</>
}
function KarakterKepzettsegek (props: {
numberOfKepzettsegek: number
kepzettsegek: KepzettsegId[],
changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
tolvajKepzettsegek: KepzettsegId[],
changeTolvajKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
getKepzettsegListaN: (n: number) => Kepzettseg[]
}) {
const { kepzettsegek, numberOfKepzettsegek, getKepzettsegListaN, changeKepzettsegek, tolvajKepzettsegek, changeTolvajKepzettsegek} = props
// TODO: Birodalmi tolvajnal az Alikmia, vagy Meregkeveres kezelese
const getTolvajKepzettsegListaN = (n: number) : Kepzettseg[] => {
const tolvajKepzettsegekWithoutN = [...tolvajKepzettsegek.slice(0, n), ...tolvajKepzettsegek.slice(n+1)]
return TolvajKepzettsegList.filter(x => !kepzettsegek.includes(x.Id) && !tolvajKepzettsegekWithoutN.includes(x.Id))
}
return <>
<InternalKepzettsegekSelector
title="Képzettségek"
numberOfKepzettseg={numberOfKepzettsegek}
getKepzettsegListaN={getKepzettsegListaN}
changeKepzettsegek={changeKepzettsegek}
kepzettsegek={kepzettsegek} />
{tolvajKepzettsegek.length > 0 && <InternalKepzettsegekSelector
title="Tolvaj képzettségek"
numberOfKepzettseg={4}
getKepzettsegListaN={getTolvajKepzettsegListaN}
changeKepzettsegek={changeTolvajKepzettsegek}
kepzettsegek={tolvajKepzettsegek} />}
</>
}
export default KarakterKepzettsegek
@@ -0,0 +1,32 @@
import React from "react";
import {Kepzettseg, KepzettsegId} from "../domain-models/kepzettsegek2E";
import {TulajdonsagLabel} from "../domain-models/tulajdonsag2E";
import {OsztalyLabel} from "../domain-models/osztaly2E";
function kepzettsegOptionText(k: Kepzettseg) {
const osztalyok = k.Osztalyok?.reduce((acc, o) => acc + ' / ' + OsztalyLabel(o), '')?.substring(3)
return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')' + (osztalyok == null ? '' : (' - ' + osztalyok));
}
function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], changeKepzettseg: (newKepzettseg: KepzettsegId) => void, selected : Kepzettseg}) {
const { kepzettsegek, changeKepzettseg, selected } = props
return <>
<div className='row'>
<select className='form-control'
value={selected.Id} onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}>
{kepzettsegek.map(k =>(
<option key={k.Id} value={k.Id}>
{kepzettsegOptionText(k)}
</option>
))}
</select>
</div>
<div className='row pt-2'>
<p className='col'>{selected.Description}</p>
</div>
</>
}
export default KepzettsegSelector
@@ -0,0 +1,75 @@
import React from "react";
import {
Osztaly2E,
OsztalyDescription,
OsztalyLabel,
OsztalyProperties,
OsztalySpecialSkills
} from "../domain-models/osztaly2E";
import {Faj2E, SzintKorlatokFajokra} from "../domain-models/faj2E";
function OsztalySelector2E(props: {
currentFaj: Faj2E,
currentOsztaly: Osztaly2E,
changeOsztaly: (newOsztaly: Osztaly2E) => void
}) {
const {currentFaj, currentOsztaly, changeOsztaly} = props;
return <>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 col-form-label'>Osztály</label>
<select className="col form-select" value={currentOsztaly}
onChange={(e) => changeOsztaly(e.target.value as Osztaly2E)}>
<optgroup label='Harcos'>
<option value={Osztaly2E.Harcos}>{OsztalyLabel(Osztaly2E.Harcos)}</option>
{SzintKorlatokFajokra(currentFaj)[Osztaly2E.Amazon] > 0 && (
<option value={Osztaly2E.Amazon}>{OsztalyLabel(Osztaly2E.Amazon)}</option>)}
<option value={Osztaly2E.Barbar}>{OsztalyLabel(Osztaly2E.Barbar)}</option>
<option value={Osztaly2E.Ijasz}>{OsztalyLabel(Osztaly2E.Ijasz)}</option>
<option value={Osztaly2E.Tengeresz}>{OsztalyLabel(Osztaly2E.Tengeresz)}</option>
</optgroup>
<option value={Osztaly2E.Pap}>{OsztalyLabel(Osztaly2E.Pap)}</option>
<option value={Osztaly2E.Tolvaj}>{OsztalyLabel(Osztaly2E.Tolvaj)}</option>
<optgroup label='Varázsló'>
<option value={Osztaly2E.Varazslo}>{OsztalyLabel(Osztaly2E.Varazslo)}</option>
<option value={Osztaly2E.Illuzionista}>{OsztalyLabel(Osztaly2E.Illuzionista)}</option>
</optgroup>
<optgroup label='Opcionális'>
<option value={Osztaly2E.Dalnok}>{OsztalyLabel(Osztaly2E.Dalnok)}</option>
<option value={Osztaly2E.Druida}>{OsztalyLabel(Osztaly2E.Druida)}</option>
<option value={Osztaly2E.Vandor}>{OsztalyLabel(Osztaly2E.Vandor)}</option>
</optgroup>
</select>
</div>
<div className='row m-2'>
<label className='col-md-2 col-sm-3 form-label'></label>
<div className='col'>
<p className='row pt-2'>
{OsztalyDescription(currentOsztaly)}
</p>
<ul>
{OsztalyProperties(currentOsztaly).map(((special, i) => (<li key={currentOsztaly + i}>{special}</li>)))}
</ul>
<div className='col'>
{OsztalySpecialSkills(currentOsztaly).map(skill =>
<div key={skill.Id} >
<strong className='d-inline'>
{skill.Name}
</strong>
{' '}
{skill.Description}
{skill.ExtendedDescription && (
<ol>
{skill.ExtendedDescription.map((ext, i) =>
(<li key={skill.Id + '-' + i}>{ext}</li>))}
</ol>
)}
</div>
)}
</div>
</div>
</div>
</>
}
export default OsztalySelector2E;
@@ -0,0 +1,52 @@
import React from "react";
import {Faj2E, FajLabel} from "../domain-models/faj2E";
import {Modifier} from "../domain-models/tulajdonsag2E";
import {SignedNumberToText} from "../../shared/helpers";
function fajiModositoText(faj: Faj2E, szamolas: (f: Faj2E) => number) : string {
const mod = szamolas(faj)
return (mod !== 0) ? SignedNumberToText(mod) + ' (' + FajLabel(faj) + ')' : ''
}
function TulajdonsagInput(props: {
tulajdonsag: string,
currentFaj : Faj2E,
fajiModosito: (faj: Faj2E) => number,
changeValue: (val: number) => void
currentValue: number
tooLowError: string,
tooHighError: string
}) {
const {
tulajdonsag,
changeValue,
currentFaj,
currentValue,
fajiModosito,
tooLowError,
tooHighError,
} = props;
return (<div className='row m-2'>
<label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
<div className='col-lg-1 col-sm-2 m-2'>
<input className='form-control' maxLength={2} type='number' value={currentValue} onChange={e => changeValue(Number(e.target.value))} />
</div>
<span className='col-sm-2 m-2'>
{fajiModositoText(currentFaj, fajiModosito)}
</span>
<span className='col-sm-2 m-2'>
Összesen: { (currentValue + (fajiModosito(currentFaj))).toString() }
</span>
<span className='col-sm-2 m-2'>
Módosító: { SignedNumberToText(Modifier(currentValue + fajiModosito(currentFaj))) }
</span>
{currentValue < 3 && (
<span className='form-field-error'>{tooLowError}</span>)}
{currentValue > 18 && (
<span className='form-field-error'>{tooHighError}</span>)}
</div>)
}
export default TulajdonsagInput;
@@ -0,0 +1,83 @@
import React from "react";
import {
KarakterTulajdonsagok,
RollAllAbilities,
Tulajdonsag2E,
} from "../domain-models/tulajdonsag2E";
import TulajdonsagInput from "./TulajdonsagInput2E";
import {Faj2E, TulajdonsagModositokFajokra} from "../domain-models/faj2E";
function Tulajdonsagok(props: {
currentFaj: Faj2E,
tulajdonsagok: KarakterTulajdonsagok
changeTulajdonsagok: (tulajdonsagok: KarakterTulajdonsagok) => void
}) {
const {currentFaj, tulajdonsagok, changeTulajdonsagok} = props
return <>
<div className='row'>
<h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
<div className='col-sm-2 m-2'>
<button className='btn btn-dark' type='button'
onClick={() => changeTulajdonsagok(RollAllAbilities())}>Dobás
</button>
</div>
</div>
<TulajdonsagInput
tulajdonsag='Erő'
currentValue={tulajdonsagok.t_ero}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Ero)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ero: val})}
tooLowError='Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!'
tooHighError='Szét szakadtak az izmaid!'
/>
<TulajdonsagInput
tulajdonsag='Ügyesség'
currentValue={tulajdonsagok.t_ugy}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Ugyesseg)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ugy: val})}
tooLowError='Orrabuktál jelentkezés helyett!'
tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!'
/>
<TulajdonsagInput
tulajdonsag='Egészség'
currentValue={tulajdonsagok.t_egs}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Egeszseg)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_egs: val})}
tooLowError='Túl beteg vagy ahhoz, hogy kalandozni menj!'
tooHighError='Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...'
/>
<TulajdonsagInput
tulajdonsag='Intelligencia'
currentValue={tulajdonsagok.t_int}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Intelligencia)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_int: val})}
tooLowError='Elfelejtetted, hogy mikor is kéne kalandozni indulni!'
tooHighError='Ilyen tudás és logika birtokában mi szükséged van új információkra? Mindent le tudsz vezetni a már meglévő ismereteidből, és ezt azonnal beláttad.'
/>
<TulajdonsagInput
tulajdonsag='Bölcsesség'
currentValue={tulajdonsagok.t_bol}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Bolcsesseg)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_bol: val})}
tooLowError='Nem bírtál ellenállni a kíváncsiságodnak, hogy közelebbről is megvizsgáld a tőr hegyét. Nagyon közelről.'
tooHighError='Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.'
/>
<TulajdonsagInput
tulajdonsag='Karizma'
currentValue={tulajdonsagok.t_kar}
currentFaj={currentFaj}
fajiModosito={TulajdonsagModositokFajokra(Tulajdonsag2E.Karizma)}
changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_kar: val})}
tooLowError='Mintha taszítanád az embereket, sose sikerült kalandozó csapatot találnod.'
tooHighError='Az ellenkező nem tagjai nem engedték, hogy útnak indulj.'
/>
</>
}
export default Tulajdonsagok