For now, the URL is hardcoded. We'll fix this later.main
Mari
3 years ago
parent
54b9112546
commit
34e64c7130
@ -0,0 +1,27 @@ |
||||
export function normalizeColor(hex: string): string { |
||||
hex = hex.toUpperCase() |
||||
if (hex.length === 4) { |
||||
return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}FF` |
||||
} |
||||
if (hex.length === 5) { |
||||
return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}${hex[4]}${hex[4]}` |
||||
} |
||||
if (hex.length === 7) { |
||||
return `${hex}FF` |
||||
} |
||||
return hex |
||||
} |
||||
|
||||
export function packHexColor(color: string): number { |
||||
return parseInt(normalizeColor(color).substring(1), 16) |
||||
} |
||||
|
||||
export function unpackHexColor(color: number): string { |
||||
if (color > 2**32 || Math.floor(color) !== color) { |
||||
throw Error("Packed color was too large or not an integer") |
||||
} |
||||
// this is 1 << 32, so it will produce a single hex digit above the others, even if the
|
||||
// R/G/B is 0 - which we can then trim off and replace with our #
|
||||
// a neat insight from https://stackoverflow.com/a/13397771
|
||||
return "#" + ((color + 0x100000000).toString(16).substring(1)) |
||||
} |
||||
@ -1,6 +1,38 @@ |
||||
import {ClientCommand} from "../actions/ClientAction"; |
||||
import {ClientCommandPB} from "../proto/client"; |
||||
import {CLIENT_ACT, CLIENT_HELLO, CLIENT_REFRESH, ClientCommand, SentAction} from "../actions/ClientAction"; |
||||
import {ClientActPB_IDed, ClientCommandPB} from "../proto/client"; |
||||
import {sendableActionToPB} from "./SyncableActionToPb"; |
||||
|
||||
export function clientToPb(message: ClientCommand): ClientCommandPB { |
||||
export function sentActionToPb(message: SentAction): ClientActPB_IDed { |
||||
return { |
||||
id: message.id, |
||||
action: sendableActionToPB(message.action), |
||||
} |
||||
} |
||||
|
||||
export function clientToPb(message: ClientCommand): ClientCommandPB { |
||||
switch (message.type) { |
||||
case CLIENT_HELLO: |
||||
return { |
||||
hello: { |
||||
version: message.version, |
||||
}, |
||||
refresh: undefined, |
||||
act: undefined, |
||||
} |
||||
case CLIENT_REFRESH: |
||||
return { |
||||
refresh: { |
||||
}, |
||||
hello: undefined, |
||||
act: undefined, |
||||
} |
||||
case CLIENT_ACT: |
||||
return { |
||||
act: { |
||||
actions: message.actions.map(sentActionToPb) |
||||
}, |
||||
hello: undefined, |
||||
refresh: undefined, |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,91 @@ |
||||
import {SyncableStatePB} from "../proto/state"; |
||||
import {SyncedState} from "../state/SyncedState"; |
||||
import {HexagonOrientation, HexCell, HexLayout, HexMap, LineParity} from "../state/HexMap"; |
||||
import {UserStatePB} from "../proto/user"; |
||||
import { |
||||
HexCellPB, |
||||
HexMapPB, |
||||
HexMapPB_Layout, |
||||
HexMapPB_Layout_LineParity, |
||||
HexMapPB_Layout_Orientation |
||||
} from "../proto/map"; |
||||
import {UserState} from "../state/UserState"; |
||||
import {unpackHexColor} from "../util/ColorUtils"; |
||||
import {encode} from "base64-arraybuffer"; |
||||
import {StorageCoordinatesPB} from "../proto/coords"; |
||||
import {StorageCoordinates} from "../state/Coordinates"; |
||||
|
||||
export function storageCoordsFromPb(coords: StorageCoordinatesPB): StorageCoordinates { |
||||
return { |
||||
line: coords.line, |
||||
cell: coords.cell, |
||||
}; |
||||
} |
||||
|
||||
function orientationFromPb(orientation: HexMapPB_Layout_Orientation): HexagonOrientation { |
||||
switch (orientation) { |
||||
case HexMapPB_Layout_Orientation.FLAT_TOP: |
||||
return HexagonOrientation.FLAT_TOP |
||||
case HexMapPB_Layout_Orientation.POINTY_TOP: |
||||
return HexagonOrientation.POINTY_TOP |
||||
case HexMapPB_Layout_Orientation.UNKNOWN_ORIENTATION: |
||||
case HexMapPB_Layout_Orientation.UNRECOGNIZED: |
||||
throw Error("unknown orientation") |
||||
} |
||||
} |
||||
|
||||
function lineParityFromPb(parity: HexMapPB_Layout_LineParity): LineParity { |
||||
switch (parity) { |
||||
case HexMapPB_Layout_LineParity.EVEN: |
||||
return LineParity.EVEN |
||||
case HexMapPB_Layout_LineParity.ODD: |
||||
return LineParity.ODD |
||||
case HexMapPB_Layout_LineParity.UNKNOWN_LINE: |
||||
case HexMapPB_Layout_LineParity.UNRECOGNIZED: |
||||
throw Error("unknown line parity") |
||||
} |
||||
} |
||||
|
||||
function layoutFromPb(layout: HexMapPB_Layout): HexLayout { |
||||
return { |
||||
orientation: orientationFromPb(layout.orientation), |
||||
indentedLines: lineParityFromPb(layout.indentedLines), |
||||
} |
||||
} |
||||
|
||||
function cellFromPb(cell: HexCellPB): HexCell { |
||||
return { |
||||
color: unpackHexColor(cell.color) |
||||
} |
||||
} |
||||
|
||||
function mapFromPb(map: HexMapPB): HexMap { |
||||
if (!map.layout || !map.layer) { |
||||
throw Error("HexMapPB did not have layout and layer"); |
||||
} |
||||
return { |
||||
xid: encode(map.xid), |
||||
lines: 0, |
||||
cellsPerLine: 0, |
||||
layout: layoutFromPb(map.layout), |
||||
layer: map.layer.lines.map((line): HexCell[] => { |
||||
return line.cells.map(cellFromPb) |
||||
}), |
||||
}; |
||||
} |
||||
|
||||
function userFromPb(user: UserStatePB): UserState { |
||||
return { |
||||
activeColor: unpackHexColor(user.color) |
||||
} |
||||
} |
||||
|
||||
export function stateFromPb(state: SyncableStatePB): SyncedState { |
||||
if (!state.map || !state.user) { |
||||
throw Error("SyncableStatePB did not have map and user") |
||||
} |
||||
return { |
||||
map: mapFromPb(state.map), |
||||
user: userFromPb(state.user), |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
import {StorageCoordinates} from "../state/Coordinates"; |
||||
import {StorageCoordinatesPB} from "../proto/coords"; |
||||
|
||||
export function storageCoordsToPb(storageCoords: StorageCoordinates): StorageCoordinatesPB { |
||||
return { |
||||
line: storageCoords.line, |
||||
cell: storageCoords.cell, |
||||
} |
||||
} |
||||
@ -0,0 +1,50 @@ |
||||
import {ServerCommandPB} from "../proto/server"; |
||||
import { |
||||
SERVER_ACT, |
||||
SERVER_FAILED, |
||||
SERVER_HELLO, |
||||
SERVER_OK, |
||||
SERVER_REFRESH, |
||||
ServerCommand |
||||
} from "../actions/ServerAction"; |
||||
import {stateFromPb} from "./MapFromPb"; |
||||
import {syncableActionFromPb} from "./SyncableActionFromPb"; |
||||
|
||||
export function serverFromPb(pb: ServerCommandPB): ServerCommand { |
||||
if (pb.hello) { |
||||
if (!pb.hello.state) { |
||||
throw Error("No state for Server Hello") |
||||
} |
||||
return { |
||||
type: SERVER_HELLO, |
||||
version:pb.hello.version, |
||||
state: stateFromPb(pb.hello.state), |
||||
} |
||||
} else if (pb.refresh) { |
||||
if (!pb.refresh.state) { |
||||
throw Error("No state for Server Refresh") |
||||
} |
||||
return { |
||||
type: SERVER_REFRESH, |
||||
state: stateFromPb(pb.refresh.state), |
||||
} |
||||
} else if (pb.ok) { |
||||
return { |
||||
type: SERVER_OK, |
||||
ids: pb.ok.ids, |
||||
} |
||||
} else if (pb.failed) { |
||||
return { |
||||
type: SERVER_FAILED, |
||||
ids: pb.failed.ids, |
||||
error: pb.failed.error, |
||||
} |
||||
} else if (pb.act) { |
||||
return { |
||||
type: SERVER_ACT, |
||||
actions: pb.act.actions.map(syncableActionFromPb) |
||||
} |
||||
} else { |
||||
throw Error("No actual commands set on command") |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
import {ClientActionPB, ServerActionPB} from "../proto/action"; |
||||
import {SyncableAction} from "../actions/ServerAction"; |
||||
import {SendableAction} from "../actions/ClientAction"; |
||||
import {unpackHexColor} from "../util/ColorUtils"; |
||||
import {USER_ACTIVE_COLOR} from "../actions/UserAction"; |
||||
import {CELL_COLOR} from "../actions/CellAction"; |
||||
import {storageCoordsFromPb} from "./MapFromPb"; |
||||
|
||||
function sendableActionFromPB(action: ClientActionPB): SendableAction { |
||||
if (action.cellSetColor) { |
||||
if (!action.cellSetColor.at) { |
||||
throw Error("No location set in cellSetColor") |
||||
} |
||||
return { |
||||
type: CELL_COLOR, |
||||
at: storageCoordsFromPb(action.cellSetColor.at), |
||||
color: unpackHexColor(action.cellSetColor.color), |
||||
} |
||||
} else if (action.userSetActiveColor) { |
||||
return { |
||||
type: USER_ACTIVE_COLOR, |
||||
color: unpackHexColor(action.userSetActiveColor.color) |
||||
} |
||||
} else { |
||||
throw Error("No action set in ClientAction") |
||||
} |
||||
} |
||||
|
||||
export function syncableActionFromPb(action: ServerActionPB): SyncableAction { |
||||
if (action.client) { |
||||
return sendableActionFromPB(action.client) |
||||
} else { |
||||
throw Error("No action set in ServerAction") |
||||
} |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
import {ClientActionPB} from "../proto/action"; |
||||
import {SendableAction} from "../actions/ClientAction"; |
||||
import {packHexColor} from "../util/ColorUtils"; |
||||
import {storageCoordsToPb} from "./MapToPb"; |
||||
import {USER_ACTIVE_COLOR} from "../actions/UserAction"; |
||||
import {CELL_COLOR} from "../actions/CellAction"; |
||||
|
||||
export function sendableActionToPB(action: SendableAction): ClientActionPB { |
||||
switch (action.type) { |
||||
case CELL_COLOR: |
||||
return { |
||||
cellSetColor: { |
||||
at: storageCoordsToPb(action.at), |
||||
color: packHexColor(action.color), |
||||
}, |
||||
userSetActiveColor: undefined, |
||||
} |
||||
case USER_ACTIVE_COLOR: |
||||
return { |
||||
userSetActiveColor: { |
||||
color: packHexColor(action.color) |
||||
}, |
||||
cellSetColor: undefined, |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,71 @@ |
||||
import {ReactElement, useContext, useEffect, useRef, useState} from "react"; |
||||
import { |
||||
CLIENT_ACT, |
||||
CLIENT_REFRESH, |
||||
ClientActCommand, |
||||
ClientGoodbyeAction, |
||||
ClientHelloCommand, |
||||
ClientRefreshCommand, |
||||
isClientCommand, |
||||
isClientGoodbyeCommand, |
||||
SendableAction, |
||||
SentAction |
||||
} from "../actions/ClientAction"; |
||||
import {DispatchContext} from "../ui/context/DispatchContext"; |
||||
import {WebsocketTranslator} from "./WebsocketTranslator"; |
||||
import {ServerConnectionState} from "../state/NetworkState"; |
||||
import {SERVER_SOCKET_STARTUP, SocketState} from "../actions/ServerAction"; |
||||
|
||||
export function WebsocketReactAdapter({url, protocols = ["v1.hexmap.deliciousreya.net"], state, specialMessage, pendingMessages, nextID}: { |
||||
url: string, |
||||
protocols?: readonly string[], |
||||
state: ServerConnectionState, |
||||
specialMessage: ClientHelloCommand | ClientRefreshCommand | ClientGoodbyeAction | null, |
||||
pendingMessages: readonly SendableAction[], |
||||
nextID: number |
||||
}): ReactElement { |
||||
const dispatch = useContext(DispatchContext) |
||||
if (dispatch === null) { |
||||
throw Error("What the heck?! No dispatch?! I quit!") |
||||
} |
||||
const connector = useRef(new WebsocketTranslator({ |
||||
url, |
||||
protocols, |
||||
onStartup: dispatch, |
||||
onMessage: dispatch, |
||||
onError: dispatch, |
||||
onGoodbye: dispatch, |
||||
})) |
||||
useEffect(() => { |
||||
connector.current.connect(); |
||||
dispatch({ |
||||
type: SERVER_SOCKET_STARTUP, |
||||
state: SocketState.CONNECTING, |
||||
}); |
||||
}, [dispatch]) |
||||
const [lastSpecialMessage, setLastSpecialMessage] = useState<ClientHelloCommand | ClientRefreshCommand | ClientGoodbyeAction | null>(null) |
||||
useEffect(() => { |
||||
if (state === ServerConnectionState.CONNECTED && pendingMessages.length > 0) { |
||||
const sentMessages: SentAction[] = pendingMessages.map((action, index) => { |
||||
return {id: index + nextID, action} |
||||
}); |
||||
const sentMessage: ClientActCommand = { |
||||
type: CLIENT_ACT, |
||||
actions: sentMessages, |
||||
}; |
||||
connector.current.send(sentMessage) |
||||
dispatch(sentMessage) |
||||
} |
||||
}, [nextID, dispatch, pendingMessages, state]) |
||||
useEffect(() => { |
||||
if (state === ServerConnectionState.CONNECTED && specialMessage !== null && specialMessage !== lastSpecialMessage) { |
||||
if (isClientCommand(specialMessage)) { |
||||
connector.current.send(specialMessage); |
||||
} else if (isClientGoodbyeCommand(specialMessage)) { |
||||
connector.current.close(specialMessage.code, specialMessage.reason) |
||||
} |
||||
setLastSpecialMessage(specialMessage); |
||||
} |
||||
}, [specialMessage, lastSpecialMessage, setLastSpecialMessage, state]) |
||||
return <div className="connectionState" onClick={() => dispatch ? dispatch({type: CLIENT_REFRESH}) : null}>{state}</div> |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
package state |
||||
|
||||
import "errors" |
||||
|
||||
var ErrOneofNotSet = errors.New("no value was given for a oneof") |
||||
Loading…
Reference in new issue