Kirisame/dzura
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

Fix knight hints, convert tile border from stroke to fill.

Browse Source
This commit is contained in:
yukirij 2024-08-16 16:53:29 -07:00
parent c0df79f056
commit c98a4cf1da
1 changed files with 54 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
www/js/interface.js
View File

@ -263,8 +263,8 @@ const INTERFACE = {
INTERFACE.resize(); INTERFACE.resize();
INTERFACE.resolve_board(); INTERFACE.resolve_board();
let width = canvas.width; let width = canvas.width * window.devicePixelRatio;
let height = canvas.height; let height = canvas.height * window.devicePixelRatio;
let gui_margin = INTERFACE_DATA.Ui.margin; let gui_margin = INTERFACE_DATA.Ui.margin;
let gui_offset = INTERFACE_DATA.Ui.offset; let gui_offset = INTERFACE_DATA.Ui.offset;
@ -312,6 +312,25 @@ const INTERFACE = {
let piece = null; let piece = null;
if(tile.piece !== null) { piece = GAME_DATA.board.pieces[tile.piece]; } 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. // Draw background.
// Select indicator color or default to tile color. // Select indicator color or default to tile color.
switch(MATH.mod(coord.x + coord.y, 3)) { switch(MATH.mod(coord.x + coord.y, 3)) {
@ -332,28 +351,9 @@ const INTERFACE = {
ctx.fillStyle = INTERFACE.Color.HintSelect; ctx.fillStyle = INTERFACE.Color.HintSelect;
} }
ctx.beginPath(); ctx.beginPath();
draw.hex(); draw.hex(0.94);
ctx.fill(); 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 // Draw tile content
if(piece !== null) { if(piece !== null) {
// Draw border hints // Draw border hints
@ -392,22 +392,22 @@ const INTERFACE = {
ctx.save(); ctx.save();
ctx.translate(gui_x, gui_y); 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. // Draw background if indicator is present.
if(is_select) { ctx.fillStyle = INTERFACE.Color.HintSelect; } if(is_select) { ctx.fillStyle = INTERFACE.Color.HintSelect; }
else { ctx.fillStyle = INTERFACE.Color.TileDark; } else { ctx.fillStyle = INTERFACE.Color.TileDark; }
ctx.beginPath(); ctx.beginPath();
draw.hex(); draw.hex(0.94);
ctx.fill(); 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 // 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); 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.save();
ctx.translate(gui_x, gui_y); 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. // Draw background if indicator is present.
if(is_select) { ctx.fillStyle = INTERFACE.Color.HintSelect; } if(is_select) { ctx.fillStyle = INTERFACE.Color.HintSelect; }
else { ctx.fillStyle = INTERFACE.Color.TileDark; } else { ctx.fillStyle = INTERFACE.Color.TileDark; }
ctx.beginPath(); ctx.beginPath();
draw.hex(); draw.hex(0.94);
ctx.fill(); 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 // 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); 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; this.scale = scale;
} }
hex() { hex(scale=1) {
this.ctx.moveTo(INTERFACE.HexVertex[5].x * this.scale, INTERFACE.HexVertex[5].y * this.scale); 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) { 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)) { for(let mask = BITWISE.lsb(moves); moves > 0; mask = BITWISE.lsb(moves)) {
let move = BITWISE.ffs(mask); let move = BITWISE.ffs(mask);
if(move >= 12) {
move = Math.floor((move - 12) / 2) + 6;
}
let nmove = move % 12; let nmove = move % 12;
this.ctx.strokeStyle = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk; this.ctx.strokeStyle = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk;
@ -697,8 +702,10 @@ const INTERFACE = {
}, },
uninit() { uninit() {
if(INTERFACE_DATA !== null) {
MAIN.removeChild(INTERFACE_DATA.canvas); MAIN.removeChild(INTERFACE_DATA.canvas);
INTERFACE_DATA = null; INTERFACE_DATA = null;
}
}, },
message(code, data) { message(code, data) {