add info layer that shows info about current puzzle

src/common/Types.ts

@@ -154,8 +154,9 @@ export interface PieceChange {
 
 export interface PuzzleInfo {
   table: PuzzleTable
-  targetTiles: number,
+  targetTiles: number
   imageUrl: string
+  imageTitle: string
 
   width: number
   height: number

src/frontend/PuzzleGraphics.ts

@@ -3,7 +3,7 @@
 import Geometry, { Rect } from '../common/Geometry'
 import Graphics from './Graphics'
 import Util, { logger } from './../common/Util'
-import { Puzzle, PuzzleInfo, PieceShape, EncodedPiece } from './../common/GameCommon'
+import { Puzzle, PuzzleInfo, PieceShape, EncodedPiece } from './../common/Types'
 
 const log = logger('PuzzleGraphics.js')
 

src/frontend/components/InfoOverlay.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="overlay transparent" @click="$emit('bgclick')">
+    <table class="overlay-content help" @click.stop="">
+      <tr>
+        <td colspan="2">Info about this puzzle</td>
+      </tr>
+      <tr>
+        <td>Image Title: </td>
+        <td>{{game.puzzle.info.imageTitle}}</td>
+      </tr>
+      <tr>
+        <td>Snap Mode: </td>
+        <td>{{scoreMode[0]}}</td>
+      </tr>
+      <tr>
+        <td>Shape Mode: </td>
+        <td>{{shapeMode[0]}}</td>
+      </tr>
+      <tr>
+        <td>Score Mode: </td>
+        <td>{{snapMode[0]}}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { Game, ScoreMode, ShapeMode, SnapMode } from '../../common/Types'
+
+export default defineComponent({
+  name: 'help-overlay',
+  emits: {
+    bgclick: null,
+  },
+  props: {
+    game: {
+      type: Object as PropType<Game>,
+      required: true,
+    },
+  },
+  computed: {
+    scoreMode () {
+      switch (this.game.scoreMode) {
+        case ScoreMode.ANY: return ['Any', 'Score when pieces are connected to each other or on final location']
+        case ScoreMode.FINAL:
+        default: return ['Final', 'Score when pieces are put to their final location']
+      }
+    },
+    shapeMode () {
+      switch (this.game.shapeMode) {
+        case ShapeMode.FLAT: return ['Flat', 'all pieces flat on all sides']
+        case ShapeMode.ANY: return ['Any', 'flat pieces can occur anywhere']
+        case ShapeMode.NORMAL:
+        default:
+          return ['Normal', '']
+      }
+    },
+    snapMode () {
+      switch (this.game.snapMode) {
+        case SnapMode.REAL: return ['Real', 'pieces snap only to corners, already snapped pieces and to each other']
+        case SnapMode.NORMAL:
+        default:
+          return ['Normal', 'pieces snap to final destination and to each other']
+      }
+    },
+  },
+})
+</script>

src/frontend/game.ts

@@ -969,6 +969,7 @@ export async function main(
       soundsVolume: playerSoundVolume(),
       showPlayerNames: showPlayerNames(),
     },
+    game: Game.get(gameId),
     disconnect: Communication.disconnect,
     connect: connect,
     unload: unload,

src/frontend/views/Game.vue

@@ -2,6 +2,7 @@
   <div id="game">
     <settings-overlay v-show="overlay === 'settings'" @bgclick="toggle('settings', true)" v-model="g.player" />
     <preview-overlay v-show="overlay === 'preview'" @bgclick="toggle('preview', false)" :img="g.previewImageUrl" />
+    <info-overlay v-if="g.game" v-show="overlay === 'info'" @bgclick="toggle('info', true)" :game="g.game" />
     <help-overlay v-show="overlay === 'help'" @bgclick="toggle('help', true)" />
 
     <div class="overlay" v-if="cuttingPuzzle">
@@ -27,7 +28,8 @@
         <router-link class="opener" :to="{name: 'index'}" target="_blank">🧩 Puzzles</router-link>
         <div class="opener" @click="toggle('preview', false)">🖼️ Preview</div>
         <div class="opener" @click="toggle('settings', true)">🛠️ Settings</div>
-        <div class="opener" @click="toggle('help', true)">ℹ️ Hotkeys</div>
+        <div class="opener" @click="toggle('info', true)">ℹ️ Info</div>
+        <div class="opener" @click="toggle('help', true)">⌨️ Hotkeys</div>
       </div>
     </div>
 
@@ -41,6 +43,7 @@ import Scores from './../components/Scores.vue'
 import PuzzleStatus from './../components/PuzzleStatus.vue'
 import SettingsOverlay from './../components/SettingsOverlay.vue'
 import PreviewOverlay from './../components/PreviewOverlay.vue'
+import InfoOverlay from './../components/InfoOverlay.vue'
 import ConnectionOverlay from './../components/ConnectionOverlay.vue'
 import HelpOverlay from './../components/HelpOverlay.vue'
 
@@ -54,6 +57,7 @@ export default defineComponent({
     Scores,
     SettingsOverlay,
     PreviewOverlay,
+    InfoOverlay,
     ConnectionOverlay,
     HelpOverlay,
   },
@@ -81,6 +85,7 @@ export default defineComponent({
           soundsVolume: 100,
           showPlayerNames: true,
         },
+        game: null,
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
         onBgChange: (v: string) => {},

src/frontend/views/Replay.vue

@@ -2,6 +2,7 @@
   <div id="replay">
     <settings-overlay v-show="overlay === 'settings'" @bgclick="toggle('settings', true)" v-model="g.player" />
     <preview-overlay v-show="overlay === 'preview'" @bgclick="toggle('preview', false)" :img="g.previewImageUrl" />
+    <info-overlay v-if="g.game" v-show="overlay === 'info'" @bgclick="toggle('info', true)" :game="g.game" />
     <help-overlay v-show="overlay === 'help'" @bgclick="toggle('help', true)" />
 
     <div class="overlay" v-if="cuttingPuzzle">
@@ -29,7 +30,8 @@
         <router-link class="opener" :to="{name: 'index'}" target="_blank">🧩 Puzzles</router-link>
         <div class="opener" @click="toggle('preview', false)">🖼️ Preview</div>
         <div class="opener" @click="toggle('settings', true)">🛠️ Settings</div>
-        <div class="opener" @click="toggle('help', true)">ℹ️ Hotkeys</div>
+        <div class="opener" @click="toggle('info', true)">ℹ️ Info</div>
+        <div class="opener" @click="toggle('help', true)">⌨️ Hotkeys</div>
       </div>
     </div>
 
@@ -43,6 +45,7 @@ import Scores from './../components/Scores.vue'
 import PuzzleStatus from './../components/PuzzleStatus.vue'
 import SettingsOverlay from './../components/SettingsOverlay.vue'
 import PreviewOverlay from './../components/PreviewOverlay.vue'
+import InfoOverlay from './../components/InfoOverlay.vue'
 import HelpOverlay from './../components/HelpOverlay.vue'
 
 import { main, MODE_REPLAY } from './../game'
@@ -55,6 +58,7 @@ export default defineComponent({
     Scores,
     SettingsOverlay,
     PreviewOverlay,
+    InfoOverlay,
     HelpOverlay,
   },
   data() {
@@ -81,6 +85,7 @@ export default defineComponent({
           soundsVolume: 100,
           showPlayerNames: true,
         },
+        game: null,
         previewImageUrl: '',
         setHotkeys: (v: boolean) => {},
         onBgChange: (v: string) => {},

src/server/Puzzle.ts

@@ -7,6 +7,7 @@ import { Dim, Point } from '../common/Geometry'
 export interface PuzzleCreationImageInfo {
   file: string
   url: string
+  title: string
 }
 
 export interface PuzzleCreationInfo {
@@ -140,6 +141,7 @@ async function createPuzzle(
       // information that was used to create the puzzle
       targetTiles: targetTiles,
       imageUrl,
+      imageTitle: image.title || '',
 
       width: info.width, // actual puzzle width (same as bitmap.width)
       height: info.height, // actual puzzle height (same as bitmap.height)