js/libraries/components/matchthree/Board.js

@@ -12,7 +12,7 @@ class Board {
         this.actionQueue = new ActionQueue()
         this.selectedTiles = []
     }
-    init(scaledCanvas) {
+    init(canvasBounds) {
         this.boardSize = { x: 7, y: 7 }
         for (let y = 0; y < this.boardSize.y; y++) {
             for (let x = 0; x < this.boardSize.x; x++) {
@@ -20,7 +20,12 @@ class Board {
             }
         }
 
-        this.onResize(scaledCanvas.bounds)
+        this.onResize(canvasBounds)
+
+        // setTimeout(() => {
+        //     console.log("checking for matches on load")
+            this.checkForMatches()
+        // }, 2000)
     }
 
     spawnTile(x, y) {
@@ -63,7 +68,7 @@ class Board {
             -(canvasBounds.height / 2) + (10 * (Board.TILE_PADDING + Board.TILE_SIZE)) / 2
         )
         if (!isVertical) {
-            offset.x = (7 * (Board.TILE_PADDING + Board.TILE_SIZE)) / 2
+            offset.x = (canvasBounds.width / 2) - (10 * (Board.TILE_PADDING + Board.TILE_SIZE)) / 2
             offset.y = 0
         }
 
@@ -140,16 +145,61 @@ class Board {
     checkForMatches() {
         const tilesToPop = []
         //five in a row horizontal
+        this.tiles.forEach((tile, index, array) => {
+            if (tilesToPop.includes(tile)) {
+                return
+            }
+            const validTiles = this.tiles.filter((checkedTile) => !tilesToPop.includes(checkedTile) && tile.type == checkedTile.type && checkedTile.position.y == tile.position.y && (checkedTile.position.x == tile.position.x + 2 || checkedTile.position.x == tile.position.x + 1 || checkedTile.position.x == tile.position.x - 1 || checkedTile.position.x == tile.position.x - 2))
+            if (validTiles.length == 4) {
+                tilesToPop.push(tile, ...validTiles)
+                this.actionQueue.push(new MatchTilesAction([tile, ...validTiles]))
+                return
+            }
+        })
         //five in a row vertical
+        this.tiles.forEach((tile, index, array) => {
+            if (tilesToPop.includes(tile)) {
+                return
+            }
+            const validTiles = this.tiles.filter((checkedTile) => !tilesToPop.includes(checkedTile) && tile.type == checkedTile.type && checkedTile.position.x == tile.position.x && (checkedTile.position.y == tile.position.y + 2 || checkedTile.position.y == tile.position.y + 1 || checkedTile.position.y == tile.position.y - 1 || checkedTile.position.y == tile.position.y - 2))
+            if (validTiles.length == 4) {
+                tilesToPop.push(tile, ...validTiles)
+                this.actionQueue.push(new MatchTilesAction([tile, ...validTiles]))
+                return
+            }
+        })
         //four in a row horizontal
+        this.tiles.forEach((tile, index, array) => {
+            if (tilesToPop.includes(tile)) {
+                return
+            }
+            const validTiles = this.tiles.filter((checkedTile) => !tilesToPop.includes(checkedTile) && tile.type == checkedTile.type && checkedTile.position.y == tile.position.y && (checkedTile.position.x == tile.position.x + 2 || checkedTile.position.x == tile.position.x + 1 || checkedTile.position.x == tile.position.x - 1))
+            if (validTiles.length == 3) {
+                tilesToPop.push(tile, ...validTiles)
+                this.actionQueue.push(new MatchTilesAction([tile, ...validTiles]))
+                return
+            }
+        })
         //four in a row vertical
+        this.tiles.forEach((tile, index, array) => {
+            if (tilesToPop.includes(tile)) {
+                return
+            }
+            const validTiles = this.tiles.filter((checkedTile) => !tilesToPop.includes(checkedTile) && tile.type == checkedTile.type && checkedTile.position.x == tile.position.x && (checkedTile.position.y == tile.position.y + 2 || checkedTile.position.y == tile.position.y + 1 || checkedTile.position.y == tile.position.y - 1))
+            if (validTiles.length == 3) {
+                tilesToPop.push(tile, ...validTiles)
+                this.actionQueue.push(new MatchTilesAction([tile, ...validTiles]))
+                return
+            }
+        })
         //5 in an L shape
+            //TODO ugh this one is hard
         //three in a row horizontal
         this.tiles.forEach((tile, index, array) => {
             if (tilesToPop.includes(tile)) {
                 return
             }
-            const validTiles = this.tiles.filter((checkedTile) => tile != checkedTile && tile.type == checkedTile.type && checkedTile.position.y == tile.position.y && (checkedTile.position.x == tile.position.x + 1 || checkedTile.position.x == tile.position.x - 1))
+            const validTiles = this.tiles.filter((checkedTile) => !tilesToPop.includes(checkedTile) && tile.type == checkedTile.type && checkedTile.position.y == tile.position.y && (checkedTile.position.x == tile.position.x + 1 || checkedTile.position.x == tile.position.x - 1))
             if (validTiles.length == 2) {
                 tilesToPop.push(tile, ...validTiles)
                 this.actionQueue.push(new MatchTilesAction([tile, ...validTiles]))
@@ -161,7 +211,7 @@ class Board {
             if (tilesToPop.includes(tile)) {
                 return
             }
-            const validTiles = this.tiles.filter((checkedTile) => tile != checkedTile && tile.type == checkedTile.type && checkedTile.position.x == tile.position.x && (checkedTile.position.y == tile.position.y + 1 || checkedTile.position.y == tile.position.y - 1))
+            const validTiles = this.tiles.filter((checkedTile) => !tilesToPop.includes(checkedTile) && tile.type == checkedTile.type && checkedTile.position.x == tile.position.x && (checkedTile.position.y == tile.position.y + 1 || checkedTile.position.y == tile.position.y - 1))
             if (validTiles.length == 2) {
                 tilesToPop.push(tile, ...validTiles)
                 this.actionQueue.push(new MatchTilesAction([tile, ...validTiles]))

js/viewer/states/MatchThreeState2.js

@@ -27,9 +27,8 @@ export default class MatchThreeState {
     init(scaledCanvas) {
         this.canvasBounds = scaledCanvas.bounds
 
-        this.boardSize = { x: 7, y: 7 }
         this.buttonCount = 6
-        this.board.init(scaledCanvas)
+        
     }
 
     enter() {
@@ -53,6 +52,7 @@ export default class MatchThreeState {
         this.camera.position.x = 0
         this.camera.position.y = 0
 
+        this.board.init(this.canvasBounds)
         this.alpha = 1
         AsyncTween.create(this, { alpha: 0 }, 500, Easing.Quadratic.EaseOut)
     }