pacman-contribution-graph 1.0.0 → 1.0.2

package/src/game.ts

@@ -1,33 +1,44 @@
 import { Canvas } from './canvas';
-import { DELTA_TIME, GHOST_COLORS, GRID_HEIGHT, GRID_WIDTH, MONTHS, PACMAN_DEATH_DURATION, PACMAN_POWERUP_DURATION } from './constants';
+import {
+	DELTA_TIME,
+	GHOST_NAMES,
+	GHOSTS,
+	GRID_HEIGHT,
+	GRID_WIDTH,
+	MONTHS,
+	PACMAN_DEATH_DURATION,
+	PACMAN_POWERUP_DURATION
+} from './constants';
 import { MusicPlayer, Sound } from './music-player';
-import { Store } from './store';
 import { SVG } from './svg';
+import { StoreType } from './types';
 
-const initializeGrid = () => {
-	Store.grid = Array.from({ length: GRID_HEIGHT }, () => Array.from({ length: GRID_WIDTH }, () => 0));
-	Store.monthLabels = Array(GRID_WIDTH).fill('');
+const initializeGrid = (store: StoreType) => {
+	store.pacman.points = 0;
+	store.pacman.totalPoints = 0;
+	store.grid = Array.from({ length: GRID_HEIGHT }, () => Array.from({ length: GRID_WIDTH }, () => ({ commitsCount: 0, intensity: 0 })));
+	store.monthLabels = Array(GRID_WIDTH).fill('');
 	let maxCommits = 1;
 
 	const now = new Date();
 	const startOfCurrentWeek = new Date(now);
 	startOfCurrentWeek.setDate(now.getDate() - now.getDay());
 
-	Store.contributions.forEach((contribution) => {
+	store.contributions.forEach((contribution) => {
 		const contributionDate = new Date(contribution.date);
 		const dayOfWeek = contributionDate.getDay();
 		const weeksAgo = Math.floor((+startOfCurrentWeek - +contributionDate) / (1000 * 60 * 60 * 24 * 7));
 
 		if (weeksAgo >= 0 && weeksAgo < GRID_WIDTH && dayOfWeek >= 0 && dayOfWeek < GRID_HEIGHT) {
-			Store.grid[dayOfWeek][GRID_WIDTH - 1 - weeksAgo] = contribution.count;
+			store.grid[dayOfWeek][GRID_WIDTH - 1 - weeksAgo] = { commitsCount: contribution.count, intensity: 0 };
 			if (contribution.count > maxCommits) maxCommits = contribution.count;
 		}
 	});
 
 	for (let x = 0; x < GRID_HEIGHT; x++) {
 		for (let y = 0; y < GRID_WIDTH; y++) {
-			if (Store.grid[x][y] > 0) {
-				Store.grid[x][y] = Store.grid[x][y] / maxCommits;
+			if (store.grid[x][y].commitsCount > 0) {
+				store.grid[x][y].intensity = store.grid[x][y].commitsCount / maxCommits;
 			}
 		}
 	}
@@ -36,63 +47,66 @@ const initializeGrid = () => {
 		const weeksAgo = GRID_WIDTH - 1 - y;
 		const columnDate = new Date(startOfCurrentWeek);
 		columnDate.setDate(columnDate.getDate() - weeksAgo * 7);
-		Store.monthLabels[y] = MONTHS[columnDate.getMonth()];
+		store.monthLabels[y] = MONTHS[columnDate.getMonth()];
 	}
 };
 
-const placePacman = () => {
+const placePacman = (store: StoreType) => {
 	let validCells = [];
 	for (let x = 0; x < GRID_HEIGHT; x++) {
 		for (let y = 0; y < GRID_WIDTH; y++) {
-			if (Store.grid[x][y] > 0) validCells.push({ x, y });
+			if (store.grid[x][y].intensity > 0) validCells.push({ x, y });
 		}
 	}
 	if (validCells.length > 0) {
 		const randomCell = validCells[Math.floor(Math.random() * validCells.length)];
-		Store.pacman = {
+		store.pacman = {
 			x: randomCell.x,
 			y: randomCell.y,
 			direction: 'right',
 			points: 0,
-			deadReaminingDuration: 0,
-			powerupReaminingDuration: 0
+			totalPoints: 0,
+			deadRemainingDuration: 0,
+			powerupRemainingDuration: 0
 		};
 	}
-	if (Store.config.outputFormat == 'canvas') Canvas.drawPacman();
+	if (store.config.outputFormat == 'canvas') Canvas.drawPacman(store);
 };
 
-const placeGhosts = () => {
-	Store.ghosts = [];
-	Store.scaredGhostsDestinations = [];
-	// Create 4 ghosts
+const placeGhosts = (store: StoreType) => {
+	store.ghosts = [];
+	store.scaredGhostsDestinations = [];
 	for (let i = 0; i < 4; i++) {
-		const color = GHOST_COLORS[i % GHOST_COLORS.length];
 		let x, y;
 		do {
 			x = Math.floor(Math.random() * GRID_HEIGHT);
 			y = Math.floor(Math.random() * GRID_WIDTH);
-		} while (Store.grid[x][y] === 0);
-		Store.ghosts.push({ x, y, color, scared: false, target: undefined });
-		Store.scaredGhostsDestinations.push({ x: 0, y: 0 });
+		} while (store.grid[x][y].intensity === 0);
+		store.ghosts.push({ x, y, name: GHOST_NAMES[i], scared: false, target: undefined });
+		store.scaredGhostsDestinations.push({ x: 0, y: 0 });
 	}
-	if (Store.config.outputFormat == 'canvas') Canvas.drawGhosts();
+	if (store.config.outputFormat == 'canvas') Canvas.drawGhosts(store);
 };
 
-const startGame = async () => {
-	if (Store.config.outputFormat == 'canvas') {
-		Store.config.canvas = Store.config.canvas;
-		Canvas.resizeCanvas();
-		Canvas.listenToSoundController();
+const stopGame = async (store: StoreType) => {
+	clearInterval(store.gameInterval);
+};
+
+const startGame = async (store: StoreType) => {
+	if (store.config.outputFormat == 'canvas') {
+		store.config.canvas = store.config.canvas;
+		Canvas.resizeCanvas(store);
+		Canvas.listenToSoundController(store);
 	}
 
-	Store.frameCount = 0;
-	Store.ghosts.forEach((ghost) => (ghost.scared = false));
+	store.frameCount = 0;
+	store.ghosts.forEach((ghost) => (ghost.scared = false));
 
-	initializeGrid();
-	if (Store.config.outputFormat == 'canvas') Canvas.drawGrid();
+	initializeGrid(store);
+	if (store.config.outputFormat == 'canvas') Canvas.drawGrid(store);
 
-	if (Store.config.outputFormat == 'canvas') {
-		if (!Store.config.enableSounds) {
+	if (store.config.outputFormat == 'canvas') {
+		if (!store.config.enableSounds) {
 			MusicPlayer.getInstance().mute();
 		}
 		await MusicPlayer.getInstance().preloadSounds();
@@ -100,103 +114,109 @@ const startGame = async () => {
 		await MusicPlayer.getInstance().play(Sound.BEGINNING);
 	}
 
-	placePacman();
-	placeGhosts();
+	placePacman(store);
+	placeGhosts(store);
+
+	GHOSTS.blinky.img.src = GHOSTS.blinky.imgDate;
+	GHOSTS.clyde.img.src = GHOSTS.clyde.imgDate;
+	GHOSTS.inky.img.src = GHOSTS.inky.imgDate;
+	GHOSTS.pinky.img.src = GHOSTS.pinky.imgDate;
+	GHOSTS.scared.img.src = GHOSTS.scared.imgDate;
 
-	if (Store.config.outputFormat == 'svg') {
-		const remainingCells = () => Store.grid.some((row) => row.some((cell) => cell > 0));
+	if (store.config.outputFormat == 'svg') {
+		const remainingCells = () => store.grid.some((row) => row.some((cell) => cell.intensity > 0));
 		while (remainingCells()) {
-			await updateGame();
+			await updateGame(store);
 		}
 		// One more time to generate svg
-		await updateGame();
+		await updateGame(store);
 	} else {
-		clearInterval(Store.gameInterval);
-		Store.gameInterval = setInterval(async () => await updateGame(), DELTA_TIME);
+		clearInterval(store.gameInterval);
+		store.gameInterval = setInterval(async () => await updateGame(store), DELTA_TIME);
 	}
 };
 
-const updateGame = async () => {
-	Store.frameCount++;
-	if (Store.frameCount % Store.config.gameSpeed !== 0) {
-		Store.gameHistory.push({
-			pacman: { ...Store.pacman },
-			ghosts: Store.ghosts.map((ghost) => ({ ...ghost })),
-			grid: Store.grid.map((row) => [...row])
+const updateGame = async (store: StoreType) => {
+	store.frameCount++;
+	if (store.frameCount % store.config.gameSpeed !== 0) {
+		store.gameHistory.push({
+			pacman: { ...store.pacman },
+			ghosts: store.ghosts.map((ghost) => ({ ...ghost })),
+			grid: store.grid.map((row) => [...row.map((col) => col.intensity)])
 		});
 		return;
 	}
 
-	if (Store.pacman.deadReaminingDuration) {
-		Store.pacman.deadReaminingDuration--;
-		if (!Store.pacman.deadReaminingDuration) {
+	if (store.pacman.deadRemainingDuration) {
+		store.pacman.deadRemainingDuration--;
+		if (!store.pacman.deadRemainingDuration) {
 			// IT'S ALIVE!
-			if (Store.config.outputFormat == 'canvas')
+			if (store.config.outputFormat == 'canvas')
 				MusicPlayer.getInstance()
 					.play(Sound.GAME_OVER)
 					.then(() => MusicPlayer.getInstance().startDefaultSound());
 		}
 	}
 
-	if (Store.pacman.powerupReaminingDuration) {
-		Store.pacman.powerupReaminingDuration--;
-		if (!Store.pacman.powerupReaminingDuration) {
-			Store.ghosts.forEach((ghost) => (ghost.scared = false));
-			Store.pacman.points = 0;
+	if (store.pacman.powerupRemainingDuration) {
+		store.pacman.powerupRemainingDuration--;
+		if (!store.pacman.powerupRemainingDuration) {
+			store.ghosts.forEach((ghost) => (ghost.scared = false));
+			store.pacman.points = 0;
 		}
 	}
 
-	const remainingCells = Store.grid.some((row) => row.some((cell) => cell > 0));
+	const remainingCells = store.grid.some((row) => row.some((cell) => cell.intensity > 0));
 	if (!remainingCells) {
-		if (Store.config.outputFormat == 'canvas') {
-			clearInterval(Store.gameInterval);
-			if (Store.config.outputFormat == 'canvas') {
-				Canvas.renderGameOver();
+		if (store.config.outputFormat == 'canvas') {
+			clearInterval(store.gameInterval);
+			if (store.config.outputFormat == 'canvas') {
+				Canvas.renderGameOver(store);
 				MusicPlayer.getInstance()
 					.play(Sound.BEGINNING)
 					.then(() => MusicPlayer.getInstance().stopDefaultSound());
 			}
 		}
 
-		if (Store.config.outputFormat == 'svg') {
-			const animatedSVG = SVG.generateAnimatedSVG();
+		if (store.config.outputFormat == 'svg') {
+			const animatedSVG = SVG.generateAnimatedSVG(store);
 			const svgBlob = new Blob([animatedSVG], {
 				type: 'image/svg+xml;charset=utf-8'
 			});
 			const svgUrl = URL.createObjectURL(svgBlob);
-			Store.config.svgCallback(svgUrl);
+			store.config.svgCallback(svgUrl);
 		}
 
-		Store.config.gameOverCallback();
+		store.config.gameOverCallback();
 		return;
 	}
 
-	movePacman();
-	moveGhosts();
-	checkCollisions();
+	movePacman(store);
+	moveGhosts(store);
+	checkCollisions(store);
 
-	Store.pacmanMouthOpen = !Store.pacmanMouthOpen;
+	store.pacmanMouthOpen = !store.pacmanMouthOpen;
 
-	Store.gameHistory.push({
-		pacman: { ...Store.pacman },
-		ghosts: Store.ghosts.map((ghost) => ({ ...ghost })),
-		grid: Store.grid.map((row) => [...row])
+	store.gameHistory.push({
+		pacman: { ...store.pacman },
+		ghosts: store.ghosts.map((ghost) => ({ ...ghost })),
+		grid: store.grid.map((row) => [...row.map((col) => col.intensity)])
 	});
 
-	if (Store.config.outputFormat == 'canvas') Canvas.drawGrid();
-	if (Store.config.outputFormat == 'canvas') Canvas.drawPacman();
-	if (Store.config.outputFormat == 'canvas') Canvas.drawGhosts();
-	if (Store.config.outputFormat == 'canvas') Canvas.drawSoundController();
+	if (store.config.outputFormat == 'canvas') Canvas.drawGrid(store);
+	if (store.config.outputFormat == 'canvas') Canvas.drawPacman(store);
+	if (store.config.outputFormat == 'canvas') Canvas.drawGhosts(store);
+	if (store.config.outputFormat == 'canvas') Canvas.drawSoundController(store);
 };
 
-const movePacman = () => {
-	if (Store.pacman.deadReaminingDuration) {
+const movePacman = (store: StoreType) => {
+	if (store.pacman.deadRemainingDuration) {
 		return;
 	}
 	let targetCells: { x: number; y: number; distance: number }[] = [];
 
-	if (Store.pacman.powerupReaminingDuration) {
-		targetCells = Store.ghosts.map((ghost) => ({
+	if (store.pacman.powerupRemainingDuration) {
+		targetCells = store.ghosts.map((ghost) => ({
 			x: ghost.x,
 			y: ghost.y,
 			distance: Infinity
@@ -204,7 +224,7 @@ const movePacman = () => {
 	} else {
 		for (let x = 0; x < GRID_HEIGHT; x++) {
 			for (let y = 0; y < GRID_WIDTH; y++) {
-				if (Store.grid[x][y] > 0) targetCells.push({ x, y, distance: Infinity });
+				if (store.grid[x][y].intensity > 0) targetCells.push({ x, y, distance: Infinity });
 			}
 		}
 	}
@@ -213,33 +233,35 @@ const movePacman = () => {
 
 	const closest = targetCells.reduce(
 		(closest, cell) => {
-			const distance = Math.abs(cell.x - Store.pacman.x) + Math.abs(cell.y - Store.pacman.y);
+			const distance = Math.abs(cell.x - store.pacman.x) + Math.abs(cell.y - store.pacman.y);
 			return distance < closest.distance ? { ...cell, distance } : closest;
 		},
-		{ x: Store.pacman.x, y: Store.pacman.y, distance: Infinity }
+		{ x: store.pacman.x, y: store.pacman.y, distance: Infinity }
 	);
 
-	const dx = closest.x - Store.pacman.x;
-	const dy = closest.y - Store.pacman.y;
+	const dx = closest.x - store.pacman.x;
+	const dy = closest.y - store.pacman.y;
 
 	if (Math.abs(dx) > Math.abs(dy)) {
-		Store.pacman.x += Math.sign(dx);
-		Store.pacman.direction = dx > 0 ? 'down' : 'up';
+		store.pacman.x += Math.sign(dx);
+		store.pacman.direction = dx > 0 ? 'down' : 'up';
 	} else {
-		Store.pacman.y += Math.sign(dy);
-		Store.pacman.direction = dy > 0 ? 'right' : 'left';
+		store.pacman.y += Math.sign(dy);
+		store.pacman.direction = dy > 0 ? 'right' : 'left';
 	}
 
-	if (Store.grid[Store.pacman.x][Store.pacman.y] > 0) {
-		Store.pacman.points += 1;
-		Store.grid[Store.pacman.x][Store.pacman.y] = 0;
+	if (store.grid[store.pacman.x][store.pacman.y].intensity > 0) {
+		store.pacman.totalPoints += store.grid[store.pacman.x][store.pacman.y].commitsCount;
+		store.pacman.points++;
+		store.config.pointsIncreasedCallback(store.pacman.totalPoints);
+		store.grid[store.pacman.x][store.pacman.y].intensity = 0;
 
-		if (Store.pacman.points >= 30) activatePowerUp();
+		if (store.pacman.points >= 30) activatePowerUp(store);
 	}
 };
 
-const moveGhosts = () => {
-	Store.ghosts.forEach((ghost, index) => {
+const moveGhosts = (store: StoreType) => {
+	store.ghosts.forEach((ghost, index) => {
 		if (ghost.scared) {
 			if (!ghost.target) {
 				ghost.target = getRandomDestination(ghost.x, ghost.y);
@@ -271,7 +293,7 @@ const moveGhosts = () => {
 			const [dx, dy] = directions[Math.floor(Math.random() * directions.length)];
 
 			// If Pacman has the power-up, ghosts move slower (move every other frame)
-			if (Store.pacman.powerupReaminingDuration && Math.random() < 0.5) return;
+			if (store.pacman.powerupRemainingDuration && Math.random() < 0.5) return;
 
 			const newX = ghost.x + dx;
 			const newY = ghost.y + dy;
@@ -294,22 +316,22 @@ const getRandomDestination = (x: number, y: number) => {
 	};
 };
 
-const checkCollisions = () => {
-	if (Store.pacman.deadReaminingDuration) return;
+const checkCollisions = (store: StoreType) => {
+	if (store.pacman.deadRemainingDuration) return;
 
-	Store.ghosts.forEach((ghost, index) => {
-		if (ghost.x === Store.pacman.x && ghost.y === Store.pacman.y) {
-			if (Store.pacman.powerupReaminingDuration && ghost.scared) {
-				respawnGhost(index);
-				Store.pacman.points += 10;
-				if (Store.config.outputFormat == 'canvas') {
+	store.ghosts.forEach((ghost, index) => {
+		if (ghost.x === store.pacman.x && ghost.y === store.pacman.y) {
+			if (store.pacman.powerupRemainingDuration && ghost.scared) {
+				respawnGhost(store, index);
+				store.pacman.points += 10;
+				if (store.config.outputFormat == 'canvas') {
 					MusicPlayer.getInstance().play(Sound.EAT_GHOST);
 				}
 			} else {
-				Store.pacman.points = 0;
-				Store.pacman.powerupReaminingDuration = 0;
-				Store.pacman.deadReaminingDuration = PACMAN_DEATH_DURATION;
-				if (Store.config.outputFormat == 'canvas') {
+				store.pacman.points = 0;
+				store.pacman.powerupRemainingDuration = 0;
+				store.pacman.deadRemainingDuration = PACMAN_DEATH_DURATION;
+				if (store.config.outputFormat == 'canvas') {
 					MusicPlayer.getInstance()
 						.play(Sound.GAME_OVER)
 						.then(() => MusicPlayer.getInstance().stopDefaultSound());
@@ -319,26 +341,27 @@ const checkCollisions = () => {
 	});
 };
 
-const respawnGhost = (ghostIndex: number) => {
+const respawnGhost = (store: StoreType, ghostIndex: number) => {
 	let x, y;
 	do {
 		x = Math.floor(Math.random() * GRID_HEIGHT);
 		y = Math.floor(Math.random() * GRID_WIDTH);
-	} while ((Math.abs(x - Store.pacman.x) <= 2 && Math.abs(y - Store.pacman.y) <= 2) || Store.grid[x][y] === 0);
-	Store.ghosts[ghostIndex] = {
+	} while ((Math.abs(x - store.pacman.x) <= 2 && Math.abs(y - store.pacman.y) <= 2) || store.grid[x][y].intensity === 0);
+	store.ghosts[ghostIndex] = {
 		x,
 		y,
-		color: GHOST_COLORS[ghostIndex % GHOST_COLORS.length],
+		name: GHOST_NAMES[ghostIndex % GHOST_NAMES.length],
 		scared: false,
 		target: undefined
 	};
 };
 
-const activatePowerUp = () => {
-	Store.pacman.powerupReaminingDuration = PACMAN_POWERUP_DURATION;
-	Store.ghosts.forEach((ghost) => (ghost.scared = true));
+const activatePowerUp = (store: StoreType) => {
+	store.pacman.powerupRemainingDuration = PACMAN_POWERUP_DURATION;
+	store.ghosts.forEach((ghost) => (ghost.scared = true));
 };
 
 export const Game = {
-	startGame
+	startGame,
+	stopGame
 };

package/src/index.ts

@@ -1,31 +1,46 @@
 import { Game } from './game';
 import { Store } from './store';
-import { Config } from './types';
+import { Config, StoreType } from './types';
 import { Utils } from './utils';
 
-export const renderContributions = async (conf: Config) => {
-	const defaultConfing: Config = {
-		platform: 'github',
-		username: '',
-		canvas: undefined as unknown as HTMLCanvasElement,
-		outputFormat: 'svg',
-		svgCallback: (_: string) => {},
-		gameOverCallback: () => () => {},
-		gameTheme: 'github',
-		gameSpeed: 1,
-		enableSounds: true
-	};
-	Store.config = { ...defaultConfing, ...conf };
+export class PacmanRenderer {
+	store: StoreType;
+	conf: Config;
 
-	switch (conf.platform) {
-		case 'gitlab':
-			Store.contributions = await Utils.getGitlabContribution(conf.username);
-			break;
+	constructor(conf: Config) {
+		this.store = { ...Store };
+		this.conf = { ...conf };
+	}
+
+	public async start() {
+		const defaultConfing: Config = {
+			platform: 'github',
+			username: '',
+			canvas: undefined as unknown as HTMLCanvasElement,
+			outputFormat: 'svg',
+			svgCallback: (_: string) => {},
+			gameOverCallback: () => () => {},
+			gameTheme: 'github',
+			gameSpeed: 1,
+			enableSounds: true,
+			pointsIncreasedCallback: (_: number) => {}
+		};
+		this.store.config = { ...defaultConfing, ...this.conf };
+
+		switch (this.conf.platform) {
+			case 'gitlab':
+				this.store.contributions = await Utils.getGitlabContribution(this.conf.username);
+				break;
 
-		case 'github':
-			Store.contributions = await Utils.getGithubContribution(conf.username);
-			break;
+			case 'github':
+				this.store.contributions = await Utils.getGithubContribution(this.conf.username);
+				break;
+		}
+
+		Game.startGame(this.store);
 	}
 
-	Game.startGame();
-};
+	public stop() {
+		Game.stopGame(this.store);
+	}
+}

package/src/music-player.ts

@@ -1,8 +1,8 @@
 export enum Sound {
-	DEFAULT = '/src/assets/sounds/pacman_chomp.wav',
-	BEGINNING = '/src/assets/sounds/pacman_beginning.wav',
-	GAME_OVER = '/src/assets/sounds/pacman_death.wav',
-	EAT_GHOST = '/src/assets/sounds/pacman_eatghost.wav'
+	DEFAULT = 'https://cdn.jsdelivr.net/gh/abozanona/pacman-contribution-graph@1.0.2/src/assets/sounds/pacman_chomp.wav',
+	BEGINNING = 'https://cdn.jsdelivr.net/gh/abozanona/pacman-contribution-graph@1.0.2/src/assets/sounds/pacman_beginning.wav',
+	GAME_OVER = 'https://cdn.jsdelivr.net/gh/abozanona/pacman-contribution-graph@1.0.2/src/assets/sounds/pacman_death.wav',
+	EAT_GHOST = 'https://cdn.jsdelivr.net/gh/abozanona/pacman-contribution-graph@1.0.2/src/assets/sounds/pacman_eatghost.wav'
 }
 
 export class MusicPlayer {
@@ -38,7 +38,9 @@ export class MusicPlayer {
 			return;
 		}
 		if (this.currentSource) {
-			this.currentSource.stop();
+			try {
+				this.currentSource.stop();
+			} catch (ex) {}
 		}
 
 		const buffer = this.sounds.get(sound);
@@ -65,7 +67,9 @@ export class MusicPlayer {
 
 	public startDefaultSound(): void {
 		if (this.defaultSource) {
-			this.defaultSource.stop();
+			try {
+				this.defaultSource.stop();
+			} catch (ex) {}
 		}
 
 		const buffer = this.sounds.get(Sound.DEFAULT);
@@ -86,7 +90,9 @@ export class MusicPlayer {
 
 	public stopDefaultSound(): void {
 		if (this.defaultSource) {
-			this.defaultSource.stop();
+			try {
+				this.defaultSource.stop();
+			} catch (ex) {}
 			this.defaultSource = null;
 		}
 	}

package/src/store.ts

@@ -8,8 +8,9 @@ export const Store: StoreType = {
 		y: 0,
 		direction: 'right',
 		points: 0,
-		deadReaminingDuration: 0,
-		powerupReaminingDuration: 0
+		totalPoints: 0,
+		deadRemainingDuration: 0,
+		powerupRemainingDuration: 0
 	},
 	ghosts: [],
 	grid: [],