communicate via JSON RPC

client/src/App.tsx

@@ -22,21 +22,17 @@ function App() {
 	const [nbLevels, setNbLevels] = useState(0)
 	const [curLevel, setCurLevel] = useState(0)
 	const [finished, setFinished] = useState(false)
-	const [rpcConnection, setRpcConnection] = useState(null)
+	const [rpcConnection, setRpcConnection] = useState<null|rpc.MessageConnection>(null)
 
 	const socketUrl = 'ws://' + window.location.host + '/websocket/'
 
-	const { sendJsonMessage, getWebSocket } = useWebSocket(socketUrl, {
+	useWebSocket(socketUrl, {
 		onOpen: function (ev) {
     	const logger = new rpc.ConsoleLogger();
       const socket = rpc.toSocket(ev.target as WebSocket);
 			let rpcConnection = rpc.createWebSocketConnection(socket, logger)
       setRpcConnection(rpcConnection);
 			rpcConnection.listen();
-			rpcConnection.onNotification("Hello!", () => {
-				console.log("Yes"); // This prints Hello World
-			});
-			rpcConnection.sendNotification("Hello!", 'Hello World');
 		}
 	})
 
@@ -56,14 +52,14 @@ function App() {
 		setCurLevel(1)
 	}
 
-	// let mainComponent;
-	// if (finished) {
-	//   mainComponent = <GoodBye message={conclusion} />
-	// } else if (curLevel > 0) {
-	//   mainComponent = <Level sendJsonMessage={sendJsonMessage} lastMessage={lastMessage} lastJsonMessage={lastJsonMessage} nbLevels={nbLevels} level={curLevel} setCurLevel={setCurLevel} setLevelTitle={setLevelTitle} setFinished={setFinished}/>
-	// } else {
-  //     mainComponent = <Welcome sendJsonMessage={sendJsonMessage} lastMessage={lastMessage} lastJsonMessage={lastJsonMessage} setNbLevels={setNbLevels} setTitle={setTitle} startGame={startGame} setConclusion={setConclusion}/>
-	// }
+	let mainComponent;
+	if (finished) {
+	  mainComponent = <GoodBye message={conclusion} />
+	} else if (curLevel > 0) {
+	  mainComponent = <Level rpcConnection={rpcConnection} nbLevels={nbLevels} level={curLevel} setCurLevel={setCurLevel} setLevelTitle={setLevelTitle} setFinished={setFinished}/>
+	} else {
+    mainComponent = <Welcome rpcConnection={rpcConnection} setNbLevels={setNbLevels} setTitle={setTitle} startGame={startGame} setConclusion={setConclusion}/>
+	}
 
   return (
     <div className="App">
@@ -79,7 +75,7 @@ function App() {
 				</Typography>
 				</Toolbar>
 			</AppBar>
-			{/* {mainComponent} */}
+			{mainComponent}
 		</MathJaxContext>
     </div>
   )

client/src/components/Level.tsx

@@ -11,10 +11,18 @@ import LeftPanel from './LeftPanel';
 import InputZone from './InputZone';
 import Message from './Message';
 import TacticState from './TacticState';
+import * as rpc from 'vscode-ws-jsonrpc';
 
+interface LevelProps {
+  rpcConnection: null|rpc.MessageConnection;
+  nbLevels: any;
+	level: any;
+	setCurLevel: any;
+	setLevelTitle: any;
+	setFinished: any
+}
 
-
-function Level({ sendJsonMessage, lastMessage, lastJsonMessage, nbLevels, level, setCurLevel, setLevelTitle, setFinished }) {
+function Level({ rpcConnection, nbLevels, level, setCurLevel, setLevelTitle, setFinished }: LevelProps) {
 	const [index, setIndex] = useState(level) // Level number
 	const [tacticDocs, setTacticDocs] = useState([])
 	const [lemmaDocs, setLemmaDocs] = useState([])
@@ -30,46 +38,40 @@ function Level({ sendJsonMessage, lastMessage, lastJsonMessage, nbLevels, level,
 
 	const [completed, setCompleted] = useState(false)
 
-	// The next function will be called when the level changes
-	useEffect(() => {
-		sendJsonMessage({ "loadLevel": level });
-	}, [level, sendJsonMessage])
-
-	// The next function will be called when a message arrives or the level title changes
-	useEffect(() => {
-		console.log(lastMessage)
-		console.log(lastJsonMessage)
-		if ("nb_levels" in lastJsonMessage) { return } // this is an old message from starting the game
-		const data = lastJsonMessage;
-		if ("title" in data) { // This is the level metadata coming in
-			setLevelTitle("Level " + data["index"] + ": " + data["title"])
-			setIndex(parseInt(data["index"]))
-			setTacticDocs(data["tactics"])
-			setLemmaDocs(data["lemmas"])
-		}
-
-		if (data["message"] !== "" && data.errors.length === 0) {
-			setMessage(data["message"])
+	const processResponse = (res:any) => {
+		setLeanData(res);
+		setErrors(res.errors);
+		if (res.message !== "" && res.errors?.length === 0) {
+			setMessage(res.message)
 			setMessageOpen(true)
 		}
-		setLeanData(data);
-		setErrors(data.errors);
-		if (data.goals.length === 0 && data.errors.length === 0) {
+		if (res.goals?.length === 0 && res.errors?.length === 0) {
 			setCompleted(true)
 		}
+	}
 
-	}, [lastJsonMessage, lastMessage, setLevelTitle])
-
+	// The next function will be called when the level changes
+	useEffect(() => {
+		if (rpcConnection) {
+			rpcConnection.sendRequest("loadLevel", {number: level}).then((res) => {
+				setLevelTitle("Level " + res["index"] + ": " + res["title"])
+				setIndex(parseInt(res["index"]))
+				setTacticDocs(res["tactics"])
+				setLemmaDocs(res["lemmas"])
+				processResponse(res)
+			});
+		}
+	}, [level, rpcConnection])
 
 	function sendTactic(input) {
-		sendJsonMessage({ "runTactic": input });
+		rpcConnection.sendRequest("runTactic", {tactic: input}).then(processResponse);
 		setLastTactic(input);
 		setHistory(history.concat([input]));
 	}
 
 	function undo() {
 		if (errors.length === 0) {
-			sendJsonMessage('undo');
+			rpcConnection.sendRequest('undo').then(processResponse);
 		}
 		if (history.length > 1) {
 			setLastTactic(history[history.length - 1]);
@@ -112,4 +114,4 @@ function Level({ sendJsonMessage, lastMessage, lastJsonMessage, nbLevels, level,
 	)
 }
 
-export default Level
+export default Level

client/src/components/Welcome.tsx

@@ -6,32 +6,44 @@ import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
+import * as rpc from 'vscode-ws-jsonrpc';
 
 import { Box, Typography, Button, CircularProgress, Grid } from '@mui/material';
 
+interface WelcomeProps {
+  rpcConnection: null|rpc.MessageConnection;
+  setNbLevels: any;
+	setTitle: any;
+	startGame: any;
+	setConclusion: any;
+}
 
-function Welcome({ sendJsonMessage, lastJsonMessage, lastMessage, setNbLevels, setTitle, startGame, setConclusion }) {
+type infoResultType = {
+	title: string,
+	nb_levels: any[],
+	conclusion: string
+}
 
-	const [leanData, setLeanData] = useState({})
+const infoRequestType = new rpc.RequestType0<infoResultType, void>("info")
+
+function Welcome({ rpcConnection, setNbLevels, setTitle, startGame, setConclusion }: WelcomeProps) {
+
+	const [leanData, setLeanData] = useState<null|infoResultType>(null)
 
-	// Will run at the very beginning
 	useEffect(() => {
-		sendJsonMessage('info')
-	}, [sendJsonMessage])
-
-	// Will run when a Json message arrives
-	useEffect(() => {
-		if (lastJsonMessage != null && lastJsonMessage.hasOwnProperty("nb_levels")) {
-			setLeanData(lastJsonMessage)
-			setNbLevels(lastJsonMessage.nb_levels)
-			setTitle(lastJsonMessage.title)
-			document.title = lastJsonMessage.title
-			setConclusion(lastJsonMessage.conclusion)
+		if (rpcConnection) { // Will run in the beginning as soon as RPC connection is established
+			rpcConnection.sendRequest(infoRequestType).then((res: infoResultType) =>{
+				setLeanData(res)
+				setNbLevels(res.nb_levels)
+				setTitle(res.title)
+				document.title = res.title
+				setConclusion(res.conclusion)
+			});
 		}
-	}, [lastJsonMessage, setNbLevels, setTitle, setConclusion])
+	}, [rpcConnection, setLeanData, setNbLevels, setTitle, setConclusion])
 
 	let content
-	if ("introduction" in leanData) {
+	if (leanData) {
 		content = (<Box sx={{ m: 3 }}>
 			<Typography variant="body1" component="div">
 			  <MathJax>