adding 5 in a row, 4 in a row match states

js/libraries/components/matchthree/Board.js

@@ -68,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
         }
 
@@ -145,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]))
@@ -166,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]))