match animations working

js/libraries/ActionQueue.js

@@ -47,4 +47,28 @@ export class SwapTileAction {
                 })
         })
     }
+}
+
+export class MatchTilesAction {
+    constructor(tilesToMatch) {
+        this.tilesToMatch = tilesToMatch
+        this.tween = []
+    }
+
+    execute(isAllowedCallback = () => true) {
+        return new Promise((resolve, reject) => {
+            if(!isAllowedCallback()) {
+                 reject()
+                 return
+            }
+            this.tweens = []
+            this.tilesToMatch.forEach((tile) => {
+                this.tween.push(AsyncTween.create(tile, {scale: 0}, 500, Easing.Quadratic.EaseInOut))
+            })
+            Promise.all(this.tweens.map((tween) => tween.promise))
+                .then(() => {
+                    resolve()
+                })
+        })
+    }
 }

js/libraries/components/matchthree/Board.js

@@ -3,7 +3,7 @@ import Tile2 from "./Tile2.js"
 import AsyncTween from "../../AsyncTween.js"
 import { Easing } from "../../Easing.js"
 import { Point } from "../../spatial/Point.js"
-import { ActionQueue, SwapTileAction } from "../../ActionQueue.js"
+import { ActionQueue, MatchTilesAction, SwapTileAction } from "../../ActionQueue.js"
 
 class Board {
     constructor() {
@@ -55,8 +55,19 @@ class Board {
 
         Board.TILE_SIZE = Math.min(64, Math.max(40, Math.floor((narrowest - this.boardSize.x * 4) / this.boardSize.x)))
 
+        const offset = new Point(
+           0,
+           -(canvasBounds.height / 2) + (10 * (Board.TILE_PADDING + Board.TILE_SIZE)) / 2
+        )
+        if(!isVertical) {
+            offset.x = (7 * (Board.TILE_PADDING + Board.TILE_SIZE)) / 2
+            offset.y = 0
+        }
+
         this.position.x = this.boardSize.x * (Board.TILE_PADDING + Board.TILE_SIZE) / 2
         this.position.y = this.boardSize.y * (Board.TILE_PADDING + Board.TILE_SIZE) / 2
+
+        this.position.offset(offset)
     }
 
     onInputMove(position, isDown) {
@@ -124,7 +135,43 @@ class Board {
     }
 
     checkForMatches() {
-        console.log("checking for matches!")
+        const tilesToPop = []
+        //five in a row horizontal
+        //five in a row vertical
+        //four in a row horizontal
+        //four in a row vertical
+        //5 in an L shape
+        //three in a row horizontal
+        this.tiles.forEach((tile, index, array) => {
+            if(tilesToPop.includes(tile)) {
+                return
+            }
+            const validTiles = this.tiles.filter((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]))
+            }
+        })
+        //three in a row vertical
+        this.tiles.forEach((tile, index, array) => {
+            if(tilesToPop.includes(tile)) {
+                return
+            }
+            const validTiles = this.tiles.filter((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]))
+            }
+        })
+
+        tilesToPop.forEach((tile) => {
+            tile.isSelected = true
+        })
+
+        this.actionQueue.execute(MatchTilesAction)
+        //push matches into poplist
+
+        // this.popAndCascade(tilesToPop)
     }
 }