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

Improve visuals of piece hints.

Browse Source
This commit is contained in:
yukirij 2024-10-12 18:05:37 -07:00
parent 36cc9f7543
commit b7b9f52de9
1 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
www/js/interface.js
View File

@ -604,6 +604,9 @@ const INTERFACE = {
border_color = INTERFACE.Color.TileBorder; border_color = INTERFACE.Color.TileBorder;
} }
// Draw border hints
if(!is_hover && draw_piece && piece !== null) { draw.hints(piece); }
// Draw border // Draw border
ctx.fillStyle = border_color; ctx.fillStyle = border_color;
ctx.beginPath(); ctx.beginPath();
@ -621,9 +624,6 @@ const INTERFACE = {
let piece_def = GAME.Const.Piece[piece.piece]; let piece_def = GAME.Const.Piece[piece.piece];
let piece_color = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk; let piece_color = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk;
// Draw border hints
if(!is_hover) { draw.hints(piece); }
if(GAME_ASSET.Image[piece_def.name] !== undefined) { if(GAME_ASSET.Image[piece_def.name] !== undefined) {
// Draw piece icon // Draw piece icon
if(INTERFACE_DATA.mirror && (piece.player ^ (INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) != 0) { if(INTERFACE_DATA.mirror && (piece.player ^ (INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) != 0) {
@ -922,7 +922,8 @@ const INTERFACE = {
} }
hints(piece) { hints(piece) {
let scale = INTERFACE.TileScale * this.scale; let scale = 0.96 * this.scale;
let half_scale = scale * 0.5;
let movement = piece.moves(); let movement = piece.moves();
if((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) { if((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) {
@ -934,13 +935,16 @@ const INTERFACE = {
let move = BITWISE.ffs(mask); let move = BITWISE.ffs(mask);
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.fillStyle = (piece.player == GAME.Const.Player.Dawn)? INTERFACE.Color.Dawn : INTERFACE.Color.Dusk;
this.ctx.beginPath(); this.ctx.beginPath();
// draw edge marker // draw edge marker
if(nmove < 6) { if(nmove < 6) {
let fr = INTERFACE.HexVertex[nmove]; let fr = INTERFACE.HexVertex[nmove];
let to = INTERFACE.HexVertex[(nmove + 1) % 6]; let to = INTERFACE.HexVertex[(nmove + 1) % 6];
let ifr = INTERFACE.HexVertex[(nmove + 4) % 6];
let ito = INTERFACE.HexVertex[(nmove + 3) % 6];
let dx = (to.x - fr.x) / 3.0; let dx = (to.x - fr.x) / 3.0;
let dy = (to.y - fr.y) / 3.0; let dy = (to.y - fr.y) / 3.0;
@ -951,9 +955,12 @@ const INTERFACE = {
let tqx = fr.x + (2 * dx); let tqx = fr.x + (2 * dx);
let tqy = fr.y + (2 * dy); let tqy = fr.y + (2 * dy);
this.ctx.moveTo(fqx * scale, fqy * scale); this.ctx.moveTo(ifr.x * half_scale, ifr.y * half_scale);
this.ctx.lineTo(fqx * scale, fqy * scale);
this.ctx.lineTo(tqx * scale, tqy * scale); this.ctx.lineTo(tqx * scale, tqy * scale);
this.ctx.stroke(); this.ctx.lineTo(ito.x * half_scale, ito.y * half_scale);
this.ctx.lineTo(ifr.x * half_scale, ifr.y * half_scale);
this.ctx.fill();
} }
// draw vertex marker // draw vertex marker
@ -961,6 +968,9 @@ const INTERFACE = {
let fr = INTERFACE.HexVertex[nmove % 6]; let fr = INTERFACE.HexVertex[nmove % 6];
let mid = INTERFACE.HexVertex[(nmove + 1) % 6]; let mid = INTERFACE.HexVertex[(nmove + 1) % 6];
let to = INTERFACE.HexVertex[(nmove + 2) % 6]; let to = INTERFACE.HexVertex[(nmove + 2) % 6];
let ifr = INTERFACE.HexVertex[(nmove + 5) % 6];
let ito = INTERFACE.HexVertex[(nmove + 3) % 6];
let dx1 = (mid.x - fr.x) / 3.0; let dx1 = (mid.x - fr.x) / 3.0;
let dy1 = (mid.y - fr.y) / 3.0; let dy1 = (mid.y - fr.y) / 3.0;
@ -974,10 +984,13 @@ const INTERFACE = {
let tqx = mid.x + dx2; let tqx = mid.x + dx2;
let tqy = mid.y + dy2; let tqy = mid.y + dy2;
this.ctx.moveTo(fqx * scale, fqy * scale); this.ctx.moveTo(ifr.x * half_scale, ifr.y * half_scale);
this.ctx.lineTo(fqx * scale, fqy * scale);
this.ctx.lineTo(mid.x * scale, mid.y * scale); this.ctx.lineTo(mid.x * scale, mid.y * scale);
this.ctx.lineTo(tqx * scale, tqy * scale); this.ctx.lineTo(tqx * scale, tqy * scale);
this.ctx.stroke(); this.ctx.lineTo(ito.x * half_scale, ito.y * half_scale);
this.ctx.lineTo(ifr.x * half_scale, ifr.y * half_scale);
this.ctx.fill();
} }
moves &= ~mask; moves &= ~mask;
} }
@ -990,6 +1003,11 @@ const INTERFACE = {
this.ctx.save(); this.ctx.save();
this.ctx.translate(x, y); this.ctx.translate(x, y);
// Draw hints
if(piece !== null) {
this.hints(piece);
}
// Draw border // Draw border
if(piece.player == GAME.Const.Player.Dawn) { this.ctx.fillStyle = INTERFACE.Color.DawnDark; } if(piece.player == GAME.Const.Player.Dawn) { this.ctx.fillStyle = INTERFACE.Color.DawnDark; }
else { this.ctx.fillStyle = INTERFACE.Color.DuskDark; } else { this.ctx.fillStyle = INTERFACE.Color.DuskDark; }
@ -1009,9 +1027,6 @@ const INTERFACE = {
if(piece !== null) { if(piece !== null) {
let piece_def = GAME.Const.Piece[piece.piece]; let piece_def = GAME.Const.Piece[piece.piece];
// Draw border hints
this.hints(piece);
// Draw piece icon // Draw piece icon
if(INTERFACE_DATA.mirror && (piece.player ^ (INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) != 0) { if(INTERFACE_DATA.mirror && (piece.player ^ (INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate) != 0) {
this.ctx.rotate(Math.PI); this.ctx.rotate(Math.PI);