Untitled
unknown
jsx
a year ago
5.2 kB
4
Indexable
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;
Editor is loading...