fixes

src/game/Board.ts

@@ -11,11 +11,11 @@ import {
 import { Scale, type ScaleFunction } from '@/game/utilities/scale'
 import type { GameState, Movement, TileDto } from '@/common/interfaces'
 import { Tile } from '@/game/Tile'
-import { DIRECTIONS, createContainer, isTilePair } from '@/common/helpers'
+import { DIRECTIONS, createContainer, isTilePair, isTileVertical } from '@/common/helpers'
 import { createText } from '@/game/utilities/fonts'
-import { Dot } from '@/game/Dot'
 import { LoggingService } from '@/services/LoggingService'
 import { inject } from 'vue'
+import { GlowFilter } from 'pixi-filters'
 
 export class Board extends EventEmitter {
   private _scale: number = 1
@@ -182,71 +182,6 @@ export class Board extends EventEmitter {
     }
   }
 
-  getOrientationII(tile: TileDto, side: string) {
-    let orientation = ''
-    const isPair = isTilePair(tile)
-    if (side === 'left') {
-      if (this.freeEnds !== undefined && tile.pips !== undefined) {
-        const isInverted = this.freeEnds[0] === tile.pips[1]
-        if (this.leftDirection === 'east') {
-          if (!isPair) {
-            orientation = isInverted ? 'east' : 'west'
-          } else {
-            orientation = 'north'
-          }
-        } else if (this.leftDirection === 'west') {
-          if (!isPair) {
-            orientation = isInverted ? 'west' : 'east'
-          } else {
-            orientation = 'north'
-          }
-        } else if (this.leftDirection === 'north') {
-          if (!isPair) {
-            orientation = isInverted ? 'north' : 'south'
-          } else {
-            orientation = 'west'
-          }
-        } else if (this.leftDirection === 'south') {
-          if (!isPair) {
-            orientation = isInverted ? 'south' : 'north'
-          } else {
-            orientation = 'west'
-          }
-        }
-      }
-    } else if (side === 'right') {
-      if (this.freeEnds !== undefined && tile.pips !== undefined) {
-        const isInverted = this.freeEnds[1] === tile.pips[0]
-        if (this.rightDirection === 'east') {
-          if (!isPair) {
-            orientation = isInverted ? 'west' : 'east'
-          } else {
-            orientation = 'north'
-          }
-        } else if (this.rightDirection === 'west') {
-          if (!isPair) {
-            orientation = isInverted ? 'east' : 'west'
-          } else {
-            orientation = 'north'
-          }
-        } else if (this.rightDirection === 'north') {
-          if (!isPair) {
-            orientation = isInverted ? 'south' : 'north'
-          } else {
-            orientation = 'west'
-          }
-        } else if (this.rightDirection === 'south') {
-          if (!isPair) {
-            orientation = isInverted ? 'north' : 'south'
-          } else {
-            orientation = 'west'
-          }
-        }
-      }
-    }
-    return orientation
-  }
-
   addTile(tile: Tile, move: Movement) {
     let orientation = ''
     let x: number =
@@ -277,7 +212,7 @@ export class Board extends EventEmitter {
       const directionIndex = DIRECTIONS.indexOf(direction)
       isLeft ? (this.leftDirection = direction) : (this.rightDirection = direction)
       const availablePosition: [number, number] | undefined = availablePositions[directionIndex]
-      orientation = this.getOrientationII(tileDto, move.type)
+      orientation = this.getOrientation(tileDto, move.type)
       availablePosition && ([x, y] = availablePosition)
     } else {
       if (this.tiles.length === 0) {
@@ -305,25 +240,13 @@ export class Board extends EventEmitter {
         }
         direction = DIRECTIONS[directionIndex]
         isLeft ? (this.leftDirection = direction) : (this.rightDirection = direction)
-        orientation = this.getOrientationII(tileDto, move.type)
+        orientation = this.getOrientation(tileDto, move.type)
         availablePosition && ([x, y] = availablePosition)
       }
     }
     const endTile = isLeft ? this.leftTile : this.rightTile
     const isEndVertical = endTile?.isVertical() ?? false
     const isNextVertical = orientation === 'north' || orientation === 'south'
-    if (this.tiles.length > 0 && endTile !== undefined) {
-      //!tile.equals(endTile)
-      if (direction === 'east') {
-        x += !isEndVertical && isNextVertical ? 0 : 1
-      } else if (direction === 'west') {
-        x -= !isEndVertical && isNextVertical ? 0 : 1
-      } else if (direction === 'north') {
-        y -= isEndVertical && !isNextVertical ? 0 : 1
-      } else if (direction === 'south') {
-        y += isEndVertical && !isNextVertical ? 0 : 1
-      }
-    }
     tile.setPosition(this.scaleX(x), this.scaleY(y))
     tile.setOrientation(orientation)
     tile.reScale(this.scale)
@@ -400,7 +323,7 @@ export class Board extends EventEmitter {
 
   setValidEnds(values: boolean[], tile: TileDto) {
     if (this.count === 0) {
-      this.createInteractionsII('right', [[0, 0], undefined, undefined, undefined])
+      this.createInteractions('right', [[0, 0], undefined, undefined, undefined])
       return
     }
 
@@ -408,13 +331,13 @@ export class Board extends EventEmitter {
       const side = 'left'
       const validInteractions = this.nextTileValidMoves(tile, side)
       const validPoints = this.nextTileValidPoints(tile, side, validInteractions)
-      this.createInteractionsII(side, validPoints)
+      this.createInteractions(side, validPoints)
     }
     if (values[1]) {
       const side = 'right'
       const validInteractions = this.nextTileValidMoves(tile, side)
       const validPoints = this.nextTileValidPoints(tile, side, validInteractions)
-      this.createInteractionsII(side, validPoints)
+      this.createInteractions(side, validPoints)
     }
   }
 
@@ -439,37 +362,39 @@ export class Board extends EventEmitter {
     let pointEast: [number, number] | undefined = undefined
     let pointWest: [number, number] | undefined = undefined
 
+    const incX = isTilePair(tile) ? 3 : 4
+
     if (this.count !== 0) {
       if (validMoves[0]) {
         // north
         if (isEndVertical) {
-          pointNorth = [x, y - 3]
+          pointNorth = [x, y - incX]
         } else {
-          pointNorth = isEndPair ? [x, y - 2] : [x + 1 * signX, y - 2]
+          pointNorth = isEndPair ? [x, y - 3] : [x + 1 * signX, y - 3]
         }
       }
       if (validMoves[2]) {
         // south
         if (isEndVertical) {
-          pointSouth = [x, y + 3]
+          pointSouth = [x, y + incX]
         } else {
-          pointSouth = isEndPair ? [x, y + 2] : [x + 1 * signX, y + 2]
+          pointSouth = isEndPair ? [x, y + 3] : [x + 1 * signX, y + 3]
         }
       }
       if (validMoves[1]) {
         // east
         if (isEndVertical) {
-          pointEast = isEndPair ? [x + 2, y] : [x + 2, y + 1 * signY]
+          pointEast = isEndPair ? [x + 3, y] : [x + 3, y + 1 * signY]
         } else {
-          pointEast = [x + 3, y]
+          pointEast = [x + incX, y]
         }
       }
       if (validMoves[3]) {
         // west
         if (isEndVertical) {
-          pointWest = isEndPair ? [x - 2, y] : [x - 2, y + 1 * signY]
+          pointWest = isEndPair ? [x - 3, y] : [x - 3, y + 1 * signY]
         } else {
-          pointWest = [x - 3, y]
+          pointWest = [x - incX, y]
         }
       }
     }
@@ -477,7 +402,7 @@ export class Board extends EventEmitter {
     return [pointNorth, pointEast, pointSouth, pointWest]
   }
 
-  createInteractionsII(side: string, validInteractions: ([number, number] | undefined)[]) {
+  createInteractions(side: string, validInteractions: ([number, number] | undefined)[]) {
     if (validInteractions[0] !== undefined) {
       this.addInteraction(validInteractions[0][0], validInteractions[0][1], side, 'north')
     }
@@ -497,23 +422,102 @@ export class Board extends EventEmitter {
   }
 
   addInteraction(x: number, y: number, side: string, direction?: string) {
-    const dot = new Dot(this.ticker, this.scale)
+    const dot = new Tile('ghost', this.ticker, undefined, this.scale)
-    dot.alpha = 0.5
+    dot.setFilters([
+      new GlowFilter({
+        distance: 5,
+        outerStrength: 1,
+        innerStrength: 0,
+        color: 0xffffff,
+        quality: 0.5
+      })
+    ])
+    dot.setOrientation(direction ?? 'north')
+    // const dot = new Dot(this.ticker, this.scale)
+    dot.alpha = 0.1
     dot.interactive = true
     dot.on('pointerdown', () => {
       this.emit(`${side}Click`, direction && { direction, x, y })
       this.cleanInteractions()
     })
     dot.on('pointerover', () => {
-      dot.alpha = 1
+      dot.alpha = 0.2
     })
     dot.on('pointerout', () => {
-      dot.alpha = 0.5
+      dot.alpha = 0.1
     })
     dot.setPosition(this.scaleX(x), this.scaleY(y))
     dot.addTo(this.interactionContainer)
   }
 
+  getOrientation(tile: TileDto, side: string) {
+    let orientation = ''
+    const isPair = isTilePair(tile)
+    const isLeft = side === 'left'
+    const endTile = isLeft ? this.leftTile : this.rightTile
+
+    if (side === 'left') {
+      if (this.freeEnds !== undefined && tile.pips !== undefined) {
+        const isInverted = this.freeEnds[0] === tile.pips[1]
+        if (this.leftDirection === 'east') {
+          if (!isPair) {
+            orientation = isInverted ? 'east' : 'west'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        } else if (this.leftDirection === 'west') {
+          if (!isPair) {
+            orientation = isInverted ? 'west' : 'east'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        } else if (this.leftDirection === 'north') {
+          if (!isPair) {
+            orientation = isInverted ? 'north' : 'south'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        } else if (this.leftDirection === 'south') {
+          if (!isPair) {
+            orientation = isInverted ? 'south' : 'north'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        }
+      }
+    } else if (side === 'right') {
+      if (this.freeEnds !== undefined && tile.pips !== undefined) {
+        const isInverted = this.freeEnds[1] === tile.pips[0]
+        if (this.rightDirection === 'east') {
+          if (!isPair) {
+            orientation = isInverted ? 'west' : 'east'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        } else if (this.rightDirection === 'west') {
+          if (!isPair) {
+            orientation = isInverted ? 'east' : 'west'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        } else if (this.rightDirection === 'north') {
+          if (!isPair) {
+            orientation = isInverted ? 'south' : 'north'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        } else if (this.rightDirection === 'south') {
+          if (!isPair) {
+            orientation = isInverted ? 'north' : 'south'
+          } else {
+            endTile?.isVertical() ? (orientation = 'west') : (orientation = 'north')
+          }
+        }
+      }
+    }
+    return orientation
+  }
+
   nextTileValidMoves(tile: TileDto, side: string): boolean[] {
     if (tile === undefined || this.freeEnds === undefined) return [false, false, false, false]
     if (this.count === 0) return [false, true, false, true] // depends on game mode
@@ -532,6 +536,10 @@ export class Board extends EventEmitter {
     const spaceNeeded = tileHeight / 2 + tileHeight + margin
     const isSecond = this.count === 1
     const isPair = isTilePair(tile)
+    const hasSpaceEast = endX + signX * spaceNeeded < this.width
+    const hasSpaceWest = endX + signX * spaceNeeded > 0
+    const hasSpaceNorth = endY + signY * spaceNeeded > 0
+    const hasSpaceSouth = endY + signY * spaceNeeded < this.height
 
     let canPlayNorth = false
     let canPlaySouth = false
@@ -539,10 +547,10 @@ export class Board extends EventEmitter {
     let canPlayWest = false
 
     if (validMove) {
-      canPlayEast = direction !== 'west' && endX + signX * spaceNeeded < this.width
+      canPlayEast = direction !== 'west' && hasSpaceEast
-      canPlayWest = direction !== 'east' && endX + signX * spaceNeeded > 0
+      canPlayWest = direction !== 'east' && hasSpaceWest
-      canPlayNorth = direction !== 'south' && endY + signY * spaceNeeded > 0
+      canPlayNorth = direction !== 'south' && hasSpaceNorth
-      canPlaySouth = direction !== 'north' && endY + signY * spaceNeeded < this.height
+      canPlaySouth = direction !== 'north' && hasSpaceSouth
     }
 
     if (isSecond) {
@@ -550,20 +558,11 @@ export class Board extends EventEmitter {
     }
 
     if (isPair && !endTile?.isVertical()) {
+      if ((direction === 'east' && hasSpaceEast) || (direction === 'west' && hasSpaceWest)) {
         canPlayNorth = canPlaySouth = false
       }
+    }
 
-    if (isPair && endTile?.isVertical()) {
-      if (direction === 'north') {
-        canPlaySouth = false
-      } else if (direction === 'south') {
-        canPlayNorth = false
-      } else if (direction === 'east') {
-        canPlayWest = false
-      } else if (direction === 'west') {
-        canPlayEast = false
-      }
-    }
     return [canPlayNorth, canPlayEast, canPlaySouth, canPlayWest]
   }