Add battleship

demo-react/functions/auth.ts

@@ -1,5 +1,9 @@
 import { AccessToken, PeerClaims, PeerPolicy } from "@pulsebeam/server/workerd";
 
+// This is an example Cloudflare Page Function for Serving PulseBeam Tokens
+// For more details, see
+//  https://pulsebeam.dev/docs/guides/token/#cloudflare-page-functions
+
 interface Env {
   PULSEBEAM_API_KEY: string;
   PULSEBEAM_API_SECRET: string;

demo-react/src/peer.ts

@@ -93,7 +93,7 @@ export const usePeerStore = create<PeerState>((set, get) => ({
 
       p.onsession = (s) => {
         // For you app consider your UI/UX in what you want to support
-        // In this app, we only support multiple sessions at a time.
+        // In this app, we support multiple sessions at a time.
         const id = `${s.other.peerId}:${s.other.connId}`;
 
         s.ontrack = ({ streams }) => {

multiplayer-games/battleship/.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

multiplayer-games/battleship/README

@@ -0,0 +1,48 @@
+# Battleship Game
+
+A peer-to-peer battleship game using WebRTC and the PulseBeam SDK.
+
+## Overview
+
+This application allows two players to connect via WebRTC and play a real-time battleship game. One player controls a battleship that can move around the board, while the other player controls a cannon trying to hit the battleship.
+
+## Features
+
+- Peer-to-peer connection using WebRTC
+- Real-time gameplay with no server requirement (after initial connection)
+- Simple and intuitive UI
+- Responsive design
+- Debug panel for troubleshooting
+
+## Local Development Setup
+
+### Prerequisites
+
+- Node.js (v16 or higher)
+- npm or yarn
+
+### Installation
+
+1. Clone the repository:
+   \`\`\`
+   git clone [repository-url]
+   cd battleship-game
+   \`\`\`
+
+2. Install dependencies:
+   \`\`\`
+   npm install --force
+   \`\`\`
+
+   > **Note:** The `--force` flag is necessary due to some dependency version conflicts.
+
+3. Start the development server:
+   \`\`\`
+   npm run dev
+   \`\`\`
+
+4. Open your browser and navigate to:
+   \`\`\`
+   http://localhost:3000
+   \`\`\`
+

multiplayer-games/battleship/app/globals.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+

multiplayer-games/battleship/app/layout.tsx

@@ -0,0 +1,34 @@
+import type React from "react"
+import "./globals.css"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import { ThemeProvider } from "@/components/theme-provider"
+
+const inter = Inter({ subsets: ["latin"] })
+
+// Update the metadata
+export const metadata: Metadata = {
+  title: "Battleship Game",
+  description: "A peer-to-peer battleship game using WebRTC",
+    generator: 'v0.dev'
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <ThemeProvider attribute="class" defaultTheme="light">
+          {children}
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+
+
+
+import './globals.css'

multiplayer-games/battleship/app/page.tsx

@@ -0,0 +1,55 @@
+"use client"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Bug } from "lucide-react"
+import { StartPage } from "@/components/start-page"
+import { DebugPanel } from "@/components/debug-panel"
+import GameRoom from "@/components/game-room"
+import { DEFAULT_GROUP } from "@/lib/token-service"
+import { Logger } from "@/lib/logger"
+// Remove the direct import of usePeerStore
+
+export default function Home() {
+  const [isStarted, setIsStarted] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [showDebug, setShowDebug] = useState(false)
+
+  // The rest of your component remains the same
+  const handleGameStart = () => {
+    setIsStarted(true)
+  }
+
+  const toggleDebug = () => {
+    setShowDebug(!showDebug)
+    Logger.log(`Debug panel ${!showDebug ? "opened" : "closed"}`)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-4">
+      <div className="max-w-6xl mx-auto">
+        <header className="mb-8 text-center relative">
+          <h1 className="text-3xl font-bold text-gray-800">Battleship Game</h1>
+          <p className="text-gray-600">A peer-to-peer battleship game using WebRTC</p>
+
+          <Button variant="outline" size="sm" onClick={toggleDebug} className="absolute right-0 top-0">
+            <Bug className="h-4 w-4 mr-2" />
+            Debug
+          </Button>
+        </header>
+
+        {showDebug && (
+          <DebugPanel onClose={toggleDebug} errorMessage={errorMessage} setErrorMessage={setErrorMessage} />
+        )}
+
+        <main>
+          {!isStarted ? (
+            <StartPage onGameStart={handleGameStart} errorMessage={errorMessage} setErrorMessage={setErrorMessage} />
+          ) : (
+            <GameRoom groupId={DEFAULT_GROUP} logger={Logger} />
+          )}
+        </main>
+      </div>
+    </div>
+  )
+}
+

multiplayer-games/battleship/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}