Commit 39268956 authored by Chunchi Che's avatar Chunchi Che

Merge branch 'feat/websocket/middleware' into 'main'

Feat/websocket/middleware

See merge request !4
parents 55a8cd22 05509159
Pipeline #17248 passed with stage
in 50 seconds
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import App from "./ui/App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { store } from "./store";
......
import { ygopro } from "../api/idl/ocgcore";
import { setJoined } from "../reducers/joinSlice";
import { postChat } from "../reducers/chatSlice";
import { store } from "../store";
import {
player0Enter,
player1Enter,
player0Update,
player1Update,
player0Leave,
player1Leave,
hostChange,
observerIncrement,
observerChange,
updateIsHost,
} from "../reducers/playerSlice";
export enum socketCmd {
CONNECT,
DISCONNECT,
SEND,
}
export interface socketAction {
cmd: socketCmd;
ip?: string;
player?: string;
version?: number;
passWd?: string;
payload?: ygopro.YgoCtosMsg;
}
let ws: WebSocket | null = null;
const READY_STATE = "ready";
const NO_READY_STATE = "not ready";
export default function (action: socketAction) {
switch (action.cmd) {
case socketCmd.CONNECT: {
const ip = action.ip;
const player = action.player;
const version = action.version;
const passWd = action.passWd;
if (ip && player && version && passWd) {
ws = new WebSocket("ws://" + ip);
ws.onopen = () => {
console.log("WebSocket open.");
if (ws && ws.readyState == 1) {
ws.binaryType = "arraybuffer";
sendPlayerInfo(ws, player);
sendJoinGame(ws, version, passWd);
}
};
ws.onclose = () => {
console.log("WebSocket closed.");
ws = null;
};
ws.onmessage = (e) => {
const pb = ygopro.YgoStocMsg.deserializeBinary(e.data);
const dispatch = store.dispatch;
switch (pb.msg) {
case "stoc_join_game": {
const msg = pb.stoc_join_game;
// todo
dispatch(setJoined());
break;
}
case "stoc_chat": {
const chat = pb.stoc_chat;
dispatch(postChat(chat.msg));
break;
}
case "stoc_hs_player_change": {
const change = pb.stoc_hs_player_change;
if (change.pos > 1) {
console.log("Currently only supported 2v2 mode.");
} else {
switch (change.state) {
case ygopro.StocHsPlayerChange.State.UNKNOWN: {
console.log("Unknown HsPlayerChange State");
break;
}
case ygopro.StocHsPlayerChange.State.MOVE: {
console.log(
"Player " + change.pos + " moved to " + change.moved_pos
);
let src = change.pos;
let dst = change.moved_pos;
// todo
// if (src === 0 && dst === 1) {
// setPlayer1(player0);
// setPlayer0({});
// } else if (src === 1 && dst === 0) {
// setPlayer0(player1);
// setPlayer1({});
// }
break;
}
case ygopro.StocHsPlayerChange.State.READY: {
change.pos == 0
? dispatch(player0Update(READY_STATE))
: dispatch(player1Update(READY_STATE));
break;
}
case ygopro.StocHsPlayerChange.State.NO_READY: {
change.pos == 0
? dispatch(player0Update(NO_READY_STATE))
: dispatch(player1Update(NO_READY_STATE));
break;
}
case ygopro.StocHsPlayerChange.State.LEAVE: {
change.pos == 0
? dispatch(player0Leave)
: dispatch(player1Leave);
break;
}
case ygopro.StocHsPlayerChange.State.TO_OBSERVER: {
change.pos == 0
? dispatch(player0Leave)
: dispatch(player1Leave);
dispatch(observerIncrement());
break;
}
default: {
break;
}
}
}
break;
}
case "stoc_hs_watch_change": {
const count = pb.stoc_hs_watch_change.count;
dispatch(observerChange(count));
break;
}
case "stoc_hs_player_enter": {
const name = pb.stoc_hs_player_enter.name;
const pos = pb.stoc_hs_player_enter.pos;
if (pos > 1) {
console.log("Currently only supported 2v2 mode.");
} else {
pos == 0
? dispatch(player0Enter(name))
: dispatch(player1Enter(name));
}
break;
}
case "stoc_type_change": {
const selfType = pb.stoc_type_change.self_type;
const assertHost = pb.stoc_type_change.is_host;
dispatch(updateIsHost(assertHost));
if (assertHost) {
switch (selfType) {
case ygopro.StocTypeChange.SelfType.PLAYER1: {
dispatch(hostChange(0));
dispatch(player0Update(NO_READY_STATE));
break;
}
case ygopro.StocTypeChange.SelfType.PLAYER2: {
dispatch(hostChange(0));
dispatch(player1Update(NO_READY_STATE));
break;
}
default: {
break;
}
}
}
break;
}
default: {
break;
}
}
};
}
break;
}
case socketCmd.DISCONNECT: {
if (ws) {
ws.close();
}
break;
}
case socketCmd.SEND: {
const pb = action.payload;
if (ws && pb) {
ws.send(pb.serialize());
}
break;
}
default: {
console.log("Unhandled socket command: " + action.cmd);
break;
}
}
}
// todo: move to api/*
function sendPlayerInfo(ws: WebSocket, player: string) {
const playerInfo = new ygopro.YgoCtosMsg({
ctos_player_info: new ygopro.CtosPlayerInfo({
name: player,
}),
});
ws.send(playerInfo.serialize());
}
function sendJoinGame(ws: WebSocket, version: number, passWd: string) {
const joinGame = new ygopro.YgoCtosMsg({
ctos_join_game: new ygopro.CtosJoinGame({
version, // todo: use config
gameid: 0,
passwd: passWd,
}),
});
ws.send(joinGame.serialize());
}
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../store";
export type Player = {
name?: string;
state?: string;
isHost?: boolean;
};
export interface playerState {
player0: Player;
player1: Player;
observerCount: number;
isHost: boolean;
}
const initialState: playerState = {
player0: {},
player1: {},
observerCount: 0,
isHost: false,
};
const playerSlice = createSlice({
name: "player",
initialState,
reducers: {
player0Enter: (state, action: PayloadAction<string>) => {
state.player0.name = action.payload;
},
player1Enter: (state, action: PayloadAction<string>) => {
state.player1.name = action.payload;
},
player0Update: (state, action: PayloadAction<string>) => {
state.player0.state = action.payload;
},
player1Update: (state, action: PayloadAction<string>) => {
state.player1.state = action.payload;
},
player0Leave: (state) => {
state.player0 = {};
},
player1Leave: (state) => {
state.player1 = {};
},
hostChange: (state, action: PayloadAction<number>) => {
const i = action.payload;
if (i === 0) {
state.player0.isHost = true;
state.player1.isHost = false;
} else {
state.player1.isHost = true;
state.player0.isHost = false;
}
},
observerIncrement: (state) => {
state.observerCount += 1;
},
observerChange: (state, action: PayloadAction<number>) => {
state.observerCount = action.payload;
},
updateIsHost: (state, action: PayloadAction<boolean>) => {
state.isHost = action.payload;
},
},
});
export const {
player0Enter,
player1Enter,
player0Update,
player1Update,
player0Leave,
player1Leave,
hostChange,
observerIncrement,
observerChange,
updateIsHost,
} = playerSlice.actions;
export const selectPlayer0 = (state: RootState) => state.player.player0;
export const selectPlayer1 = (state: RootState) => state.player.player1;
export const selectIsHost = (state: RootState) => state.player.isHost;
export const selectObserverCount = (state: RootState) =>
state.player.observerCount;
export default playerSlice.reducer;
import { configureStore } from "@reduxjs/toolkit";
import joinedReducer from "./reducers/joinSlice";
import chatReducer from "./reducers/chatSlice";
import playerReducer from "./reducers/playerSlice";
export const store = configureStore({
reducer: {
join: joinedReducer,
chat: chatReducer,
player: playerReducer,
},
});
......
import React from "react";
import JoinRoom from "./ui/JoinRoom";
import WaitRoom from "./ui//WaitRoom";
import ThreeJs from "./ThreeJs";
import JoinRoom from "./JoinRoom";
import WaitRoom from "./WaitRoom";
import ThreeJs from "../ThreeJs";
import { Routes, Route } from "react-router-dom";
function App() {
......
import React, { useRef, useEffect, useState, useReducer } from "react";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { ygopro } from "../api/idl/ocgcore";
import { fetchDeck, IDeck } from "../api/Card";
import "../css/WaitRoom.css";
import { useAppDispatch, useAppSelector } from "../hook";
import { setJoined, selectJoined } from "../reducers/joinSlice";
import { postChat, selectChat } from "../reducers/chatSlice";
type Player = {
name?: string;
state?: string; // todo: use enum or boolean
isHost?: boolean;
};
import { useAppSelector } from "../hook";
import { selectJoined } from "../reducers/joinSlice";
import { selectChat } from "../reducers/chatSlice";
import {
selectIsHost,
selectPlayer0,
selectPlayer1,
selectObserverCount,
} from "../reducers/playerSlice";
import socketMiddleWare, { socketCmd } from "../middleware/socket";
const READY_STATE = "ready";
const NO_READY_STATE = "not ready";
export default function WaitRoom() {
const params = useParams<{
......@@ -24,234 +25,46 @@ export default function WaitRoom() {
}>();
const [choseDeck, setChoseDeck] = useState<boolean>(false);
const [observerCount, setObserverCount] = useState<number>(0);
const [player0, setPlayer0] = useState<Player>({});
const [player1, setPlayer1] = useState<Player>({});
const [isHost, setIsHost] = useState<boolean>(false);
const [_, forceUpdate] = useReducer((x) => x + 1, 0); // todo: use correct update design
const ws = useRef<WebSocket | null>(null);
const dispatch = useAppDispatch();
const { player, passWd, ip } = params;
useEffect(() => {
if (!ws.current) {
ws.current = new WebSocket("ws://" + ip);
if (
player != null &&
player.length != 0 &&
passWd != null &&
passWd.length != 0
) {
socketMiddleWare({
cmd: socketCmd.CONNECT,
ip,
player,
version: 4947,
passWd,
});
}
ws.current.onopen = () => {
console.log("Websocket open");
if (
player != null &&
player.length != 0 &&
passWd != null &&
passWd.length != 0 &&
ws.current
) {
const wsCurrent = ws.current;
wsCurrent.binaryType = "arraybuffer";
sendPlayerInfo(wsCurrent, player);
sendJoinGame(wsCurrent, 4947, passWd);
}
};
ws.current.onclose = () => {
console.log("Websocket closed");
};
ws.current.onmessage = (e) => {
const pb = ygopro.YgoStocMsg.deserializeBinary(e.data);
switch (pb.msg) {
case "stoc_join_game": {
const msg = pb.stoc_join_game;
// todo
dispatch(setJoined());
break;
}
case "stoc_chat": {
const chat = pb.stoc_chat;
dispatch(postChat(chat.msg));
break;
}
case "stoc_hs_player_change": {
const change = pb.stoc_hs_player_change;
if (change.pos > 1) {
console.log("Currently only supported 2v2 mode.");
} else {
switch (change.state) {
case ygopro.StocHsPlayerChange.State.UNKNOWN: {
console.log("Unknown HsPlayerChange State");
break;
}
case ygopro.StocHsPlayerChange.State.MOVE: {
console.log(
"Player " + change.pos + " moved to " + change.moved_pos
);
let src = change.pos;
let dst = change.moved_pos;
if (src === 0 && dst === 1) {
setPlayer1(player0);
setPlayer0({});
} else if (src === 1 && dst === 0) {
setPlayer0(player1);
setPlayer1({});
}
break;
}
case ygopro.StocHsPlayerChange.State.READY: {
const updateState = (player: Player) => {
player.state = READY_STATE;
return player;
};
change.pos == 0
? setPlayer0(updateState)
: setPlayer1(updateState);
break;
}
case ygopro.StocHsPlayerChange.State.NO_READY: {
const updateState = (player: Player) => {
const state = NO_READY_STATE;
player.state = state;
return player;
};
change.pos == 0
? setPlayer0(updateState)
: setPlayer1(updateState);
break;
}
case ygopro.StocHsPlayerChange.State.LEAVE: {
change.pos == 0 ? setPlayer0({}) : setPlayer1({});
break;
}
case ygopro.StocHsPlayerChange.State.TO_OBSERVER: {
change.pos == 0 ? setPlayer0({}) : setPlayer1({});
setObserverCount(observerCount + 1);
break;
}
default: {
break;
}
}
forceUpdate();
}
break;
}
case "stoc_hs_watch_change": {
const count = pb.stoc_hs_watch_change.count;
setObserverCount(count);
break;
}
case "stoc_hs_player_enter": {
const name = pb.stoc_hs_player_enter.name;
const pos = pb.stoc_hs_player_enter.pos;
if (pos > 1) {
console.log("Currently only supported 2v2 mode.");
} else {
const updatePlayer = (player: Player) => {
player.name = name;
return player;
};
pos == 0 ? setPlayer0(updatePlayer) : setPlayer1(updatePlayer);
forceUpdate();
}
break;
}
case "stoc_type_change": {
const selfType = pb.stoc_type_change.self_type;
const assertHost = pb.stoc_type_change.is_host;
setIsHost(assertHost);
if (assertHost) {
const updatePlayer = (player: Player) => {
player.isHost = assertHost;
player.state = NO_READY_STATE;
return player;
};
switch (selfType) {
case ygopro.StocTypeChange.SelfType.PLAYER1: {
setPlayer0(updatePlayer);
break;
}
case ygopro.StocTypeChange.SelfType.PLAYER2: {
setPlayer1(updatePlayer);
break;
}
default: {
break;
}
}
forceUpdate();
}
break;
}
default: {
break;
}
}
};
const wsCurrent = ws.current;
return () => {
if (wsCurrent.readyState == 1) {
wsCurrent.close();
}
};
}, [ws]);
}, []);
const joined = useAppSelector(selectJoined);
const chat = useAppSelector(selectChat);
const isHost = useAppSelector(selectIsHost);
const player0 = useAppSelector(selectPlayer0);
const player1 = useAppSelector(selectPlayer1);
const observerCount = useAppSelector(selectObserverCount);
const handleChoseDeck = async () => {
if (ws.current) {
const deck = await fetchDeck("hero.ydk");
const deck = await fetchDeck("hero.ydk");
sendUpdateDeck(ws.current, deck);
sendUpdateDeck(deck);
setChoseDeck(true);
}
setChoseDeck(true);
};
const handleChoseReady = () => {
if (ws.current) {
sendHsReady(ws.current);
}
sendHsReady();
};
const handleChoseStart = () => {
if (ws.current) {
sendHsStart(ws.current);
}
sendHsStart();
};
return (
......@@ -302,29 +115,8 @@ export default function WaitRoom() {
);
}
function sendPlayerInfo(ws: WebSocket, player: string) {
const playerInfo = new ygopro.YgoCtosMsg({
ctos_player_info: new ygopro.CtosPlayerInfo({
name: player,
}),
});
ws.send(playerInfo.serialize());
}
function sendJoinGame(ws: WebSocket, version: number, passWd: string) {
const joinGame = new ygopro.YgoCtosMsg({
ctos_join_game: new ygopro.CtosJoinGame({
version, // todo: use config
gameid: 0,
passwd: passWd,
}),
});
ws.send(joinGame.serialize());
}
function sendUpdateDeck(ws: WebSocket, deck: IDeck) {
// todo: move to api/*
function sendUpdateDeck(deck: IDeck) {
const updateDeck = new ygopro.YgoCtosMsg({
ctos_update_deck: new ygopro.CtosUpdateDeck({
main: deck.main,
......@@ -333,21 +125,21 @@ function sendUpdateDeck(ws: WebSocket, deck: IDeck) {
}),
});
ws.send(updateDeck.serialize());
socketMiddleWare({ cmd: socketCmd.SEND, payload: updateDeck });
}
function sendHsReady(ws: WebSocket) {
function sendHsReady() {
const hasReady = new ygopro.YgoCtosMsg({
ctos_hs_ready: new ygopro.CtosHsReady({}),
});
ws.send(hasReady.serialize());
socketMiddleWare({ cmd: socketCmd.SEND, payload: hasReady });
}
function sendHsStart(ws: WebSocket) {
function sendHsStart() {
const hasStart = new ygopro.YgoCtosMsg({
ctos_hs_start: new ygopro.CtosHsStart({}),
});
ws.send(hasStart.serialize());
socketMiddleWare({ cmd: socketCmd.SEND, payload: hasStart });
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment