From a57fda7ba41988303cf3417178fef818fdae47a2 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Sun, 12 Apr 2026 18:24:19 +0700
Subject: [PATCH] fix: floor misaligned with container walls causing
 fall-through

The floor was centered on CANVAS_WIDTH/2 but the container is no longer
centered in the canvas (NEXT panel on right). This created a 26px gap
at the bottom-left corner. Center floor on CONTAINER_X + CONTAINER_WIDTH/2
to match the walls. Also display fruit tier numbers instead of names.
---
 src/physics.js  | 4 ++--
 src/renderer.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/physics.js b/src/physics.js
index 8bbefe9..9b3f811 100644
--- a/src/physics.js
+++ b/src/physics.js
@@ -1,7 +1,6 @@
 import Matter from 'matter-js';
 import { FRUITS } from './fruits.js';
 import {
-  CANVAS_WIDTH,
   CONTAINER_WIDTH,
   CONTAINER_HEIGHT,
   CONTAINER_X,
@@ -23,6 +22,7 @@ export function createWalls() {
   const wallHeight = CONTAINER_HEIGHT;
   const wallY = CONTAINER_Y + CONTAINER_HEIGHT / 2;
 
+  const floorX = CONTAINER_X + CONTAINER_WIDTH / 2;
   const floorY = CONTAINER_Y + CONTAINER_HEIGHT + WALL_THICKNESS / 2;
   const floorWidth = CONTAINER_WIDTH + WALL_THICKNESS * 2;
 
@@ -30,7 +30,7 @@ export function createWalls() {
 
   const leftWall = Bodies.rectangle(leftX, wallY, WALL_THICKNESS, wallHeight, wallOptions);
   const rightWall = Bodies.rectangle(rightX, wallY, WALL_THICKNESS, wallHeight, wallOptions);
-  const floor = Bodies.rectangle(CANVAS_WIDTH / 2, floorY, floorWidth, WALL_THICKNESS, wallOptions);
+  const floor = Bodies.rectangle(floorX, floorY, floorWidth, WALL_THICKNESS, wallOptions);
 
   return [leftWall, rightWall, floor];
 }
diff --git a/src/renderer.js b/src/renderer.js
index 4f63541..2297500 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -99,7 +99,7 @@ function drawFruitCircle(ctx, fruit, x, y, radius) {
   ctx.font = `bold ${Math.max(10, r * 0.6)}px sans-serif`;
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
-  ctx.fillText(fruit.name.slice(0, 2), x, y);
+  ctx.fillText(fruit.tier + 1, x, y);
 }
 
 function drawFruits(ctx, bodies) {