show message while cutting puzzle

src/frontend/game.ts

@@ -46,6 +46,7 @@ let PIECE_VIEW_FIXED = true
 let PIECE_VIEW_LOOSE = true
 
 interface Hud {
+  setPuzzleCut: () => void
   setActivePlayers: (v: Array<any>) => void
   setIdlePlayers: (v: Array<any>) => void
   setFinished: (v: boolean) => void
@@ -415,6 +416,7 @@ export async function main(
 
   const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
   canvas.classList.add('loaded')
+  HUD.setPuzzleCut()
 
   // initialize some view data
   // this global data will change according to input events

src/frontend/views/Game.vue

@@ -4,6 +4,12 @@
     <preview-overlay v-show="overlay === 'preview'" @bgclick="toggle('preview', false)" :img="g.previewImageUrl" />
     <help-overlay v-show="overlay === 'help'" @bgclick="toggle('help', true)" />
 
+    <div class="overlay" v-if="cuttingPuzzle">
+      <div class="overlay-content">
+        <div>⏳ Cutting puzzle, please wait... ⏳</div>
+      </div>
+    </div>
+
     <connection-overlay
       :connectionState="connectionState"
       @reconnect="reconnect"
@@ -64,6 +70,7 @@ export default defineComponent({
       overlay: '',
 
       connectionState: 0,
+      cuttingPuzzle: true,
 
       g: {
         player: {
@@ -119,6 +126,7 @@ export default defineComponent({
       MODE_PLAY,
       this.$el,
       {
+        setPuzzleCut: () => { this.cuttingPuzzle = false },
         setActivePlayers: (v: Array<Player>) => { this.activePlayers = v },
         setIdlePlayers: (v: Array<Player>) => { this.idlePlayers = v },
         setFinished: (v: boolean) => { this.finished = v },

src/frontend/views/Replay.vue

@@ -4,6 +4,12 @@
     <preview-overlay v-show="overlay === 'preview'" @bgclick="toggle('preview', false)" :img="g.previewImageUrl" />
     <help-overlay v-show="overlay === 'help'" @bgclick="toggle('help', true)" />
 
+    <div class="overlay" v-if="cuttingPuzzle">
+      <div class="overlay-content">
+        <div>⏳ Cutting puzzle, please wait... ⏳</div>
+      </div>
+    </div>
+
     <puzzle-status
       :finished="finished"
       :duration="duration"
@@ -64,6 +70,7 @@ export default defineComponent({
       overlay: '',
 
       connectionState: 0,
+      cuttingPuzzle: true,
 
       g: {
         player: {
@@ -127,6 +134,7 @@ export default defineComponent({
       MODE_REPLAY,
       this.$el,
       {
+        setPuzzleCut: () => { this.cuttingPuzzle = false },
         setActivePlayers: (v: Array<Player>) => { this.activePlayers = v },
         setIdlePlayers: (v: Array<Player>) => { this.idlePlayers = v },
         setFinished: (v: boolean) => { this.finished = v },