some more type hinting etc

src/frontend/Camera.ts

@@ -1,16 +1,10 @@
+import { Dim, Point } from "../common/Geometry"
+
 const MIN_ZOOM = .1
 const MAX_ZOOM = 6
 const ZOOM_STEP = .05
 
 type ZOOM_DIR = 'in'|'out'
-interface Point {
-  x: number
-  y: number
-}
-interface Dim {
-  w: number
-  h: number
-}
 
 export default function Camera () {
   let x = 0

src/frontend/Graphics.ts

@@ -17,15 +17,23 @@ async function loadImageToBitmap(imagePath: string): Promise<ImageBitmap> {
   })
 }
 
-async function resizeBitmap (bitmap: ImageBitmap, width: number, height: number): Promise<ImageBitmap> {
+async function resizeBitmap (
+  bitmap: ImageBitmap,
+  width: number,
+  height: number
+): Promise<ImageBitmap> {
   const c = createCanvas(width, height)
   const ctx = c.getContext('2d') as CanvasRenderingContext2D
   ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height, 0, 0, width, height)
   return await createImageBitmap(c)
 }
 
-async function colorize(image: ImageBitmap, mask: ImageBitmap, color: string): Promise<ImageBitmap> {
-  const c = createCanvas(image.width, image.height)
+async function colorize(
+  bitmap: ImageBitmap,
+  mask: ImageBitmap,
+  color: string
+): Promise<ImageBitmap> {
+  const c = createCanvas(bitmap.width, bitmap.height)
   const ctx = c.getContext('2d') as CanvasRenderingContext2D
   ctx.save()
   ctx.drawImage(mask, 0, 0)
@@ -35,7 +43,7 @@ async function colorize(image: ImageBitmap, mask: ImageBitmap, color: string): P
   ctx.restore()
   ctx.save()
   ctx.globalCompositeOperation = "destination-over"
-  ctx.drawImage(image, 0, 0)
+  ctx.drawImage(bitmap, 0, 0)
   ctx.restore()
   return await createImageBitmap(c)
 }

src/frontend/PuzzleGraphics.ts

@@ -1,13 +1,17 @@
 "use strict"
 
-import Geometry from '../common/Geometry'
+import Geometry, { Rect } from '../common/Geometry'
 import Graphics from './Graphics'
 import Util, { logger } from './../common/Util'
 import { Puzzle, PuzzleInfo, PieceShape } from './../common/GameCommon'
 
 const log = logger('PuzzleGraphics.js')
 
-async function createPuzzleTileBitmaps(img: ImageBitmap, tiles: Array<any>, info: PuzzleInfo) {
+async function createPuzzleTileBitmaps(
+  img: ImageBitmap,
+  tiles: Array<any>,
+  info: PuzzleInfo
+): Promise<Array<ImageBitmap>> {
   log.log('start createPuzzleTileBitmaps')
   var tileSize = info.tileSize
   var tileMarginWidth = info.tileMarginWidth
@@ -23,7 +27,7 @@ async function createPuzzleTileBitmaps(img: ImageBitmap, tiles: Array<any>, info
     63, 5, 65, 15, 100, 0
   ];
 
-  const bitmaps = new Array(tiles.length)
+  const bitmaps: Array<ImageBitmap> = new Array(tiles.length)
 
   const paths: Record<string, Path2D> = {}
   function pathForShape(shape: PieceShape) {
@@ -89,7 +93,7 @@ async function createPuzzleTileBitmaps(img: ImageBitmap, tiles: Array<any>, info
   const c2 = Graphics.createCanvas(tileDrawSize, tileDrawSize)
   const ctx2 = c2.getContext('2d') as CanvasRenderingContext2D
 
-  for (let t of tiles) {
+  for (const t of tiles) {
     const tile = Util.decodeTile(t)
     const srcRect = srcRectByIdx(info, tile.idx)
     const path = pathForShape(Util.decodeShape(info.shapes[tile.idx]))
@@ -198,7 +202,7 @@ async function createPuzzleTileBitmaps(img: ImageBitmap, tiles: Array<any>, info
   return bitmaps
 }
 
-function srcRectByIdx(puzzleInfo: PuzzleInfo, idx: number) {
+function srcRectByIdx(puzzleInfo: PuzzleInfo, idx: number): Rect {
   const c = Util.coordByTileIdx(puzzleInfo, idx)
   return {
     x: c.x * puzzleInfo.tileSize,
@@ -208,7 +212,7 @@ function srcRectByIdx(puzzleInfo: PuzzleInfo, idx: number) {
   }
 }
 
-async function loadPuzzleBitmaps(puzzle: Puzzle) {
+async function loadPuzzleBitmaps(puzzle: Puzzle): Promise<Array<ImageBitmap>> {
   // load bitmap, to determine the original size of the image
   const bmp = await Graphics.loadImageToBitmap(puzzle.info.imageUrl)
 

src/frontend/components/NewGameDialog.vue

@@ -44,7 +44,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import GameCommon from './../../common/GameCommon'
+import { ScoreMode } from './../../common/GameCommon'
 import Upload from './../components/Upload.vue'
 import ImageTeaser from './../components/ImageTeaser.vue'
 
@@ -64,7 +64,7 @@ export default defineComponent({
     return {
       tiles: 1000,
       image: '',
-      scoreMode: GameCommon.SCORE_MODE_ANY,
+      scoreMode: ScoreMode.ANY,
     }
   },
   methods: {

src/frontend/game.ts

@@ -11,6 +11,7 @@ import Game, { Player, Piece } from './../common/GameCommon'
 import fireworksController from './Fireworks'
 import Protocol from '../common/Protocol'
 import Time from '../common/Time'
+import { Dim, Point } from '../common/Geometry'
 
 declare global {
   interface Window {
@@ -34,10 +35,6 @@ export const MODE_REPLAY = 'replay'
 let PIECE_VIEW_FIXED = true
 let PIECE_VIEW_LOOSE = true
 
-interface Point {
-  x: number
-  y: number
-}
 interface Hud {
   setActivePlayers: (v: Array<any>) => void
   setIdlePlayers: (v: Array<any>) => void
@@ -474,10 +471,16 @@ export async function main(
           RERENDER = true
         } else if (entryWithTs[0] === Protocol.LOG_UPDATE_PLAYER) {
           const playerId = Game.getPlayerIdByIndex(gameId, entryWithTs[1])
+          if (!playerId) {
+            throw '[ 2021-05-17 player not found (update player) ]'
+          }
           Game.addPlayer(gameId, playerId, nextTs)
           RERENDER = true
         } else if (entryWithTs[0] === Protocol.LOG_HANDLE_INPUT) {
           const playerId = Game.getPlayerIdByIndex(gameId, entryWithTs[1])
+          if (!playerId) {
+            throw '[ 2021-05-17 player not found (handle input) ]'
+          }
           const input = entryWithTs[2]
           Game.handleInput(gameId, playerId, input, nextTs)
           RERENDER = true
@@ -598,9 +601,9 @@ export async function main(
 
     const ts = TIME()
 
-    let pos
-    let dim
-    let bmp
+    let pos: Point
+    let dim: Dim
+    let bmp: ImageBitmap
 
     if (window.DEBUG) Debug.checkpoint_start(0)
 

src/frontend/views/Game.vue

@@ -29,7 +29,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent } from 'vue'
 
 import Scores from './../components/Scores.vue'
 import PuzzleStatus from './../components/PuzzleStatus.vue'
@@ -39,6 +39,7 @@ import ConnectionOverlay from './../components/ConnectionOverlay.vue'
 import HelpOverlay from './../components/HelpOverlay.vue'
 
 import { main, MODE_PLAY } from './../game'
+import { Player } from '../../common/GameCommon'
 
 export default defineComponent({
   name: 'game',
@@ -52,9 +53,8 @@ export default defineComponent({
   },
   data() {
     return {
-      // TODO: ts Array<Player> type
-      activePlayers: [] as PropType<Array<any>>,
-      idlePlayers: [] as PropType<Array<any>>,
+      activePlayers: [] as Array<Player>,
+      idlePlayers: [] as Array<Player>,
 
       finished: false,
       duration: 0,
@@ -103,8 +103,8 @@ export default defineComponent({
       MODE_PLAY,
       this.$el,
       {
-        setActivePlayers: (v: Array<any>) => { this.activePlayers = v },
-        setIdlePlayers: (v: Array<any>) => { this.idlePlayers = v },
+        setActivePlayers: (v: Array<Player>) => { this.activePlayers = v },
+        setIdlePlayers: (v: Array<Player>) => { this.idlePlayers = v },
         setFinished: (v: boolean) => { this.finished = v },
         setDuration: (v: number) => { this.duration = v },
         setPiecesDone: (v: number) => { this.piecesDone = v },