You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.6 KiB
65 lines
2.6 KiB
import React, {useMemo, useReducer} from 'react';
|
|
import './App.css';
|
|
import {DispatchContext} from './ui/context/DispatchContext';
|
|
import {appStateReducer, AppStateReducer} from "./reducers/AppStateReducer";
|
|
import {USER_ACTIVE_COLOR} from "./actions/UserAction";
|
|
import {ServerConnectionState} from "./state/NetworkState";
|
|
import HexMapRenderer from "./ui/HexMapRenderer";
|
|
import HexColorPicker from "./ui/HexColorPicker";
|
|
import {sizeFromLinesAndCells} from "./state/Coordinates";
|
|
import {ConsoleConnector} from "./ui/debug/ConsoleConnection";
|
|
|
|
function App() {
|
|
const [state, dispatch] = useReducer<AppStateReducer, null>(
|
|
appStateReducer,
|
|
null,
|
|
() => ({
|
|
localState: null,
|
|
network: {
|
|
serverState: null,
|
|
connectionState: ServerConnectionState.OFFLINE,
|
|
specialMessage: null,
|
|
nextID: 0,
|
|
sentActions: [],
|
|
pendingActions: [],
|
|
goodbyeCode: 1000,
|
|
goodbyeReason: "",
|
|
autoReconnectAt: null,
|
|
reconnectAttempts: null
|
|
}
|
|
}));
|
|
|
|
const {user, map} = state.localState || {user: null, map: null}
|
|
const offsets = useMemo(() => (!!map ? {
|
|
top: 10,
|
|
left: 10,
|
|
size: 50,
|
|
displayMode: map.displayMode
|
|
} : null), [map])
|
|
const mapElement = !!offsets && !!map ? <HexMapRenderer map={map} offsets={offsets} /> : null;
|
|
const {width, height} = useMemo(() => !!offsets && !!map ? sizeFromLinesAndCells({
|
|
bottomMargin: 10, cells: map.cellsPerLine, lines: map.lines, offsets: offsets, rightMargin: 10
|
|
}) : {width: 1, height: 1}, [map, offsets]);
|
|
const colorPickerElement = !!user ? <HexColorPicker color={user?.activeColor} onChangeComplete={(colorResult) => dispatch({
|
|
type: USER_ACTIVE_COLOR,
|
|
color: colorResult.hex
|
|
})} /> : null
|
|
|
|
return (
|
|
<div className="App">
|
|
<DispatchContext.Provider value={dispatch}>
|
|
<div className={"scrollbox"}>
|
|
<div className={"centerbox"}>
|
|
<svg className={"map"} width={width} height={height} viewBox={`0 0 ${width} ${height}`} onContextMenu={(e) => e.preventDefault()}>
|
|
{mapElement}
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{colorPickerElement}
|
|
<ConsoleConnector specialMessage={state.network.specialMessage} pendingMessages={state.network.pendingActions} nextID={state.network.nextID} />
|
|
</DispatchContext.Provider>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|