Max updates: Game series - Snake

Dockerfile.prod

@@ -0,0 +1,30 @@
+FROM oven/bun:1-alpine AS builder
+
+WORKDIR /app
+
+COPY package.json package-lock.json* bun.lock* ./
+RUN bun install --frozen-lockfile
+
+COPY . .
+
+RUN bun run build
+
+FROM oven/bun:1-alpine AS runner
+
+RUN addgroup -g 1001 -S nextjs && \
+    adduser -S nextjs -u 1001 -G nextjs
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV HOSTNAME="0.0.0.0"
+
+COPY --from=builder --chown=nextjs:nextjs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nextjs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nextjs /app/public ./public
+
+USER nextjs
+
+EXPOSE 3000
+
+CMD ["bun", "server.js"]

app/games/page.tsx

@@ -45,9 +45,9 @@ const games: GameCard[] = [
   {
     title: "Snake",
     description: "Guide the snake to eat food and grow longer without hitting the walls or yourself.",
-    href: "#",
+    href: "/games/snake",
     emoji: "🐍",
-    available: false,
+    available: true,
   },
   {
     title: "Tetris",

app/games/snake/page.tsx

@@ -0,0 +1,56 @@
+import type { Metadata } from "next"
+import Link from "next/link"
+import { Header } from "@/components/layout/header"
+import { Footer } from "@/components/layout/footer"
+import { SITE_URL, TITLE_BASE, pageKeywords } from "@/lib/seo"
+import { ArrowLeft } from "lucide-react"
+import { SnakeEmbed } from "./snake-embed"
+
+export const metadata: Metadata = {
+  title: "Snake",
+  description:
+    "Play Snake in your browser. Collect food, grow longer, and avoid crashing into yourself.",
+  keywords: pageKeywords(["snake", "retro game", "arcade game", "browser game"]),
+  alternates: {
+    canonical: "/games/snake",
+  },
+  openGraph: {
+    title: `Snake | ${TITLE_BASE}`,
+    description: "Play Snake in your browser. Collect food, grow longer, and avoid crashing into yourself.",
+    url: `${SITE_URL}/games/snake`,
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Snake | ${TITLE_BASE}`,
+    description: "Play Snake in your browser. Collect food, grow longer, and avoid crashing into yourself.",
+  },
+}
+
+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>
+  )
+}

app/games/snake/snake-embed.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import dynamic from "next/dynamic"
+
+const SnakeApp = dynamic(() => import("@games/snake"), { ssr: false })
+
+export function SnakeEmbed() {
+  return (
+    <div
+      className="relative w-full overflow-hidden rounded-xl border border-border bg-slate-950"
+      style={{ aspectRatio: "4/3", maxHeight: "80vh" }}
+    >
+      <SnakeApp />
+    </div>
+  )
+}

components/ui/magnetic-cursor.tsx

@@ -106,7 +106,7 @@ export function MagneticCursor() {
 
       <style jsx global>{`
         @media (min-width: 768px) {
-          * {
+          body:not(.show-system-cursor) *:not(.show-system-cursor):not(.show-system-cursor *) {
             cursor: none !important;
           }
         }