Max updates: Game series - Snake by BaseMax · Pull Request #63 · metropolis-retro/metropolis-retro.github.io

BaseMax · 2026-04-05T20:22:50Z

No description provided.

…-retro.github.io t bnrach

…-retro.github.io

…-retro.github.io t branch

…-retro.github.io

vercel · 2026-04-05T20:22:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
metropolis-retro	Ready	Preview, Comment	Apr 9, 2026 6:12am
metropolis-retro-github-io	Ready	Preview, Comment	Apr 9, 2026 6:12am

gemini-code-assist

Code Review

This pull request introduces a comprehensive Snake game implementation using React 19, TypeScript, and HTML5 Canvas. The changes include a new standalone game package with features like difficulty levels, power-ups, and sound effects, along with its integration into the main application. Review feedback highlights the need to correct non-existent dependency versions in package.json, improve state reactivity for active power-ups within the game controller hook, and refine touch event handling to prevent accidental game restarts during UI interactions.

games/snake/package.json

games/snake/src/game/hooks/useGameController.ts

games/snake/src/game/hooks/useTouchControls.ts

BaseMax · 2026-04-05T20:54:09Z

/geminai review

BaseMax · 2026-04-05T20:54:32Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a comprehensive Snake game implementation, including a custom game engine, React components, and integration into the main application. The game features classic mechanics, difficulty levels, power-ups, and sound effects. Review feedback identifies a critical bug in the collision detection logic where wrapped positions are not re-validated, potentially leading to unintended overlaps. Additionally, several dependency versions in the project's configuration are invalid or non-existent, which must be corrected to ensure the project can be installed and built successfully.

games/snake/src/game/engine/gameTick.ts

games/snake/package.json

socket-security · 2026-04-06T10:02:02Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Package	Supply Chain Security	Vulnerability	Quality	Maintenance
npm/vite@8.0.8 ⏵ 8.0.3	^-6	^-22	^-18	^-1
npm/react@19.2.5 ⏵ 19.2.4			^-16	^-3
npm/react-dom@19.2.5 ⏵ 19.2.4

View full report

jbampton · 2026-04-06T10:29:18Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a comprehensive, standalone Snake game built with React 19 and HTML5 Canvas, featuring difficulty settings, power-ups, and sound effects. The code review highlights several areas for improvement, including correcting unstable build tool versions in the package configuration and addressing potential audio playback issues caused by browser autoplay policies. Further feedback suggests enhancing code maintainability by removing magic numbers and improving component encapsulation by avoiding direct global DOM manipulations.

games/snake/package.json

games/snake/src/game/sound/soundManager.ts

games/snake/src/components/SnakeGame.tsx

games/snake/src/game/engine/gameTick.ts

socket-security · 2026-04-06T13:18:16Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		Obfuscated code: npm `vite` is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: games/pacman/package-lock.json → `npm/vite@8.0.3` ℹ Read more on: This package \| This alert \| What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/vite@8.0.3`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

deepsource-io · 2026-04-06T21:48:00Z

DeepSource Code Review

We reviewed changes in 13b905c...2cbb0dd on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

Important

Some issues found as part of this review are outside of the diff in this pull request and aren't shown in the inline review comments due to GitHub's API limitations. You can see those issues on the DeepSource dashboard.

PR Report Card

Overall Grade Focus Area: Reliability	Security Reliability Complexity Hygiene

Feedback

Edge-case handling around control and state

Several issues cluster around “control surfaces”: fullscreen handling, keyboard repeat, touch restart, and async resume all behave correctly in the normal case but break on edge conditions (WebKit fullscreen, key repeat, tap-anywhere, stale async).
Might be worth treating input/state transitions as first-class: define explicit allowed transitions and guard them consistently.

Null-safety exception vs overall strictness

The codebase is generally strict and type-safe, but there’s a single non-null assertion punching through that contract.
With everything else leaning on strict TS, that one escape hatch is more likely to hide a real edge case than in a looser codebase.

Code Review Summary

Analyzer	Updated (UTC)	Details
JavaScript	Apr 9, 2026 6:11a.m.	Review ↗
Secrets	Apr 9, 2026 6:11a.m.	Review ↗
Python	Apr 9, 2026 6:11a.m.	Review ↗

app/games/snake/page.tsx

games/snake/eslint.config.js

games/snake/src/App.tsx

games/snake/src/components/DPad.tsx

games/snake/src/components/GameBoard.tsx

games/snake/src/game/engine/grid.ts

games/snake/src/components/MuteButton.tsx

games/snake/src/game/engine/collision.ts

games/snake/src/game/engine/food.ts

games/snake/src/game/engine/gameTick.ts

BaseMax · 2026-04-06T22:08:52Z

I am working on AI review...

…is-retro/metropolis-retro.github.io into max-updates-games-snake

deepsource-io · 2026-04-06T22:14:28Z

app/games/snake/page.tsx

+export default function SnakePage() {
+  return (
+    <div>
+      <Header />
+      <main className="pt-24 md:pt-32">
+        <section className="border-b border-border py-8 md:py-12">
+          <div className="mx-auto max-w-[1280px] px-6 md:px-12">
+            <Link
+              href="/games"
+              className="mb-6 inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to games
+            </Link>
+          </div>
+        </section>
+
+        <section className="py-8 md:py-12">
+          <div className="mx-auto max-w-[1280px] px-6 md:px-12">
+            <SnakeEmbed />
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  )
+}


Top-level declarations pollute global scope causing collisions

Declaring variables or functions directly in the global scope risks name collisions and unexpected behaviors if other scripts declare identifiers with the same names. This is especially problematic in environments where scripts share the same global context.

Use module scoping or encapsulate declarations within functions or blocks to avoid global pollution and ensure variables are local to the module or intended scope.

deepsource-io · 2026-04-06T22:14:28Z

games/snake/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'


Invalid import statement with non-standard syntax

The statement import js from '@eslint/js' does not conform to standard import syntax and will cause a syntax error, stopping the script from running. This syntax error must be fixed before committing to version control.

Replace the import statement with a valid syntax, such as import * as js from '@eslint/js' or import js from '@eslint/js' if the module supports default exports.

deepsource-io · 2026-04-06T22:14:28Z

games/snake/src/App.tsx

+export default function App() {
+  return (
+    <div className="w-full h-full bg-slate-950">
+      <SnakeGame />
+    </div>
+  );
+}


Implicit global variables risk name collisions

Declaring variables or functions at the global level exposes them to the entire runtime environment, risking collisions with other global symbols and causing unpredictable behavior. This is problematic especially in browsers where multiple scripts coexist.
Avoid declaring variables or functions globally; instead use module-scoped declarations, closures, or explicitly attach globals to controlled namespaces like window in browsers to prevent collisions and ensure isolated scopes.

deepsource-io · 2026-04-06T22:14:28Z

games/snake/src/components/DPad.tsx

+export function DPad({ onDirection }: DPadProps) {
+  const fire = (dir: Direction) => (e: React.TouchEvent | React.MouseEvent) => {
+    e.preventDefault();
+    onDirection(dir);
+  };
+
+  return (
+    <div className="grid grid-cols-3 grid-rows-3 gap-1 pointer-events-auto" style={{ width: 180, height: 180 }}>
+      <span />
+      <button className={BTN} onTouchStart={fire(Direction.Up)} onMouseDown={fire(Direction.Up)} aria-label="Up">▲</button>
+      <span />
+      <button className={BTN} onTouchStart={fire(Direction.Left)} onMouseDown={fire(Direction.Left)} aria-label="Left">◀</button>
+      <span />
+      <button className={BTN} onTouchStart={fire(Direction.Right)} onMouseDown={fire(Direction.Right)} aria-label="Right">▶</button>
+      <span />
+      <button className={BTN} onTouchStart={fire(Direction.Down)} onMouseDown={fire(Direction.Down)} aria-label="Down">▼</button>
+      <span />
+    </div>
+  );
+}


Top-level variable declaration pollutes global scope in ES module

The fire function declared at line 8 in the ES module is scoped to the module level but still hoisted and visible throughout the module. This can unintentionally pollute the module's scope and cause naming conflicts if multiple modules declare similar names.

Refactor to declare fire inside the event handler or use it in a way that confines its scope more narrowly within the function body or component lifecycle to minimize scope pollution.

deepsource-io · 2026-04-06T22:14:28Z

games/snake/src/components/GameBoard.tsx

+export function GameBoard({ canvasRef, width, height }: GameBoardProps) {
+  return (
+    <div className="relative flex items-center justify-center w-full max-w-full overflow-hidden">
+      <canvas
+        ref={canvasRef}
+        width={width}
+        height={height}
+        className="rounded-lg border border-slate-700/50 max-w-full h-auto"
+        style={{ imageRendering: "pixelated" }}
+      />
+    </div>
+  );
+}


Top-level declarations in `GameBoard` risk global scope pollution

Declaring the GameBoard component at the top-level in a script without proper modularization may leak identifiers into the global scope, causing name collisions or runtime errors if other scripts define the same names. This is mostly an issue in non-module browser scripts where top-level declarations become global.

Use ES module syntax or wrap code in an IIFE to scope declarations locally. Explicitly export components in ES modules to prevent unwanted global exposure.

deepsource-io · 2026-04-06T22:14:29Z

games/snake/src/game/engine/grid.ts

+export function isInBounds(pos: Position, width: number, height: number): boolean {
+  return pos.x >= 0 && pos.x < width && pos.y >= 0 && pos.y < height;
+}


Top-level variables in global scope risk naming collisions

The function isInBounds is declared at the global scope, which can risk name collisions especially in browser environments where multiple scripts share the global namespace. This can cause unintended side effects or runtime conflicts.

Wrap the declaration in a module or an IIFE, or explicitly scope it to avoid polluting the global namespace and prevent collisions with other scripts.

deepsource-io · 2026-04-06T22:14:29Z

games/snake/src/game/engine/grid.ts

+export function getRandomPosition(width: number, height: number): Position {
+  return {
+    x: Math.floor(Math.random() * width),
+    y: Math.floor(Math.random() * height),
+  };
+}


Top-level declarations risk global namespace collisions

Declaring variables or functions at the top level in non-module script contexts can add them to the global scope, risking name collisions and unpredictable behavior if other scripts define the same names. The function getRandomPosition defined at the top-level may therefore accidentally conflict in non-module environments.
Avoid polluting the global scope by using module syntax, wrapping code in an IIFE, or explicitly attaching variables to a controlled namespace such as window in browsers to isolate them.

deepsource-io · 2026-04-06T22:14:29Z

games/snake/src/game/engine/grid.ts

+export function getOccupiedPositions(state: GameState): Position[] {
+  const occupied: Position[] = [...state.snake];
+  occupied.push(state.food.position);
+  if (state.powerUp) {
+    occupied.push(state.powerUp.position);
+  }
+  for (const obstacle of state.obstacles) {
+    occupied.push(obstacle.position);
+  }
+  return occupied;
+}


Top-level variable declarations risk global scope pollution

The variable occupied declared inside the getOccupiedPositions function is safe from polluting the global scope because it is function-scoped, not top-level in the module. However, the warning suggests caution with top-level declarations as they can collide with globals in certain environments.

Ensure all variables intended to be local are declared inside functions or modules to avoid polluting the global scope and prevent runtime collisions.

deepsource-io · 2026-04-06T22:14:29Z

games/snake/src/game/engine/grid.ts

+export function getSafeRandomPosition(
+  width: number,
+  height: number,
+  occupied: Position[],
+  maxAttempts = 1000,
+): Position | null {
+  for (let i = 0; i < maxAttempts; i++) {
+    const pos = getRandomPosition(width, height);
+    if (!isPositionInList(pos, occupied)) {
+      return pos;
+    }
+  }
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const pos = { x, y };
+      if (!isPositionInList(pos, occupied)) {
+        return pos;
+      }
+    }
+  }
+
+  return null;
+}


Top-level declarations risk global scope pollution

Top-level declarations like functions or variables can unintentionally add to the global scope, especially in browser environments, causing conflicts with other scripts and unpredictable behavior. This includes the getSafeRandomPosition function if the file isn't treated as a module.

Use ES modules syntax or wrap declarations in closures to confine scope, preventing global scope pollution and potential conflicts.

deepsource-io · 2026-04-06T22:14:29Z

games/snake/src/game/engine/grid.ts

+  return occupied;
+}
+
+export function getSafeRandomPosition(


High decision points in `getSafeRandomPosition` reduce maintainability

The function getSafeRandomPosition has cyclomatic complexity exceeding recommended thresholds, indicating many paths and decision points. This complexity makes the function harder to understand, maintain, and increases the chance of bugs.

Break getSafeRandomPosition into smaller helper functions and simplify complex logic to reduce its cyclomatic complexity, improving code clarity and testability.

deepsource-io · 2026-04-09T06:18:05Z

app/games/snake/page.tsx

+
+export default function SnakePage() {
+  return (
+    <div>


Excessive JSX nesting hampers code readability

Deep nesting of JSX elements makes components difficult to read and understand, increasing the likelihood of mistakes during development and maintenance. This impacts the code's clarity and maintainability.

Refactor deeply nested JSX by creating smaller reusable components or passing props to consolidate nested elements into simpler structures.

deepsource-io · 2026-04-09T06:18:05Z

games/snake/src/game/engine/grid.ts

+export function isPositionInList(pos: Position, list: Position[]): boolean {
+  return list.some((p) => isPositionEqual(p, pos));
+}


Global variable usage risks name collisions

Declaring variables or functions in the global scope risks collisions with other scripts' globals, causing unpredictable runtime behavior. This is especially problematic in browser scripts where global scope is shared.
Use module-scoped variables or immediately-invoked function expressions (IIFE) to contain variables locally within the module or function. This prevents accidental global pollution and keeps the namespace clean.

deepsource-io · 2026-04-09T06:18:05Z

games/snake/src/components/GameHUD.tsx

+  const [now, setNow] = useState(0);
+
+  useEffect(() => {
+    if (activePowerUps.length === 0) return;
+
+    const id = window.setInterval(() => {
+      setNow(performance.now());
+    }, 250);


`useState(0)` causes incorrect `remaining` power-up countdown

GameHUD renders PowerUpIndicator with a stale now value on first frame. Users can see power-up timers jump from a large value to the real duration, which is a reliability/UI correctness bug.
Initialize now with performance.now() or set it immediately before starting setInterval.

deepsource-io · 2026-04-09T06:18:05Z

games/snake/src/components/SnakeGame.tsx

+      const inFullscreen = Boolean(document.fullscreenElement);
+      setIsFullscreen(inFullscreen);


`document.fullscreenElement` only check breaks WebKit fullscreen state

toggleFullscreen supports withWebkit.webkitRequestFullscreen, but onFullscreenChange derives state only from document.fullscreenElement. In Safari-style implementations, the component may never mark fullscreen active, so labels, cursor behavior, and exit flow become inconsistent.

Use WebKit-compatible checks/events. Add document.webkitFullscreenElement fallback and subscribe to webkitfullscreenchange alongside fullscreenchange.

jbampton · 2026-04-10T04:59:03Z

Please resolve the conflicts

BaseMax added 8 commits March 27, 2026 09:27

Adding theme switcher component/btn

5f9599e

Merge branch 'main' of https://github.com/metropolis-retro/metropolis…

2e07f61

…-retro.github.io t bnrach

Merge branch 'main' of https://github.com/metropolis-retro/metropolis…

da1c93d

…-retro.github.io

Merge branch 'main' of https://github.com/metropolis-retro/metropolis…

fd9eb1c

…-retro.github.io t branch

Merge branch 'main' of https://github.com/metropolis-retro/metropolis…

d487e3c

…-retro.github.io

Merge branch 'main' of https://github.com/metropolis-retro/metropolis…

8f707c8

…-retro.github.io

Init and start putting snake game inside the project

2ae5dd5

Integrate the game into the nextjs project

68bd352

BaseMax requested a review from jbampton as a code owner April 5, 2026 20:22

vercel bot deployed to Preview – metropolis-retro April 5, 2026 20:23 View deployment

gemini-code-assist bot reviewed Apr 5, 2026

View reviewed changes

games/snake/package.json Show resolved Hide resolved

games/snake/src/game/hooks/useGameController.ts Show resolved Hide resolved

games/snake/src/game/hooks/useGameController.ts Outdated Show resolved Hide resolved

games/snake/src/game/hooks/useTouchControls.ts Show resolved Hide resolved

run pre-commit

e0f140a

vercel bot deployed to Preview – metropolis-retro-github-io April 5, 2026 20:36 View deployment

vercel bot deployed to Preview – metropolis-retro April 5, 2026 20:37 View deployment

fix precommit

066860b

vercel bot deployed to Preview – metropolis-retro April 5, 2026 20:41 View deployment

vercel bot deployed to Preview – metropolis-retro-github-io April 5, 2026 20:41 View deployment

BaseMax added 2 commits April 5, 2026 22:44

remove extra text

174bc84

fix

4775df4

vercel bot deployed to Preview – metropolis-retro April 5, 2026 20:45 View deployment

vercel bot deployed to Preview – metropolis-retro-github-io April 5, 2026 20:45 View deployment

Fix ai feedback, update packages

643b3d8

vercel bot deployed to Preview – metropolis-retro April 5, 2026 20:50 View deployment

vercel bot deployed to Preview – metropolis-retro-github-io April 5, 2026 20:51 View deployment

gemini-code-assist bot reviewed Apr 5, 2026

View reviewed changes

games/snake/src/game/engine/gameTick.ts Outdated Show resolved Hide resolved

games/snake/package.json Show resolved Hide resolved

Fix ai feedback

35ca6cf

vercel bot deployed to Preview – metropolis-retro-github-io April 5, 2026 21:00 View deployment

github-project-automation bot moved this to Backlog in METROPOLIS Apr 6, 2026

jbampton moved this from Backlog to In progress in METROPOLIS Apr 6, 2026

jbampton added this to the Retro milestone Apr 6, 2026

vercel bot deployed to Preview – metropolis-retro-github-io April 6, 2026 10:02 View deployment

gemini-code-assist bot reviewed Apr 6, 2026

View reviewed changes

Merge branch 'main' into max-updates-games-snake

476d710

vercel bot deployed to Preview April 6, 2026 13:18 View deployment

Merge branch 'main' into max-updates-games-snake

8d71a74

vercel bot deployed to Preview April 6, 2026 16:03 View deployment

Merge branch 'main' into max-updates-games-snake

8aab712

vercel bot deployed to Preview April 6, 2026 18:51 View deployment

Fix all AI feedbacks

1916c7d

vercel bot deployed to Preview April 6, 2026 21:47 View deployment

deepsource-io bot reviewed Apr 6, 2026

View reviewed changes

jbampton moved this from In progress to In review in METROPOLIS Apr 6, 2026

Merge branch 'main' into max-updates-games-snake

bfc82f0

vercel bot deployed to Preview April 6, 2026 22:05 View deployment

BaseMax added 2 commits April 7, 2026 00:09

Fix some AI feedbacks

49ecd24

Merge branch 'max-updates-games-snake' of https://github.com/metropol…

f162c6c

…is-retro/metropolis-retro.github.io into max-updates-games-snake

vercel bot deployed to Preview April 6, 2026 22:09 View deployment

deepsource-io bot reviewed Apr 6, 2026

View reviewed changes

Merge branch 'main' into max-updates-games-snake

2cbb0dd

vercel bot deployed to Preview April 9, 2026 06:12 View deployment

deepsource-io bot reviewed Apr 9, 2026

View reviewed changes

		const inFullscreen = Boolean(document.fullscreenElement);
		setIsFullscreen(inFullscreen);

Uh oh!

Conversation

BaseMax commented Apr 5, 2026

Uh oh!

vercel bot commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

BaseMax commented Apr 5, 2026

Uh oh!

BaseMax commented Apr 5, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

socket-security bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jbampton commented Apr 6, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

socket-security bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

deepsource-io bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Feedback

Code Review Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

BaseMax commented Apr 6, 2026

Uh oh!

deepsource-io bot Apr 6, 2026

Choose a reason for hiding this comment

Top-level declarations pollute global scope causing collisions

Uh oh!

deepsource-io bot Apr 6, 2026

Choose a reason for hiding this comment

Invalid import statement with non-standard syntax

Uh oh!

deepsource-io bot Apr 6, 2026

Choose a reason for hiding this comment

Implicit global variables risk name collisions

Uh oh!

deepsource-io bot Apr 6, 2026

Choose a reason for hiding this comment

Top-level variable declaration pollutes global scope in ES module

Uh oh!

deepsource-io bot Apr 6, 2026

Choose a reason for hiding this comment

Top-level declarations in `GameBoard` risk global scope pollution

vercel bot commented Apr 5, 2026 •

edited

Loading

socket-security bot commented Apr 6, 2026 •

edited

Loading

socket-security bot commented Apr 6, 2026 •

edited

Loading

deepsource-io bot commented Apr 6, 2026 •

edited

Loading