changed size of controlsBtn

Author: programmer-rahul

src/components/layout/SnakeGame.tsx

@@ -6,7 +6,7 @@ const SnakeGame = () => {
   const { gameStatus } = useSnake();
 
   return (
-    <div className="max-h-screen min-h-screen w-screen bg-slate-300">
+    <div className="max-h-dvh min-h-dvh w-full bg-slate-300">
       {/* game home screen  */}
       {gameStatus === "idle" && <GameHomeScreen />}
 

src/components/reusable/GameBtnControls.tsx

@@ -9,7 +9,7 @@ const GameBtnControls = ({
 }) => {
   return (
     <div className="bntControls flex w-full flex-col items-center justify-center py-4">
-      <div className="grid w-1/3 grid-cols-3 grid-rows-3 place-content-center place-items-center rounded-md  border-2 border-purple-700 p-2 text-slate-300">
+      <div className="grid grid-cols-3 grid-rows-3 place-content-center place-items-center rounded-md  border-2 border-purple-700 p-2 text-slate-300">
         <ControlBtn
           rotate={0}
           handleControlsBtnClick={handleControlsBtnClick}
@@ -79,6 +79,7 @@ const ControlBtn = ({
         fill="currentColor"
         viewBox="0 0 56 56"
         transform={`rotate(${rotate + 90})`}
+        width={80}
       >
         <path d="M 46.6445 11.7109 C 46.6445 9.9766 45.3320 8.8984 43.2695 8.8984 L 12.7305 8.8750 C 10.6914 8.8750 9.3555 9.9531 9.3555 11.6875 C 9.3555 12.6250 9.7773 13.3984 10.2695 14.3828 L 24.8711 44.5000 C 25.8554 46.4922 26.7695 47.1250 28.0117 47.1250 C 29.2305 47.1250 30.1445 46.4922 31.1289 44.5000 L 45.7305 14.3828 C 46.2227 13.4219 46.6445 12.6484 46.6445 11.7109 Z"></path>
       </svg>

src/components/snake/GamePlayBoard.tsx

@@ -31,13 +31,13 @@ const GamePlayBoard = () => {
   const snakeRef = useRef(isSnakeRunning);
 
   // variables
-  let cellSize = CanvasWidth / 20;
+  let cellSize = CanvasWidth / 16;
   let snake = [
     { x: cellSize * 5, y: cellSize * 4 },
     { x: cellSize * 4, y: cellSize * 4 },
     { x: cellSize * 3, y: cellSize * 4 },
   ];
-  let snakeFood = { x: cellSize * 10, y: cellSize * 10 };
+  let snakeFood = { x: cellSize * 7, y: cellSize * 7 };
   let snakeColor = 0;
   let frame = 0;
 
@@ -56,7 +56,7 @@ const GamePlayBoard = () => {
       snakeColor,
     });
 
-    if (frame % 10 === 0) {
+    if (frame % 8 === 0) {
       const newHeadPosition = calculateNewHeadPosition();
 
       snake.unshift(newHeadPosition);
@@ -106,9 +106,9 @@ const GamePlayBoard = () => {
     // if snake touches to the boundary of canvas
     if (
       snakeHead.x < 0 ||
-      snakeHead.x > CanvasWidth ||
+      snakeHead.x >= CanvasWidth ||
       snakeHead.y < 0 ||
-      snakeHead.y > CanvasWidth
+      snakeHead.y >= CanvasWidth
     ) {
       gameOver();
       return;
@@ -293,7 +293,7 @@ const GamePlayBoard = () => {
   };
 
   return (
-    <div className="gameScreen flex min-h-screen flex-col justify-between gap-2 border bg-gray-800">
+    <div className="gameScreen flex max-h-svh min-h-svh w-full flex-col justify-between gap-2 overflow-hidden border bg-gray-800">
       {/* Game score and controls */}
       <div className="scores flex min-h-[50px] w-full justify-between border border-slate-500 p-2">
         {/* Back and sound controls */}

vite.config.ts

@@ -1,7 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  server: {
+    host: "0.0.0.0",
+    port: 5173,
+  },
+});