Load game content (code + images) from local instead of github. Fix m…

…etadata issues resulting in 404's. Fix client-side thumbnail caching

games/metadata.json

@@ -1219,15 +1219,15 @@
  "filename": "BoxCubeGuy",
  "title": "BoxCubeGuy",
  "author": "CaptainATW",
- "img": "CaptainATW",
+ "img": "BoxCubeGuy",
  "tags": ["sokoban-style"],
  "addedOn": "2022-11-25"
  },
  {
  "filename": "Asteroid_Field",
  "title": "Asteroid_Field",
  "author": "Kaitlyn",
- "img": "CaptainATW",
+ "img": "",
  "tags": ["catch"],
  "addedOn": "2022-11-25"
  },
@@ -2835,7 +2835,7 @@
  "filename": "thunder_bowl",
  "title": "thunder_bowl",
  "author": "Alex",
- "img": "thunderball",
+ "img": "",
  "tags": [],
  "addedOn": "2023-08-03"
  },
@@ -3139,7 +3139,7 @@
  "filename": "Musi",
  "title": "Musi",
  "author": "levi - blockish",
- "img": "image_2023-10-22_152001392",
+ "img": "",
  "tags": ["memory"],
  "addedOn": "2023-10-25"
  },

src/pages/api/thumbnail.ts

@@ -1,6 +1,7 @@
 import type { APIRoute } from 'astro'
 import { baseEngine, palette } from 'sprig/base'
 import { RawThumbnail, Thumbnail } from '../../lib/thumbnail'
+import fs from 'fs'
 
 const evalGameScript = (script: string) => {
  const { api } = baseEngine()
@@ -93,23 +94,26 @@ const drawGameImage = (src: string): RawThumbnail => {
 
 export const get: APIRoute = async ({ url }) => {
  const name = url.searchParams.get('key') || ''
- const srcUrl = `https://raw.githubusercontent.com/hackclub/sprig/main/games/${encodeURIComponent(name)}.js`
+ let gameContentString = loadGameContentFromDisk(name)
+ let gameImageBase64 = loadImageBase64FromDisk(name)
 
  let thumbnail: Thumbnail
  try {
- // Try fetching a custom image (PNG only)
- const imgUrl = `https://raw.githubusercontent.com/hackclub/sprig/main/games/img/${encodeURIComponent(name)}.png`
- const image = await fetch(imgUrl)
- if (image.status === 200) {
+ if (gameImageBase64 != null) 
+ {
+ // Try fetching a custom image (PNG only)
  thumbnail = {
  kind: 'png',
- data: Buffer.from(await image.arrayBuffer()).toString('base64')
+ data: gameImageBase64
  }
  } else {
- // Fetch the script and try to run the game
- const src = await fetch(srcUrl).then((res) => res.text())
- thumbnail = drawGameImage(src)
- }
+ if (gameContentString == null) {
+ throw new Error('No image found, no game content found - weird')
+ } else {
+ // Fetch the script and try to run the game 
+ thumbnail = drawGameImage(gameContentString as string)
+ }
+ } 
  } catch (error) {
  // If everything breaks, use a default image
  console.error(error)
@@ -127,7 +131,23 @@ export const get: APIRoute = async ({ url }) => {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET,OPTIONS',
  'Access-Control-Allow-Headers': '*',
- 'Cache-Control': 's-maxage=60, stale-while-revalidate=604800'
+ 'Cache-Control': 'max-age=86400'
  }
  })
 }
+function loadImageBase64FromDisk(name: string) {
+ try {
+ let imgPath = `./games/img/${name}.png`
+ if (!fs.existsSync(imgPath)) return null
+ return fs.readFileSync(imgPath).toString("base64")
+ } catch {
+ return null
+ }
+}
+
+function loadGameContentFromDisk(name: string) { 
+ let gameContentPath = `./games/${name}.js`
+ if (!fs.existsSync(gameContentPath)) return null
+ return fs.readFileSync(gameContentPath).toString()
+}
+

src/pages/gallery/[filename].astro

@@ -8,13 +8,15 @@ import { getSession } from '../../lib/game-saving/account'
 import { getGalleryGames } from '../../lib/game-saving/gallery'
 import MobilePlayer from '../../components/big-interactive-pages/mobile-player'
 import { mobileUserAgent } from '../../lib/utils/mobile'
-
+import fs from 'fs'
 const session = await getSession(Astro.cookies)
 
 const filename = Astro.params.filename ?? ''
-const res = await fetch(`https://raw.githubusercontent.com/hackclub/sprig/main/games/${encodeURIComponent(filename)}.js`)
-if (!res.ok) return Astro.redirect('/404', 302)
-const code = await res.text()
+const gameContentPath = `./games/${filename}.js`
+const code = fs.readFileSync(gameContentPath).toString()
+if (code == null) {
+ return Astro.redirect('/404', 302)
+}
 
 const fileRegexp = /^.*\/(.+)-(\d+)\.md$/
 

src/pages/gallery/gallery.tsx

@@ -172,7 +172,7 @@ export default function Gallery({ games, tags }: { games: GameMetadata[], tags:
 
  <div id="games">
  {
- gamesState.map((game: GalleryGameMetadata) => (
+ gamesState.map((game: GalleryGameMetadata) => ( 
  <a
  style={`display:${game.show ? "block" : "none"}`}
  class="game"
@@ -191,7 +191,7 @@ export default function Gallery({ games, tags }: { games: GameMetadata[], tags:
  ) : null}
 
  <img
- src={game.img}
+ src={`gallery/${game.img}`}
  alt={`preview of ${game.filename}.js`}
  />
  <h3>{game.title}</h3>