para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

add linting, do more type hinting

Browse source
This commit is contained in:
Zutatensuppe 2021-05-29 17:58:05 +02:00
parent 46f3fc7480
commit d4f02c10df
29 changed files with 3353 additions and 1354 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/frontend/Communication.ts
View file

@ -1,6 +1,6 @@
"use strict"
import { EncodedGame, ReplayData } from '../common/GameCommon'
import { ClientEvent, EncodedGame, GameEvent, ReplayData } from '../common/Types'
import Util, { logger } from '../common/Util'
import Protocol from './../common/Protocol'
@ -16,25 +16,29 @@ const CONN_STATE_CONNECTING = 3 // connecting
const CONN_STATE_CLOSED = 4 // not connected (closed on purpose)
let ws: WebSocket
let changesCallback = (msg: Array<any>) => {}
let connectionStateChangeCallback = (state: number) => {}
let changesCallback = (msg: Array<any>) => {
// empty
}
let connectionStateChangeCallback = (state: number) => {
// empty
}
// TODO: change these to something like on(EVT, cb)
function onServerChange(callback: (msg: Array<any>) => void) {
function onServerChange(callback: (msg: Array<any>) => void): void {
changesCallback = callback
}
function onConnectionStateChange(callback: (state: number) => void) {
function onConnectionStateChange(callback: (state: number) => void): void {
connectionStateChangeCallback = callback
}
let connectionState = CONN_STATE_NOT_CONNECTED
const setConnectionState = (state: number) => {
const setConnectionState = (state: number): void => {
if (connectionState !== state) {
connectionState = state
connectionStateChangeCallback(state)
}
}
function send(message: Array<any>): void {
function send(message: ClientEvent): void {
if (connectionState === CONN_STATE_CONNECTED) {
try {
ws.send(JSON.stringify(message))
@ -46,7 +50,7 @@ function send(message: Array<any>): void {
let clientSeq: number
let events: Record<number, any>
let events: Record<number, GameEvent>
function connect(
address: string,
@ -58,7 +62,7 @@ function connect(
setConnectionState(CONN_STATE_CONNECTING)
return new Promise(resolve => {
ws = new WebSocket(address, clientId + '|' + gameId)
ws.onopen = (e) => {
ws.onopen = () => {
setConnectionState(CONN_STATE_CONNECTED)
send([Protocol.EV_CLIENT_INIT])
}
@ -82,7 +86,7 @@ function connect(
}
}
ws.onerror = (e) => {
ws.onerror = () => {
setConnectionState(CONN_STATE_DISCONNECTED)
throw `[ 2021-05-15 onerror ]`
}
@ -116,7 +120,7 @@ function disconnect(): void {
events = {}
}
function sendClientEvent(evt: any): void {
function sendClientEvent(evt: GameEvent): void {
// when sending event, increase number of sent events
// and add the event locally
clientSeq++;

4
src/frontend/Debug.ts
View file

@ -7,12 +7,12 @@ const log = logger('Debug.js')
let _pt = 0
let _mindiff = 0
const checkpoint_start = (mindiff: number) => {
const checkpoint_start = (mindiff: number): void => {
_pt = performance.now()
_mindiff = mindiff
}
const checkpoint = (label: string) => {
const checkpoint = (label: string): void => {
const now = performance.now()
const diff = now - _pt
if (diff > _mindiff) {

17
src/frontend/Fireworks.ts
View file

@ -1,7 +1,6 @@
"use strict"
import { Rng } from '../common/Rng'
import Util from '../common/Util'
let minVx = -10
let deltaVx = 20
@ -108,11 +107,11 @@ class Bomb {
}
class Particle {
px: any
py: any
px: number
py: number
vx: number
vy: number
color: any
color: string
duration: number
alive: boolean
radius: number
@ -171,7 +170,7 @@ class Controller {
})
}
setSpeedParams() {
setSpeedParams(): void {
let heightReached = 0
let vy = 0
@ -188,11 +187,11 @@ class Controller {
deltaVx = 2 * vx
}
resize() {
resize(): void {
this.setSpeedParams()
}
init() {
init(): void {
this.readyBombs = []
this.explodedBombs = []
this.particles = []
@ -202,7 +201,7 @@ class Controller {
}
}
update() {
update(): void {
if (Math.random() * 100 < percentChanceNewBomb) {
this.readyBombs.push(new Bomb(this.rng))
}
@ -250,7 +249,7 @@ class Controller {
this.particles = aliveParticles
}
render() {
render(): void {
this.ctx.beginPath()
this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)' // Ghostly effect
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

40
src/frontend/PuzzleGraphics.ts
View file

@ -3,22 +3,22 @@
import Geometry, { Rect } from '../common/Geometry'
import Graphics from './Graphics'
import Util, { logger } from './../common/Util'
import { Puzzle, PuzzleInfo, PieceShape } from './../common/GameCommon'
import { Puzzle, PuzzleInfo, PieceShape, EncodedPiece } from './../common/GameCommon'
const log = logger('PuzzleGraphics.js')
async function createPuzzleTileBitmaps(
img: ImageBitmap,
tiles: Array<any>,
pieces: EncodedPiece[],
info: PuzzleInfo
): Promise<Array<ImageBitmap>> {
log.log('start createPuzzleTileBitmaps')
var tileSize = info.tileSize
var tileMarginWidth = info.tileMarginWidth
var tileDrawSize = info.tileDrawSize
var tileRatio = tileSize / 100.0
const tileSize = info.tileSize
const tileMarginWidth = info.tileMarginWidth
const tileDrawSize = info.tileDrawSize
const tileRatio = tileSize / 100.0
var curvyCoords = [
const curvyCoords = [
0, 0, 40, 15, 37, 5,
37, 5, 40, 0, 38, -5,
38, -5, 20, -20, 50, -20,
@ -27,7 +27,7 @@ async function createPuzzleTileBitmaps(
63, 5, 65, 15, 100, 0
];
const bitmaps: Array<ImageBitmap> = new Array(tiles.length)
const bitmaps: Array<ImageBitmap> = new Array(pieces.length)
const paths: Record<string, Path2D> = {}
function pathForShape(shape: PieceShape) {
@ -65,9 +65,9 @@ async function createPuzzleTileBitmaps(
}
if (shape.bottom !== 0) {
for (let i = 0; i < curvyCoords.length / 6; i++) {
let p1 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 0] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 1] * tileRatio })
let p2 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 2] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 3] * tileRatio })
let p3 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 4] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 5] * tileRatio })
const p1 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 0] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 1] * tileRatio })
const p2 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 2] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 3] * tileRatio })
const p3 = Geometry.pointSub(bottomRightEdge, { x: curvyCoords[i * 6 + 4] * tileRatio, y: shape.bottom * curvyCoords[i * 6 + 5] * tileRatio })
path.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
}
} else {
@ -75,9 +75,9 @@ async function createPuzzleTileBitmaps(
}
if (shape.left !== 0) {
for (let i = 0; i < curvyCoords.length / 6; i++) {
let p1 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 1] * tileRatio, y: curvyCoords[i * 6 + 0] * tileRatio })
let p2 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 3] * tileRatio, y: curvyCoords[i * 6 + 2] * tileRatio })
let p3 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 5] * tileRatio, y: curvyCoords[i * 6 + 4] * tileRatio })
const p1 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 1] * tileRatio, y: curvyCoords[i * 6 + 0] * tileRatio })
const p2 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 3] * tileRatio, y: curvyCoords[i * 6 + 2] * tileRatio })
const p3 = Geometry.pointSub(bottomLeftEdge, { x: -shape.left * curvyCoords[i * 6 + 5] * tileRatio, y: curvyCoords[i * 6 + 4] * tileRatio })
path.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
}
} else {
@ -93,10 +93,10 @@ async function createPuzzleTileBitmaps(
const c2 = Graphics.createCanvas(tileDrawSize, tileDrawSize)
const ctx2 = c2.getContext('2d') as CanvasRenderingContext2D
for (const t of tiles) {
const tile = Util.decodePiece(t)
const srcRect = srcRectByIdx(info, tile.idx)
const path = pathForShape(Util.decodeShape(info.shapes[tile.idx]))
for (const p of pieces) {
const piece = Util.decodePiece(p)
const srcRect = srcRectByIdx(info, piece.idx)
const path = pathForShape(Util.decodeShape(info.shapes[piece.idx]))
ctx.clearRect(0, 0, tileDrawSize, tileDrawSize)
@ -195,7 +195,7 @@ async function createPuzzleTileBitmaps(
ctx2.restore()
ctx.drawImage(c2, 0, 0)
bitmaps[tile.idx] = await createImageBitmap(c)
bitmaps[piece.idx] = await createImageBitmap(c)
}
log.log('end createPuzzleTileBitmaps')
@ -203,7 +203,7 @@ async function createPuzzleTileBitmaps(
}
function srcRectByIdx(puzzleInfo: PuzzleInfo, idx: number): Rect {
const c = Util.coordByTileIdx(puzzleInfo, idx)
const c = Util.coordByPieceIdx(puzzleInfo, idx)
return {
x: c.x * puzzleInfo.tileSize,
y: c.y * puzzleInfo.tileSize,

2
src/frontend/components/NewGameDialog.vue
View file

@ -36,7 +36,7 @@
<script lang="ts">
import { defineComponent } from 'vue'
import { GameSettings, ScoreMode } from './../../common/GameCommon'
import { GameSettings, ScoreMode } from './../../common/Types'
import ResponsiveImage from './ResponsiveImage.vue'
export default defineComponent({

26
src/frontend/game.ts
View file

@ -7,13 +7,21 @@ import Debug from './Debug'
import Communication from './Communication'
import Util from './../common/Util'
import PuzzleGraphics from './PuzzleGraphics'
import Game, { Game as GameType, Player, Piece, EncodedGame, ReplayData, Timestamp } from './../common/GameCommon'
import Game from './../common/GameCommon'
import fireworksController from './Fireworks'
import Protocol from '../common/Protocol'
import Time from '../common/Time'
import { Dim, Point } from '../common/Geometry'
import { FixedLengthArray } from '../common/Types'
import {
FixedLengthArray,
Game as GameType,
Player,
Piece,
EncodedGame,
ReplayData,
Timestamp,
GameEvent,
} from '../common/Types'
declare global {
interface Window {
DEBUG?: boolean
@ -79,7 +87,7 @@ function addCanvasToDom(TARGET_EL: HTMLElement, canvas: HTMLCanvasElement) {
}
function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
let events: Array<Array<any>> = []
let events: Array<GameEvent> = []
let KEYS_ON = true
@ -165,11 +173,11 @@ function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
}
})
const addEvent = (event: Array<any>) => {
const addEvent = (event: GameEvent) => {
events.push(event)
}
const consumeAll = () => {
const consumeAll = (): GameEvent[] => {
if (events.length === 0) {
return []
}
@ -491,7 +499,7 @@ export async function main(
} else if (MODE === MODE_REPLAY) {
// no external communication for replay mode,
// only the REPLAY.log is relevant
let inter = setInterval(() => {
const inter = setInterval(() => {
const realTs = Time.timestamp()
if (REPLAY.requesting) {
REPLAY.lastRealTs = realTs
@ -559,7 +567,7 @@ export async function main(
}
let _last_mouse_down: Point|null = null
const onUpdate = () => {
const onUpdate = (): void => {
// handle key downs once per onUpdate
// this will create Protocol.INPUT_EV_MOVE events if something
// relevant is pressed
@ -663,7 +671,7 @@ export async function main(
}
}
const onRender = async () => {
const onRender = async (): Promise<void> => {
if (!RERENDER) {
return
}

6
src/frontend/gameloop.ts
View file

@ -3,10 +3,10 @@
interface GameLoopOptions {
fps?: number
slow?: number
update: (step: number) => any
render: (passed: number) => any
update: (step: number) => void
render: (passed: number) => void
}
export const run = (options: GameLoopOptions) => {
export const run = (options: GameLoopOptions): void => {
const fps = options.fps || 60
const slow = options.slow || 1
const update = options.update