WIP - retrieve game by uuid_version

src/components/App.tsx

@@ -7,6 +7,11 @@ import { Footer } from './Footer'
 import '../scss/App.scss'
 import { Retrieve } from './Retrieve'
 import { Header } from './Header'
+import { Game } from './Game'
+
+if (window.nostr){
+  await window.nostr.getPublicKey()
+}
 
 export const App = () => {
   const [playing, setPlaying] = useState(false)
@@ -19,6 +24,7 @@ export const App = () => {
           <Routes>
             <Route path="/" element={<Home/>}/>
             <Route path="/load" element={<Retrieve setPlaying={setPlaying} />}/>
+            <Route path="/game/:uuid" element={<Game setPlaying={setPlaying}/>} />
             <Route path="/publish" element={<Publish/>} />
           </Routes>
           { playing ? null : <Footer/> }

src/components/Game.tsx

@@ -0,0 +1,7 @@
+import { useParams } from "react-router-dom"
+import { Retrieve } from "./Retrieve"
+
+export const Game: React.FC<{setPlaying: React.Dispatch<React.SetStateAction<boolean>>}> = ({setPlaying}) => {
+  const { uuid }: { uuid?: string } = useParams<{ uuid?: string }>()
+  return <Retrieve uuid={uuid} setPlaying={setPlaying} />
+}

src/components/Home.tsx

@@ -4,6 +4,7 @@ import { NDKContext } from '../providers/NDKProvider'
 import { Publish } from './Publish'
 
 export const Home = () => {
+  const [showGames, setShowGames] = useState<boolean>(true)
   const ndk = useContext(NDKContext)
   const [games, setGames] = useState<NDKEvent[]>([])
 
@@ -33,9 +34,8 @@ export const Home = () => {
   return (
     <div id="component-home" className="primary">
       <div className="layout">
-        <h2>Games</h2>
-        { latestGames() }
-        <Publish/>
+        { showGames ?  <><h2>Games</h2>{latestGames()}</> : null }
+        <Publish setShowGames={setShowGames}/>
       </div>
     </div>
   )

src/components/Publish.tsx

@@ -14,7 +14,7 @@ const PUBLISH_BUTTON_TEXT = "Publish ✨"
 //     }
 // }
 
-export const Publish = () => {
+export const Publish: React.FC<{setShowGames: React.Dispatch<React.SetStateAction<boolean>>}> = ({setShowGames}) => {
   const [upload, setUpload] = useState<FileList | null>(null)
   const [title, setTitle] = useState<string>('')
   const [content, setContent] = useState<string>('')
@@ -77,6 +77,8 @@ export const Publish = () => {
     if (!ndk) return
     if (!upload) return
 
+    setShowGames(false)
+
     // publish kind1, get id
     const kind1 = await publishKind1(ndk, title, content, version, uuid, upload)
 

src/components/Retrieve.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useContext } from 'react'
+import { useRef, useState, useContext, useEffect } from 'react'
 import { nip19 } from 'nostr-tools'
 import { NDKFilter } from '@nostr-dev-kit/ndk'
 import { NDKContext } from '../providers/NDKProvider'
@@ -8,12 +8,33 @@ import Pico8Game from './Pico8Game'
 
 // TODO: support NIP19 nevents as well as hex
 
-export const Retrieve: React.FC<{setPlaying: React.Dispatch<React.SetStateAction<boolean>>}> = ({ setPlaying }) => {
+export const Retrieve: React.FC<{setPlaying: React.Dispatch<React.SetStateAction<boolean>>, uuid?: string}> = ({ setPlaying, uuid }) => {
   const ndk = useContext(NDKContext)
   const neventRef = useRef<HTMLInputElement>(null)
   const [gettingGame, setGettingGame] = useState(false)
   const [assets, setAssets] = useState<{[key: string]: string}>({})
 
+  useEffect(() => {
+    // TODO: validate that the uuid is properly formatted
+    // fetch the game by uuid
+    const fetchGame = async () => {
+      if (!ndk) return
+      if (!uuid) return
+      const gameFilter: NDKFilter = { "#u": [uuid], "kinds": [1] }
+      const game = await ndk.fetchEvent(gameFilter)
+      if (!game) {
+        console.log('Game not found')
+        return
+      } 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const chunkFilter: NDKFilter = { "#e": [game.id], "kinds": [BLOB as any] }
+      const assetChunks = await ndk.fetchEvents(chunkFilter)
+      const assets = stitchChunks(assetChunks)
+      setAssets(assets)
+    }
+    fetchGame()
+  }, [uuid])
+
   const getGame = async () => {
     if (!ndk) return
     if (gettingGame) return
@@ -56,17 +77,25 @@ export const Retrieve: React.FC<{setPlaying: React.Dispatch<React.SetStateAction
 
   return (
     <div id="component-retrieve" className="primary">
-      { Object.keys(assets).length > 0 ? 
-      <div className="game-layout">{loadGame()}</div> : 
-      <div className="layout">
-        <h2>Load a Game</h2>
-        <label htmlFor="nevent">Enter game nevent:</label><br/>
-        <br/>
-        <input ref={neventRef} type="text" placeholder="Event name" />
-        <br/>
-        <br/>
-        <button className="button" disabled={gettingGame || !ndk} onClick={getGame}>Play 🕹️</button>
-      </div> }
+      { 
+      Object.keys(assets).length > 0 
+      ? 
+        <div className="game-layout">{loadGame()}</div> 
+      : 
+        uuid 
+        ? 
+          <h2>Loading...</h2> 
+        :
+          <div className="layout">
+            <h2>Load a Game</h2>
+            <label htmlFor="nevent">Enter game nevent:</label><br/>
+            <br/>
+            <input ref={neventRef} type="text" placeholder="Event name" />
+            <br/>
+            <br/>
+            <button className="button" disabled={gettingGame || !ndk} onClick={getGame}>Play 🕹️</button>
+          </div>
+      }
     </div>
   )
 }

src/libraries/PublishGame.tsx

@@ -33,7 +33,7 @@ export const publishGame = async (ndk: NDK, base64: string, file: File, kind1: N
 export const publishKind1 = async (ndk: NDK, title: string, content: string, version: string, gameuuid: string, upload: FileList) => {
   const uuid = gameuuid || uuidv4();
   const semver = version || "0.1.0"
-  const gameid = `${uuid}:${semver}`
+  const gameid = `${uuid}_${semver}`
   const ndkEvent = new NDKEvent(ndk)
 
   // TODO: nostr.build API to upload box art