jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(refactor) move pit animatorto core package

Browse Source
This commit is contained in:
Halit Aksoy 2024-06-18 00:24:45 +03:00
parent 3c1c61fc7d
commit bef8f1d9e9
25 changed files with 63 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/package.json
View File

@ -15,8 +15,10 @@
"author": "Halit Aksoy",
"license": "MIT",
"dependencies": {
"@types/uuid": "^9.0.8",
"mancala.js": "^0.0.2-beta.3",
"tiny-emitter": "^2.1.0"
"tiny-emitter": "^2.1.0",
"uuid": "^10.0.0"
},
"devDependencies": {
"@types/jest": "^27.4.1",

31
mobile/src/animation/PitAnimator.ts → core/src/animation/PitAnimator.ts
View File

@ -9,17 +9,16 @@ import {
MancalaGame,
} from "mancala.js";
import { v4 } from "uuid";
import { Context } from "../context/context";
import BoardViewModelFactory from "../factory/BoardViewModelFactory";
import { PitViewModelFactory } from "../factory/PitViewModelFactory";
import { Game, Theme } from "@mancala/core";
import { getColorByBrightness } from "@mancala/core";
import BoardViewModel from "../viewmodel/BoardViewModel";
import { BoardViewModel } from "../viewmodel/BoardViewModel";
import { PitViewModelFactory, BoardViewModelFactory } from "../factory";
import { Game } from "../models";
import { getColorByBrightness } from "../util";
import { Theme, ThemeManager } from "../theme";
const animationUpdateInterval = 300;
export default class PitAnimator {
context: Context;
export class PitAnimator {
themeManager: ThemeManager;
game: Game | undefined;
oldGame: Game | undefined;
currentIntervalID: number | undefined;
@ -30,12 +29,12 @@ export default class PitAnimator {
currentHistoryItem: HistoryItem | undefined;
constructor(
context: Context,
themeManager: ThemeManager,
onBoardViewModelUpdate: (boardViewModel: BoardViewModel) => void
) {
this.context = context;
this.themeManager = themeManager;
this.onBoardViewModelUpdate = onBoardViewModelUpdate;
this.context.themeManager.on("themechange", this.onThemeChange.bind(this));
this.themeManager.on("themechange", this.onThemeChange.bind(this));
}
get mancalaGame(): MancalaGame | undefined {
@ -111,7 +110,7 @@ export default class PitAnimator {
pitViewModel.stoneCount = 0;
}
}
const theme = this.context.themeManager.theme;
const theme = this.themeManager.theme;
if (gameStep.type === GAME_STEP_GAME_MOVE) {
pitViewModel.stoneCount += 1;
pitViewModel.pitColor = theme.pitGameMoveAnimateColor;
@ -179,7 +178,7 @@ export default class PitAnimator {
private createPitViewModelsFromGame(game: Game) {
return game.mancalaGame.board.pits.map((pit) => {
const theme = this.context.themeManager.theme;
const theme = this.themeManager.theme;
const stoneCount = pit.stoneCount;
const stoneColor = theme.stoneColor;
const pitColor = theme.pitColor;
@ -193,8 +192,8 @@ export default class PitAnimator {
});
}
private onThemeChange(theme: Theme){
if(!this.game) return;
private onThemeChange(theme: Theme) {
if (!this.game) return;
this.onBoardViewModelUpdate?.(this.getBoardViewModelFromGame(this.game));
}
@ -212,7 +211,7 @@ export default class PitAnimator {
}
public dispose() {
this.context.themeManager.off("themechange", this.onThemeChange.bind(this));
this.themeManager.off("themechange", this.onThemeChange.bind(this));
this.resetAnimationState();
this.clearCurrentInterval();
}

1
core/src/animation/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './PitAnimator'

10
core/src/factory/BoardViewModelFactory.ts Normal file
View File

@ -0,0 +1,10 @@
import {BoardViewModel, PitViewModel } from "../viewmodel";
export class BoardViewModelFactory {
public static create(
id: string,
pitViewModels: PitViewModel[]
): BoardViewModel {
return new BoardViewModel(id, pitViewModels);
}
}

2
mobile/src/factory/PitViewModelFactory.ts → core/src/factory/PitViewModelFactory.ts
View File

@ -1,4 +1,4 @@
import PitViewModel from "../viewmodel/PitViewModel";
import { PitViewModel } from "../viewmodel/PitViewModel";
export class PitViewModelFactory {
public static create(params: {

2
core/src/factory/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './BoardViewModelFactory'
export * from './PitViewModelFactory'

3
core/src/index.ts
View File

@ -4,3 +4,6 @@ export * from './theme/index'
export * from './storage/storage'
export * from './localization/index'
export * from './util/index'
export * from './animation/index'
export * from './factory/index'
export * from './viewmodel/index'

4
mobile/src/viewmodel/BoardViewModel.ts → core/src/viewmodel/BoardViewModel.ts
View File

@ -1,6 +1,6 @@
import PitViewModel from "./PitViewModel";
import { PitViewModel } from "./PitViewModel";
export default class BoardViewModel {
export class BoardViewModel {
id: string;
pits: PitViewModel[];
constructor(id: string, pits: PitViewModel[]) {

2
frontend/src/viewmodel/PitViewModel.ts → core/src/viewmodel/PitViewModel.ts
View File

@ -1,4 +1,4 @@
export default class PitViewModel {
export class PitViewModel {
id: string;
stoneCount: number;
stoneColor: string;

2
core/src/viewmodel/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './BoardViewModel'
export * from './PitViewModel'

10
core/yarn.lock
View File

@ -658,6 +658,11 @@
resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz"
integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
"@types/uuid@^9.0.8":
version "9.0.8"
resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
"@types/yargs-parser@*":
version "21.0.0"
resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz"
@ -2959,6 +2964,11 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"
uuid@^10.0.0:
version "10.0.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
v8-compile-cache@^2.0.3:
version "2.3.0"
resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"

217
frontend/src/animation/PitAnimator.ts
View File

@ -1,217 +0,0 @@
import {
GameStep,
HistoryItem,
GAME_STEP_GAME_MOVE,
GAME_STEP_LAST_STONE_IN_EMPTY_PIT,
GAME_STEP_BOARD_CLEARED,
GAME_STEP_LAST_STONE_IN_BANK,
GAME_STEP_DOUBLE_STONE_IN_PIT,
MancalaGame,
} from "mancala.js";
import { v4 } from "uuid";
import { Context } from "../context/context";
import BoardViewModelFactory from "../factory/BoardViewModelFactory";
import { PitViewModelFactory } from "../factory/PitViewModelFactory";
import { Game, Theme } from "@mancala/core";
import { getColorByBrightness } from "@mancala/core";
import BoardViewModel from "../viewmodel/BoardViewModel";
const animationUpdateInterval = 300;
export default class PitAnimator {
context: Context;
game: Game | undefined;
oldGame: Game | undefined;
currentIntervalID: number;
onBoardViewModelUpdate: (boardViewModel: BoardViewModel) => void;
boardViewModel: BoardViewModel | undefined;
oldBoardViewModel: BoardViewModel | undefined;
animationIndex: number = 0;
currentHistoryItem: HistoryItem | undefined;
constructor(
context: Context,
onBoardViewModelUpdate: (boardViewModel: BoardViewModel) => void
) {
this.context = context;
this.onBoardViewModelUpdate = onBoardViewModelUpdate;
this.context.themeManager.on("themechange", this.onThemeChange.bind(this));
}
get mancalaGame(): MancalaGame | undefined {
return this.game?.mancalaGame;
}
public setNewGame(game: Game) {
this.reset();
this.game = game;
this.onBoardViewModelUpdate?.(this.getBoardViewModelFromGame(this.game));
}
public setUpdatedGame(game: Game) {
this.resetAnimationState();
if (!this.game) {
this.setNewGame(game);
} else {
this.oldGame = this.game;
this.game = game;
this.onGameMoveAnimationStart();
}
}
onGameMoveAnimationStart() {
this.stopCurrentAnimation();
if (this.game && this.oldGame && this.mancalaGame && this.mancalaGame?.history.length > 0) {
const lastHistoryItem = this.mancalaGame.history[this.mancalaGame.history.length - 1];
if (lastHistoryItem.gameSteps.length > 0) {
this.animationIndex = 0;
this.currentHistoryItem = lastHistoryItem;
this.boardViewModel = this.getBoardViewModelFromGame(this.game);
this.oldBoardViewModel = this.getBoardViewModelFromGame(this.oldGame);
this.startAnimationUpdateCyle();
}
}
}
onAnimate() {
if (!this.currentHistoryItem || !this.game || !this.oldBoardViewModel || !this.mancalaGame) return;
if (this.animationIndex === this.currentHistoryItem.gameSteps.length) {
this.clearCurrentInterval();
this.onBoardViewModelUpdate?.(this.getBoardViewModelFromGame(this.game));
} else {
const gameStep = this.currentHistoryItem.gameSteps[this.animationIndex];
const index = this.mancalaGame.board.getPitIndexCircularly(gameStep.index);
this.animatePit(index, this.oldBoardViewModel, gameStep);
this.onBoardViewModelUpdate?.(this.oldBoardViewModel);
}
this.animationIndex++;
}
getGameMoveStepCount(historyItem: HistoryItem) {
return historyItem.gameSteps.filter(
(gameStep) => gameStep.type === GAME_STEP_GAME_MOVE
).length;
}
animatePit(
index: number,
boardViewModel: BoardViewModel,
gameStep: GameStep
) {
if (!this.currentHistoryItem || !this.game || !this.mancalaGame) return;
const pitViewModel = boardViewModel.pits[index];
if (this.animationIndex === 0) {
//This is one stone move case, TODO: beautify it later
if (this.getGameMoveStepCount(this.currentHistoryItem) === 1) {
const previousPitIndex = gameStep.index - 1;
if (previousPitIndex > 0) {
boardViewModel.pits[previousPitIndex].stoneCount = 0;
}
} else {
pitViewModel.stoneCount = 0;
}
}
const theme = this.context.themeManager.theme;
if (gameStep.type === GAME_STEP_GAME_MOVE) {
pitViewModel.stoneCount += 1;
pitViewModel.pitColor = theme.pitGameMoveAnimateColor;
} else if (gameStep.type === GAME_STEP_LAST_STONE_IN_EMPTY_PIT) {
pitViewModel.pitColor = theme.pitGetRivalStonePitAnimateColor;
pitViewModel.stoneCount = 0;
const oppositeIndex = this.mancalaGame.board.getPitIndexCircularly(
gameStep.data.oppositeIndex
);
const oppositePitViewModel = boardViewModel.pits[oppositeIndex];
oppositePitViewModel.pitColor = theme.pitGetRivalStonePitAnimateColor;
oppositePitViewModel.stoneCount = 0;
} else if (gameStep.type === GAME_STEP_LAST_STONE_IN_BANK) {
pitViewModel.pitColor = theme.pitLastStoneInBankPitAnimateColor;
} else if (gameStep.type === GAME_STEP_BOARD_CLEARED) {
for (const index of gameStep.data.pitIndexesThatHasStone) {
const oppositeIndex = this.mancalaGame.board.getPitIndexCircularly(index);
const oppositePitViewModel = boardViewModel.pits[oppositeIndex];
oppositePitViewModel.pitColor = theme.pitGetRivalStonePitAnimateColor;
oppositePitViewModel.stoneCount = 0;
}
} else if (gameStep.type === GAME_STEP_DOUBLE_STONE_IN_PIT) {
const _index = this.mancalaGame.board.getPitIndexCircularly(index);
const pitViewModel = boardViewModel.pits[_index];
pitViewModel.pitColor = theme.pitGetRivalStonePitAnimateColor;
pitViewModel.stoneCount = 0;
}
pitViewModel.stoneColor = getColorByBrightness(
pitViewModel.pitColor,
theme.stoneColor,
theme.stoneLightColor
);
}
startAnimationUpdateCyle() {
this.clearCurrentInterval();
this.currentIntervalID = setInterval(
() => this.onAnimate(),
animationUpdateInterval
);
}
stopCurrentAnimation() {
this.clearCurrentInterval();
if (this.oldGame) {
this.onBoardViewModelUpdate?.(
this.getBoardViewModelFromGame(this.oldGame)
);
}
this.resetAnimationState();
}
clearCurrentInterval() {
if (this.currentIntervalID) {
clearInterval(this.currentIntervalID);
}
}
public getBoardViewModelFromGame(game: Game): BoardViewModel {
const pitViewModels = this.createPitViewModelsFromGame(game);
return BoardViewModelFactory.create(v4(), pitViewModels);
}
private createPitViewModelsFromGame(game: Game) {
return game.mancalaGame.board.pits.map((pit) => {
const theme = this.context.themeManager.theme;
const stoneCount = pit.stoneCount;
const stoneColor = theme.stoneColor;
const pitColor = theme.pitColor;
const id = pit.index.toString();
return PitViewModelFactory.create({
id,
stoneCount,
stoneColor,
pitColor,
});
});
}
private onThemeChange(theme: Theme){
if(!this.game) return;
this.onBoardViewModelUpdate?.(this.getBoardViewModelFromGame(this.game));
}
public resetAnimationState() {
this.animationIndex = -1;
this.currentHistoryItem = undefined;
this.boardViewModel = undefined;
this.oldBoardViewModel = undefined;
}
public reset() {
this.resetAnimationState();
this.game = undefined;
this.oldGame = undefined;
}
public dispose() {
this.context.themeManager.off("themechange", this.onThemeChange.bind(this));
this.resetAnimationState();
this.clearCurrentInterval();
}
}

3
frontend/src/components/board/BoardView.tsx
View File

@ -1,8 +1,7 @@
import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../../context/context";
import BoardViewModel from "../../viewmodel/BoardViewModel";
import PitViewModel from "../../viewmodel/PitViewModel";
import { BoardViewModel, PitViewModel } from "@mancala/core";
import PitView from "./PitView";
import StoreView from "./StoreView";
import { Game } from "@mancala/core";

2
frontend/src/components/board/PitView.tsx
View File

@ -1,7 +1,7 @@
import * as React from "react";
import { FunctionComponent } from "react";
import Util from "../../util/Util";
import PitViewModel from "../../viewmodel/PitViewModel";
import { PitViewModel } from "@mancala/core";
import StoneView from "./StoneView";
const PitView: FunctionComponent<{

2
frontend/src/components/board/StoreView.tsx
View File

@ -3,7 +3,7 @@ import { FunctionComponent } from "react";
import { Context } from "../../context/context";
import { getColorByBrightness } from "@mancala/core";
import Util from "../../util/Util";
import PitViewModel from "../../viewmodel/PitViewModel";
import { PitViewModel } from "@mancala/core";
import StoneView from "./StoneView";
const StoreView: FunctionComponent<{

11
frontend/src/factory/BoardViewModelFactory.ts
View File

@ -1,11 +0,0 @@
import BoardViewModel from "../viewmodel/BoardViewModel";
import PitViewModel from "../viewmodel/PitViewModel";
export default class BoardViewModelFactory {
public static create(
id: string,
pitViewModels: PitViewModel[]
): BoardViewModel {
return new BoardViewModel(id, pitViewModels);
}
}

13
frontend/src/factory/PitViewModelFactory.ts
View File

@ -1,13 +0,0 @@
import PitViewModel from "../viewmodel/PitViewModel";
export class PitViewModelFactory {
public static create(params: {
id: string;
stoneCount: number;
stoneColor: string;
pitColor: string;
}): PitViewModel {
const { id, stoneCount, stoneColor, pitColor } = params;
return new PitViewModel(id, stoneCount, stoneColor, pitColor);
}
}

6
frontend/src/routes/GamePage.tsx
View File

@ -4,7 +4,7 @@ import { FunctionComponent, useState } from 'react';
import { useNavigate, useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { v4 } from 'uuid';
import PitAnimator from '../animation/PitAnimator';
import { PitAnimator } from '@mancala/core';
import BoardToolbar from '../components/board/BoardToolbar';
import BoardView from '../components/board/BoardView';
import Button from '../components/Button';
@ -23,7 +23,7 @@ import useWindowDimensions from '../hooks/useWindowDimensions';
import { GameMove, LoadingState, Game, GameUsersConnectionInfo } from "@mancala/core";
import { Theme } from '@mancala/core';
import { getColorByBrightness } from "@mancala/core";
import BoardViewModel from '../viewmodel/BoardViewModel';
import { BoardViewModel } from "@mancala/core";
import Center from '../components/Center';
import notyf from '../util/Notyf';
import swal from 'sweetalert';
@ -204,7 +204,7 @@ const GamePage: FunctionComponent<{
setLoadingStateGame(LoadingState.Loading())
context.gameStore.get(params.gameId!!).then((game) => {
if (game) {
pitAnimator = new PitAnimator(context, updateBoardViewModel);
pitAnimator = new PitAnimator(context.themeManager, updateBoardViewModel);
setPitAnimator(pitAnimator);
onGameUpdate(pitAnimator, game);
unlistenMessages = listenMessages(game, pitAnimator);

10
frontend/src/viewmodel/BoardViewModel.ts
View File

@ -1,10 +0,0 @@
import PitViewModel from "./PitViewModel";
export default class BoardViewModel {
id: string;
pits: PitViewModel[];
constructor(id: string, pits: PitViewModel[]) {
this.id = id;
this.pits = pits;
}
}

3
mobile/src/components/board/BoardView.tsx
View File

@ -1,8 +1,7 @@
import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../../context/context";
import BoardViewModel from "../../viewmodel/BoardViewModel";
import PitViewModel from "../../viewmodel/PitViewModel";
import { BoardViewModel, PitViewModel } from "@mancala/core";
import PitView from "./PitView";
import StoreView from "./StoreView";
import { Game } from "@mancala/core";

4
mobile/src/components/board/PitView.tsx
View File

@ -1,8 +1,6 @@
import * as React from "react";
import { FunctionComponent } from "react";
import Util from "../../util/Util";
import PitViewModel from "../../viewmodel/PitViewModel";
import StoneView from "./StoneView";
import { PitViewModel } from "@mancala/core";
import { Pressable, View, ViewStyle } from "react-native";
const PitView: FunctionComponent<{

2
mobile/src/components/board/StoreView.tsx
View File

@ -2,7 +2,7 @@ import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../../context/context";
import { getColorByBrightness } from "@mancala/core";
import PitViewModel from "../../viewmodel/PitViewModel";
import { PitViewModel } from "@mancala/core";
import { Text, View, ViewStyle } from "react-native";
const StoreView: FunctionComponent<{

11
mobile/src/factory/BoardViewModelFactory.ts
View File

@ -1,11 +0,0 @@
import BoardViewModel from "../viewmodel/BoardViewModel";
import PitViewModel from "../viewmodel/PitViewModel";
export default class BoardViewModelFactory {
public static create(
id: string,
pitViewModels: PitViewModel[]
): BoardViewModel {
return new BoardViewModel(id, pitViewModels);
}
}

7
mobile/src/screens/GameScreen.tsx
View File

@ -3,13 +3,10 @@ import { View, Text, useWindowDimensions, Alert, Pressable } from 'react-native'
import { useTranslation } from 'react-i18next';
import { GameScreenProps } from '../types';
import { useState } from 'react';
import { Game, GameUsersConnectionInfo, GameMove, LoadingState } from "@mancala/core";
import BoardViewModel from '../viewmodel/BoardViewModel';
import { Game, GameUsersConnectionInfo, GameMove, LoadingState, BoardViewModel, PitAnimator, getColorByBrightness } from "@mancala/core";
import { MancalaGame, Pit } from 'mancala.js';
import { v4 } from 'uuid';
import PitAnimator from '../animation/PitAnimator';
import { channel_on_game_update, channel_on_game_crashed, channel_on_game_user_leave, channel_on_user_connection_change, channel_listen_game_events, channel_unlisten_game_events, channel_leave_game, channel_game_move } from '@mancala/core';
import { getColorByBrightness } from "@mancala/core";
import Util from '../util/Util';
import Snackbar from 'react-native-snackbar';
import PageContainer from '../components/PageContainer';
@ -196,7 +193,7 @@ export function GameScreen({ navigation, route }: GameScreenProps) {
setLoadingStateGame(LoadingState.Loading())
context.gameStore.get(gameId!!).then((game) => {
if (game) {
pitAnimator = new PitAnimator(context, updateBoardViewModel);
pitAnimator = new PitAnimator(context.themeManager, updateBoardViewModel);
setPitAnimator(pitAnimator);
onGameUpdate(pitAnimator, game);
unlistenMessages = listenMessages(game, pitAnimator);

18
mobile/src/viewmodel/PitViewModel.ts
View File

@ -1,18 +0,0 @@
export default class PitViewModel {
id: string;
stoneCount: number;
stoneColor: string;
pitColor: string;
constructor(
id: string,
stoneCount: number,
stoneColor: string,
pitColor: string
) {
this.id = id;
this.stoneCount = stoneCount;
this.stoneColor = stoneColor;
this.pitColor = pitColor;
}
}