initial commit

This commit is contained in:
Jose Conde
2024-07-05 01:31:55 +02:00
parent 2ac728fe02
commit 39ee278c27
33 changed files with 1839 additions and 1401 deletions

View File

@ -1,86 +1,9 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* bulma color variables */
--bulma-primary-h: 40deg;
--bulma-primary-s: 48%;
--bulma-primary-l: 48%;
--bulma-info-h: 168deg;
--bulma-info-s: 58%;
--bulma-info-l: 28%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -1,33 +1 @@
/* @import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
padding: 0 2rem;
}
} */
@import './base.css';

View File

@ -1,120 +1,92 @@
<script setup lang="ts">
import type { GameState, PlayerState } from '@/utilities/interfaces'
import { onMounted, ref, type PropType } from 'vue'
import { assets } from '@/utilities/assets'
import type { GameSessionState, GameState, PlayerState } from '@/utilities/interfaces'
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { Game } from '@/utilities/Game'
import { useGameStore } from '@/stores/game'
import { Assets, Application as PixiApplication, Container, Sprite, Texture } from 'pixi.js'
import { Scale } from '@/utilities/scale'
import Hand from '@/utilities/Hand'
import { playerState as mockPS } from '@/utilities/mocks'
import { Board } from '@/utilities/Board'
const emit = defineEmits(['tileClick', 'passClick', 'leftClick', 'rightClick'])
defineProps({
gameState: Object as PropType<GameState>,
playerState: Object as PropType<PlayerState>
const emit = defineEmits(['move'])
const props = defineProps({
playerId: String
})
// console.log('d1 :>> ', d1)
// console.log('t1 :>> ', t1)
// const tile = new Sprite(t1)
const gameStore = useGameStore()
let appEl = ref<HTMLElement | null>(null)
const app: PixiApplication = new PixiApplication()
let hand: Hand
let board: Board
const game = new Game(
{
width: 1200,
height: 650,
boardScale: 0.8,
handScale: 1
},
emit,
props
)
const scaleX = Scale([-16, 16], [0, 800])
const scaleY = Scale([-12, 12], [0, 600])
watch(
() => gameStore.canMakeMove,
(value: boolean) => {
game.setCanMakeMove(value)
}
)
watch(
() => gameStore.gameState,
(value: GameState | undefined) => {
if (value === undefined) return
game.board.setState(value, props.playerId ?? '')
// console.log('gameState-------------------------------------- :>> ', value)
}
)
watch(
() => gameStore.sessionState,
(value: GameSessionState | undefined) => {
if (value === undefined) return
// console.log('gameSessionState-------------------------------------- :>> ', value)
}
)
watch(
() => gameStore.playerState,
(value: PlayerState | undefined) => {
if (value === undefined) return
game.hand.update(value as PlayerState)
}
)
onMounted(async () => {
await setup()
await preload()
if (appEl.value === null) return
const canvas = await game.setup()
appEl.value.appendChild(canvas)
await game.preload()
await game.start()
await start()
// console.log('appEl :>> ', appEl.value)
// console.log('mounted')
// if (appEl.value === null) return
// console.log('App initialized')
// console.log('loading assets')
// const t1 = await Assets.load([d1])
// console.log(`${d1} loaded`)
// console.log('assets loaded')
// const tile = new Sprite(t1)
// tile.anchor.set(0.5)
// tile.width = 50
// tile.height = 100
// tile.x = app.screen.width / 2
// tile.y = app.screen.height / 2
// app.stage.addChild(tile)
// mockMove(game, [6, 6], 'left')
// mockMove(game, [6, 4], 'left')
// mockMove(game, [4, 4], 'left')
// mockMove(game, [4, 0], 'left')
// mockMove(game, [0, 0], 'left')
// mockMove(game, [2, 0], 'left')
// mockMove(game, [2, 2], 'left')
// mockMove(game, [6, 5], 'right')
// mockMove(game, [5, 5], 'right')
// mockMove(game, [5, 1], 'right')
// mockMove(game, [3, 1], 'right')
// mockMove(game, [3, 0], 'right')
// mockMove(game, [5, 0], 'right')
})
async function start() {
console.log('start')
console.log('scaleX(0) :>> ', scaleX(0))
console.log('scaleY(0) :>> ', scaleY(0))
const boardContainer: Container = new Container()
const handContainer: Container = new Container()
app.stage.addChild(boardContainer)
app.stage.addChild(handContainer)
hand = new Hand(handContainer, app.canvas)
board = new Board(boardContainer, app.canvas)
hand.setTiles(mockPS as PlayerState)
hand.on('tileClick', (tile) => {
emit('tileClick', tile)
})
hand.on('passClick', () => {
emit('passClick')
})
hand.on('leftClick', () => {
emit('tileClick')
})
hand.on('rightClick', () => {
emit('rightClick')
})
app.ticker.add((time) => {
// hand.update(time)
// board.update(time)
})
}
async function setup() {
await app.init({ width: 800, height: 600 })
if (appEl.value === null) return
appEl.value.appendChild(app.canvas)
}
async function preload() {
console.log('loading assets')
await Assets.load(assets)
console.log('assets loaded')
}
onUnmounted(() => {
game.destroy()
})
</script>
<template>
<div ref="appEl" class="game-container"></div>
<!-- <Application :width="800" :height="600">
<Loader :resources="resources">
<template #fallback="{ progress }">
<text :x="120" :y="120" :anchor="0.5">
{{ `Loading... ${progress}` }}
</text>
</template>
<template #default="{}"> </template>
</Loader>
</Application> -->
<div ref="appEl" class="game-app"></div>
</template>
<style scoped>
.game-container {
.game-app {
position: relative;
z-index: 10;
}

View File

@ -24,7 +24,6 @@ function getPipClasses(value: number | undefined): string[] {
return positions[value]
}
console.log('props.tile :>> ', props.tile)
</script>
<template>

View File

@ -18,7 +18,7 @@ function logout() {
<div class="authenticated-layout">
<header>
<nav>
<button @click="logout">Logout</button>
<!-- <button @click="logout">Logout</button> -->
</nav>
</header>
<main>

View File

@ -3,16 +3,18 @@ import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import '../node_modules/bulma/css/bulma.css'
import App from './App.vue'
import router from './router'
import socketService from '@/services/socket'
import { SocketIoClientService } from '@/services/SocketIoClientService'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.provide('socket', socketService)
app.provide('socket', new SocketIoClientService('http://localhost:3000'))
app.mount('#app')

View File

@ -0,0 +1,58 @@
import { useGameStore } from '@/stores/game'
import { wait } from '@/utilities/helpers'
import type { GameSessionState } from '@/utilities/interfaces'
import { storeToRefs } from 'pinia'
export class SocketIoEventManager {
gameStore: any = useGameStore()
handleSessionStateEvent(data: GameSessionState) {
const { updateSessionState } = this.gameStore
updateSessionState(data)
return {
status: 'ok'
}
}
handleGameStateEvent(data: any) {
const { updateGameState } = this.gameStore
updateGameState(data)
return {
status: 'ok'
}
}
handlePlayerStateEvent(data: any) {
const { updatePlayerState } = this.gameStore
updatePlayerState(data)
return {
status: 'ok'
}
}
async handleCanMakeMoveEvent(data: any) {
const { canMakeMove, moveToMake } = storeToRefs(this.gameStore)
const { updateCanMakeMove, setIncomingFreeEnds } = this.gameStore
setIncomingFreeEnds(data.freeHands)
updateCanMakeMove(true)
while (canMakeMove.value) {
await wait(500)
}
return {
status: 'ok',
...moveToMake.value
}
}
async handleCanSelectTileEvent() {
const { canSelectTile } = storeToRefs(this.gameStore)
const { updateCanSelectTile } = this.gameStore
updateCanSelectTile(true)
while (canSelectTile.value) {
await wait(500)
}
return {
status: 'ok'
}
}
}

View File

@ -0,0 +1,82 @@
import type { GameSessionState, GameState, PlayerState } from '@/utilities/interfaces'
import { io, Socket } from 'socket.io-client'
import { SocketIoEventManager } from '@/managers/SocketIoEventManager'
export class SocketIoClientService {
public socket: Socket
private isConnected = false
private gameEventManager = new SocketIoEventManager()
constructor(url: string) {
this.socket = io(url)
this.addEvents()
}
addEvents(): void {
this.socket.on('connect', () => {
this.isConnected = true
if (this.socket && this.socket.recovered) {
console.log('socket recovered succesfully')
} else {
console.log('socket connected')
}
})
this.socket.on('disconnect', () => {
this.isConnected = false
console.log('Disconnected from server')
})
this.socket.on('reconnect', () => {
this.isConnected = true
console.log('Reconnected to server')
})
this.socket.on('reconnect_error', () => {
this.isConnected = false
console.log('Failed to reconnect to server')
})
this.socket.on('sessionState', (data: GameSessionState, callback: any) => {
callback(this.gameEventManager.handleSessionStateEvent(data))
})
this.socket.on('gameState', (data: GameState, callback: any) => {
callback(this.gameEventManager.handleGameStateEvent(data))
})
this.socket.on('playerState', (data: PlayerState, callback: any) => {
callback(this.gameEventManager.handlePlayerStateEvent(data))
})
this.socket.on('makeMove', async (data: any, callback: any) => {
callback(await this.gameEventManager.handleCanMakeMoveEvent(data))
})
this.socket.on('chooseTile', async (data: any, callback: any) => {
callback(await this.gameEventManager.handleCanSelectTileEvent())
})
}
sendMessage(event: string, data: any): void {
if (this.isConnected) {
this.socket?.emit(event, data)
} else {
console.log('Not connected to server')
}
}
async sendMessageWithAck(event: string, data: any): Promise<any> {
if (this.isConnected) {
return await this.socket?.emitWithAck(event, data)
} else {
console.log('Not connected to server')
}
}
disconnect(): void {
this.socket?.disconnect()
this.isConnected = false
console.log('Disconnected from server')
}
}

View File

@ -3,17 +3,32 @@ import { io } from 'socket.io-client'
const URL = 'http://localhost:3000'
process.env.NODE_ENV === 'production' ? undefined : 'http://localhost:3001'
console.log('URL :>> ', URL)
const socket = URL === undefined ? io() : io(URL)
const ioOpts = {
// timeout: 300 * 1000,
// reconnectionDelay: 5000 // defaults to 1000
// reconnectionDelayMax: 10000 // defaults to 5000reconnection: true, // Enable reconnection
reconnectionAttempts: Infinity, // Maximum number of reconnection attempts
reconnectionDelay: 1000, // Time between each attempt (in ms)
reconnectionDelayMax: 5000, // Maximum time between attempts (in ms)
randomizationFactor: 0.5, // Randomization factor for the delay
timeout: 20000 // Connection timeout (in ms)
}
// const socket = URL === undefined ? io(ioOpts) : io(URL, ioOpts)
const socket = io('http://localhost:3000', ioOpts)
socket.on('connect', () => {
console.log('---> connected')
if (socket.recovered) {
console.log('socket recovered succesfully')
} else {
console.log('socket connected')
}
// setTimeout(() => {
// socket.io.engine.close()
// }, 60 * 1000)
})
socket.onAny((event, msg) => {
console.log('event :>> ', event)
console.log('msg :>> ', msg)
})
console.log('help :>> ')
export default {
socket,
sendMessage(event: any, data: any) {

58
src/stores/game.ts Normal file
View File

@ -0,0 +1,58 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { GameSessionState, GameState, Movement, PlayerState } from '@/utilities/interfaces'
export const useGameStore = defineStore('game', () => {
const sessionState = ref<GameSessionState | undefined>(undefined)
const gameState = ref<GameState | undefined>(undefined)
const playerState = ref<PlayerState | undefined>(undefined)
const canMakeMove = ref(false)
const canSelectTile = ref(false)
const moveToMake = ref<Movement | undefined>(undefined)
const incomingFreeEnds = ref<[number, number] | undefined>(undefined)
function updateSessionState(newState: GameSessionState) {
sessionState.value = newState
}
function updateGameState(newState: GameState) {
gameState.value = newState
}
function updatePlayerState(newState: PlayerState) {
playerState.value = newState
}
function updateCanMakeMove(value: boolean) {
canMakeMove.value = value
}
function setMoveToMake(move: Movement) {
moveToMake.value = move
}
function updateCanSelectTile(value: boolean) {
canSelectTile.value = value
}
function setIncomingFreeEnds(freeEnds: [number, number]) {
incomingFreeEnds.value = freeEnds
}
return {
sessionState,
gameState,
playerState,
canMakeMove,
moveToMake,
incomingFreeEnds,
canSelectTile,
updateSessionState,
updateGameState,
updatePlayerState,
updateCanMakeMove,
setMoveToMake,
setIncomingFreeEnds,
updateCanSelectTile
}
})

View File

@ -1,143 +1,556 @@
import { Container, EventEmitter, Graphics, Text } from 'pixi.js'
import { Scale } from './scale'
import type { GameState } from './interfaces'
import type { Tile } from './Tile'
import { getColorBackground } from './backgrounds'
import { Application, Container, EventEmitter, Graphics, Text, Ticker } from 'pixi.js'
import { Scale, type ScaleFunction } from './scale'
import type { GameState, Movement, TileDto } from './interfaces'
import { Tile } from './Tile'
import { DIRECTIONS, createContainer, isTilePair, isTileVertical } from './helpers'
import { createText } from './fonts'
import { Dot } from './Dot'
export class Board extends EventEmitter {
container: Container
private _scale: number = 1
private _canMove: boolean = false
ticker: Ticker
height: number
width: number
scaleY: Function
scaleX: Function
grain: number = 25
scaleY: ScaleFunction
scaleX: ScaleFunction
state: GameState | undefined
initialContainer: Container = new Container()
mainContainer: Container = new Container()
leftContainer: Container = new Container()
rightContainer: Container = new Container()
container!: Container
initialContainer!: Container
tilesContainer!: Container
leftContainer!: Container
rightContainer!: Container
interactionContainer!: Container
textContainer!: Container
tiles: Tile[] = []
boneyard: Tile[] = []
movements: any[] = []
freeEnds?: [number, number]
leftTile?: Tile
rightTile?: Tile
nextTile?: Tile
textWaitForPlayers!: Text
textYourTurn!: Text
leftDirection: string = 'west'
rightDirection: string = 'east'
playerHand: Tile[] = []
firstTile: Tile | undefined
constructor(container: Container, canvas: HTMLCanvasElement) {
constructor(app: Application) {
super()
this.container = container
this.height = canvas.height - 130
this.width = canvas.width
this.container.width = this.width
this.container.height = this.height
this.container.y = 0
const scaleXSteps = Math.floor(this.width / 25)
const scaleYSteps = Math.floor(this.height / 25)
this.ticker = app.ticker
this.height = app.canvas.height - 130
this.width = app.canvas.width
this.scaleX = Scale([0, this.width], [0, this.width])
this.scaleY = Scale([0, this.height], [0, this.height])
this.calculateScale()
this.container = createContainer({
width: this.width,
height: this.height,
parent: app.stage
})
this.initialContainer = createContainer({
width: this.width,
height: this.height,
color: 0x1e2f23,
visible: false,
parent: this.container
})
this.tilesContainer = createContainer({
width: this.width,
height: this.height,
color: 0x1e2f23,
parent: this.container
})
this.interactionContainer = createContainer({
width: this.width,
height: this.height,
parent: this.container,
visible: false
})
const verticalLine = new Graphics()
.moveTo(this.scaleX(0), 0)
.lineTo(this.scaleX(0), this.height)
.stroke(0xff0000)
const horizontalLine = new Graphics()
.moveTo(0, this.scaleY(0))
.lineTo(this.width, this.scaleY(0))
.stroke(0xff0000)
verticalLine.alpha = 0.2
horizontalLine.alpha = 0.2
this.tilesContainer.addChild(verticalLine)
this.tilesContainer.addChild(horizontalLine)
this.createTexts()
}
private calculateScale() {
const scaleXSteps = Math.floor(this.width / (this.grain * this.scale)) / 2
const scaleYSteps = Math.floor(this.height / (this.grain * this.scale)) / 2
this.scaleX = Scale([-scaleXSteps, scaleXSteps], [0, this.width])
this.scaleY = Scale([-scaleYSteps, scaleYSteps], [0, this.height])
this.initialContainer = new Container()
this.initialContainer.addChild(
new Text({
text: 'Initial Board',
style: {
fontFamily: 'Arial',
fontSize: 12,
fill: 0xff1010,
align: 'center'
}
})
)
this.container.addChild(this.initialContainer)
this.mainContainer = new Container()
this.mainContainer.addChild(
new Text({
text: 'Main Board',
style: {
fontFamily: 'Arial',
fontSize: 12,
fill: 0xff1010,
align: 'center'
}
})
)
this.container.addChild(this.mainContainer)
this.createLeftRightContainers()
this.initialContainer.visible = false
this.mainContainer.visible = false
}
private createLeftRightContainers() {
console.log('this.height :>> ', this.height)
this.leftContainer.x = 0
this.leftContainer.y = 0
this.leftContainer.width = 50
this.leftContainer.height = this.height
this.leftContainer.eventMode = 'static'
this.leftContainer.cursor = 'pointer'
const leftSide = new Graphics()
.rect(0, 0, 50, this.height)
// Draw the wheel
.fill({ color: 0x848484 })
leftSide.alpha = 0
this.leftContainer.addChild(leftSide)
this.leftContainer.on('pointerover', () => {
leftSide.alpha = 0.5
})
this.leftContainer.on('pointerout', () => {
leftSide.alpha = 0
})
this.leftContainer.on('pointerdown', () => {
this.emit('leftClick')
})
this.leftContainer.addChild(
new Text({
text: 'Left',
style: {
fontFamily: 'Arial',
fontSize: 12,
fill: 0xff1010,
align: 'center'
}
})
)
//
this.rightContainer.x = this.width - 50
this.rightContainer.y = 0
this.rightContainer.width = 50
this.rightContainer.height = this.height
this.rightContainer.eventMode = 'static'
this.rightContainer.cursor = 'pointer'
const rightSide = new Graphics()
.rect(0, 0, 50, this.height)
// Draw the wheel
.fill({ color: 0x848484 })
rightSide.alpha = 0
this.rightContainer.addChild(rightSide)
this.rightContainer.on('pointerover', () => {
rightSide.alpha = 0.5
})
this.rightContainer.on('pointerout', () => {
rightSide.alpha = 0
})
this.rightContainer.on('pointerdown', () => {
this.emit('rightClick')
})
this.rightContainer.addChild(
new Text({
text: 'Right',
style: {
fontFamily: 'Arial',
fontSize: 12,
fill: 0xff1010,
align: 'center'
}
})
)
this.container.addChild(this.leftContainer)
this.container.addChild(this.rightContainer)
get count() {
return this.tiles.length
}
setState(state: GameState) {
get scale() {
return this._scale
}
set scale(value: number) {
this._scale = value
this.calculateScale()
}
get canMove() {
return this._canMove
}
set canMove(value: boolean) {
this._canMove = value
this.updateCanMoveText()
}
setPlayerHand(tiles: Tile[]) {
this.playerHand = tiles
}
createTexts() {
this.textContainer = new Container()
this.textWaitForPlayers = createText('Waiting for players', this.scaleX(0), 100)
this.textYourTurn = createText('Your turn!', this.scaleX(0), 100)
this.container.addChild(this.textContainer)
this.textContainer.addChild(this.textWaitForPlayers)
this.textContainer.addChild(this.textYourTurn)
this.textYourTurn.visible = false
}
private updateCanMoveText() {
this.textWaitForPlayers.visible = !this.canMove
this.textYourTurn.visible = this.canMove
}
setState(state: GameState, playerId: string) {
this.state = state
const { lastMove } = state
if (lastMove === null) {
return
}
if (
lastMove !== null &&
lastMove.tile !== undefined &&
lastMove.tile.pips !== undefined &&
lastMove.playerId !== playerId
) {
const tile = new Tile(lastMove.tile.id, this.ticker, lastMove.tile.pips, this.scale)
this.nextTile = tile
lastMove.tile = tile.toPlain()
this.movements.push(lastMove)
this.addTile(tile, lastMove)
this.setFreeEnd(lastMove)
}
}
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 =
move.type === 'left'
? this.scaleX.inverse(this.leftTile?.x ?? 0)
: this.scaleX.inverse(this.rightTile?.x ?? 0)
let y: number =
move.type === 'left'
? this.scaleY.inverse(this.leftTile?.y ?? 0)
: this.scaleY.inverse(this.rightTile?.y ?? 0)
const isLeft = move.type === 'left'
const tileDto = tile.toPlain()
let direction = move.type === 'left' ? this.leftDirection : this.rightDirection
if (this.tiles.length === 0) {
x = 0
y = 0
if (tile.isPair()) {
orientation = 'north'
} else {
orientation = 'east'
}
this.firstTile = tile
} else if (move.direction !== undefined) {
direction = move.direction
const availableMoves = this.nextTileValidMoves(tileDto, move.type)
const availablePositions = this.nextTileValidPoints(tileDto, move.type, availableMoves)
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)
availablePosition && ([x, y] = availablePosition)
} else {
if (this.tiles.length === 0) {
x = 0
y = 0
if (tile.isPair()) {
tile.setOrientation('north')
} else {
tile.setOrientation('east')
}
} else {
const availableMoves = this.nextTileValidMoves(tileDto, move.type)
const availablePositions = this.nextTileValidPoints(tileDto, move.type, availableMoves)
let directionIndex = DIRECTIONS.indexOf(direction)
let availablePosition: [number, number] | undefined = availablePositions[directionIndex]
let endlessLoop: number = 0
while (endlessLoop < 4 && availablePosition === undefined) {
directionIndex = (directionIndex + 1) % 4
availablePosition = availablePositions[directionIndex]
endlessLoop++
}
if (endlessLoop >= 4) {
throw new Error('No available position')
}
direction = DIRECTIONS[directionIndex]
isLeft ? (this.leftDirection = direction) : (this.rightDirection = direction)
orientation = this.getOrientationII(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
}
}
console.log('position::>>', tile.pips, x, y)
tile.setPosition(this.scaleX(x), this.scaleY(y))
tile.setOrientation(orientation)
tile.reScale(this.scale)
this.tiles.push(tile)
tile.addTo(this.tilesContainer)
}
getPlayedTile(id: string): Tile | undefined {
return this.tiles.find((t) => t.id === id)
}
getTileInHand(id: string): Tile | undefined {
return this.playerHand.find((t) => t.id === id)
}
setFreeEnd(move: Movement) {
const { type, tile: tileDto } = move
const tile = this.getPlayedTile(tileDto?.id ?? '')
if (tile === undefined) {
return
}
const { pips } = tile
if (pips === undefined) {
return
}
if (this.freeEnds === undefined) {
this.leftTile = this.rightTile = tile
if (tile.isPair()) {
this.freeEnds = [pips[0], pips[1]]
} else {
this.freeEnds = [pips[1], pips[0]]
}
} else if (type === 'left') {
this.leftTile = tile
if (tile.isPair()) {
this.freeEnds[0] = pips[0]
} else {
this.freeEnds[0] = pips[0] === this.freeEnds[0] ? pips[1] : pips[0]
}
} else if (type === 'right') {
this.rightTile = tile
if (tile.isPair()) {
this.freeEnds[1] = pips[0]
} else {
this.freeEnds[1] = pips[0] === this.freeEnds[1] ? pips[1] : pips[0]
}
}
}
updateBoard(move: Movement) {
try {
const { tile: tileDto } = move
const tile = this.getTileInHand(tileDto?.id ?? '')
if (tile === undefined) {
return
}
this.movements.push(move)
this.addTile(tile, move)
this.setFreeEnd(move)
} catch (error) {
console.log('error :>> ', error)
}
}
setMovesForTile(values: [boolean, boolean], tile: TileDto) {
this.setValidEnds(values, tile)
}
setValidEnds(values: boolean[], tile: TileDto) {
console.log('validEnds')
if (this.count === 0) {
this.createInteractionsII('right', [[0, 0], undefined, undefined, undefined])
return
}
if (values[0]) {
const side = 'left'
const validInteractions = this.nextTileValidMoves(tile, side)
const validPoints = this.nextTileValidPoints(tile, side, validInteractions)
console.log('validInteractions :>> ', validInteractions)
// this.createInteractions(side, tile)
this.createInteractionsII(side, validPoints)
}
if (values[1]) {
const side = 'right'
const validInteractions = this.nextTileValidMoves(tile, side)
const validPoints = this.nextTileValidPoints(tile, side, validInteractions)
console.log('validInteractions :>> ', validInteractions)
this.createInteractionsII(side, validPoints)
}
}
nextTileValidPoints(
tile: TileDto,
side: string,
validMoves: boolean[]
): ([number, number] | undefined)[] {
const isLeft = side === 'left'
const end = isLeft ? this.leftTile : this.rightTile
const isEndVertical = end?.isVertical() ?? false
const direction = isLeft ? this.leftDirection : this.rightDirection
const signX = direction === 'west' ? -1 : 1
const signY = direction === 'south' ? 1 : -1
const isEndPair = end?.isPair() ?? false
const x = this.scaleX.inverse(end?.x ?? 0)
const y = this.scaleY.inverse(end?.y ?? 0)
let pointNorth: [number, number] | undefined = undefined
let pointSouth: [number, number] | undefined = undefined
let pointEast: [number, number] | undefined = undefined
let pointWest: [number, number] | undefined = undefined
if (this.count !== 0) {
if (validMoves[0]) {
// north
if (isEndVertical) {
pointNorth = [x, y - 3]
} else {
pointNorth = isEndPair ? [x, y - 2] : [x + 1 * signX, y - 2]
}
}
if (validMoves[2]) {
// south
if (isEndVertical) {
pointSouth = [x, y + 3]
} else {
pointSouth = isEndPair ? [x, y + 2] : [x + 1 * signX, y + 2]
}
}
if (validMoves[1]) {
// east
if (isEndVertical) {
pointEast = isEndPair ? [x + 2, y] : [x + 2, y + 1 * signY]
} else {
pointEast = [x + 3, y]
}
}
if (validMoves[3]) {
// west
if (isEndVertical) {
pointWest = isEndPair ? [x - 2, y] : [x - 2, y + 1 * signY]
} else {
pointWest = [x - 3, y]
}
}
}
return [pointNorth, pointEast, pointSouth, pointWest]
}
createInteractionsII(side: string, validInteractions: ([number, number] | undefined)[]) {
if (validInteractions[0] !== undefined) {
this.addInteraction(validInteractions[0][0], validInteractions[0][1], side, 'north')
}
if (validInteractions[1] !== undefined) {
this.addInteraction(validInteractions[1][0], validInteractions[1][1], side, 'east')
}
if (validInteractions[2] !== undefined) {
this.addInteraction(validInteractions[2][0], validInteractions[2][1], side, 'south')
}
if (validInteractions[3] !== undefined) {
this.addInteraction(validInteractions[3][0], validInteractions[3][1], side, 'west')
}
}
cleanInteractions() {
this.interactionContainer.removeChildren()
}
addInteraction(x: number, y: number, side: string, direction?: string) {
const dot = new Dot(this.ticker, this.scale)
dot.alpha = 0.5
dot.interactive = true
dot.on('pointerdown', () => {
console.log('direction :>> ', direction)
this.emit(`${side}Click`, direction && { direction, x, y })
this.cleanInteractions()
})
dot.on('pointerover', () => {
dot.alpha = 1
})
dot.on('pointerout', () => {
dot.alpha = 0.5
})
dot.setPosition(this.scaleX(x), this.scaleY(y))
dot.addTo(this.interactionContainer)
}
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
const isLeft = side === 'left'
const end = isLeft ? this.freeEnds[0] : this.freeEnds[1]
const endTile = isLeft ? this.leftTile : this.rightTile
const direction = isLeft ? this.leftDirection : this.rightDirection
const signX = isLeft ? -1 : 1
const signY = direction === 'south' ? 1 : -1
const validMove = tile.pips?.includes(end) ?? false
const endX = endTile?.x ?? 0
const endY = endTile?.y ?? 0
const tileHeight = endTile?.height ?? 0
const margin = 20
const spaceNeeded = tileHeight / 2 + tileHeight + margin
const isSecond = this.count === 1
const isPair = isTilePair(tile)
let canPlayNorth = false
let canPlaySouth = false
let canPlayEast = false
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
}
if (isSecond) {
canPlayNorth = canPlaySouth = false
}
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
}
}
return [canPlayNorth, canPlayEast, canPlaySouth, canPlayWest]
}
}

14
src/utilities/Dot.ts Normal file
View File

@ -0,0 +1,14 @@
import { Graphics, Texture, Ticker } from 'pixi.js'
import { SpriteBase } from './SpriteBase'
export class Dot extends SpriteBase {
constructor(ticker: Ticker, scale: number = 1) {
super(ticker, scale)
this.sprite.texture = this.createTexture()
this.anchor = 0.5
}
createTexture(): Texture {
return Texture.from('dot')
}
}

136
src/utilities/Game.ts Normal file
View File

@ -0,0 +1,136 @@
import { Application, Assets } from 'pixi.js'
import { Board } from './Board'
import Hand from './Hand'
import { assets } from '@/utilities/assets'
import type { Movement, TileDto } from './interfaces'
import type { Tile } from './Tile'
export class Game {
public board!: Board
public hand!: Hand
private app: Application = new Application()
private selectedTile: TileDto | undefined
constructor(
private options: { boardScale: number; handScale: number; width: number; height: number } = {
boardScale: 1,
handScale: 1,
width: 1200,
height: 650
},
private emit: any,
private props: any
) {}
async setup(): Promise<HTMLCanvasElement> {
const width = 1200
const height = 650
await this.app.init({ width, height })
return this.app.canvas
}
start() {
this.board = new Board(this.app)
this.hand = new Hand(this.app)
this.hand.scale = this.options.handScale
this.board.scale = this.options.boardScale
this.setBoardEvents()
this.setHandEvents()
}
async preload() {
await Assets.load(assets)
}
destroy() {
this.removeBoardEvents()
this.removeHandEvents()
this.app.destroy()
}
private setHandEvents() {
this.hand.on('handUpdated', (tiles: Tile[]) => {
this.board.setPlayerHand(tiles)
})
this.hand.on('tileClick', (tile: TileDto) => {
this.selectedTile = tile
if (tile !== undefined) {
this.board.setMovesForTile(this.getMoves(tile), tile)
} else {
this.board.cleanInteractions()
}
})
this.hand.on('passClick', () => {
const move: Movement = {
id: '',
type: 'pass',
playerId: this.props.playerId ?? ''
}
this.emit('move', move)
this.board.updateBoard(move)
})
}
getMoves(tile: any): [boolean, boolean] {
if (tile === undefined) return [false, false]
if (this.board.count === 0) return [false, true]
const validEnds: [boolean, boolean] = [false, false]
const freeEnds = this.board.freeEnds
if (freeEnds !== undefined) {
if (tile.pips != undefined) {
validEnds[0] = tile.pips.includes(freeEnds[0])
validEnds[1] = tile.pips.includes(freeEnds[1])
}
}
return validEnds
}
public setCanMakeMove(value: boolean) {
this.hand.canMove = value
this.board.canMove = value
}
private setBoardEvents() {
this.board.on('leftClick', (data) => {
console.log('left data :>> ', data)
if (this.selectedTile === undefined) return
const move: Movement = {
tile: this.selectedTile,
type: 'left',
playerId: this.props.playerId ?? '',
...data
}
this.emit('move', move)
this.hand.tileMoved(this.selectedTile)
this.board.updateBoard({ ...move, tile: this.selectedTile })
})
this.board.on('rightClick', (data) => {
console.log('right data :>> ', data)
if (this.selectedTile === undefined) return
const move: Movement = {
tile: this.selectedTile,
type: 'right',
playerId: this.props.playerId ?? '',
...data
}
this.emit('move', move)
this.hand.tileMoved(this.selectedTile)
this.board.updateBoard({ ...move, tile: this.selectedTile })
})
}
private removeBoardEvents() {
this.board.off('leftClick')
this.board.off('rightClick')
}
private removeHandEvents() {
this.hand.off('tileClick')
this.hand.off('passClick')
}
}

View File

@ -3,67 +3,107 @@ import {
Container,
EventEmitter,
Graphics,
Rectangle,
RoundedRectangle,
Sprite,
Text,
Texture
Texture,
Ticker
} from 'pixi.js'
import { Tile } from './Tile'
import type { PlayerState } from './interfaces'
import type { PlayerState, TileDto } from './interfaces'
import { GlowFilter } from 'pixi-filters'
export default class Hand extends EventEmitter {
tiles: Tile[] = []
container: Container
container: Container = new Container()
buttonPassContainer: Container = new Container()
height: number
width: number
ticker: Ticker
lastTimeClicked: number = 0
doubleClickThreshold: number = 300
initialized: boolean = false
_canMove: boolean = false
scale: number = 1
constructor(container: Container, canvas: HTMLCanvasElement) {
constructor(app: Application) {
super()
this.container = container
app.stage.addChild(this.container)
this.ticker = app.ticker
this.height = 130
this.width = canvas.width
this.container.y = canvas.height - this.height
this.width = app.canvas.width
this.container.y = app.canvas.height - this.height
this.container.width = this.width
this.container.height = this.height
this.addBg()
this.createPassButton()
}
setTiles(playerState: PlayerState) {
get canMove() {
return this._canMove
}
set canMove(value: boolean) {
this._canMove = value
this.buttonPassContainer.eventMode = value ? 'static' : 'none'
this.buttonPassContainer.cursor = value ? 'pointer' : 'default'
this.tiles.forEach((tile) => {
tile.interactive = value
})
}
initialize(playerState: PlayerState) {
this.tiles = this.createTiles(playerState)
this.emit('handUpdated', this.tiles)
this.initialized = this.tiles.length > 0
this.renderTiles()
}
private addBg() {
console.log('addBg')
const bg = new Sprite(Texture.WHITE)
bg.alpha = 0.05
bg.alpha = 0.08
bg.width = this.width
bg.height = this.height
this.container.addChild(bg)
this.container.addChild(
new Text({
text: 'Hand',
style: {
fontFamily: 'Arial',
fontSize: 12,
fill: 0xff1010,
align: 'center'
}
})
)
}
private onClick(tile: Tile) {
const selected = this.tiles.find((t) => t.selectd)
private onTileClick(tile: Tile) {
// if (Date.now() - this.lastTimeClicked < this.doubleClickThreshold) {
// this.emit('tileDoubleClick', { id: tile.id })
// return
// }
const selected = this.tiles.find((t) => t.selected)
if (selected) {
selected.y = selected.y + 10
selected.selectd = false
this.deselectTile(selected)
if (selected.id === tile.id) {
this.emit('tileClick')
return
}
}
tile.selectd = true
tile.y = tile.y - 10
this.emit('tileClick', { id: tile.id })
tile.selected = true
tile.alpha = 1
tile.animateTo(tile.x, tile.y - 10)
this.emit('tileClick', tile.toPlain())
}
private deselectTile(selected: Tile) {
selected.animateTo(selected.x, selected.y + 10)
selected.selected = false
selected.alpha = 0.7
}
public tileMoved(tileDto: TileDto) {
const tile = this.tiles.find((t) => t.id === tileDto.id)
if (!tile) return
tile.interactive = false
tile.clearFilters()
tile.off('pointerdown')
tile.off('pointerover')
tile.off('pointerout')
}
private createPassButton() {
@ -81,51 +121,85 @@ export default class Hand extends EventEmitter {
})
text.anchor = 0.5
const buttonPassContainer = new Container()
this.buttonPassContainer = new Container()
buttonPassContainer.addChild(rectangle)
buttonPassContainer.addChild(text)
this.buttonPassContainer.addChild(rectangle)
this.buttonPassContainer.addChild(text)
text.y = buttonPassContainer.height / 2 - 4
text.x = buttonPassContainer.width / 2 - 8
text.y = this.buttonPassContainer.height / 2 - 4
text.x = this.buttonPassContainer.width / 2 - 8
buttonPassContainer.eventMode = 'static'
buttonPassContainer.cursor = 'pointer'
buttonPassContainer.x = 20
buttonPassContainer.y = this.height / 2 - 10
this.buttonPassContainer.eventMode = 'none'
this.buttonPassContainer.cursor = 'default'
this.buttonPassContainer.x = 20
this.buttonPassContainer.y = this.height / 2 - 10
rectangle.alpha = 0.7
text.alpha = 0.7
buttonPassContainer.on('pointerdown', () => {
this.buttonPassContainer.on('pointerdown', () => {
this.emit('passClick')
})
buttonPassContainer.on('pointerover', () => {
this.buttonPassContainer.on('pointerover', () => {
rectangle.alpha = 1
text.alpha = 1
})
buttonPassContainer.on('pointerout', () => {
this.buttonPassContainer.on('pointerout', () => {
rectangle.alpha = 0.7
text.alpha = 0.7
})
this.container.addChild(buttonPassContainer)
this.container.addChild(this.buttonPassContainer)
}
update(playerState: PlayerState) {
if (!this.initialized) {
this.initialize(playerState)
return
}
const missing: Tile | undefined = this.tiles.find(
(tile: Tile) => !playerState.hand.find((t) => t.id === tile.id)
)
if (missing) {
this.container.removeChild(missing.getSprite())
this.tiles = this.tiles.filter((tile) => tile.id !== missing.id)
this.emit('handUpdated', this.tiles)
}
this.renderTiles()
}
private createTiles(playerState: PlayerState) {
const deltaX = (playerState.hand.length * 50 - 5) / 2
return playerState.hand.map((tile, i) => {
const newTile: Tile = new Tile(tile.id, tile.pips)
newTile.y = newTile.height / 2 + 20
newTile.x = deltaX + newTile.width / 2 + i * (newTile.width + 5)
newTile.eventMode = 'static'
newTile.cursor = 'pointer'
const newTile: Tile = new Tile(tile.id, this.ticker, tile.pips, this.scale)
newTile.alpha = 0.7
this.container.addChild(newTile)
newTile.on('pointerdown', () => this.onClick(newTile))
newTile.on('pointerover', () => (newTile.alpha = 1))
newTile.on('pointerout', () => (newTile.alpha = 0.7))
newTile.anchor = 0.5
newTile.addTo(this.container)
newTile.on('pointerdown', () => this.onTileClick(newTile))
newTile.on('pointerover', () => {
newTile.alpha = 1
newTile.setFilters([
new GlowFilter({
distance: 10,
outerStrength: 2,
innerStrength: 1,
color: 0xffffff,
quality: 0.5
})
])
})
newTile.on('pointerout', () => {
if (!newTile.selected) {
newTile.alpha = 0.7
newTile.getSprite().filters = []
}
})
return newTile
})
}
renderTiles() {
const deltaX = this.width / 2 - (this.tiles.length * 50 - 5) / 2
this.tiles.forEach((tile, i) => {
tile.setPosition(deltaX + tile.width / 2 + i * (tile.width + 5), tile.height / 2 + 20)
})
}
}

111
src/utilities/SpriteBase.ts Normal file
View File

@ -0,0 +1,111 @@
import { Sprite, Texture, Ticker } from 'pixi.js'
export abstract class SpriteBase {
private _interactive: boolean = false
protected sprite: Sprite = new Sprite()
constructor(
protected ticker?: Ticker,
protected scale: number = 1
) {
this.ticker = ticker
this.scale = scale
}
abstract createTexture(): Texture
set interactive(value: boolean) {
this._interactive = value
this.sprite.eventMode = value ? 'static' : 'none'
this.sprite.cursor = value ? 'pointer' : 'default'
}
get interactive(): boolean {
return this._interactive
}
get x(): number {
return this.sprite.x
}
get y(): number {
return this.sprite.y
}
get width(): number {
return this.sprite.width
}
get height(): number {
return this.sprite.height
}
set alpha(value: number) {
this.sprite.alpha = value
}
get alpha(): number {
return this.sprite.alpha
}
set anchor(value: { x: number; y: number } | number) {
if (typeof value === 'number') {
this.sprite.anchor.set(value)
return
}
this.sprite.anchor.set(value.x, value.y)
}
on(event: string, fn: any): void {
this.sprite.on(event, fn)
}
off(event: string): void {
this.sprite.off(event)
}
getSprite(): Sprite {
return this.sprite
}
setPosition(x: number, y: number) {
this.sprite.x = x
this.sprite.y = y
}
setFilters(filters: any[]) {
this.sprite.filters = filters
}
clearFilters() {
this.sprite.filters = []
}
animateTo(x: number, y: number) {
const initialX = this.sprite.x
const initialY = this.sprite.y
const deltaX = x - this.sprite.x
const deltaY = y - this.sprite.y
let elapsed: number = 0
const duration: number = 10
const tick: any = (delta: any) => {
elapsed += delta.deltaTime
const progress = Math.min(elapsed / duration, 1)
this.sprite.x = initialX + deltaX * progress
this.sprite.y = initialY + deltaY * progress
if (progress === 1) {
this.ticker?.remove(tick)
}
}
this.ticker?.add(tick)
}
addTo(container: any) {
container.addChild(this.sprite)
}
}

View File

@ -1,25 +1,86 @@
import { Sprite, Texture } from 'pixi.js'
import { Texture, Ticker } from 'pixi.js'
import { SpriteBase } from './SpriteBase'
export class Tile extends Sprite {
id: string
pips: [number, number] | undefined
selectd: boolean = false
export class Tile extends SpriteBase {
selected: boolean = false
orientation: string
// sprite: Sprite = new Sprite()
// private _interactive: boolean = false
constructor(id: string, pips?: [number, number]) {
super()
constructor(
public id: string,
ticker?: Ticker,
public pips?: [number, number],
scale: number = 1
) {
super(ticker, scale)
this.id = id
this.anchor.set(0.5)
this.width = 50
this.height = 100
// this.ticker = ticker
this.sprite.texture = this.createTexture()
this.sprite.anchor.set(0.5)
this.sprite.height = 100 * this.scale
this.sprite.width = 50 * this.scale
this.pips = pips
this.texture = this.getTexture()
this.orientation = 'north'
}
private getTexture(): Texture {
toPlain() {
return {
id: this.id,
pips: this.pips,
orientation: this.orientation,
x: this.sprite.x,
y: this.sprite.y,
width: this.sprite.width,
height: this.sprite.height
}
}
equals(tile: Tile | undefined): boolean {
if (this.pips === undefined || tile === undefined || tile.pips === undefined) return false
return (
(this.pips[0] === tile.pips[0] && this.pips[1] === tile.pips[1]) ||
(this.pips[0] === tile.pips[1] && this.pips[1] === tile.pips[0])
)
}
createTexture(): Texture {
if (this.pips !== undefined) {
return Texture.from(`tile-${this.pips[1]}_${this.pips[0]}`)
const sortedInversrPips = this.pips.slice().sort((a, b) => b - a)
return Texture.from(`tile-${sortedInversrPips[0]}_${sortedInversrPips[1]}`)
} else {
return Texture.from('tile-back')
}
}
reScale(scale: number) {
this.scale = scale
this.sprite.height = 100 * this.scale
this.sprite.width = 50 * this.scale
}
isPair(): boolean {
return this.pips !== undefined && this.pips[0] === this.pips[1]
}
isVertical(): boolean {
return this.orientation === 'north' || this.orientation === 'south'
}
setOrientation(value: string) {
switch (value) {
case 'north':
this.sprite.rotation = 0
break
case 'east':
this.sprite.rotation = Math.PI / 2
break
case 'south':
this.sprite.rotation = Math.PI
break
case 'west':
this.sprite.rotation = (3 * Math.PI) / 2
break
}
this.orientation = value
}
}

View File

@ -27,6 +27,7 @@ import tile6_3 from '@/assets/images/tiles/6-3.png'
import tile6_4 from '@/assets/images/tiles/6-4.png'
import tile6_5 from '@/assets/images/tiles/6-5.png'
import tile6_6 from '@/assets/images/tiles/6-6.png'
import dot from '@/assets/images/circle.png'
export const assets = [
{ alias: 'tile-back', src: tileBack },
@ -57,5 +58,6 @@ export const assets = [
{ alias: 'tile-6_3', src: tile6_3 },
{ alias: 'tile-6_4', src: tile6_4 },
{ alias: 'tile-6_5', src: tile6_5 },
{ alias: 'tile-6_6', src: tile6_6 }
{ alias: 'tile-6_6', src: tile6_6 },
{ alias: 'dot', src: dot }
]

View File

@ -1,14 +0,0 @@
import { Graphics, Container } from 'pixi.js'
export function getColorBackground(container: Container, colorName: string, alpha: number = 0.5) {
const graphics = new Graphics()
const color = 0xffffff
graphics.rect(0, 0, container.width, container.height)
graphics.fill(color)
graphics.alpha = alpha
graphics.x = 0
graphics.y = 0
console.log('graphics :>> ', graphics)
return graphics
}

25
src/utilities/fonts.ts Normal file
View File

@ -0,0 +1,25 @@
import { Text, TextStyle } from 'pixi.js'
export const dropShadowStyle = {
alpha: 0.5,
angle: 0.3,
blur: 5,
distance: 4
}
export const mainText = new TextStyle({
dropShadow: dropShadowStyle,
fill: '#b71a1a',
fontFamily: 'Arial, Helvetica, sans-serif',
fontWeight: 'bold',
letterSpacing: 1,
stroke: '#658f56'
})
export function createText(str: string, x: number, y: number, style: TextStyle = mainText) {
const text = new Text({ text: str, style })
text.anchor.set(0.5, 0.5)
text.x = x
text.y = y
return text
}

62
src/utilities/helpers.ts Normal file
View File

@ -0,0 +1,62 @@
import { Graphics, Container } from 'pixi.js'
import type { TileDto } from './interfaces'
export function getColorBackground(container: Container, colorName: string, alpha: number = 0.5) {
const graphics = new Graphics()
const color = 0xffffff
graphics.rect(0, 0, container.width, container.height)
graphics.fill(color)
graphics.alpha = alpha
graphics.x = 0
graphics.y = 0
return graphics
}
interface ContainerOptions {
width?: number
height?: number
x?: number
y?: number
color?: number
visible?: boolean
parent?: Container
}
const defaultContainerOptions = {
width: 100,
height: 100,
x: 0,
y: 0,
visible: true
}
export function createContainer(options: ContainerOptions) {
const opts = { ...defaultContainerOptions, ...options }
const container = new Container()
const rect = new Graphics().rect(opts.x, opts.y, opts.width, opts.height)
if (opts.color) {
rect.fill(opts.color)
}
rect.visible = opts.visible
container.addChild(rect)
if (opts.parent) {
opts.parent.addChild(container)
}
return container
}
export async function wait(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
export const DIRECTIONS = ['north', 'east', 'south', 'west']
export function isTilePair(tile: TileDto): boolean {
return !!(tile.pips && tile.pips[0] === tile.pips[1])
}
export function isTileVertical(tile: TileDto): boolean {
return tile.orientation === 'north' || tile.orientation === 'south'
}

View File

@ -1,20 +1,65 @@
export interface PlayerDto {
id: string
name: string
score?: number
hand?: string[]
}
export interface TileDto {
id: string
pips?: [number, number]
orientation?: string
x?: number
y?: number
width?: number
height?: number
}
export interface GameSessionState {
id: string
name: string
creator: string
players: PlayerDto[]
seed: string
waitingForPlayers: boolean
mode: string
pointsToWin: number
sessionInProgress: boolean
status: string
maxPlayers: number
numPlayers: number
waitingSeconds: number
}
export interface GameState {
players: any[]
boneyard: any[]
currentPlayer: string
board: any[]
id: string
players: PlayerDto[]
tilesInBoneyard: TileDto[]
currentPlayer: PlayerDto | null
tilesInBoard: TileDto[]
gameInProgress: boolean
winner?: any
gameBlocked: boolean
gameTied: boolean
gameId: string
tileSelectionPhase: boolean
boardFreeEnds: number[]
lastMove: Movement
}
export interface PlayerState {
id: string
name: string
score: number
hand: any[]
hand: TileDto[]
teamedWith: string | undefined
}
export interface Movement {
id: string
type: string
tile?: TileDto
playerId: string
direction?: string
x?: number
y?: number
}

View File

@ -1,3 +1,8 @@
import { Tile } from './Tile'
import type { GameState, Movement } from './interfaces'
import type { Game } from './Game'
import { wait } from './helpers'
export const playerState = {
id: '6fddcf4f-eaa9-4c87-a599-2af944477091',
name: 'arhuako',
@ -15,7 +20,7 @@ export const playerState = {
},
{
id: 'f516ef48-99f2-4add-96eb-877f03bf0cb1',
pips: [2, 3],
pips: [6, 6],
flipped: false
},
{
@ -40,3 +45,111 @@ export const playerState = {
}
]
}
export const gameState_0: GameState = {
id: 'f043051e-6850-444f-857c-b889220fc187',
lastMove: {
tile: {
id: 'c3f6b525-2e6f-455a-b355-9b8c8f5075f0',
pips: [6, 6]
},
type: 'both',
playerId: '137b68a6-f26c-43f5-badf-e5ae406fd059',
id: 'c71943a5-1fef-4418-bd66-39767ac36817'
},
gameInProgress: true,
winner: null,
tileSelectionPhase: false,
gameBlocked: false,
gameTied: false,
gameId: 'd76c4f98-1f26-4390-9e8d-2d727876b710',
tilesInBoneyard: [],
players: [
{
id: 'f639f263-e415-428c-bdd2-113f00f3c392',
name: 'arhuako',
score: 0,
hand: [
'51399f92-7555-4ffc-91ed-f6b5b9041a54',
'e9c40c13-c821-4bad-810c-12e7cb79b47d',
'95e8412b-1938-48d5-9647-cb8617659db0',
'54948d0a-b7a4-416c-a3f7-6602cfff1851',
'a40e6a76-c2e1-4692-82b3-603a4412a6a9',
'cb7827df-fe19-4c28-a786-a47e07c2d368',
'6d5a31d3-b734-4312-b8fd-1b5efa3fc258'
]
},
{
id: '77b2c512-d9e5-45f3-850f-99baab1befdf',
name: 'Alice (AI)',
score: 0,
hand: [
'066fd011-cabe-483b-a985-c649f4908356',
'01434825-eb3c-4baf-8ad1-cc055f982e75',
'c085c90f-f69c-4f83-acb6-87c576927366',
'1b5d5b46-a41c-4e69-9a02-efff9adbc201',
'74833dcc-1526-4c6c-a64c-a7807e647e77',
'fb7e6976-67a9-496f-9758-0b172aa069dd',
'58b612f0-cf40-4b5f-ba05-8a089f19b43a'
]
},
{
id: '137b68a6-f26c-43f5-badf-e5ae406fd059',
name: 'Bob (AI)',
score: 0,
hand: [
'9d5dcb97-7478-4030-a0f6-4e7080a5b8e0',
'a07e1aaf-e651-4678-a61c-414f4324d8e8',
'4db7aebb-ab4b-4709-b208-b39176e8d70a',
'd1733f9c-86a6-4597-b1ff-ec44e9a375d1',
'cf6e2c1c-57f8-4342-8ff4-8046971f99db',
'33cec060-7f40-4af9-9182-f98cbacbae10'
]
},
{
id: '188c1d69-8c5c-4fec-a08b-dc5fa09d49fd',
name: 'Charlie (AI)',
score: 0,
hand: [
'58433be6-e8d9-4ed2-bbdc-4328425a3687',
'3e24a6cd-02ea-436a-a3e4-41ae62c717d0',
'2a2723d1-6c46-4718-a1c2-fa8d2c148ac8',
'd521de5e-1db1-4a2e-971d-f91cc761342c',
'13d943d7-b694-4419-82f5-729117878d01',
'afcf2509-acfb-47ed-ade7-d08f1a20afd2',
'f50f3589-41ab-4d99-919e-c4c7a71ef5b0'
]
}
],
currentPlayer: {
id: '188c1d69-8c5c-4fec-a08b-dc5fa09d49fd',
name: 'arhuako'
},
tilesInBoard: [
{
id: 'c3f6b525-2e6f-455a-b355-9b8c8f5075f0',
pips: [6, 6]
}
],
boardFreeEnds: [6, 6]
}
export function getMovement(
pips: [number, number] = [6, 6],
side: string = 'left',
scale: number = 1
): Movement {
const tile = new Tile('string', undefined, pips, scale)
tile.orientation = 'north'
return {
id: 'movemnetid',
type: side,
tile,
playerId: 'string'
}
}
export async function mockMove(game: Game, pips: [number, number], side: string = 'left') {
await wait(1000)
game.board.updateBoard(getMovement(pips, side, game.board.scale))
}

View File

@ -1,10 +1,20 @@
export type ScaleFunction = Function & {
inverse: Function
}
/**
*
* @param domain example: [0, 100]
* @param range examaple: [0, width]
*/
export function Scale(domain: number[], range: number[]): Function {
return function (value: number): number {
export function Scale(domain: number[], range: number[]): ScaleFunction {
function Fn(value: number): number {
return ((value - domain[0]) * (range[1] - range[0])) / (domain[1] - domain[0]) + range[0]
}
Fn.inverse = function (value: number): number {
return ((value - range[0]) * (domain[1] - domain[0])) / (range[1] - range[0]) + domain[0]
}
return Fn
}

View File

@ -1,119 +1,43 @@
<script setup lang="ts">
import GameComponent from '@/components/GameComponent.vue'
import TileComponent from '@/components/TileComponent.vue'
import type { GameState, PlayerState } from '@/utilities/interfaces'
import { useGameStore } from '@/stores/game'
import { storeToRefs } from 'pinia'
import { inject, onBeforeUnmount, ref } from 'vue'
import { onMounted } from 'vue'
const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
import useClipboard from 'vue-clipboard3'
const socketService: any = inject('socket')
const { socket } = socketService
let gameState = ref<GameState | undefined>(undefined)
let playerState = ref<PlayerState | undefined>(undefined)
let data = ref('')
let responseField = ref('')
let statusField = ref('')
let sessionId = ref('')
let seed = ref('')
let playerId = ref('')
let selectdAction: any = undefined
let canSelectTile = false
let canMakeMove = false
let tileSelected = ''
let moveType = ''
const { toClipboard } = useClipboard()
const gameStore = useGameStore()
const { moveToMake, canMakeMove, sessionState, gameState } = storeToRefs(gameStore)
const options = [
{ value: 'createSession', default: '{"user": "arhuako"}' },
{ value: 'startSession', default: (id: string) => `{"sessionId": "${id}"}` },
{ value: 'joinSession', default: '{"user": "pepe", "sessionId": "arhuako"}' },
{ value: 'leaveSession', default: '{"user": "pepe", "sessionId": "arhuako"}' },
{ value: 'chat message', default: 'chat message' }
{ value: 'startSession', default: (id: string) => `{"sessionId": "${id}"}` }
// { value: 'joinSession', default: '{"user": "pepe", "sessionId": "arhuako"}' },
// { value: 'leaveSession', default: '{"user": "pepe", "sessionId": "arhuako"}' },
// { value: 'chat message', default: 'chat message' }
]
onMounted(async () => {
socket.on('gameState', (data: GameState, callback: any) => {
gameState.value = data
statusField.value = statusField.value + JSON.stringify(data, null, 2)
callback({
status: 'ok'
})
})
onMounted(async () => {})
socket.on('playerState', (data: PlayerState, callback: any) => {
console.log('playerState :>> ', data)
playerState.value = data
statusField.value = statusField.value + JSON.stringify(data, null, 2)
callback({
status: 'ok'
})
})
socket.on('makeMove', async (data: any, callback: any) => {
statusField.value = statusField.value + JSON.stringify(data, null, 2)
canMakeMove = true
while (canMakeMove) {
await wait(500)
}
callback({
status: 'ok',
tileId: tileSelected,
moveType
})
})
socket.on('chooseTile', async (data: any, callback: any) => {
statusField.value = statusField.value + JSON.stringify(data, null, 2)
canSelectTile = true
while (canSelectTile) {
await wait(500)
}
callback({
status: 'ok',
tileId: tileSelected
})
})
})
function selectTile(id: string) {
if (canSelectTile) {
tileSelected = id
canSelectTile = false
}
}
function selectTileToMove(id: string) {
if (canMakeMove) {
if (tileSelected === id) {
tileSelected = ''
return
}
tileSelected = id
}
}
function onTileClick(tileId: string) {
console.log('tileId :>> ', tileId)
selectTile(tileId)
}
function makeMove(type: string) {
if (canMakeMove) {
if (type === 'pass') {
tileSelected = ''
canMakeMove = false
} else if (tileSelected) {
moveType = type
canMakeMove = false
}
}
function makeMove(move: any) {
moveToMake.value = move
canMakeMove.value = false
}
onBeforeUnmount(() => {
socketService.disconnect()
// socketService.disconnect()
})
function actionSelected() {
console.log('event :>> ', selectdAction)
if (selectdAction.value === 'createSession') {
responseField.value = ''
} else if (selectdAction.value === 'startSession') {
@ -129,15 +53,36 @@ const getMessage = (msg: string) => {
return msg
}
async function createSession() {
const response = await socketService.sendMessageWithAck('createSession', { user: 'arhuako' })
sessionId.value = response.sessionId
playerId.value = response.playerId
}
async function startSession() {
if (sessionId.value) {
await socketService.sendMessageWithAck('startSession', {
sessionId: sessionId.value,
seed: seed.value.trim()
})
}
}
async function joinSession() {
if (sessionId.value) {
await socketService.sendMessageWithAck('joinSession', {
user: 'pepe',
sessionId: sessionId.value
})
}
}
async function sendMessage() {
if (selectdAction && data.value.trim() !== '') {
console.log('socketService :>> ', socketService)
const response = await socketService.sendMessageWithAck(
selectdAction.value,
getMessage(data.value.trim())
)
console.log('response :>> ', response)
handleResponse(response)
}
// socketService.emit('message', data.value)
@ -146,6 +91,7 @@ async function sendMessage() {
function handleResponse(response: any) {
if (selectdAction.value === 'createSession') {
sessionId.value = response.sessionId
playerId.value = response.playerId
}
data.value = ''
@ -155,101 +101,113 @@ function handleResponse(response: any) {
: responseField.value + '\n---\n ' + responseStr
selectdAction = undefined
}
function copySeed() {
if (sessionState?.value?.seed) toClipboard(sessionState.value.seed)
}
</script>
<template>
<div class="grid">
<div>
<GameComponent :gameState="gameState" :playerState="playerState" @tileClick="onTileClick" />
<p>SessionID: {{ sessionId }}</p>
<ul id="messages"></ul>
<form id="form" action="">
<p>
<select v-model="selectdAction" id="event" autocomplete="off" @change="actionSelected">
<option value="">Select event</option>
<option :key="option.value" v-for="option in options" :value="option">
{{ option.value }}
</option>
</select>
</p>
<!-- <p><input id="room" autocomplete="off" /></p> -->
<p>
<textarea v-model="data" id="message" autocomplete="off" placeholder="Data"></textarea>
</p>
<p><button @click.prevent.stop="sendMessage">Send</button></p>
<div class="grid">
<div>
<textarea
:value="responseField"
id="response"
autocomplete="off"
placeholder="Response"
></textarea>
</div>
<div>
<textarea
:value="statusField"
id="status"
autocomplete="off"
placeholder="Game status"
></textarea>
</div>
</div>
</form>
</div>
<div>
<!-- <div style="display: flex; gap: 4px">
<TileComponent :revealed="false" :top="6" :bottom="0" />
<TileComponent :revealed="true" :top="6" :bottom="0" />
</div> -->
<h4>Board</h4>
<!-- Board -->
<div class="board-container">
<div v-if="gameState?.tileSelectionPhase">
<div class="tiles-container">
<TileComponent
:key="tile.id"
v-for="tile in gameState.boneyard"
@tile-clicked="selectTile(tile.id)"
/>
</div>
<div v-if="canSelectTile">Please select a tile.</div>
<div v-else>Wait your turn.</div>
</div>
<div v-if="!gameState?.tileSelectionPhase">
<div class="tiles-container">
<TileComponent
:class="{ 'selected-tile': tileSelected === tile.id }"
:revealed="true"
:key="tile.id"
v-for="tile in gameState?.board"
:top="tile.pips[0]"
:bottom="tile.pips[1]"
/>
</div>
</div>
<div class="block">
<section class="block">
<p>
Running: {{ sessionState?.sessionInProgress }} Seed: {{ sessionState?.seed }}
<button @click="copySeed">Copy!</button>
</p>
<p>FreeEnds: {{ gameState?.boardFreeEnds }} - {{ gameState?.currentPlayer?.name }}</p>
<p v-if="sessionId">SessionID: {{ sessionId }} PlayerID: {{ playerId }}</p>
</section>
<section class="block">
<div class="game-container">
<GameComponent :playerId="playerId" :canMakeMove="canMakeMove" @move="makeMove" />
</div>
<!-- End board-->
</section>
<div class="hand-container">
<h4>
Your Hand <button class="control" @click="makeMove('left')">Left</button
><button class="control" @click="makeMove('right')">Right</button
><button class="control" @click="makeMove('pass')">Pass</button>
</h4>
<div class="tiles-container">
<TileComponent
:revealed="true"
:key="tile.id"
v-for="tile in playerState?.hand ?? []"
@tile-clicked="selectTileToMove(tile.id)"
:top="tile.pips[0]"
:bottom="tile.pips[1]"
/>
<section class="block">
<div class="fixed-grid has-8-cols">
<div class="grid" v-if="!sessionId">
<div class="cell">
<button style="width: 200px" class="button" @click="createSession">
Create Session
</button>
</div>
<div class="cell is-col-span7"></div>
</div>
<div class="grid" v-if="sessionId">
<div class="cell">
<button class="button" style="width: 200px" @click="startSession">Start Session</button>
</div>
<div class="cell is-col-span-7">
<input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
</div>
</div>
<div class="grid" v-if="!sessionId">
<div class="cell">
<button class="button" style="width: 200px" @click="joinSession">Join Session</button>
</div>
<div class="cell is-col-span-7">
<input
class="input"
style="margin-bottom: 0"
v-model="sessionId"
placeholder="Session Id"
/>
</div>
</div>
<div class="mt-1 action-select"></div>
</div>
<div class="grid" style="margin-top: 16px; display: none">
<div>
<!-- <ul id="messages"></ul> -->
<form id="form" action="">
<div class="action-select select">
<select
v-model="selectdAction"
id="event"
autocomplete="off"
@change="actionSelected"
>
<option value="">Select event</option>
<option :key="option.value" v-for="option in options" :value="option">
{{ option.value }}
</option>
</select>
<button @click.prevent.stop="sendMessage">Send</button>
</div>
<!-- <p><input id="room" autocomplete="off" /></p> -->
<p>
<textarea
v-model="data"
id="message"
autocomplete="off"
placeholder="Data"
></textarea>
</p>
</form>
</div>
<div>
<div class="grid">
<div>
<textarea
:value="responseField"
id="response"
autocomplete="off"
placeholder="Response"
></textarea>
</div>
<div>
<textarea
:value="statusField"
id="status"
autocomplete="off"
placeholder="Game status"
></textarea>
</div>
</div>
</div>
</div>
<!-- End hand-->
</div>
</section>
</div>
</template>
@ -258,21 +216,32 @@ function handleResponse(response: any) {
box-sizing: border-box;
}
.action-select {
display: flex;
gap: 16px;
align-items: start;
justify-items: center;
}
.game-container {
display: flex;
align-items: start;
justify-content: center;
}
.control {
font-size: 60%;
padding: 8px;
margin-right: 4px;
}
textarea {
width: 100%;
height: 150px;
height: 110px;
resize: none;
font-size: 70%;
}
#response,
#status {
height: 400px;
height: 180px;
}
.tiles-container {

View File

@ -9,16 +9,21 @@ function startGame() {
</script>
<template>
<div class="home">
<h1>Welcome to the Player's Home Page</h1>
<p>This is a protected route.</p>
<button @click="startGame">Start Game</button>
<div class="block home">
<section class="section">
<h1 class="title is-2">Welcome to the Player's Home Page</h1>
<div class="block">
<p>This is a protected route.</p>
</div>
<button class="button" @click="startGame">Start Game</button>
</section>
<section class="section available-sessions">
<h2 class="title is-4">Available Sessions</h2>
<div class="bloc">
<p>There are no available sessions at the moment.</p>
</div>
</section>
</div>
</template>
<style scoped lang="scss">
.home {
max-width: 600px;
margin: auto;
}
</style>
<style scoped lang="scss"></style>

View File

@ -19,10 +19,28 @@ function login() {
<template>
<div class="login">
<h1>Login</h1>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" />
<button type="submit">Login</button>
<form class="form" @submit.prevent="login">
<div class="field">
<label class="label">Username</label>
<div class="control">
<input class="input" type="text" v-model="username" placeholder="Username" />
</div>
</div>
<div class="field">
<label class="label">Username</label>
<div class="control">
<input class="input" type="password" v-model="password" placeholder="Password" />
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-primary" type="submit">Login</button>
</div>
<!-- <div class="control">
<button class="button">Cancel</button>
</div> -->
</div>
</form>
</div>
</template>