From c98a4cf1daf468202a9a91b044b55666f695f87b Mon Sep 17 00:00:00 2001 From: yukirij Date: Fri, 16 Aug 2024 16:53:29 -0700 Subject: [PATCH] Fix knight hints, convert tile border from stroke to fill. --- www/js/interface.js | 101 +++++++++++++++++++++++--------------------- 1 file changed, 54 insertions(+), 47 deletions(-) diff --git a/www/js/interface.js b/www/js/interface.js index 7897e68..22e6849 100644 --- a/www/js/interface.js +++ b/www/js/interface.js @@ -263,8 +263,8 @@ const INTERFACE = { INTERFACE.resize(); INTERFACE.resolve_board(); - let width = canvas.width; - let height = canvas.height; + let width = canvas.width * window.devicePixelRatio; + let height = canvas.height * window.devicePixelRatio; let gui_margin = INTERFACE_DATA.Ui.margin; let gui_offset = INTERFACE_DATA.Ui.offset; @@ -312,6 +312,25 @@ const INTERFACE = { let piece = null; if(tile.piece !== null) { piece = GAME_DATA.board.pieces[tile.piece]; } + // Draw border + ctx.fillStyle = INTERFACE.Color.TileBorder; + if(tile.piece !== null) { + if(GAME_DATA.board.pieces[tile.piece].player == GAME.Const.Player.Dawn) { ctx.fillStyle = INTERFACE.Color.DawnDark; } + else { ctx.fillStyle = INTERFACE.Color.DuskDark; } + } + switch(border_state) { + case INTERFACE.TileStatus.Valid: ctx.fillStyle = INTERFACE.Color.HintValidBorder; break; + case INTERFACE.TileStatus.Threat: ctx.fillStyle = INTERFACE.Color.HintThreatBorder; break; + case INTERFACE.TileStatus.Invalid: ctx.fillStyle = INTERFACE.Color.HintInvalidBorder; break; + case INTERFACE.TileStatus.Opponent: ctx.fillStyle = INTERFACE.Color.HintOpponentBorder; break; + } + if(is_hover) { + ctx.fillStyle = INTERFACE.Color.HintHover; + } + ctx.beginPath(); + draw.hex(); + ctx.fill(); + // Draw background. // Select indicator color or default to tile color. switch(MATH.mod(coord.x + coord.y, 3)) { @@ -332,28 +351,9 @@ const INTERFACE = { ctx.fillStyle = INTERFACE.Color.HintSelect; } ctx.beginPath(); - draw.hex(); + draw.hex(0.94); ctx.fill(); - // Draw border - ctx.strokeStyle = INTERFACE.Color.TileBorder; - if(tile.piece !== null) { - if(GAME_DATA.board.pieces[tile.piece].player == GAME.Const.Player.Dawn) { ctx.strokeStyle = INTERFACE.Color.DawnDark; } - else { ctx.strokeStyle = INTERFACE.Color.DuskDark; } - } - switch(border_state) { - case INTERFACE.TileStatus.Valid: ctx.strokeStyle = INTERFACE.Color.HintValidBorder; break; - case INTERFACE.TileStatus.Threat: ctx.strokeStyle = INTERFACE.Color.HintThreatBorder; break; - case INTERFACE.TileStatus.Invalid: ctx.strokeStyle = INTERFACE.Color.HintInvalidBorder; break; - case INTERFACE.TileStatus.Opponent: ctx.strokeStyle = INTERFACE.Color.HintOpponentBorder; break; - } - if(is_hover) { - ctx.strokeStyle = INTERFACE.Color.HintHover; - } - ctx.beginPath(); - draw.hex(); - ctx.stroke(); - // Draw tile content if(piece !== null) { // Draw border hints @@ -392,22 +392,22 @@ const INTERFACE = { ctx.save(); ctx.translate(gui_x, gui_y); + // Draw border + if(is_select || is_hover || INTERFACE_DATA.player == (GAME_DATA.turn & 1) || (INTERFACE_DATA.player == 2 && player_identity == (GAME_DATA.turn & 1))) { + if(is_hover) { ctx.fillStyle = INTERFACE.Color.HintHover; } + else { ctx.fillStyle = player_color; } + ctx.beginPath(); + draw.hex(); + ctx.fill(); + } + // Draw background if indicator is present. if(is_select) { ctx.fillStyle = INTERFACE.Color.HintSelect; } else { ctx.fillStyle = INTERFACE.Color.TileDark; } ctx.beginPath(); - draw.hex(); + draw.hex(0.94); ctx.fill(); - // Draw border - if(is_select || is_hover || INTERFACE_DATA.player == (GAME_DATA.turn & 1) || (INTERFACE_DATA.player == 2 && player_identity == (GAME_DATA.turn & 1))) { - if(is_hover) { ctx.strokeStyle = INTERFACE.Color.HintHover; } - else { ctx.strokeStyle = player_color; } - ctx.beginPath(); - draw.hex(); - ctx.stroke(); - } - // Draw image ctx.drawImage(GAME_ASSET.Image.Piece[i][+(player_identity == 1)], -icon_radius * 0.55, -icon_radius * 0.8, icon_radius * 1.6, icon_radius * 1.6); @@ -431,22 +431,22 @@ const INTERFACE = { ctx.save(); ctx.translate(gui_x, gui_y); + // Draw border + if(is_select || is_hover || (INTERFACE_DATA.player == 2 && player_identity != (GAME_DATA.turn & 1))) { + if(is_hover) { ctx.fillStyle = INTERFACE.Color.HintHover; } + else { ctx.fillStyle = opponent_color; } + ctx.beginPath(); + draw.hex(); + ctx.fill(); + } + // Draw background if indicator is present. if(is_select) { ctx.fillStyle = INTERFACE.Color.HintSelect; } else { ctx.fillStyle = INTERFACE.Color.TileDark; } ctx.beginPath(); - draw.hex(); + draw.hex(0.94); ctx.fill(); - // Draw border - if(is_select || is_hover || (INTERFACE_DATA.player == 2 && player_identity != (GAME_DATA.turn & 1))) { - if(is_hover) { ctx.strokeStyle = INTERFACE.Color.HintHover; } - else { ctx.strokeStyle = opponent_color; } - ctx.beginPath(); - draw.hex(); - ctx.stroke(); - } - // Draw image ctx.drawImage(GAME_ASSET.Image.Piece[i][+(player_identity != 1)], -icon_radius * 0.55, -icon_radius * 0.8, icon_radius * 1.6, icon_radius * 1.6); @@ -548,10 +548,11 @@ const INTERFACE = { this.scale = scale; } - hex() { - this.ctx.moveTo(INTERFACE.HexVertex[5].x * this.scale, INTERFACE.HexVertex[5].y * this.scale); + hex(scale=1) { + scale *= this.scale; + this.ctx.moveTo(INTERFACE.HexVertex[5].x * scale, INTERFACE.HexVertex[5].y * scale); for(let i = 0; i < INTERFACE.HexVertex.length; ++i) { - this.ctx.lineTo(INTERFACE.HexVertex[i].x * this.scale, INTERFACE.HexVertex[i].y * this.scale); + this.ctx.lineTo(INTERFACE.HexVertex[i].x * scale, INTERFACE.HexVertex[i].y * scale); } } @@ -564,6 +565,10 @@ const INTERFACE = { for(let mask = BITWISE.lsb(moves); moves > 0; mask = BITWISE.lsb(moves)) { let move = BITWISE.ffs(mask); + if(move >= 12) { + move = Math.floor((move - 12) / 2) + 6; + } + let nmove = move % 12; this.ctx.strokeStyle = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk; @@ -697,8 +702,10 @@ const INTERFACE = { }, uninit() { - MAIN.removeChild(INTERFACE_DATA.canvas); - INTERFACE_DATA = null; + if(INTERFACE_DATA !== null) { + MAIN.removeChild(INTERFACE_DATA.canvas); + INTERFACE_DATA = null; + } }, message(code, data) {