Rearrange pool tiles.

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;

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)) {
+                if(HEX.is_valid_pool(hex)) {
-                    let tile = (hx * 7) + hy;
+                    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
+        // Player pool
-        for(let i = 0; i < 7; ++i) {
+        draw.pool(
-            let is_hover = INTERFACE.Ui.tile_is_hover(1, i);
+            basis_x + (14 * radius),
-            let is_select = INTERFACE.Ui.tile_is_select(1, i);
+            basis_y - gui_scale,
-
+            0,
-            let gui_x = basis_x + (radius * 14);
+            player_identity,
-            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();
-        }
 
+        // 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_x + (radius * 12),
-                basis_y - (12 * gui_scale)
+                basis_y - (11 * gui_scale)
             ),
             new MATH.Vec2(
-                basis_x + (radius * 10.75),
+                basis_x + (radius * 12),
-                basis_y + (4 * gui_scale)
+                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),

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); }
+                LOAD(SCENES.Browse);
-                else { 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(); }),

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,

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 ug = Math.floor(g * 255);
-        let ub = Math.floor(r * 255);
+        let ub = Math.floor(b * 255);
-        let ua = Math.floor(r * 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);
+    },
 };