Untitled

import DofusMapLine from "./Line.jsx";
import React, { useEffect, useState } from 'react';
import PNJEntity from "./PNJEntity.jsx";
import DialogUI from "./Dialog.jsx";
import PlayerEntity from "./PlayerEntity.jsx";
import OptionPanelUI from "./OptionPanelUI.jsx";
import Decoration from "./Decoration.jsx";
import BottomChat from "./Chat.jsx";
import SpellsGrid from "./SpellsGrid.jsx";
import RPPlayerStats from "./RoleplayPlayerStats.jsx";

function MapNormal(props) {
	//state (état, données)
	const map = props['data-map'];
	const updateMap = props['update-map'];
    const decors = props['data-decors'];
    const PNJs = props['data-pnj'];

    const lastFightID = props['data-last-fight-id'];

    const cellNBs = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 27, 28, 28, 28];
    const lineMargin = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
    const rowNb = cellNBs.length*2-1;
    const half = Math.round(rowNb/2)-1;

    const placeCharacter = props['place-character'];
    const playerData = props['data-player'];

    const startPremadeFight = props['start-fight'];

    const [dialogManager, setDialogManager] = useState({
        updateNPC: () => null,
        display: () => null
    });
    const [panelManager, setPanelManager] = useState({
        updatePanel: () => null,
        showFightResult: () => null
    });
    const [loggerManager, setLoggerManager] = useState({
        logMessage: () => null,
        logWithTitle: () => null,
        logQuestUpdate: () => null
    });
    const [playerLocManager, setPlayerLocManager] = useState({
        requestMove: () => null
    });

    let currentMap = map;

    useEffect(() => {
        if(!lastFightID) return;
        panelManager.showFightResult(lastFightID);
    }, [lastFightID, panelManager]);

	//comportements

    const displayDialog = async function(NPC) {/***/}
    
	//affichage (render)
    const mapLine = [];
    let isCaseEven = false;
    let lastMargin = -1;
    
    for (const yCoord in map) {
        const lineDistFromHalf = Math.abs(yCoord - half);
        const lineCellNb = cellNBs[half - lineDistFromHalf];
        if (lastMargin === lineMargin[yCoord]) {
            isCaseEven = true;
            lastMargin = -1;
        }else {
            isCaseEven = false;
            lastMargin = lineMargin[yCoord];
        }

        mapLine.push(<MapLine
        	data-map-line = {currentMap[yCoord]}
            data-line-margin = {lineMargin[yCoord]}
            data-start-even = {isCaseEven}
            data-map-line-coord = {yCoord}
            data-line-cell-nb = {lineCellNb}
            on-click = {(x, y) => {
                playerLocManager.requestMove({x: x, y: y});
                // placeCharacter(x, y);
            }}
        ></MapLine>);
    }

    const decorsUpdateMap = function(mapID, pos) {
        updateMap(mapID, pos);
    }
    
    const decorsElem = [];
    for (const ress of decors) {
        decorsElem.push(
            <Decoration
                data-decoration = {ress}
                on-click = {(ress.clickable && ress.map_target ? () => decorsUpdateMap(ress.map_target.id, ress.map_target.pos) : null)}
            />
        );
    }

        
    const PNJElems = [];
    for (const ress of PNJs) {
        PNJElems.push(
            <PNJEntity
                key = {ress.id}
                data-x = {ress.pos.x}
                data-y = {ress.pos.y}
                data-id = {ress.id}
                data-npc = {ress}
                on-click = {() => displayDialog(ress)}
            />
        );
    }

	return (
        <React.Fragment>
            <div className="map-container" id="map-container">
                <OptionPanelUI
                    init = {(panelFunc, showFightRes) => {
                        setPanelManager({updatePanel: panelFunc, showFightResult: showFightRes});
                    }}
                    player-uid = {playerData.UID}
                />
                <DialogUI
                    update-map = {updateMap}
                    data-player-uid = {playerData.UID}
                    init = {(updateNPC, displayFunc) => setDialogManager({display: displayFunc, updateNPC: updateNPC})}
                    start-fight= {startPremadeFight}
                    log-quest = {loggerManager.logQuestUpdate}
                    log-message = {loggerManager.logMessage}
                ></DialogUI>
                <div className="map">
                    <div className="entities">
                        {decorsElem}
                        {PNJElems}
                        <PlayerEntity
                            init = {(requestMove) => setPlayerLocManager({requestMove: requestMove})}
                            data-map = {map}
                            data-player = {playerData}
                        />
                    </div>
                    {mapLine}
                </div>
            </div>
            <div className="bottom-panel">/***/</div>
        </React.Fragment>
 	);
}

export default MapNormal;