From b6f1be3bb59a66ea88af6f711c348880591b73fa Mon Sep 17 00:00:00 2001 From: yukirij Date: Tue, 1 Oct 2024 13:36:26 -0700 Subject: [PATCH] Update play, animation, and check hints. --- www/js/interface.js | 113 +++++++++++++++++++++++++++----------------- 1 file changed, 69 insertions(+), 44 deletions(-) diff --git a/www/js/interface.js b/www/js/interface.js index e0e95bf..df2a8ef 100644 --- a/www/js/interface.js +++ b/www/js/interface.js @@ -18,13 +18,15 @@ const INTERFACE = { TileMedium: "#242424", TileDark: "#101010", - Dawn: "#ffe082", - DawnMedium: "#fca03f", - DawnDark: "#ff6d00", + Dawn: "#ffe082", + DawnMedium: "#fca03f", + DawnDark: "#ff6d00", + DawnDarkest: "#3f1b00", - Dusk: "#f6a1bd", - DuskMedium: "#e84a79", - DuskDark: "#c51162", + Dusk: "#f6a1bd", + DuskMedium: "#e84a79", + DuskDark: "#c51162", + DuskDarkest: "#3f051f", HintHover: "#71a1e8", HintSelect: "#4a148c", @@ -36,7 +38,7 @@ const INTERFACE = { HintOpponentDark: "#2a0b3f", HintInvalid: "#b71c1c", HintInvalidDark: "#3f0808", - HintPlay: "#004966", + HintPlay: "#307c7f", HintCheck: "#C62828", }, @@ -305,7 +307,7 @@ const INTERFACE = { INTERFACE.draw(); }, - contextmenu(event) { + contextmenu() { INTERFACE_DATA.select = null; return false; }, @@ -319,7 +321,7 @@ const INTERFACE = { INTERFACE_DATA.alt_mode = false; INTERFACE.draw(); } else { - INTERFACE.click(); + INTERFACE.click({button:0}); } } INTERFACE_DATA.clicked = null; @@ -405,6 +407,9 @@ const INTERFACE = { let is_hover = INTERFACE.Ui.tile_is_hover(0, i); let is_select = INTERFACE.Ui.tile_is_select(0, i); + let is_play = GAME_DATA.turn > 0 && (play.source < 2 || play.source == 3) && (play.to == i || ((play.source == 0 || play.source == 3) && play.from == i)); + let is_check = GAME_DATA.state.check != 0 && piece !== null && piece.piece == GAME.Const.PieceId.Heart && piece.player == (GAME_DATA.turn & 1); + let tile_state = INTERFACE_DATA.board_state[i][1]; let hover_state = INTERFACE_DATA.board_state[i][0]; @@ -430,48 +435,67 @@ const INTERFACE = { let piece = null; if(tile.piece !== null) { piece = GAME_DATA.board.pieces[tile.piece]; } - // Draw border - ctx.fillStyle = INTERFACE.Color.TileBorder; + let background_color = null; + let border_color = null; + let background_scale = 0.94; + + // Get background color + switch(hover_state) { + case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValidDark; break; + case INTERFACE.TileStatus.Threat: background_color = INTERFACE.Color.HintThreatDark; break; + case INTERFACE.TileStatus.Invalid: background_color = INTERFACE.Color.HintInvalidDark; break; + case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponentDark; break; + } + switch(tile_state) { + case INTERFACE.TileStatus.Valid: background_color = INTERFACE.Color.HintValid; break; + case INTERFACE.TileStatus.Threat: background_color = INTERFACE.Color.HintThreat; break; + case INTERFACE.TileStatus.Invalid: background_color = INTERFACE.Color.HintInvalid; break; + case INTERFACE.TileStatus.Opponent: background_color = INTERFACE.Color.HintOpponent; break; + } + if(is_select) { + background_color = INTERFACE.Color.HintSelect; + } + + // Get border color if(draw_piece && 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; } + if(GAME_DATA.board.pieces[tile.piece].player == GAME.Const.Player.Dawn) { border_color = INTERFACE.Color.DawnDark; } + else { border_color = INTERFACE.Color.DuskDark; } } if(is_hover) { - ctx.fillStyle = INTERFACE.Color.HintHover; + border_color = INTERFACE.Color.HintHover; + } else if(background_color == null) { + if(is_play) { + if((GAME_DATA.turn & 1) != GAME.Const.Player.Dawn) { border_color = INTERFACE.Color.DawnDark; } + else { border_color = INTERFACE.Color.DuskDark; } + background_scale = 0.85; + } else if(is_check) { + border_color = INTERFACE.Color.HintCheck; + background_scale = 0.8; + } } + + // Get default colors + if(background_color === null) { + switch(MATH.mod(coord.x + coord.y, 3)) { + case 0: background_color = INTERFACE.Color.TileMedium; break; + case 1: background_color = INTERFACE.Color.TileLight; break; + case 2: background_color = INTERFACE.Color.TileDark; break; + } + } + if(border_color === null) { + border_color = INTERFACE.Color.TileBorder; + } + + // Draw border + ctx.fillStyle = border_color; ctx.beginPath(); draw.hex(); ctx.fill(); - // Draw background. - // Select indicator color or default to tile color. - switch(MATH.mod(coord.x + coord.y, 3)) { - case 0: ctx.fillStyle = INTERFACE.Color.TileMedium; break; - case 1: ctx.fillStyle = INTERFACE.Color.TileLight; break; - case 2: ctx.fillStyle = INTERFACE.Color.TileDark; break; - } - if(GAME_DATA.turn > 0 && (play.source < 2 || play.source == 3) && (play.to == i || ((play.source == 0 || play.source == 3) && play.from == i))) { - ctx.fillStyle = INTERFACE.Color.HintPlay; - } else if(GAME_DATA.state.check != 0 && piece !== null && piece.piece == GAME.Const.PieceId.Heart && piece.player == (GAME_DATA.turn & 1)) { - ctx.fillStyle = INTERFACE.Color.HintCheck; - } - switch(hover_state) { - case INTERFACE.TileStatus.Valid: ctx.fillStyle = INTERFACE.Color.HintValidDark; break; - case INTERFACE.TileStatus.Threat: ctx.fillStyle = INTERFACE.Color.HintThreatDark; break; - case INTERFACE.TileStatus.Invalid: ctx.fillStyle = INTERFACE.Color.HintInvalidDark; break; - case INTERFACE.TileStatus.Opponent: ctx.fillStyle = INTERFACE.Color.HintOpponentDark; break; - } - switch(tile_state) { - case INTERFACE.TileStatus.Valid: ctx.fillStyle = INTERFACE.Color.HintValid; break; - case INTERFACE.TileStatus.Threat: ctx.fillStyle = INTERFACE.Color.HintThreat; break; - case INTERFACE.TileStatus.Invalid: ctx.fillStyle = INTERFACE.Color.HintInvalid; break; - case INTERFACE.TileStatus.Opponent: ctx.fillStyle = INTERFACE.Color.HintOpponent; break; - } - if(is_select) { - ctx.fillStyle = INTERFACE.Color.HintSelect; - } + // Draw background + ctx.fillStyle = background_color; ctx.beginPath(); - draw.hex(0.94); + draw.hex(background_scale); ctx.fill(); // Draw tile content @@ -830,9 +854,10 @@ const INTERFACE = { this.ctx.fill(); // Draw background. - this.ctx.fillStyle = INTERFACE.Color.HintPlay; + if(piece.player == GAME.Const.Player.Dawn) { this.ctx.fillStyle = INTERFACE.Color.DawnDarkest; } + else { this.ctx.fillStyle = INTERFACE.Color.DuskDarkest; } this.ctx.beginPath(); - this.hex(0.94); + this.hex(0.85); this.ctx.fill(); // Draw tile content