the very basics of pdf generation

2026-07-18 03:13:46 +00:00 · 2023-09-05 22:16:05 +02:00
parent 4a82db7f38
commit 4cb1da19a0
9 changed files with 271 additions and 123 deletions
@@ -7,7 +7,20 @@ import {
    TolvajKepzettsegList,
 } from "../domain-models/kepzettsegek";

-function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg: number, getKepzettsegListaN: (n: number) => Kepzettseg[], kepzettsegek: KepzettsegId[], changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void}) {
+function arraySetN<T>(array: T[], n: number, elem: T): T[] {
+    if (array.length < n || n < 0) {
+        return array
+    }
+    return [...array.slice(0, n), elem, ...array.slice(n+1)]
+}
+
+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())
@@ -22,7 +35,7 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
        preCalculated.push({
            kepzettsegek: getKepzettsegListaN(i),
            selected: Kepzettsegek[kepzettsegek[i]],
-            changeKepzettseg: (newKepzettseg: KepzettsegId) => { changeKepzettsegek([...kepzettsegek.slice(0, i), newKepzettseg, ...kepzettsegek.slice(i+1)]) }
+            changeKepzettseg: (newKepzettseg: KepzettsegId) => changeKepzettsegek(arraySetN(kepzettsegek, i, newKepzettseg))
        })
    }

@@ -34,7 +47,7 @@ function InternalKepzettsegekSelector(props: {title: string, numberOfKepzettseg:
                <label className='col-form-label text-body-emphasis'>{title}</label>
            </div>
            <div className='col'>
-                {klist.filter(i => i < preCalculated.length && preCalculated[i].selected != null).map((idx) =>
+                {klist.map((idx) =>
                    <KepzettsegSelector
                        key={title+idx}
                        kepzettsegek={preCalculated[idx].kepzettsegek}
@@ -1,111 +1,12 @@
 import React from "react";
-import {Osztaly} from "../domain-models/osztaly";
-import {KarakterTulajdonsagok, Modifier} from "../domain-models/tulajdonsag";
 import {OverlayTrigger, Tooltip} from "react-bootstrap";
 import {SignedNumberToText} from "./Helpers";
+import {KarakterMasodlagosErtekek} from "../domain-models/masodlagos_ertekek";

-function HP(osztaly: Osztaly, egeszseg: number) {
-    let base = 4;
-    switch (osztaly){
-        case Osztaly.Barbar:
-            base = 12
-            break;
-        case Osztaly.Amazon:
-        case Osztaly.Ijasz:
-        case Osztaly.Kaloz:
-        case Osztaly.Harcos:
-            base = 10;
-            break
-        case Osztaly.Pap:
-            base = 8;
-            break;
-        case Osztaly.Tolvaj:
-            base = 6;
-            break;
-        case Osztaly.Varazslo:
-        case Osztaly.Illuzionista:
-            base = 4;
-            break;
-    }
-    return base + Modifier(egeszseg)
-}

-function TamadasBonusz(osztaly: Osztaly) : number {
-    switch (osztaly){
-        case Osztaly.Barbar:
-        case Osztaly.Amazon:
-        case Osztaly.Ijasz:
-        case Osztaly.Kaloz:
-        case Osztaly.Harcos:
-            return 2;
-        case Osztaly.Pap:
-        case Osztaly.Tolvaj:
-            return 0;
-        case Osztaly.Varazslo:
-        case Osztaly.Illuzionista:
-            return 0;
-    }
-}
+function MasodlagosErtekek(props: {ertekek: KarakterMasodlagosErtekek}) {

-function KozelharciTB(osztaly: Osztaly, tulajdonsagok: KarakterTulajdonsagok): number {
-    const base = TamadasBonusz(osztaly);
-    if (osztaly === Osztaly.Kaloz && tulajdonsagok.t_ugy > tulajdonsagok.t_ero) {
-        return base + Modifier(tulajdonsagok.t_ugy)
-    }
-    return base + Modifier(tulajdonsagok.t_ero)
-}
-
-function KitartasMento(osztaly: Osztaly) : number {
-    switch (osztaly){
-        case Osztaly.Barbar:
-        case Osztaly.Amazon:
-        case Osztaly.Ijasz:
-        case Osztaly.Kaloz:
-        case Osztaly.Harcos:
-        case Osztaly.Pap:
-            return 2;
-        case Osztaly.Tolvaj:
-        case Osztaly.Varazslo:
-        case Osztaly.Illuzionista:
-            return 0;
-    }
-}
-
-function ReflexMento(osztaly: Osztaly) : number {
-    switch (osztaly){
-        case Osztaly.Tolvaj:
-            return 2;
-        case Osztaly.Barbar:
-        case Osztaly.Amazon:
-        case Osztaly.Ijasz:
-        case Osztaly.Kaloz:
-        case Osztaly.Harcos:
-        case Osztaly.Pap:
-        case Osztaly.Varazslo:
-        case Osztaly.Illuzionista:
-            return 0;
-    }
-}
-
-function AkarateroMento(osztaly: Osztaly) : number {
-    switch (osztaly){
-        case Osztaly.Pap:
-        case Osztaly.Varazslo:
-        case Osztaly.Illuzionista:
-            return 2;
-        case Osztaly.Tolvaj:
-        case Osztaly.Barbar:
-        case Osztaly.Amazon:
-        case Osztaly.Ijasz:
-        case Osztaly.Kaloz:
-        case Osztaly.Harcos:
-            return 0;
-    }
-}
-
-function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: KarakterTulajdonsagok}) {
-
-    const { osztaly, tulajdonsagok } = props;
+    const { ertekek } = props

    const tooltip = (
        <Tooltip id="tooltip">
@@ -125,33 +26,33 @@ function MasodlagosErtekek(props: {osztaly: Osztaly, tulajdonsagok: KarakterTula
                                <span>(HP)</span>
                            </OverlayTrigger>
                        </label>
-                    <p className='col'>{HP(osztaly, tulajdonsagok.t_egs)}</p>
+                    <p className='col'>{ertekek.HP}</p>
                </div>
                <div className='row m-2'>
                    <label className='col-sm-6 col-8 col-form-label' >Védekezési Osztály (VO)</label>
-                    <p className='col'>{10+Modifier(tulajdonsagok.t_ugy)}</p>
+                    <p className='col'>{ertekek.VO}</p>
                </div>
                <div className='row m-2'>
                    <label className='col-sm-6 col-8 col-form-label' >Közelharci támadás</label>
-                    <p className='col'>{SignedNumberToText(KozelharciTB(osztaly, tulajdonsagok))}</p>
+                    <p className='col'>{SignedNumberToText(ertekek.KozelHarciTB)}</p>
                </div>
                <div className='row m-2'>
                    <label className='col-sm-6 col-8 col-form-label' >Célzó támadás</label>
-                    <p className='col'>{SignedNumberToText(TamadasBonusz(osztaly) + Modifier(tulajdonsagok.t_ugy))}</p>
+                    <p className='col'>{SignedNumberToText(ertekek.CelzoTB)}</p>
                </div>
            </div>
            <div className='col-lg-6'>
                <div className='row m-2'>
                    <label className='col-sm-6 col-8 col-form-label' >Kitartás mentő</label>
-                    <p className='col'>{SignedNumberToText(KitartasMento(osztaly) + Modifier(tulajdonsagok.t_egs))}</p>
+                    <p className='col'>{SignedNumberToText(ertekek.KitartasMento)}</p>
                </div>
                <div className='row m-2'>
                    <label className='col-sm-6 col-8 col-form-label' >Reflex mentő</label>
-                    <p className='col'>{SignedNumberToText(ReflexMento(osztaly) + Modifier(tulajdonsagok.t_ugy))}</p>
+                    <p className='col'>{SignedNumberToText(ertekek.ReflexMento)}</p>
                </div>
                <div className='row m-2'>
                    <label className='col-sm-6 col-8 col-form-label' >Akaraterő mentő </label>
-                    <p className='col'>{SignedNumberToText(AkarateroMento(osztaly) + Modifier(tulajdonsagok.t_bol))}</p>
+                    <p className='col'>{SignedNumberToText(ertekek.AkarateroMento)}</p>
                </div>
            </div>
        </div>
@@ -0,0 +1,12 @@
+import {Faj} from "./faj";
+import {Osztaly} from "./osztaly";
+import {KarakterTulajdonsagok} from "./tulajdonsag";
+import {KarakterMasodlagosErtekek} from "./masodlagos_ertekek";
+
+export interface Karakter {
+    Name: string
+    Faj: Faj
+    Osztaly: Osztaly
+    Tulajdonsagok: KarakterTulajdonsagok,
+    MasodlagosErtekek: KarakterMasodlagosErtekek
+}
@@ -0,0 +1,124 @@
+import {Osztaly} from "./osztaly";
+import {KarakterTulajdonsagok, Modifier} from "./tulajdonsag";
+
+export interface KarakterMasodlagosErtekek {
+    HP: number
+    VO: number
+    CelzoTB: number
+    KozelHarciTB: number
+    KitartasMento: number
+    ReflexMento: number
+    AkarateroMento: number
+}
+
+export function CalculateMasodlagosErtekek(osztaly: Osztaly, tulajdonsagok: KarakterTulajdonsagok) : KarakterMasodlagosErtekek {
+    return {
+        HP: HP(osztaly, tulajdonsagok.t_egs),
+        VO: 10 + Modifier(tulajdonsagok.t_ugy),
+        KozelHarciTB: KozelharciTB(osztaly, tulajdonsagok),
+        CelzoTB: TamadasBonusz(osztaly) + Modifier(tulajdonsagok.t_ugy),
+
+        KitartasMento: KitartasMento(osztaly) + Modifier(tulajdonsagok.t_egs),
+        ReflexMento: ReflexMento(osztaly) + Modifier(tulajdonsagok.t_ugy),
+        AkarateroMento: AkarateroMento(osztaly) + Modifier(tulajdonsagok.t_bol),
+    }
+}
+
+function HP(osztaly: Osztaly, egeszseg: number) {
+    let base = 4;
+    switch (osztaly){
+        case Osztaly.Barbar:
+            base = 12
+            break;
+        case Osztaly.Amazon:
+        case Osztaly.Ijasz:
+        case Osztaly.Kaloz:
+        case Osztaly.Harcos:
+            base = 10;
+            break
+        case Osztaly.Pap:
+            base = 8;
+            break;
+        case Osztaly.Tolvaj:
+            base = 6;
+            break;
+        case Osztaly.Varazslo:
+        case Osztaly.Illuzionista:
+            base = 4;
+            break;
+    }
+    return base + Modifier(egeszseg)
+}
+
+function TamadasBonusz(osztaly: Osztaly) : number {
+    switch (osztaly){
+        case Osztaly.Barbar:
+        case Osztaly.Amazon:
+        case Osztaly.Ijasz:
+        case Osztaly.Kaloz:
+        case Osztaly.Harcos:
+            return 2;
+        case Osztaly.Pap:
+        case Osztaly.Tolvaj:
+            return 0;
+        case Osztaly.Varazslo:
+        case Osztaly.Illuzionista:
+            return 0;
+    }
+}
+
+function KozelharciTB(osztaly: Osztaly, tulajdonsagok: KarakterTulajdonsagok): number {
+    const base = TamadasBonusz(osztaly);
+    if (osztaly === Osztaly.Kaloz && tulajdonsagok.t_ugy > tulajdonsagok.t_ero) {
+        return base + Modifier(tulajdonsagok.t_ugy)
+    }
+    return base + Modifier(tulajdonsagok.t_ero)
+}
+
+function KitartasMento(osztaly: Osztaly) : number {
+    switch (osztaly){
+        case Osztaly.Barbar:
+        case Osztaly.Amazon:
+        case Osztaly.Ijasz:
+        case Osztaly.Kaloz:
+        case Osztaly.Harcos:
+        case Osztaly.Pap:
+            return 2;
+        case Osztaly.Tolvaj:
+        case Osztaly.Varazslo:
+        case Osztaly.Illuzionista:
+            return 0;
+    }
+}
+
+function ReflexMento(osztaly: Osztaly) : number {
+    switch (osztaly){
+        case Osztaly.Tolvaj:
+            return 2;
+        case Osztaly.Barbar:
+        case Osztaly.Amazon:
+        case Osztaly.Ijasz:
+        case Osztaly.Kaloz:
+        case Osztaly.Harcos:
+        case Osztaly.Pap:
+        case Osztaly.Varazslo:
+        case Osztaly.Illuzionista:
+            return 0;
+    }
+}
+
+function AkarateroMento(osztaly: Osztaly) : number {
+    switch (osztaly){
+        case Osztaly.Pap:
+        case Osztaly.Varazslo:
+        case Osztaly.Illuzionista:
+            return 2;
+        case Osztaly.Tolvaj:
+        case Osztaly.Barbar:
+        case Osztaly.Amazon:
+        case Osztaly.Ijasz:
+        case Osztaly.Kaloz:
+        case Osztaly.Harcos:
+            return 0;
+    }
+}
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import './CreateCharacter.css'
-import {Faj} from "../domain-models/faj";
-import {Osztaly} from "../domain-models/osztaly"
+import {Faj, FajLabel} from "../domain-models/faj";
+import {Osztaly, OsztalyLabel} from "../domain-models/osztaly"
 import FajSelector from "../components/FajSelector";
 import Tulajdonsagok from "../components/Tulajdonsagok";
 import OsztalySelector from "../components/OsztalySelector";
@@ -9,6 +9,10 @@ import KarakterKepzettsegek from "../components/KarakterKepzettsegek";
 import {KarakterTulajdonsagok, Modifier} from "../domain-models/tulajdonsag";
 import MasodlagosErtekek from "../components/MasodlagosErtekek";
 import {AvailableKezpettsegList, KepzettsegId, TolvajKepzettsegList} from "../domain-models/kepzettsegek";
+import {PDFDocument, rgb, StandardFonts} from 'pdf-lib'
+import download from 'downloadjs'
+import {CalculateMasodlagosErtekek} from "../domain-models/masodlagos_ertekek";
+import {Karakter} from "../domain-models/karakter";

 const tulajdonsagDefaults: KarakterTulajdonsagok = {
    t_ero: 10,
@@ -33,22 +37,65 @@ function getNumberOfKepzettsegek(t_int: number, faj: Faj, max: number) {
    return numberOfKepzettseg;
 }

+async function createPDF(karakter: Karakter) {
+
+    const existingPdfBytes = await fetch('/km_karakterlap_hysteria_1.2.pdf').then(res => res.arrayBuffer())
+    const pdfDoc = await PDFDocument.load(existingPdfBytes)
+
+    const timesRomanFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
+
+    const page = pdfDoc.getPage(0)
+    const fontSize = 12
+    page.drawText(karakter.Name, {
+        x: 60,
+        y: 710,
+        size: fontSize,
+        font: timesRomanFont,
+        color: rgb(0, 0, 0),
+    })
+    page.drawText(OsztalyLabel(karakter.Osztaly), {
+        x: 60,
+        y: 672,
+        size: fontSize,
+        font: timesRomanFont,
+        color: rgb(0, 0, 0),
+    })
+    page.drawText('1', {
+        x: 264,
+        y: 682,
+        size: fontSize * 3,
+        font: timesRomanFont,
+        color: rgb(0, 0, 0),
+    })
+    page.drawText(FajLabel(karakter.Faj), {
+        x: 304,
+        y: 710,
+        size: fontSize,
+        font: timesRomanFont,
+        color: rgb(0, 0, 0),
+    })
+
+
+    const pdfBytes = await pdfDoc.save();
+    download(pdfBytes, "karakter.pdf", "application/pdf");
+}
+
 function CreateCharacterPage() {

-    let [name, changeName] = useState<string>("Névtelen kanadozó")
+    let [name, changeName] = useState<string>("Névtelen kalandozó")
    let [faj, changeFaj] = useState(Faj.Ember)
    let [tulajdonsagok, changeTulajdonsagok] = useState(tulajdonsagDefaults)
-    let [currentOsztaly, changeOsztaly] = useState<Osztaly>(Osztaly.Harcos)
+    let [osztaly, changeOsztaly] = useState<Osztaly>(Osztaly.Harcos)
    let [kepzettsegek, changeKepzettsegek] = useState<KepzettsegId[]>([])
    let [tolvajKepzettsegek, changeTolvajKepzettsegek] = useState<KepzettsegId[]>([])

-    const availableKepzettsegList = AvailableKezpettsegList(currentOsztaly)
+    const availableKepzettsegList = AvailableKezpettsegList(osztaly)

-    if (currentOsztaly !== Osztaly.Tolvaj && tolvajKepzettsegek.length > 0) {
+    if (osztaly !== Osztaly.Tolvaj && tolvajKepzettsegek.length > 0) {
        tolvajKepzettsegek = []
        changeTolvajKepzettsegek([])
    }
-    if (currentOsztaly === Osztaly.Tolvaj && tolvajKepzettsegek.length === 0) {
+    if (osztaly === Osztaly.Tolvaj && tolvajKepzettsegek.length === 0) {
        tolvajKepzettsegek = TolvajKepzettsegList.slice(0, 4).map(x => x.Id)
        changeTolvajKepzettsegek(tolvajKepzettsegek)
    }
@@ -59,7 +106,13 @@ function CreateCharacterPage() {
                <h1>Karakter létrehozása</h1>
            </div>
            <div className='p-3'>
-                <form onSubmit={() => console.log("Character created!")}>
+                <form onSubmit={ async (event) => { event.preventDefault(); await createPDF({
+                    Name: name,
+                    Faj: faj,
+                    MasodlagosErtekek: CalculateMasodlagosErtekek(osztaly, tulajdonsagok),
+                    Osztaly: osztaly,
+                    Tulajdonsagok: tulajdonsagok
+                })} }>
                    <div className='row'>
                        <h5 className='col align-self-center'>Származás</h5>
                    </div>
@@ -86,7 +139,7 @@ function CreateCharacterPage() {
                    </div>
                    <OsztalySelector
                        currentFaj={faj}
-                        currentOsztaly={currentOsztaly}
+                        currentOsztaly={osztaly}
                        changeOsztaly={changeOsztaly}
                    />
                    <KarakterKepzettsegek
@@ -99,7 +152,7 @@ function CreateCharacterPage() {
                    />

                    <hr />
-                    <MasodlagosErtekek osztaly={currentOsztaly} tulajdonsagok={tulajdonsagok} />
+                    <MasodlagosErtekek ertekek={CalculateMasodlagosErtekek(osztaly, tulajdonsagok)} />

                    <div className='d-grid gap-2 m-5'>
                        <button className='btn btn-danger btn-lg' type='submit'>Létrehozás</button>