info overlay + script to update images in games and logs

src/common/GameCommon.ts

@@ -162,11 +162,12 @@ function getPieceCount(gameId: string): number {
 }
 
 function getImageUrl(gameId: string): string {
-  return GAMES[gameId].puzzle.info.imageUrl
-}
-
-function setImageUrl(gameId: string, imageUrl: string): void {
-  GAMES[gameId].puzzle.info.imageUrl = imageUrl
+  const imageUrl = GAMES[gameId].puzzle.info.image?.url
+    || GAMES[gameId].puzzle.info.imageUrl
+  if (!imageUrl) {
+    throw new Error('[2021-07-11] no image url set')
+  }
+  return imageUrl
 }
 
 function getScoreMode(gameId: string): ScoreMode {
@@ -895,7 +896,6 @@ export default {
   getFinishedPiecesCount,
   getPieceCount,
   getImageUrl,
-  setImageUrl,
   get,
   getAllGames,
   getPlayerBgColor,

src/common/Types.ts

@@ -93,7 +93,7 @@ export interface Image {
 
 export interface GameSettings {
   tiles: number
-  image: Image
+  image: ImageInfo
   scoreMode: ScoreMode
   shapeMode: ShapeMode
   snapMode: SnapMode
@@ -152,11 +152,23 @@ export interface PieceChange {
   group?: number
 }
 
+export interface ImageInfo
+{
+  id: number
+  filename: string
+  url: string
+  title: string
+  tags: Tag[]
+  created: Timestamp
+  width: number
+  height: number
+}
+
 export interface PuzzleInfo {
   table: PuzzleTable
   targetTiles: number
-  imageUrl: string
-  imageTitle: string
+  imageUrl?: string // deprecated, use image.url instead
+  image?: ImageInfo
 
   width: number
   height: number

src/frontend/components/InfoOverlay.vue

@@ -6,19 +6,19 @@
       </tr>
       <tr>
         <td>Image Title: </td>
-        <td>{{game.puzzle.info.imageTitle}}</td>
+        <td>{{game.puzzle.info.image.title}}</td>
       </tr>
       <tr>
         <td>Snap Mode: </td>
-        <td>{{scoreMode[0]}}</td>
+        <td><span :title="snapMode[1]">{{scoreMode[0]}}</span></td>
       </tr>
       <tr>
         <td>Shape Mode: </td>
-        <td>{{shapeMode[0]}}</td>
+        <td><span :title="snapMode[1]">{{shapeMode[0]}}</span></td>
       </tr>
       <tr>
         <td>Score Mode: </td>
-        <td>{{snapMode[0]}}</td>
+        <td><span :title="snapMode[1]">{{snapMode[0]}}</span></td>
       </tr>
     </table>
   </div>

src/server/Game.ts

@@ -1,9 +1,9 @@
 import GameCommon from './../common/GameCommon'
-import { Change, Game, Input, ScoreMode, ShapeMode, SnapMode, Timestamp } from './../common/Types'
+import { Change, Game, Input, ScoreMode, ShapeMode, SnapMode,ImageInfo, Timestamp } from './../common/Types'
 import Util, { logger } from './../common/Util'
 import { Rng } from './../common/Rng'
 import GameLog from './GameLog'
-import { createPuzzle, PuzzleCreationImageInfo } from './Puzzle'
+import { createPuzzle } from './Puzzle'
 import Protocol from './../common/Protocol'
 import GameStorage from './GameStorage'
 
@@ -12,7 +12,7 @@ const log = logger('Game.ts')
 async function createGameObject(
   gameId: string,
   targetTiles: number,
-  image: PuzzleCreationImageInfo,
+  image: ImageInfo,
   ts: Timestamp,
   scoreMode: ScoreMode,
   shapeMode: ShapeMode,
@@ -35,7 +35,7 @@ async function createGameObject(
 async function createGame(
   gameId: string,
   targetTiles: number,
-  image: PuzzleCreationImageInfo,
+  image: ImageInfo,
   ts: Timestamp,
   scoreMode: ScoreMode,
   shapeMode: ShapeMode,

src/server/GameLog.ts

@@ -100,4 +100,6 @@ export default {
   exists,
   log: _log,
   get,
+  filename,
+  idxname,
 }

src/server/Images.ts

@@ -7,30 +7,10 @@ import {UPLOAD_DIR, UPLOAD_URL} from './Dirs'
 import Db, { OrderBy, WhereRaw } from './Db'
 import { Dim } from '../common/Geometry'
 import { logger } from '../common/Util'
-import { Timestamp } from '../common/Types'
+import { Tag, ImageInfo } from '../common/Types'
 
 const log = logger('Images.ts')
 
-interface Tag
-{
-  id: number
-  slug: string
-  title: string
-}
-
-interface ImageInfo
-{
-  id: number
-  filename: string
-  file: string
-  url: string
-  title: string
-  tags: Tag[]
-  created: Timestamp
-  width: number
-  height: number
-}
-
 const resizeImage = async (filename: string): Promise<void> => {
   if (!filename.toLowerCase().match(/\.(jpe?g|webp|png)$/)) {
     return
@@ -106,7 +86,6 @@ const imageFromDb = (db: Db, imageId: number): ImageInfo => {
   return {
     id: i.id,
     filename: i.filename,
-    file: `${UPLOAD_DIR}/${i.filename}`,
     url: `${UPLOAD_URL}/${encodeURIComponent(i.filename)}`,
     title: i.title,
     tags: getTags(db, i.id),
@@ -152,7 +131,6 @@ inner join images i on i.id = ixc.image_id ${where.sql};
   return images.map(i => ({
     id: i.id as number,
     filename: i.filename,
-    file: `${UPLOAD_DIR}/${i.filename}`,
     url: `${UPLOAD_URL}/${encodeURIComponent(i.filename)}`,
     title: i.title,
     tags: getTags(db, i.id),
@@ -174,7 +152,6 @@ const allImagesFromDisk = (
     .map(f => ({
       id: 0,
       filename: f,
-      file: `${UPLOAD_DIR}/${f}`,
       url: `${UPLOAD_URL}/${encodeURIComponent(f)}`,
       title: f.replace(/\.[a-z]+$/, ''),
       tags: [] as Tag[],
@@ -186,13 +163,13 @@ const allImagesFromDisk = (
   switch (sort) {
     case 'alpha_asc':
       images = images.sort((a, b) => {
-        return a.file > b.file ? 1 : -1
+        return a.filename > b.filename ? 1 : -1
       })
       break;
 
     case 'alpha_desc':
       images = images.sort((a, b) => {
-        return a.file < b.file ? 1 : -1
+        return a.filename < b.filename ? 1 : -1
       })
       break;
 

src/server/Puzzle.ts

@@ -1,14 +1,9 @@
 import Util from './../common/Util'
 import { Rng } from './../common/Rng'
 import Images from './Images'
-import { EncodedPiece, EncodedPieceShape, PieceShape, Puzzle, ShapeMode } from '../common/Types'
+import { EncodedPiece, EncodedPieceShape, PieceShape, Puzzle, ShapeMode, ImageInfo } from '../common/Types'
 import { Dim, Point } from '../common/Geometry'
-
-export interface PuzzleCreationImageInfo {
-  file: string
-  url: string
-  title: string
-}
+import { UPLOAD_DIR } from './Dirs'
 
 export interface PuzzleCreationInfo {
   width: number
@@ -28,11 +23,11 @@ const TILE_SIZE = 64
 async function createPuzzle(
   rng: Rng,
   targetTiles: number,
-  image: PuzzleCreationImageInfo,
+  image: ImageInfo,
   ts: number,
   shapeMode: ShapeMode
 ): Promise<Puzzle> {
-  const imagePath = image.file
+  const imagePath = `${UPLOAD_DIR}/${image.filename}`
   const imageUrl = image.url
 
   // determine puzzle information from the image dimensions
@@ -140,8 +135,8 @@ async function createPuzzle(
       },
       // information that was used to create the puzzle
       targetTiles: targetTiles,
-      imageUrl,
-      imageTitle: image.title || '',
+      imageUrl, // todo: remove
+      image: image,
 
       width: info.width, // actual puzzle width (same as bitmap.width)
       height: info.height, // actual puzzle height (same as bitmap.height)

src/server/main.ts

@@ -19,7 +19,7 @@ import {
   UPLOAD_DIR,
 } from './Dirs'
 import GameCommon from '../common/GameCommon'
-import { ServerEvent, Game as GameType, GameSettings, ScoreMode, ShapeMode, SnapMode } from '../common/Types'
+import { ServerEvent, Game as GameType, GameSettings } from '../common/Types'
 import GameStorage from './GameStorage'
 import Db from './Db'
 
@@ -87,7 +87,7 @@ app.get('/api/replay-data', async (req, res): Promise<void> => {
     game = await Game.createGameObject(
       gameId,
       log[0][2],
-      log[0][3],
+      log[0][3], // must be ImageInfo
       log[0][4],
       log[0][5],
       log[0][6],