refactor to use redux WIP

just pushing to save data
2026-07-18 11:23:47 +00:00 · 2024-04-16 22:05:51 +02:00
parent 7f03bf900f
commit 69daf8ccae
26 changed files with 434 additions and 368 deletions
@@ -0,0 +1,46 @@
+import React from "react";
+import {Fegyver} from "../domain-models/felszereles";
+import {FegyverFlags} from "../domain-models/fegyver";
+
+
+export function FegyverLabel(fegyver: Fegyver): string {
+    const serializedFlags = (FegyverFlags(fegyver) + (fegyver.Megjegyzes != null ? " " + fegyver.Megjegyzes : "")).trim();
+    const sizeLabel = fegyver.Size < 1 && fegyver.Size > 0 ? ` [1/${Math.round(1 / fegyver.Size)}]` : (fegyver.Size > 1 ? ` [${fegyver.Size}]` : '');
+    return `${fegyver.Name}${sizeLabel} | ${serializedFlags.length > 0 ? serializedFlags + " |" : ''}${
+        fegyver.DamageMultiplier > 1 ? `${fegyver.DamageMultiplier}*` : ''}${
+        fegyver.NumberOfDamageDice}d${fegyver.DamageDice}${fegyver.DamageBonus > 0 ? ` +${fegyver.DamageBonus}` : ''} ${
+        fegyver.CritRangeStart < 20 ? `${fegyver.CritRangeStart}-20` : ''}x${fegyver.CritMultiplier}${
+        fegyver.Price > 0 ? ` | ár: ${fegyver.Price} at ` : ''}${
+        fegyver.Range > 10 ? ` | táv: ${fegyver.Range}` : ''}`
+}
+
+function FegyverSelector(props: {
+    fegyverek: Fegyver[],
+    selectedId: string,
+    onChange: (id: string) => void,
+    dataTestId?: string,
+}) {
+    const { fegyverek, selectedId, onChange, dataTestId } = props
+    return <>
+        <select className='col form-select'
+                value={selectedId}
+                onChange={e => onChange(e.target.value)}
+                data-testid={dataTestId}
+        >
+            <optgroup label="Közelharci">
+                {fegyverek.filter(f => f.Type === 'kozelharci').map(f => <option
+                    key={f.Id} value={f.Id}>{FegyverLabel(f)}</option>)}
+            </optgroup>
+            <optgroup label="Közelharci, dobható">
+                {fegyverek.filter(f => f.Type === 'dobhato').map(f => <option
+                    key={f.Id} value={f.Id}>{FegyverLabel(f)}</option>)}
+            </optgroup>
+            <optgroup label="Távolsági">
+                {fegyverek.filter(f => f.Type === 'lofegyver').map(f => <option
+                    key={f.Id} value={f.Id}>{FegyverLabel(f)}</option>)}
+            </optgroup>
+        </select>
+    </>
+}
+
+export default FegyverSelector
@@ -0,0 +1,39 @@
+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,
+    dataTestId?: string,
+}) {
+    const { kepzettsegek, changeKepzettseg, selected, dataTestId } = props
+    return <>
+        <div className='row'>
+            <select
+                className='form-control'
+                value={selected.Id}
+                onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}
+                data-testid={dataTestId}
+            >
+                {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,61 @@
+import React from "react";
+
+import {Faj2E, FajLabel} from "../domain-models/faj2E";
+import {Modifier} from "../domain-models/tulajdonsag2E";
+import {SignedNumberToText} from "../../shared/components/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
+    dataTestId?: string
+}) {
+    const {
+        tulajdonsag,
+        changeValue,
+        currentFaj,
+        currentValue,
+        fajiModosito,
+        tooLowError,
+        tooHighError,
+        dataTestId
+    } = 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))}
+                data-testid={dataTestId}
+            />
+        </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;