fix level rendering in the my levels page

Author: SteveMan67

docs/tileset.md

@@ -105,7 +105,3 @@ The player spritesheet is a 10x1 strip of tiles.
 # Submitting your own tileset
 
 To submit your own tileset, make a pull request with all the player files and the json file. Have fun!
-
-**One final note:**
-
-Currently switching tilesets just uses whatever tileId that the previous had, and if it doesn't have one for that id, there's no block in the level. I'm currently working on a function to automatically switch between the tilesets regardless of id, but for the time being make sure the `"id"` property of each tile matches up with the existing tilesets.

frontend/javascript/my-levels.js

@@ -211,47 +211,199 @@ function calculateAdjacency(tileIdx, tileId, tiles, tileset, w, h) {
 const tilesetMap = new Map()
 const imgMap = new Map()
 
-async function loadTileset(tilesetPath) {
-  if (tilesetMap.has(tilesetPath)) return tilesetMap.get(tilesetPath)
-  const res = await fetch(tilesetPath)
-  const rawJson = await res.json()
-  const tilesetJson = rawJson.tiles
-  const tileset = {}
-  const path = rawJson.path
-
-  const promises = tilesetJson.map(async (def) => {
+async function loadSpriteSheetTileset(manifest) {
+  const tileset = []
+  const raw = await fetch(manifest.spritesheetPath)
+  const blob = await raw.blob()
+
+  const spriteSheet = await new Promise((resolve, reject) => {
     const img = new Image()
-    img.src = path + def.file
-    await new Promise(resolve => {
-      img.onload = resolve
-      img.onerror = resolve
-    })
+    img.onload = () => resolve(img)
+    img.onerror = reject
+    img.src = manifest.spritesheetPath
+  })
 
-    tileset[def.id] = { ...def, triggerAdjacency: def.triggerAdjacency, image: img, images: [] }
-
-    if (def.type == "adjacency" || def.type == "rotation") {
-      const w = img.naturalHeight
-      if (w > 0) {
-        const count = Math.floor(img.naturalWidth / w)
-        for (let i = 0; i < count; i++) {
-          const canvas = document.createElement('canvas')
-          canvas.width = w
-          canvas.height = w
-          const ctx = canvas.getContext('2d')
-          ctx.drawImage(img, i * w, 0, w, w, 0, 0, w, w)
-
-          const sliceImg = new Image()
-          sliceImg.src = canvas.toDataURL()
-          tileset[def.id].images[i] = sliceImg
+  const tileWidth = manifest.tileWidth
+  const width = spriteSheet.naturalWidth / tileWidth
+  console.log(`width: ${width}`)
+  for (const tile of manifest.tiles) {
+    const dpr = window.devicePixelRatio
+    const canvas = document.createElement("canvas")
+    const ctx = canvas.getContext('2d')
+    canvas.width = width
+    canvas.height = width
+    ctx.imageSmoothingEnabled = false
+    canvas.style.imageRendering = 'pixelated'
+
+    ctx.drawImage(spriteSheet, tile.x * width, tile.y * width, width, width, 0, 0, width, width)
+
+    const images = []
+
+    if (tile.type === "adjacency") {
+      for (let i = 0; i < 16; i++) {
+        const subCanvas = document.createElement("canvas")
+        const subCtx = subCanvas.getContext("2d")
+        subCtx.setTransform(dpr, 0, 0, dpr, 0, 0)
+        subCanvas.width = width
+        subCanvas.height = width
+        subCtx.imageSmoothingEnabled = false
+        subCanvas.style.imageRendering = 'pixelated'
+
+        let x = tile.x + i
+        let y = tile.y
+
+        if (x >= tileWidth) {
+          y = Math.floor(x / tileWidth) + y
+          x = x % tileWidth
         }
+        subCtx.drawImage(spriteSheet, x * width, y * width, width, width, 0, 0, width, width)
+        images.push(subCanvas)
+      }
+    } else if (tile.type === "rotation") {
+      for (let i = 0; i < 4; i++) {
+        const subCanvas = document.createElement("canvas")
+        const subCtx = subCanvas.getContext("2d")
+        subCtx.setTransform(dpr, 0, 0, dpr, 0, 0)
+        subCanvas.width = width
+        subCanvas.height = width
+        subCtx.imageSmoothingEnabled = false
+        subCanvas.style.imageRendering = 'pixelated'
+
+        let x = tile.x + i
+        let y = tile.y
+
+        if (x >= tileWidth) {
+          y = Math.floor(x / tileWidth) + y
+          x = x % tileWidth
+        }
+        subCtx.drawImage(spriteSheet, x * width, y * width, width, width, 0, 0, width, width)
+        images.push(subCanvas)
       }
     }
-  })
-  await Promise.all(promises)
-  tilesetMap.set(tilesetPath, tileset)
+
+    let minimapColor = 'rgba(0, 0, 0, 0)'
+    try {
+      const imgData = ctx.getImageData(0, 0, width, width).data
+      const colorCounts = {}
+      let maxCount = 0
+      for (let i = 0; i < imgData.length; i += 4) {
+        const r = imgData[i]
+        const g = imgData[i + 1]
+        const b = imgData[i + 2]
+        const a = imgData[i + 3]
+
+        if (a < 128) continue
+        const rgb = `rgb(${r}, ${g}, ${b})`
+        colorCounts[rgb] = (colorCounts[rgb] || 0) + 1
+
+        if (colorCounts[rgb] > maxCount) {
+          maxCount = colorCounts[rgb]
+          minimapColor = rgb
+        }
+      }
+    } catch (e) {
+      console.warn("could not calculate minimap color", e)
+    }
+
+    const tileObject = {
+      ...tile,
+      minimapColor: minimapColor,
+      image: canvas,
+    }
+    if (images.length > 0) {
+      tileObject.images = images
+    }
+    tileset.push(tileObject)
+  }
+  console.log(tileset)
   return tileset
 }
 
+export async function loadTileset(manifestPath) {
+  if (manifestPath === "/assets/medium-spritesheet.json") manifestPath = "/assets/medium.json"
+  if (tilesetMap.has(manifestPath)) {
+    const tileset = tilesetMap.get(manifestPath)
+    return tileset
+  }
+
+  const fetchPromise = fetch(manifestPath)
+    .then(response => response.json())
+    .then(async (manifest) => {
+      if (manifest.type == "spritesheet") {
+        const tileset = await loadSpriteSheetTileset(manifest)
+
+        const characterImage = await new Promise((resolve) => {
+          const img = new Image()
+          const prefix = manifest.path + "/"
+          img.onload = () => resolve(img)
+          img.onerror = (e) => {
+            console.error(`failed to load character image from: ${srcPath}`, e)
+            resolve(null)
+          }
+          img.src = prefix + manifest.characterFile
+        })
+
+        tilesetMap.set(manifestPath, tileset)
+        console.log(characterImage)
+        return tileset
+      }
+
+      let loadedCount = 0
+      const totalCount = manifest.tiles.length + 1
+
+      function updateProgress() {
+        loadedCount++
+        window.dispatchEvent(new CustomEvent('loading:progress', {
+          detail: { loaded: loadedCount, total: totalCount }
+        }))
+      }
+
+      const promises = manifest.tiles.map(tileData => {
+
+        if (!tileData.file) {
+          updateProgress()
+          return Promise.resolve(tileData)
+        }
+        return new Promise((resolve, reject) => {
+          const img = new Image()
+          img.src = manifest.path + tileData.file
+          img.onload = () => {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+            canvas.width = img.height || 1
+            canvas.height = img.height || 1
+            ctx.drawImage(img, 0, 0)
+
+            updateProgress()
+            resolve({ ...tileData, image: img })
+          }
+          img.onerror = (e) => {
+            updateProgress()
+            reject(e)
+          }
+        })
+      })
+
+      return Promise.all(promises)
+        .then((items) => {
+          const tileset = []
+          items.forEach(item => {
+            tileset[item.id] = item
+          })
+
+          tilesetMap.set(manifestPath, tileset)
+          return tileset
+        })
+
+    })
+
+  tilesetMap.set(manifestPath, fetchPromise)
+
+  return fetchPromise
+
+}
+
+
 export async function renderLevelPreview(canvas, levelData) {
   const tilesetPath = levelData.data ? levelData.data.tilesetPath : "/assets/medium.json"
   let tileset = await loadTileset(tilesetPath)