diff --git a/src/game/Board.ts b/src/game/Board.ts index 558f407..067d265 100644 --- a/src/game/Board.ts +++ b/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) - dot.alpha = 0.5 + const dot = new Tile('ghost', this.ticker, undefined, this.scale) + 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 - canPlayWest = direction !== 'east' && endX + signX * spaceNeeded > 0 - canPlayNorth = direction !== 'south' && endY + signY * spaceNeeded > 0 - canPlaySouth = direction !== 'north' && endY + signY * spaceNeeded < this.height + canPlayEast = direction !== 'west' && hasSpaceEast + canPlayWest = direction !== 'east' && hasSpaceWest + canPlayNorth = direction !== 'south' && hasSpaceNorth + canPlaySouth = direction !== 'north' && hasSpaceSouth } if (isSecond) { @@ -550,20 +558,11 @@ export class Board extends EventEmitter { } if (isPair && !endTile?.isVertical()) { - 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 + if ((direction === 'east' && hasSpaceEast) || (direction === 'west' && hasSpaceWest)) { + canPlayNorth = canPlaySouth = false } } + return [canPlayNorth, canPlayEast, canPlaySouth, canPlayWest] }