From 8da7d9f6748447f5bc1f0f794cf0284f26a7b59f Mon Sep 17 00:00:00 2001 From: Arman Shaikh Date: Tue, 10 Mar 2026 23:45:24 +0000 Subject: [PATCH 1/2] feat: enhance mobile responsiveness across various game components and improve layout for better user experience --- index.html | 24 ++-- public/favicon.png | Bin 0 -> 1574835 bytes src/components/game/BossBaby.tsx | 4 +- src/components/game/DesktopIcons.tsx | 44 +++--- src/components/game/DraggableWindow.tsx | 24 ++-- src/components/game/IntroScreen.tsx | 51 ++++--- src/components/game/PacmanGame.tsx | 130 ++++++++++++++++-- src/components/game/PingPongGame.tsx | 74 ++++++++-- .../game/ProcrastinationDesktop.tsx | 11 +- src/components/game/PunishmentScreen.tsx | 8 +- src/components/game/Taskbar.tsx | 6 +- src/components/game/TeamsNotif.tsx | 2 +- src/components/game/TetrisGame.tsx | 34 ++++- src/pages/index.tsx | 3 +- 14 files changed, 312 insertions(+), 103 deletions(-) create mode 100644 public/favicon.png diff --git a/index.html b/index.html index 461b0b6..9fe7a97 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,8 @@ Liar, Cheater, Fired | Office Chaos Browser Game - + - + - + - - + + - - - -
- - + + + +
+ + diff --git a/src/components/game/BossBaby.tsx b/src/components/game/BossBaby.tsx index 52b4438..e4405fc 100644 --- a/src/components/game/BossBaby.tsx +++ b/src/components/game/BossBaby.tsx @@ -88,7 +88,7 @@ export const BossBaby: React.FC = ({ diff --git a/src/components/game/DraggableWindow.tsx b/src/components/game/DraggableWindow.tsx index 7fefc3f..1687c2d 100644 --- a/src/components/game/DraggableWindow.tsx +++ b/src/components/game/DraggableWindow.tsx @@ -29,13 +29,18 @@ export const DraggableWindow: React.FC = ({ bodyStyle, }) => { const isMobile = typeof window !== "undefined" && window.innerWidth < 768; - const effectiveWidth = isMobile ? Math.min(width, window.innerWidth - 16) : width; + const effectiveWidth = isMobile + ? Math.min(width, window.innerWidth - 16) + : width; const [pos, setPos] = useState({ x: isMobile ? Math.max(8, (window.innerWidth - effectiveWidth) / 2) : (initialX ?? - Math.max(50, (window.innerWidth - width) / 2 + Math.random() * 60 - 30)), + Math.max( + 50, + (window.innerWidth - width) / 2 + Math.random() * 60 - 30, + )), y: isMobile ? 155 : (initialY ?? diff --git a/src/components/game/FailMeter.tsx b/src/components/game/FailMeter.tsx index bb8a821..8074ab8 100644 --- a/src/components/game/FailMeter.tsx +++ b/src/components/game/FailMeter.tsx @@ -16,7 +16,11 @@ export const FailMeter: React.FC = ({ value }) => { const needleY = cy - r * 0.82 * Math.sin(radians); const status = - value <= -STAGE_METER_POINT_CUTOF ? "CRITICAL" : value <= STAGE_METER_POINT_CUTOF ? "NEUTRAL" : "EXCELLENT"; + value <= -STAGE_METER_POINT_CUTOF + ? "CRITICAL" + : value <= STAGE_METER_POINT_CUTOF + ? "NEUTRAL" + : "EXCELLENT"; const statusColor = value <= -STAGE_METER_POINT_CUTOF diff --git a/src/components/game/IntroScreen.tsx b/src/components/game/IntroScreen.tsx index c3ff3e6..ce1e2b4 100644 --- a/src/components/game/IntroScreen.tsx +++ b/src/components/game/IntroScreen.tsx @@ -21,7 +21,9 @@ export const IntroScreen: React.FC = ({ const isLandscape = typeof window !== "undefined" && window.innerWidth > window.innerHeight; const isMobileLandscape = isMobile && isLandscape; - const settingsPanelWidth = isMobile ? Math.max(180, window.innerWidth - 80) : 320; + const settingsPanelWidth = isMobile + ? Math.max(180, window.innerWidth - 80) + : 320; return (
diff --git a/src/components/game/PacmanGame.tsx b/src/components/game/PacmanGame.tsx index 372049a..9cff583 100644 --- a/src/components/game/PacmanGame.tsx +++ b/src/components/game/PacmanGame.tsx @@ -88,7 +88,8 @@ interface PacmanGameProps { export const PacmanGame: React.FC = ({ onWin, onLose }) => { const isMobile = typeof window !== "undefined" && window.innerWidth < 768; - const isLandscape = typeof window !== "undefined" && window.innerWidth > window.innerHeight; + const isLandscape = + typeof window !== "undefined" && window.innerWidth > window.innerHeight; // More aggressive scaling for landscape mobile let canvasScale = 1; @@ -425,7 +426,7 @@ export const PacmanGame: React.FC = ({ onWin, onLose }) => { justifyContent: "space-between", padding: "4px 8px", background: "#0a0a1e", - boxSizing: "border-box" + boxSizing: "border-box", }} > = ({ onWin, onLose }) => { paddingBottom: isLandscape ? 2 : 4, background: "#0a0a1e", width: "100%", - boxSizing: "border-box" + boxSizing: "border-box", }} > + > + ↑ +
+ > + ← + + > + → +
+ > + ↓ +
)} @@ -524,7 +533,7 @@ export const PacmanGame: React.FC = ({ onWin, onLose }) => { boxSizing: "border-box", whiteSpace: "nowrap", overflow: "hidden", - textOverflow: "ellipsis" + textOverflow: "ellipsis", }} > Avoid the 6 coworkers! diff --git a/src/components/game/PingPongGame.tsx b/src/components/game/PingPongGame.tsx index 71b9217..465df5e 100644 --- a/src/components/game/PingPongGame.tsx +++ b/src/components/game/PingPongGame.tsx @@ -17,7 +17,9 @@ export const PingPongGame: React.FC = ({ const isMobile = typeof window !== "undefined" && window.innerWidth < 768; const CANVAS_W = 350; const CANVAS_H = 240; - const canvasScale = isMobile ? Math.min(1, (window.innerWidth - 48) / CANVAS_W) : 1; + const canvasScale = isMobile + ? Math.min(1, (window.innerWidth - 48) / CANVAS_W) + : 1; // Physics Constants for perfectly consistent speed const CONSTANT_VX = 4.0; @@ -85,7 +87,9 @@ export const PingPongGame: React.FC = ({ g.paddleY = Math.max(0, Math.min(CANVAS_H - 60, relY - 30)); }; canvas.addEventListener("touchmove", touchHandler, { passive: false }); - canvas.addEventListener("touchstart", touchHandler as EventListener, { passive: true }); + canvas.addEventListener("touchstart", touchHandler as EventListener, { + passive: true, + }); const PADDLE_SPEED = 5; const AI_PADDLE_SPEED = 2.2; // Optimized for consistent ball speed @@ -102,12 +106,16 @@ export const PingPongGame: React.FC = ({ if (g.framesSinceScore > RALLY_TIMEOUT_FRAMES) { const excessFrames = g.framesSinceScore - RALLY_TIMEOUT_FRAMES; const boost = excessFrames * 0.02; // linear: add 0.02 pixels/frame per excess frame - + // Calculate base speed magnitude - const baseMagnitude = Math.sqrt(CONSTANT_VX * CONSTANT_VX + BALL_SPEED_Y_START * BALL_SPEED_Y_START); - const currentMagnitude = Math.sqrt(g.ballVX * g.ballVX + g.ballVY * g.ballVY); + const baseMagnitude = Math.sqrt( + CONSTANT_VX * CONSTANT_VX + BALL_SPEED_Y_START * BALL_SPEED_Y_START, + ); + const currentMagnitude = Math.sqrt( + g.ballVX * g.ballVX + g.ballVY * g.ballVY, + ); const targetMagnitude = baseMagnitude + boost; - + // Scale velocity to new magnitude while preserving direction const scale = targetMagnitude / currentMagnitude; g.ballVX *= scale; @@ -315,7 +323,10 @@ export const PingPongGame: React.FC = ({

- {isMobile ? "Touch the canvas to move your paddle." : "W/S or ↑/↓ to move."} First to 3 wins! + {isMobile + ? "Touch the canvas to move your paddle." + : "W/S or ↑/↓ to move."}{" "} + First to 3 wins!

= ({ const isMobile = typeof window !== "undefined" && window.innerWidth < 768; const [pos, setPos] = useState({ x: isMobile ? 8 : 96, - y: isMobile ? 155 : 40 + y: isMobile ? 155 : 40, }); const [activeTab, setActiveTab] = useState<"cricket" | "cat" | "youtube">( "cricket", @@ -75,7 +75,8 @@ export const ProcrastinationDesktop: React.FC = ({ const currentInnings = prev[teamKey]; const australiaChasedTarget = - prev.battingTeam === "AUSTRALIA" && prev.australia.runs > prev.india.runs; + prev.battingTeam === "AUSTRALIA" && + prev.australia.runs > prev.india.runs; if (australiaChasedTarget) { return { ...prev, battingTeam: "DONE" }; @@ -140,22 +141,25 @@ export const ProcrastinationDesktop: React.FC = ({ const nextState: MatchState = teamKey === "india" ? { - ...prev, - india: nextInnings, - } + ...prev, + india: nextInnings, + } : { - ...prev, - australia: nextInnings, - }; + ...prev, + australia: nextInnings, + }; const ballPrefix = - prev.battingTeam === "INDIA" ? `IND ${formatOvers(nextInnings.balls)}` : `AUS ${formatOvers(nextInnings.balls)}`; + prev.battingTeam === "INDIA" + ? `IND ${formatOvers(nextInnings.balls)}` + : `AUS ${formatOvers(nextInnings.balls)}`; nextState.recentBalls = [...prev.recentBalls.slice(-11), ballSymbol]; nextState.lastBallCommentary = `${ballPrefix}: ${ballCommentary}`; const chaseCompleted = - prev.battingTeam === "AUSTRALIA" && nextState.australia.runs > nextState.india.runs; + prev.battingTeam === "AUSTRALIA" && + nextState.australia.runs > nextState.india.runs; if (chaseCompleted) { return { @@ -192,7 +196,10 @@ export const ProcrastinationDesktop: React.FC = ({ const australiaRuns = match.australia.runs; const target = indiaRuns + 1; const runsNeeded = Math.max(0, target - australiaRuns); - const ballsRemaining = Math.max(0, MAX_BALLS_PER_INNINGS - match.australia.balls); + const ballsRemaining = Math.max( + 0, + MAX_BALLS_PER_INNINGS - match.australia.balls, + ); const requiredRate = match.battingTeam === "AUSTRALIA" && ballsRemaining > 0 && runsNeeded > 0 ? ((runsNeeded * 6) / ballsRemaining).toFixed(2) @@ -319,30 +326,33 @@ export const ProcrastinationDesktop: React.FC = ({ @@ -398,14 +408,18 @@ export const ProcrastinationDesktop: React.FC = ({

Last Over Feed

- {match.recentBalls.length > 0 ? match.recentBalls.join(" ") : "No balls yet"} + {match.recentBalls.length > 0 + ? match.recentBalls.join(" ") + : "No balls yet"}

{liveLine}

-

{match.lastBallCommentary}

+

+ {match.lastBallCommentary} +

diff --git a/src/components/game/Taskbar.tsx b/src/components/game/Taskbar.tsx index 47d0a3b..6d03e35 100644 --- a/src/components/game/Taskbar.tsx +++ b/src/components/game/Taskbar.tsx @@ -65,7 +65,9 @@ export const Taskbar: React.FC = ({ volume, setVolume }) => { min={0} max={100} value={Math.round(volume * 100)} - onChange={(event) => setVolume(Number(event.target.value) / 100)} + onChange={(event) => + setVolume(Number(event.target.value) / 100) + } className="w-24 accent-primary" /> diff --git a/src/components/game/TetrisGame.tsx b/src/components/game/TetrisGame.tsx index 2effff5..1b36a98 100644 --- a/src/components/game/TetrisGame.tsx +++ b/src/components/game/TetrisGame.tsx @@ -34,9 +34,7 @@ const SHAPES = [ [0, 1, 1], [1, 1, 1], ], // J: 3×3 chunky J - [ - [1, 1, 1, 1], - ], // I: 1×4 bar + [[1, 1, 1, 1]], // I: 1×4 bar ]; const CANVAS_W = COLS * CELL; @@ -57,13 +55,19 @@ export const TetrisGame: React.FC = ({ onCleared, }) => { const isMobile = typeof window !== "undefined" && window.innerWidth < 768; - const canvasScale = isMobile ? Math.min(1, (window.innerWidth - 48) / CANVAS_W) : 1; + const canvasScale = isMobile + ? Math.min(1, (window.innerWidth - 48) / CANVAS_W) + : 1; const canvasRef = useRef(null); const [timeLeft, setTimeLeft] = useState(TIMER_SECONDS); const [flashMsg, setFlashMsg] = useState(null); const flashTimeout = useRef | null>(null); - const ctrlRef = useRef<{ move: (dir: number) => void; rotate: () => void; drop: () => void } | null>(null); + const ctrlRef = useRef<{ + move: (dir: number) => void; + rotate: () => void; + drop: () => void; + } | null>(null); useEffect(() => { const canvas = canvasRef.current; @@ -329,13 +333,24 @@ export const TetrisGame: React.FC = ({ {timeLeft}s
-
+
{flashMsg && (
@@ -347,10 +362,30 @@ export const TetrisGame: React.FC = ({
{isMobile ? (
- - - - + + + +
) : (

diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c3e1d61..5e18409 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -57,8 +57,7 @@ const Index = () => { const audio = bgAudioRef.current; if (!audio || !isAudioRunning) return; - void audio.play().catch(() => { - }); + void audio.play().catch(() => {}); }, [isAudioRunning]); useEffect(() => { @@ -483,7 +482,20 @@ const Index = () => { backgroundRepeat: "no-repeat", }} > -

+
@@ -719,10 +731,7 @@ const Index = () => { /> )} - +
); };