formatted code

Author: yk-tuturu

src/bundles/robot_minigame/functions.ts

@@ -6,7 +6,6 @@
 import context from 'js-slang/context';
 
 type Point = {x: number, y: number};
-type Wall = {p1: Point, p2: Point};
 
 type Polygon = Point[];
 
@@ -16,20 +15,20 @@ type StateData = {
   height: number,
   walls: Polygon[],
   movePoints: Point[],
-  message: String,
+  message: string,
   success: boolean,
-  messages: String[]
-}
+  messages: string[]
+};
 
 type Robot = {
   x: number; // the top left corner
   y: number;
   dx: number;
   dy: number;
   radius: number
-}
+};
 
-let stateData: StateData = {
+const stateData: StateData = {
   isInit: false,
   width: 500,
   height: 500,
@@ -38,17 +37,17 @@ let stateData: StateData = {
   message: 'moved successfully',
   success: true,
   messages: []
-}
+};
 
-let robot: Robot = {
+const robot: Robot = {
   x: 25, // default start pos, puts it at the top left corner of canvas without colliding with the walls
   y: 25,
   dx: 1,
   dy: 0,
-  radius: 20 //give the robot a circular hitbox
-}
+  radius: 20 // give the robot a circular hitbox
+};
 
-let bounds: Point[] = []
+let bounds: Point[] = [];
 
 // default grid width and height is 25
 context.moduleContexts.robot_minigame.state = stateData;
@@ -78,7 +77,7 @@ export function init(width: number, height: number, posX: number, posY: number)
     {x: width, y: 0},
     {x: width, y: height},
     {x: 0, y: height}
-  ]
+  ];
 
 }
 
@@ -108,21 +107,21 @@ export function set_rect_wall(x: number, y: number, width: number, height: numbe
     {x: x + width, y: y},
     {x: x+width, y: y+height},
     {x: x, y:y+height}
-  ]
+  ];
 
   stateData.walls.push(polygon);
 }
 
 export function move_forward(): void {
   if (alrCollided()) return;
 
-  const collisionPoint: Point | null = raycast(stateData.walls)
+  const collisionPoint: Point | null = raycast(stateData.walls);
   if (collisionPoint !== null) {
-    let nextPoint: Point = {
+    const nextPoint: Point = {
       x: collisionPoint.x - robot.dx * (robot.radius + 5),
       y: collisionPoint.y - robot.dy * (robot.radius + 5)
-    }
-    
+    };
+
     robot.x = nextPoint.x;
     robot.y = nextPoint.y;
     stateData.movePoints.push(nextPoint);
@@ -142,20 +141,20 @@ function raycast(polygons: Polygon[]): Point | null {
   let minDist = Infinity;
 
   for (const polygon of polygons) {
-      stateData.messages.push("checking polygon");
-      const numVertices = polygon.length;
-      
-      for (let i = 0; i < numVertices; i++) {
-          const x1 = polygon[i].x, y1 = polygon[i].y;
-          const x2 = polygon[(i + 1) % numVertices].x, y2 = polygon[(i + 1) % numVertices].y;
-
-          const intersection = getIntersection(robot.x, robot.y, robot.dx + robot.x, robot.dy + robot.y, x1, y1, x2, y2);
-          
-          if (intersection.collided && intersection.dist < minDist) {
-              minDist = intersection.dist
-              nearest = {x: intersection.x, y: intersection.y};
-          }
+    stateData.messages.push('checking polygon');
+    const numVertices = polygon.length;
+
+    for (let i = 0; i < numVertices; i++) {
+      const x1 = polygon[i].x, y1 = polygon[i].y;
+      const x2 = polygon[(i + 1) % numVertices].x, y2 = polygon[(i + 1) % numVertices].y;
+
+      const intersection = getIntersection(robot.x, robot.y, robot.dx + robot.x, robot.dy + robot.y, x1, y1, x2, y2);
+
+      if (intersection.collided && intersection.dist < minDist) {
+        minDist = intersection.dist;
+        nearest = {x: intersection.x, y: intersection.y};
       }
+    }
   }
 
   // if no collisions with obstacles, check the outer bounds of map
@@ -167,7 +166,7 @@ function raycast(polygons: Polygon[]): Point | null {
       const intersection = getIntersection(robot.x, robot.y, robot.dx + robot.x, robot.dy + robot.y, x1, y1, x2, y2);
 
       if (intersection.collided && intersection.dist < minDist) {
-        minDist = intersection.dist
+        minDist = intersection.dist;
         nearest = {x: intersection.x, y: intersection.y};
       }
     }
@@ -176,37 +175,35 @@ function raycast(polygons: Polygon[]): Point | null {
   return nearest; // Closest intersection point
 }
 
-//Determine if a ray and a line segment intersect, and if so, determine the collision point
+// Determine if a ray and a line segment intersect, and if so, determine the collision point
 function getIntersection(x1, y1, x2, y2, x3, y3, x4, y4){
-  var denom = ((x2 - x1)*(y4 - y3)-(y2 - y1)*(x4 - x3));
-  var r;
-  var s;
-  var x;
-  var y;
-  var b = false;
-
-  //If lines not collinear or parallel
+  const denom = ((x2 - x1)*(y4 - y3)-(y2 - y1)*(x4 - x3));
+  let r;
+  let s;
+  let x;
+  let y;
+  let b = false;
+
+  // If lines not collinear or parallel
   if(denom != 0){
-    //Intersection in ray "local" coordinates
+    // Intersection in ray "local" coordinates
     r = (((y1 - y3) * (x4 - x3)) - (x1 - x3) * (y4 - y3)) / denom;
 
-    //Intersection in segment "local" coordinates
+    // Intersection in segment "local" coordinates
     s = (((y1 - y3) * (x2 - x1)) - (x1 - x3) * (y2 - y1)) / denom;
 
-    //The algorithm gives the intersection of two infinite lines, determine if it lies on the side that the ray is defined on
-    if (r >= 0)
-    {
-      //If point along the line segment
-      if (s >= 0 && s <= 1)
-      {
+    // The algorithm gives the intersection of two infinite lines, determine if it lies on the side that the ray is defined on
+    if (r >= 0) {
+      // If point along the line segment
+      if (s >= 0 && s <= 1) {
         b = true;
-        //Get point coordinates (offset by r local units from start of ray)
+        // Get point coordinates (offset by r local units from start of ray)
         x = x1 + r * (x2 - x1);
         y = y1 + r * (y2 - y1);
       }
     }
   }
-  var p = {collided: b, x: x, y: y, dist: r};
+  const p = {collided: b, x: x, y: y, dist: r};
   return p;
 }
 

src/tabs/RobotMaze/canvas.tsx

@@ -21,12 +21,7 @@ type Point = {
   y: number;
 };
 
-type Wall = {
-  p1: Point;
-  p2: Point
-};
-
-type Polygon = Point[]
+type Polygon = Point[];
 
 export default class Canvas extends React.Component<Props, State> {
   private canvasRef: React.RefObject<HTMLCanvasElement>;
@@ -78,7 +73,7 @@ export default class Canvas extends React.Component<Props, State> {
     ctx.clearRect(0, 0, this.CANVAS_WIDTH, this.CANVAS_HEIGHT);
     this.drawWalls(ctx);
     this.drawGrid(ctx);
-    this.drawRobot(ctx, this.xPos, this.yPos)
+    this.drawRobot(ctx, this.xPos, this.yPos);
   };
 
   startAnimation = () => {
@@ -128,7 +123,7 @@ export default class Canvas extends React.Component<Props, State> {
       }
     }
 
-    this.drawRobot(ctx, this.xPos, this.yPos)
+    this.drawRobot(ctx, this.xPos, this.yPos);
     // Request the next frame
     this.animationFrameId = requestAnimationFrame(this.animate);
   };
@@ -138,7 +133,7 @@ export default class Canvas extends React.Component<Props, State> {
 
     ctx.arc(x, y, 20, 0, Math.PI * 2, false); // Full circle (0 to 2π radians)
 
-    ctx.fillStyle = "black"; // Set the fill color
+    ctx.fillStyle = 'black'; // Set the fill color
     ctx.fill(); // Fill the circle
   }
 
@@ -148,16 +143,16 @@ export default class Canvas extends React.Component<Props, State> {
       const wall: Polygon = this.walls[i];
 
       ctx.beginPath();
-      ctx.moveTo(wall[0].x, wall[0].y)
+      ctx.moveTo(wall[0].x, wall[0].y);
       for (let j = 1; j < wall.length; j++) {
         ctx.lineTo(wall[j].x, wall[j].y);
       }
       ctx.closePath();
 
-      ctx.fillStyle = "rgba(169, 169, 169, 0.5)"; // Set the fill color
+      ctx.fillStyle = 'rgba(169, 169, 169, 0.5)'; // Set the fill color
       ctx.fill(); // Fill the polygon
 
-      ctx.strokeStyle = "rgb(53, 53, 53)"; // Set the stroke color
+      ctx.strokeStyle = 'rgb(53, 53, 53)'; // Set the stroke color
       ctx.lineWidth = 2; // Set the border width
       ctx.stroke(); // Stroke the polygon
     }
@@ -169,12 +164,12 @@ export default class Canvas extends React.Component<Props, State> {
     ctx.moveTo(0, 0);
     ctx.lineTo(0, this.CANVAS_HEIGHT);
     ctx.lineTo(this.CANVAS_WIDTH, this.CANVAS_HEIGHT);
-    ctx.lineTo(this.CANVAS_WIDTH, 0)
-    ctx.closePath()
+    ctx.lineTo(this.CANVAS_WIDTH, 0);
+    ctx.closePath();
 
     ctx.strokeStyle = 'gray';
     ctx.lineWidth = 3;
-    ctx.stroke()
+    ctx.stroke();
   }
 
   public render() {

src/tabs/RobotMaze/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type DebuggerContext } from '../../typings/type_helpers';
+import type { DebuggerContext } from '../../typings/type_helpers';
 import Canvas from './canvas';
 
 /**