116 lines
3.2 KiB
TypeScript
116 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import type { Tuple4 } from './typeutils';
|
|
import { ObserveData } from './pelita_msg';
|
|
import type { RootMsg } from './pelita_msg';
|
|
import * as zmq from 'jszmq';
|
|
|
|
|
|
interface GameStats {
|
|
score: [number, number];
|
|
num_errors: [number, number];
|
|
kills: [number, number, number, number];
|
|
deaths: [number, number, number, number];
|
|
team_time: [number, number];
|
|
}
|
|
|
|
interface GameState {
|
|
game_uuid: string;
|
|
shape: [number, number];
|
|
walls: [number, number][];
|
|
food: [number, number][];
|
|
bots: Tuple4<[number, number]>;
|
|
team_names: [string, string];
|
|
game_stats: GameStats;
|
|
whowins: number;
|
|
gameover: boolean;
|
|
say: Tuple4<string>;
|
|
round: number;
|
|
max_rounds: number;
|
|
turn: number;
|
|
}
|
|
|
|
export type { GameState };
|
|
|
|
function conv_game_state(gs: ObserveData): GameState {
|
|
// const bot_directions = gs.bots.map((pos, idx) => {
|
|
//
|
|
// });
|
|
|
|
return {
|
|
"game_uuid": gs.game_uuid,
|
|
"shape": gs.shape,
|
|
"walls": gs.walls,
|
|
"food": gs.food,
|
|
"bots": gs.bots,
|
|
// "bot_directions": bot_directions,
|
|
"say": gs.say,
|
|
"turn": gs.turn,
|
|
"round": gs.round,
|
|
"max_rounds": gs.max_rounds,
|
|
"team_names": gs.team_names,
|
|
"game_stats": {
|
|
"score": gs.score,
|
|
"num_errors": gs.num_errors,
|
|
"kills": gs.kills,
|
|
"deaths": gs.deaths,
|
|
"team_time": gs.team_time,
|
|
},
|
|
"whowins": gs.whowins,
|
|
"gameover": gs.gameover
|
|
};
|
|
}
|
|
|
|
const ZMQReceiver = ({ url, sendGameState, sendMessage, sendClearPage }: { url: string,
|
|
sendGameState: (gs: GameState) => any,
|
|
sendMessage: (msg: string) => any,
|
|
sendClearPage: () => any
|
|
}
|
|
|
|
) => {
|
|
const [messages, setMessages] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
console.log('hi');
|
|
const socket = zmq.socket('sub');
|
|
socket.options.reconnectInterval = 1000;
|
|
socket.connect(url);
|
|
socket.subscribe('');
|
|
|
|
socket.on('message', (message) => {
|
|
setMessages((prevMessages) => [/*...prevMessages, */message.toString()]);
|
|
let parsed = JSON.parse(message) as RootMsg;
|
|
console.log(parsed);
|
|
if (parsed.__action__ === 'SPEAK') {
|
|
sendMessage(parsed['__data__'].replaceAll(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ''));
|
|
} else if (parsed.__action__ === 'CLEAR') {
|
|
sendClearPage();
|
|
} else if (parsed.__action__ === 'observe') {
|
|
let conv = conv_game_state(parsed.__data__);
|
|
sendGameState(conv);
|
|
} else if (parsed.__action__ === 'INIT') {
|
|
sendClearPage();
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
socket.unsubscribe('');
|
|
socket.close();
|
|
};
|
|
}, [url]);
|
|
|
|
return (<></>
|
|
// <footer className="fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
|
|
// <h2 className='text-xs text-slate-300'>ZeroMQ Messages:</h2>
|
|
// <ul>
|
|
// {messages.map((message, index) => (
|
|
// <li key={index} className='text-xs text-slate-300' style={{fontSize: 0.45 + 'rem', lineHeight: 0.5 + 'rem'}}>{message}</li>
|
|
// ))}
|
|
// </ul>
|
|
// </footer>
|
|
);
|
|
};
|
|
|
|
export default ZMQReceiver;
|