Color pixel websocket

frontend-next/src/components/canvas/canvas.tsx

@@ -99,14 +99,26 @@ export const Canva = (props: any) => {
   }
   useEffect(() => {
     if (!props.gameUpdate) return;
-    if (props.gameUpdate.type !== "pixel") return;
+    if (props.gameUpdate.messageType !== "pixel") return;
     if (props.gameUpdate.worldId !== props.worldId) return;
     const x = props.gameUpdate.position % props.width;
     const y = Math.floor(props.gameUpdate.position / props.width);
     colorPixel(x, y, props.gameUpdate.colorId);
     props.setLastPlacedTime(props.gameUpdate.timestamp * 1000);
     props.setGameUpdate(null);
   }, [props.gameUpdate]);
+  useEffect(() => {
+    if (!props.gameUpdate) return;
+    if (props.gameUpdate.messageType !== "colorWorldPixel") return;
+    if (parseInt(props.gameUpdate.worldId) !== props.worldId) return;
+    const strPos = props.gameUpdate.position;
+    const numPos = parseInt(strPos);
+    const x = numPos % props.width;
+    const y = Math.floor(numPos / props.width);
+    const colorId = parseInt(props.gameUpdate.color);
+    colorPixel(x, y, colorId);
+    props.setGameUpdate(null);
+  }, [props.gameUpdate]);
 
   const addStagingPixel = (x: number, y: number, colorId: number) => {
     let newStaging = props.stagingPixels;

frontend-next/src/screens/canvas.tsx

@@ -136,7 +136,7 @@ const Canvas = (props: any) => {
       const stagedPixel = stagedPixels[0];
       stagedPixels = stagedPixels.slice(1);
       updateGame({
-        type: "pixel",
+        messageType: "pixel",
         position: stagedPixel.position,
         colorId: stagedPixel.colorId,
         worldId: commitWorldId,
@@ -347,6 +347,9 @@ const Canvas = (props: any) => {
   const updateGame = (update: any) => {
     setGameUpdates([...gameUpdates, update]);
   }
+  const updatesGame = (updates: any[]) => {
+    setGameUpdates([...gameUpdates, ...updates]);
+  }
   useEffect(() => {
     if (gameUpdates.length === 0) {
       return;
@@ -378,8 +381,10 @@ const Canvas = (props: any) => {
   }, [readyState]);
   useEffect(() => {
     const processMessage = async (message: any) => {
-      if (message) {
-        console.log(message);
+      const supportedTypes = ["colorWorldPixel"];
+      if (message && message.length > 0) {
+        const updates = message.filter((update: any) => supportedTypes.includes(update.messageType));
+        updatesGame(updates);
       }
     };
     processMessage(lastJsonMessage);

onchain/src/multi_canvas.cairo

@@ -645,6 +645,10 @@ pub mod MultiCanvas {
 
         fn check_game_running(self: @ContractState, canvas_id: u32) {
             let block_timestamp = starknet::get_block_timestamp();
+            assert(
+                block_timestamp >= self.canvases.read(canvas_id).start_time,
+                'This world has not started.'
+            );
             assert(block_timestamp <= self.canvases.read(canvas_id).end_time, 'This world ended.')
         }