fix ball movement and use 60fps

gthvn1 · gthvn1 · commit df68c6815f21 · 2025-03-04T18:48:07.000+01:00
diff --git a/backend/server.ml b/backend/server.ml
@@ -10,24 +10,23 @@ let update_state (state : G.state) =
   let b = state.ball in
   let new_x = b.x +. b.dx in
   let new_y = b.y +. b.dy in
-  let new_x =
-    if new_x < 0. then 0.
-    else if new_x > float state.width then float state.width
-    else new_x
+  let x, dx =
+    if new_x -. b.radius < 0. then (b.radius, -.b.dx)
+    else if new_x +. b.radius > float state.width then
+      (float state.width -. b.radius, -.b.dx)
+    else (new_x, b.dx)
   in
-  let new_y =
-    if new_y < 0. then 0.
-    else if new_y > float state.height then float state.height
-    else new_y
+  let y, dy =
+    if new_y -. b.radius < 0. then (b.radius, -.b.dy)
+    else if new_y +. b.radius > float state.height then
+      (float state.height -. b.radius, -.b.dy)
+    else (new_y, b.dy)
   in
-  {
-    state with
-    ball = { x = new_x; y = new_y; radius = b.radius; dx = b.dx; dy = b.dy };
-  }
+  { state with ball = { x; y; radius = b.radius; dx; dy } }
 
 let rec game_loop (state : G.state) =
-  let fps = 2. in
-  (* 2 frames per second *)
+  let fps = 60. in
+  (* frames per second *)
   Lwt_unix.sleep (1. /. fps) >>= fun () ->
   let new_state = update_state state in
   let sexp = G.sexp_of_server_message (Update new_state) in
diff --git a/frontend/client.ml b/frontend/client.ml
@@ -49,8 +49,11 @@ let animate ctx canvas =
     (* Draw ball *)
     ctx##beginPath;
     ctx##arc !ball.x !ball.y !ball.radius 0. (2. *. Float.pi) Js._false;
-    ctx##.fillStyle := Js.string "green";
+    ctx##.fillStyle := Js.string "white";
     ctx##fill;
+    ctx##.lineWidth := Js.float 4.;
+    ctx##.strokeStyle := Js.string "black";
+    ctx##stroke;
     ctx##closePath;
 
     (* Request next animation frame *)
diff --git a/index.html b/index.html
@@ -59,7 +59,7 @@
         canvas {
             background-color: var(--basquiat-bg);
             border: 3px solid var(--basquiat-black);
-            padding: 10px;
+            padding: 0px;
             box-shadow:
                 -4px -4px 0 var(--basquiat-red),
                 4px 4px 0 var(--basquiat-green);
@@ -111,4 +111,4 @@
 <body>
 </body>
 
-</html>
+</html>
