From 2a4c4c4a426153f5f343ff6dce3d21219c9e3520 Mon Sep 17 00:00:00 2001 From: yukirij Date: Thu, 29 Aug 2024 18:47:35 -0700 Subject: [PATCH] Rearrange pool tiles. --- www/js/game.js | 6 +- www/js/interface.js | 169 +++++++++++++++++++++----------------------- www/js/scene.js | 5 +- www/js/ui.js | 2 - www/js/util.js | 21 ++++-- 5 files changed, 102 insertions(+), 101 deletions(-) diff --git a/www/js/game.js b/www/js/game.js index c910d5e..5994d89 100644 --- a/www/js/game.js +++ b/www/js/game.js @@ -364,7 +364,7 @@ GAME.Game = class { // Check if swap is promoted. let hex = HEX.tile_to_hex(target.tile); hex.y -= MATH.sign_branch(target.player); - if(!target.promoted && target.has_promotion() && !HEX.is_valid(hex)) { + if(!target.promoted && target.has_promotion() && !HEX.is_valid_board(hex)) { target.promoted = true; } } @@ -381,7 +381,7 @@ GAME.Game = class { // Check if piece is promoted. let hex = HEX.tile_to_hex(piece.tile); hex.y -= MATH.sign_branch(piece.player); - if(!piece.promoted && piece.has_promotion() && !HEX.is_valid(hex)) { + if(!piece.promoted && piece.has_promotion() && !HEX.is_valid_board(hex)) { piece.promoted = true; } this.turn++; @@ -446,7 +446,7 @@ GAME.Game = class { let swap = false; let tile_occupied = false; - if(HEX.is_valid(move_hex)) { + if(HEX.is_valid_board(move_hex)) { let tile_id = HEX.hex_to_tile(move_hex); let tile_data = this.board.tiles[tile_id]; let target_id = tile_data.piece; diff --git a/www/js/interface.js b/www/js/interface.js index ead0176..cc59802 100644 --- a/www/js/interface.js +++ b/www/js/interface.js @@ -143,7 +143,7 @@ const INTERFACE = { } let hex = new MATH.Vec2(hx, hy); - if(HEX.is_valid(hex)) { + if(HEX.is_valid_board(hex)) { let tile = HEX.hex_to_tile(hex); INTERFACE_DATA.hover = new INTERFACE.Selection(0, tile, hex); } @@ -168,9 +168,16 @@ const INTERFACE = { let hx = kx + (rad_offset > rad_slope); let hy = Math.floor((ky + hx) / 2.0); + let tile_set = 7; + if(hy > 3) { + hy -= 4; + tile_set = 0; + } + let hex = new MATH.Vec2(hx, hy); - if(INTERFACE.Ui.pool_hex_is_valid(hex)) { - let tile = (hx * 7) + hy; + if(HEX.is_valid_pool(hex)) { + let tx = (2 * (hx > 0)) + (2 * (hx > 1)); + let tile = tile_set + tx + hy; INTERFACE_DATA.hover = new INTERFACE.Selection(1, tile, hex); } } @@ -436,95 +443,32 @@ const INTERFACE = { opponent_color = INTERFACE.Color.Dawn; } - // Draw player pool - for(let i = 0; i < 7; ++i) { - let is_hover = INTERFACE.Ui.tile_is_hover(1, i); - let is_select = INTERFACE.Ui.tile_is_select(1, i); - - let gui_x = basis_x + (radius * 14); - let gui_y = basis_y - (9 - (2 * i)) * gui_scale; - - 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(0.94); - ctx.fill(); - - // 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); - - // Draw count - ctx.fillStyle = player_color; - ctx.textBaseline = "middle"; - ctx.textAlign = "left"; - ctx.fillText(GAME_DATA.pools[+(player_identity == 1)].pieces[i], -0.6 * radius, 0); - - ctx.restore(); - } - - // Draw opponent pool - for(let i = 0; i < 7; ++i) { - let is_hover = INTERFACE.Ui.tile_is_hover(1, 7 + i); - let is_select = INTERFACE.Ui.tile_is_select(1, 7 + i); - - let gui_x = basis_x + (radius * 15.5); - let gui_y = basis_y - (10 - (2 * i)) * gui_scale; - - 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(0.94); - ctx.fill(); - - // 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); - - // Draw count - ctx.fillStyle = opponent_color; - ctx.textBaseline = "middle"; - ctx.textAlign = "center"; - ctx.fillText(GAME_DATA.pools[+(player_identity != 1)].pieces[i], -0.5 * radius, 0); - - ctx.restore(); - } + // Player pool + draw.pool( + basis_x + (14 * radius), + basis_y - gui_scale, + 0, + player_identity, + ); + // Opponent pool + draw.pool( + basis_x + (14 * radius), + basis_y - (9 * gui_scale), + 7, + player_identity ^ 1, + ); // Draw informational text let handle_pos = [ new MATH.Vec2( - basis_x + (radius * 10.75), - basis_y - (12 * gui_scale) + basis_x + (radius * 12), + basis_y - (11 * gui_scale) ), new MATH.Vec2( - basis_x + (radius * 10.75), - basis_y + (4 * gui_scale) + basis_x + (radius * 12), + basis_y + (3 * gui_scale) ), ]; @@ -798,6 +742,57 @@ const INTERFACE = { this.ctx.restore(); } + + pool(x, y, basis, player) { + let radius = INTERFACE.Radius * this.scale; + let icon_radius = 0.69 * radius; + + + + for(let i = 0; i < 7; ++i) { + let is_hover = INTERFACE.Ui.tile_is_hover(1, i + basis); + let is_select = INTERFACE.Ui.tile_is_select(1, i + basis); + + let ix = +(i > 1) + (i > 4); + let iy = i - ((i > 1) * 3) - ((i > 4) * 2) + (0.5 * (ix == 1)); + + let gui_x = x + (1.5 * radius * ix); + let gui_y = y + (2 * this.scale * iy); + + let player_color = INTERFACE.Color.Dawn; + if(player == 1) { player_color = INTERFACE.Color.Dusk; } + + this.ctx.save(); + this.ctx.translate(gui_x, gui_y); + + // Draw border + if(is_select || is_hover || (INTERFACE_DATA.player == player && INTERFACE_DATA.player == (GAME_DATA.turn & 1)) || (INTERFACE_DATA.player == 2 && player == (GAME_DATA.turn & 1))) { + if(is_hover) { this.ctx.fillStyle = INTERFACE.Color.HintHover; } + else { this.ctx.fillStyle = player_color; } + this.ctx.beginPath(); + this.hex(); + this.ctx.fill(); + } + + // Draw background if indicator is present. + if(is_select) { this.ctx.fillStyle = INTERFACE.Color.HintSelect; } + else { this.ctx.fillStyle = INTERFACE.Color.TileDark; } + this.ctx.beginPath(); + this.hex(0.94); + this.ctx.fill(); + + // Draw image + this.ctx.drawImage(GAME_ASSET.Image.Piece[i][player], -icon_radius * 0.55, -icon_radius * 0.8, icon_radius * 1.6, icon_radius * 1.6); + + // Draw count + this.ctx.fillStyle = player_color; + this.ctx.textBaseline = "middle"; + this.ctx.textAlign = "left"; + this.ctx.fillText(GAME_DATA.pools[player].pieces[i], -0.6 * radius, 0); + + this.ctx.restore(); + } + } }, Ui: { @@ -813,10 +808,6 @@ const INTERFACE = { && INTERFACE_DATA.select.tile == tile; }, - pool_hex_is_valid(hex) { - return (hex.x >= 0 && hex.x < 2 && hex.y >= 0 && hex.y < 7); - }, - hex_to_alnum(hex) { return String.fromCharCode(65 + hex.x) + (hex.y + 1); }, @@ -1309,7 +1300,7 @@ INTERFACE.TileScale = 0.9; INTERFACE.Radius = 2.0 / Math.sqrt(3.0); INTERFACE.HalfRadius = 1.0 / Math.sqrt(3.0); INTERFACE.Scale = 1 / 18; -INTERFACE.Ratio = (17.5 * INTERFACE.Radius) * INTERFACE.Scale; +INTERFACE.Ratio = (19 * INTERFACE.Radius) * INTERFACE.Scale; INTERFACE.HexVertex = [ // top face new MATH.Vec2(-INTERFACE.HalfRadius, -1), diff --git a/www/js/scene.js b/www/js/scene.js index d298402..29de196 100644 --- a/www/js/scene.js +++ b/www/js/scene.js @@ -565,8 +565,7 @@ const SCENES = { buttons_bottom.push(button_resign); } buttons_bottom.push(UI.button(LANG("back"), () => { - if(SCENE_FORWARD !== null) { LOAD(SCENE_FORWARD); } - else { LOAD(SCENES.Browse); } + LOAD(SCENES.Browse); })); UI.nav([ @@ -630,7 +629,7 @@ const SCENES = { load(data) { let buttons_bottom = [ ]; buttons_bottom.push(UI.button(LANG("reset"), () => { INTERFACE.reset(); })); - buttons_bottom.push(UI.button(LANG("back"), () => { LOAD(SCENES.Browse) })); + buttons_bottom.push(UI.button(LANG("back"), () => { LOAD(SCENES.Browse); })); UI.nav([ UI.button(LANG("rotate"), () => { INTERFACE.rotate(); }), diff --git a/www/js/ui.js b/www/js/ui.js index a8f3b04..a92975f 100644 --- a/www/js/ui.js +++ b/www/js/ui.js @@ -179,7 +179,6 @@ const UI = { for(let r = 0; r < records.length; ++r) { let buttons = [ ]; let join_callback = function() { - SCENE_FORWARD = SCENE; LOAD(SCENES.Game, { token:this.token, mode:INTERFACE.Mode.Player, @@ -189,7 +188,6 @@ const UI = { join_callback = join_callback.bind({token: records[r].token}); let spectate_callback = function() { - SCENE_FORWARD = SCENE; LOAD(SCENES.Game, { token:this.token, mode:INTERFACE.Mode.Review, diff --git a/www/js/util.js b/www/js/util.js index 62f1d9f..bd2278e 100644 --- a/www/js/util.js +++ b/www/js/util.js @@ -217,9 +217,9 @@ const MATH = { const COLOR = { rgba(r, g, b, a) { let ur = Math.floor(r * 255); - let ug = Math.floor(r * 255); - let ub = Math.floor(r * 255); - let ua = Math.floor(r * 255); + let ug = Math.floor(g * 255); + let ub = Math.floor(b * 255); + let ua = Math.floor(a * 255); return "rgba(" + ur + "," + ug + "," + ub + "," + ua + ")"; }, } @@ -239,7 +239,9 @@ const HEX = { return new MATH.Vec2(column, row); }, - is_valid(hex) { + is_valid_board(hex) { + // x = minimum + // y = maximum const COLUMNS = [ new MATH.Vec2(0, 4), new MATH.Vec2(0, 5), @@ -253,4 +255,15 @@ const HEX = { ]; return (hex.x >= 0 && hex.x < 9 && hex.y >= COLUMNS[hex.x].x && hex.y <= COLUMNS[hex.x].y); }, + + is_valid_pool(hex) { + // x = minimum + // y = maximum + const COLUMNS = [ + new MATH.Vec2(0, 1), + new MATH.Vec2(0, 2), + new MATH.Vec2(1, 2), + ]; + return (hex.x >= 0 && hex.x < 3 && hex.y >= COLUMNS[hex.x].x && hex.y <= COLUMNS[hex.x].y); + }, };