update character

2026-07-18 03:13:46 +00:00 · 2023-12-25 16:59:25 +01:00
parent 9894ba735e
commit 73660076e5
10 changed files with 204 additions and 103 deletions
@@ -1,12 +1,12 @@
-import React, {useEffect, useState} from 'react';
+import * as React from 'react';
 import './App.css';
 import {Faro} from "@grafana/faro-web-sdk";
 import {createBrowserRouter, RouterProvider} from "react-router-dom";
 import CreateCharacter from "./first-edition/pages/CreateCharacter";
 import CharacterList from "./first-edition/pages/CharacterList";
 import ErrorBoundary from "./shared/ErrorBoundary";
-
-type LoadingState = "not-started" | "loading" | "finished"
+import Header from "./shared/Header";
+import Footer from "./shared/Footer";

 function App(props: {faro?: Faro}) {
    const router = createBrowserRouter([
@@ -23,95 +23,20 @@ function App(props: {faro?: Faro}) {
        },
        {
            path: "/:id",
-            element: <CreateCharacter faro={props.faro} />,
+            element: <CreateCharacter faro={props.faro}/>,
            loader: args => fetch(`api/Character/${args.params.id}`),
            ErrorBoundary: ErrorBoundary,
        }
    ]);
-    
-    let [loading, setLoading] = useState("not-started" as LoadingState);
-    let [userName, setUserName] = useState(null as string | null);

-    useEffect(() => {
-        let ignore = false;
-        if (loading === "not-started") {
-            setLoading("loading");
-            fetch('api/User/me')
-                .then(response => {
-                    if (response.ok) {
-                        response.text()
-                            .then((data) => data?.length > 0 ? setUserName(data) : setUserName(null))
-                            .catch((err) => {
-                                console.log(err)
-                                !ignore && setUserName(null);
-                            })
-                    } else {
-                        console.log(response)
-                        !ignore && setUserName(null);
-                    }
-                })
-                .catch((err) => {
-                    console.log(err);
-                    !ignore && setUserName(null)
-                })
-                .finally(() => {
-                    setLoading("finished"); 
-                })
-        }
-        return () => {
-            ignore = true
-        }
-    }, [loading, setLoading, userName, setUserName])
    
    return (
        <>
-            <header>
-                <nav
-                    className="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
-                    <div className="container ps-4 pe-4">
-                        <a className="navbar-brand" href={userName == null ? "/" : "/karaktereim"}>Kemkas</a>
-                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
-                                data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
-                                aria-expanded="false" aria-label="Toggle navigation">
-                            <span className="navbar-toggler-icon"></span>
-                        </button>
-                        {loading !== "finished" ? "Loading..." :
-                            userName == null
-                                ? <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
-                                    <ul className="navbar-nav">
-                                        <li className="nav-item">
-                                            <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
-                                        </li>
-                                        <li className="nav-item">
-                                            <a className="nav-link text-dark" href="/Identity/Account/Login">Login</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                                : <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
-                                    <ul className="navbar-nav">
-                                        <li className="nav-item">
-                                            <a className="nav-link text-dark" href="/Identity/Account/Manage">Hello {userName}!</a>
-                                        </li>
-                                        <li className="nav-item">
-                                            <a className="nav-link text-dark" href="/Identity/Account/Logout">Logout</a>
-                                        </li>
-                                    </ul>
-                                </div>
-                        }
-                    </div>
-                </nav>
-            </header>
+            <Header/>
            <div className='container'>
                <RouterProvider router={router}/>
            </div>
-            <footer>
-                <div className="text-center p-4" style={{backgroundColor: "rgba(0, 0, 0, 0.05)"}}>
-                    A Kard és Mágiát Lux Gábor alkotta. A szerzői jogok őt illetik. Ez az oldal egy "rajongói
-                    hozzájárulás", célja a Kard és Mágia népszerűsítése. Ha többet akarsz tudni a Kard és Mágiáról
-                    látogass el a <a href="https://fomalhaut.lfg.hu/">hivatalos honlapjára</a>. A Kard és Mágia az Open
-                    Gaming Licence 1.0a alatt lett kiadva, melynek szövege <a href="ogl.html">itt található</a>
-                </div>
-            </footer>
+            <Footer />
        </>
    );
 }
@@ -12,3 +12,16 @@ export async function StoreNewCharacter(karakter: KarakterInputs) {
        throw Error(response.statusText)
    }
 }
+
+export async function UpdateCharacter(id: string, karakter: KarakterInputs) {
+    let response = await axios.post(`${window.location.origin}/api/Character/${id}`, karakter, {
+        withCredentials: true,
+    })
+    if (response.status < 300){
+        return response.data as string
+    }
+    else {
+        throw Error(response.statusText)
+    }
+}
+
@@ -34,7 +34,7 @@ function LevelUp(props: {
    const kritIndex = kalozKritIndex(szint)
    const krit = karakter.kalozKritikus[kritIndex]

-    return <div key={`level-up-${szint}`}>
+    return <div>
        <div className='row mt-3'>
            <h5 className='col align-self-center'>{szint}. Szint</h5>
        </div>
@@ -87,8 +87,10 @@ export function LevelUps(props: {karakter: KarakterInputs, changeKarakter: (inpu
        changeKarakter({...karakter, kalozKritikus: arraySetN(karakter.kalozKritikus, kalozKritIndex(szint), krit)})
    }

+    const levels = karakter.hpRolls.map((_, i) => i+2); 
+    
    return <>
-        {karakter.hpRolls.map((_, i) => i+2).map(szint => <>
+        {levels.map(szint =>
            <LevelUp
                key={`level-up-${szint}`}
                szint={szint}
@@ -98,7 +100,6 @@ export function LevelUps(props: {karakter: KarakterInputs, changeKarakter: (inpu
                changeHarcosSpec={changeHarcosSpecializacioAtSzint(szint)}
                changeKalozKritikus={changeKalozKritikusAtSzint(szint)}
            />
-            </>
        )}
    </>
 }
@@ -22,14 +22,14 @@ import {CalculateMasodlagosErtekek} from "../domain-models/masodlagos_ertekek";
 import {KarakterInputToPdfView} from "../pdf/karakter_pdf_view";
 import JellemSelector from "../components/JellemSelector";
 import {CanLevelUp, LevelDown, LevelUp} from "../domain-models/level";
-import {Card, OverlayTrigger} from "react-bootstrap";
+import {Card, OverlayTrigger, Toast, ToastContainer} from "react-bootstrap";
 import LevelUps from "../components/LevelUps";
 import HarcosFegyverSpecializacio from "../components/HarcosFegyverSpecializacio";
 import Felszereles from '../components/Felszereles';
 import { KarakterFelszereles } from '../domain-models/felszereles';
 import {Faro} from "@grafana/faro-web-sdk";
-import {StoreNewCharacter} from "../api/character.api";
-import {useLoaderData} from "react-router-dom";
+import {StoreNewCharacter, UpdateCharacter} from "../api/character.api";
+import {useLoaderData, useParams} from "react-router-dom";
 import saveOverlayTooltip from "../components/SaveOverlayTooltip";

 function CreateCharacterPage(props: {
@@ -38,6 +38,7 @@ function CreateCharacterPage(props: {
    const {faro} = props

    const initialKarakterInputs = useLoaderData() as KarakterInputs;
+    const { id } = useParams();

    let [karakter, changeKarakter] = useState(initialKarakterInputs ?? KarakterDefaults)

@@ -55,12 +56,21 @@ function CreateCharacterPage(props: {
    const levelDown = () => LevelDown(karakter, changeKarakter)

    const canLevelUp = CanLevelUp(karakter)
+    
+    let [showSaved, setShowSaved] = useState(false);
+    
+     const hideSaved = () => setShowSaved(false);

    return (
        <div>
            <div className='container-fluid p-5 bg-black text-white text-center'>
-                <h1>Karakter {initialKarakterInputs ? "szerkesztése*" : "létrehozása"}</h1>
+                <h1>Karakter {initialKarakterInputs ? "szerkesztése" : "létrehozása"}</h1>
            </div>
+            <ToastContainer className="position-fixed" position="top-end">
+                <Toast show={showSaved} onClose={hideSaved} bg="success">
+                    <Toast.Header><strong>Karakter mentve!</strong></Toast.Header>
+                </Toast>
+            </ToastContainer>
            <div className='p-3'>
                <form onSubmit={async (event) => event.preventDefault()}>
                    <div className='row'>
@@ -182,10 +192,18 @@ function CreateCharacterPage(props: {
                                        szint: karakter.szint.toString(),
                                        faj: karakter.faj.toString(),
                                    })
-                                    let newId = await StoreNewCharacter(karakter)
-                                    const win = window.open(`/${newId}`, '_blank');
-                                    if (win != null) {
-                                        win.focus();
+                                    if (id == null) {
+                                        let newId = await StoreNewCharacter(karakter);
+                                        const win = window.open(`/${newId}`, '_blank');
+                                        if (win != null) {
+                                            win.focus();
+                                        }
+                                    } else {
+                                        await UpdateCharacter(id, karakter);
+                                        setShowSaved(true);
+                                        setTimeout(() => {
+                                            hideSaved();
+                                        }, 5000)
                                    }
                                }}>Mentés
                                </button>
@@ -31,8 +31,3 @@ root.render(
    <App faro={faro} />
  </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+
+function Footer() {
+    return <footer>
+        <div className="text-center p-4" style={{backgroundColor: "rgba(0, 0, 0, 0.05)"}}>
+            A Kard és Mágiát Lux Gábor alkotta. A szerzői jogok őt illetik. Ez az oldal egy "rajongói
+            hozzájárulás", célja a Kard és Mágia népszerűsítése. Ha többet akarsz tudni a Kard és Mágiáról
+            látogass el a <a href="https://fomalhaut.lfg.hu/">hivatalos honlapjára</a>. A Kard és Mágia az Open
+            Gaming Licence 1.0a alatt lett kiadva, melynek szövege <a href="ogl.html">itt található</a>
+        </div>
+    </footer>
+}
+
+export default Footer;
@@ -0,0 +1,66 @@
+import * as React from "react";
+import axios from "axios";
+import {useState} from "react";
+
+type LoadingState = "not-started" | "loading" | "finished"
+
+function logout() {
+    return axios.post("/Identity/Account/Logout?returnUrl=%2F")
+}
+
+function Header(props: {}) {
+    
+    let [loading, setLoading] = useState("not-started" as LoadingState);
+    let [userName, setUserName] = useState(null as string | null);
+
+    if (loading === "not-started") {
+        setLoading("loading");
+        fetch('api/User/me')
+            .then(response => {
+                response.ok
+                    ? response.text()
+                        .then(userName => userName?.length > 0 ? setUserName(userName) : setUserName(null))
+                    : console.log(response)
+            })
+            .finally(() => setLoading("finished"))
+    }
+
+    return <header>
+        <nav
+            className="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+            <div className="container ps-4 pe-4">
+                <a className="navbar-brand" href={userName == null ? "/" : "/karaktereim"}>Kemkas</a>
+                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                        data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span className="navbar-toggler-icon"></span>
+                </button>
+                {loading !== "finished" ? "Loading..." :
+                    userName == null
+                        ? <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
+                            <ul className="navbar-nav">
+                                <li className="nav-item">
+                                    <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
+                                </li>
+                                <li className="nav-item">
+                                    <a className="nav-link text-dark" href="/Identity/Account/Login">Login</a>
+                                </li>
+                            </ul>
+                        </div>
+                        : <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
+                            <ul className="navbar-nav">
+                                <li className="nav-item">
+                                    <a className="nav-link text-dark" href="/Identity/Account/Manage">Hello {userName}!</a>
+                                </li>
+                                <li className="nav-item">
+                                    <a className="nav-link text-dark" href="/Identity/Account/Logout">Logout</a>
+                                </li>
+                            </ul>
+                        </div>
+                }
+            </div>
+        </nav>
+    </header>
+}
+
+export default Header;