hexmap/client/src/App.tsx

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";

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}
        </DispatchContext.Provider>
    </div>
  );
}

export default App;