pacman-contribution-graph 1.0.0 → 1.0.2

package/src/svg.ts

@@ -1,20 +1,22 @@
-import { CELL_SIZE, GAP_SIZE, GRID_HEIGHT, GRID_WIDTH, PACMAN_COLOR, PACMAN_COLOR_DEAD, PACMAN_COLOR_POWERUP } from './constants';
-import { Store } from './store';
+import { CELL_SIZE, GAP_SIZE, GHOSTS, GRID_HEIGHT, GRID_WIDTH, PACMAN_COLOR, PACMAN_COLOR_DEAD, PACMAN_COLOR_POWERUP } from './constants';
+import { StoreType } from './types';
 import { Utils } from './utils';
 
-const generateAnimatedSVG = () => {
+const generateAnimatedSVG = (store: StoreType) => {
 	const svgWidth = GRID_WIDTH * (CELL_SIZE + GAP_SIZE);
 	const svgHeight = GRID_HEIGHT * (CELL_SIZE + GAP_SIZE) + 20;
 	let svg = `<svg width="${svgWidth}" height="${svgHeight}" xmlns="http://www.w3.org/2000/svg">`;
-	svg += `<rect width="100%" height="100%" fill="${Utils.getCurrentTheme().gridBackground}"/>`;
+	svg += `<rect width="100%" height="100%" fill="${Utils.getCurrentTheme(store).gridBackground}"/>`;
+
+	svg += generateGhostsPredefinition();
 
 	// Month labels
 	let lastMonth = '';
 	for (let y = 0; y < GRID_WIDTH; y++) {
-		if (Store.monthLabels[y] !== lastMonth) {
+		if (store.monthLabels[y] !== lastMonth) {
 			const xPos = y * (CELL_SIZE + GAP_SIZE) + CELL_SIZE / 2;
-			svg += `<text x="${xPos}" y="10" text-anchor="middle" font-size="10" fill="${Utils.getCurrentTheme().textColor}">${Store.monthLabels[y]}</text>`;
-			lastMonth = Store.monthLabels[y];
+			svg += `<text x="${xPos}" y="10" text-anchor="middle" font-size="10" fill="${Utils.getCurrentTheme(store).textColor}">${store.monthLabels[y]}</text>`;
+			lastMonth = store.monthLabels[y];
 		}
 	}
 
@@ -23,62 +25,43 @@ const generateAnimatedSVG = () => {
 		for (let y = 0; y < GRID_WIDTH; y++) {
 			const cellX = y * (CELL_SIZE + GAP_SIZE);
 			const cellY = x * (CELL_SIZE + GAP_SIZE) + 15;
-			const intensity = Store.gameHistory[0].grid[x][y];
-			const color = intensity > 0 ? getContributionColor(intensity) : Utils.getCurrentTheme().emptyContributionBoxColor;
+			const intensity = store.gameHistory[0].grid[x][y];
+			const color = intensity > 0 ? getContributionColor(store, intensity) : Utils.getCurrentTheme(store).emptyContributionBoxColor;
 			svg += `<rect id="cell-${x}-${y}" x="${cellX}" y="${cellY}" width="${CELL_SIZE}" height="${CELL_SIZE}" rx="5" fill="${color}">
-                <animate attributeName="fill" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite" 
-                    values="${generateCellColorValues(x, y)}" 
-                    keyTimes="${generateKeyTimes()}"/>
+                <animate attributeName="fill" dur="${store.gameHistory.length * 300}ms" repeatCount="indefinite" 
+                    values="${generateCellColorValues(store, x, y)}" 
+                    keyTimes="${generateKeyTimes(store)}"/>
             </rect>`;
 		}
 	}
 
 	// Pacman
 	svg += `<path id="pacman" d="${generatePacManPath(0.35)}"
-        transform="translate(${Store.pacman.y * (CELL_SIZE + GAP_SIZE)}, ${Store.pacman.x * (CELL_SIZE + GAP_SIZE) + 15})">
-		<animate attributeName="fill" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-                keyTimes="${generateKeyTimes()}"
-                values="${generatePacManColors()}"/>
-        <animateTransform attributeName="transform" type="translate" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-            keyTimes="${generateKeyTimes()}"
-            values="${generatePacManPositions()}"/>
+        transform="translate(${store.pacman.y * (CELL_SIZE + GAP_SIZE)}, ${store.pacman.x * (CELL_SIZE + GAP_SIZE) + 15})">
+		<animate attributeName="fill" dur="${store.gameHistory.length * 300}ms" repeatCount="indefinite"
+                keyTimes="${generateKeyTimes(store)}"
+                values="${generatePacManColors(store)}"/>
+        <animateTransform attributeName="transform" type="translate" dur="${store.gameHistory.length * 300}ms" repeatCount="indefinite"
+            keyTimes="${generateKeyTimes(store)}"
+            values="${generatePacManPositions(store)}"/>
         <animate attributeName="d" dur="0.2s" repeatCount="indefinite"
             values="${generatePacManPath(0.25)};${generatePacManPath(0.05)};${generatePacManPath(0.25)}"/>
     </path>`;
 
 	// Ghosts
-	Store.ghosts.forEach((ghost, index) => {
-		svg += `<path id="ghost${index}" d="${generateGhostPath(CELL_SIZE / 2)}" fill="${ghost.color}">
-            <animate attributeName="fill" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-                keyTimes="${generateKeyTimes()}"
-                values="${generateGhostColors(index)}"/>
-            <animateTransform attributeName="transform" type="translate" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-                keyTimes="${generateKeyTimes()}"
-                values="${generateGhostPositions(index)}"/>
-        </path>
-        <circle cx="${CELL_SIZE / 3}" cy="${CELL_SIZE / 3}" r="${CELL_SIZE / 8}" fill="white">
-            <animateTransform attributeName="transform" type="translate" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-                keyTimes="${generateKeyTimes()}"
-                values="${generateGhostPositions(index)}"/>
-        </circle>
-        <circle cx="${(CELL_SIZE * 2) / 3}" cy="${CELL_SIZE / 3}" r="${CELL_SIZE / 8}" fill="white">
-            <animateTransform attributeName="transform" type="translate" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-                keyTimes="${generateKeyTimes()}"
-                values="${generateGhostPositions(index)}"/>
-        </circle>
-        <circle cx="${CELL_SIZE / 3}" cy="${CELL_SIZE / 3}" r="${CELL_SIZE / 16}" fill="black">
-            <animateTransform attributeName="transform" type="translate" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-                keyTimes="${generateKeyTimes()}"
-                values="${generateGhostPositions(index)}"/>
-        </circle>
-        <circle cx="${(CELL_SIZE * 2) / 3}" cy="${CELL_SIZE / 3}" r="${CELL_SIZE / 16}" fill="black">
-            <animateTransform attributeName="transform" type="translate" dur="${Store.gameHistory.length * 300}ms" repeatCount="indefinite"
-                keyTimes="${generateKeyTimes()}"
-                values="${generateGhostPositions(index)}"/>
-        </circle>`;
+	store.ghosts.forEach((ghost, index) => {
+		svg += `<use id="ghost${index}" width="${CELL_SIZE}" height="${CELL_SIZE}" href="#ghost-${ghost.name}">
+            <animateTransform attributeName="transform" type="translate" dur="${store.gameHistory.length * 300}ms" repeatCount="indefinite"
+                keyTimes="${generateKeyTimes(store)}"
+                values="${generateGhostPositions(store, index)}"/>
+            <animate attributeName="href" dur="${store.gameHistory.length * 300}ms" repeatCount="indefinite"
+                keyTimes="${generateKeyTimes(store)}"
+                values="${generateGhostColors(store, index)}"/>
+        </use>`;
 	});
 
 	svg += '</svg>';
+	// TODO: minify SVG
 	return svg;
 };
 
@@ -93,12 +76,12 @@ const generatePacManPath = (mouthAngle: number) => {
             Z`;
 };
 
-const generateKeyTimes = () => {
-	return Store.gameHistory.map((_, index) => index / (Store.gameHistory.length - 1)).join(';');
+const generateKeyTimes = (store: StoreType) => {
+	return store.gameHistory.map((_, index) => index / (store.gameHistory.length - 1)).join(';');
 };
 
-const generatePacManPositions = () => {
-	return Store.gameHistory
+const generatePacManPositions = (store: StoreType) => {
+	return store.gameHistory
 		.map((state) => {
 			const x = state.pacman.y * (CELL_SIZE + GAP_SIZE);
 			const y = state.pacman.x * (CELL_SIZE + GAP_SIZE) + 15;
@@ -107,12 +90,12 @@ const generatePacManPositions = () => {
 		.join(';');
 };
 
-const generatePacManColors = () => {
-	return Store.gameHistory
+const generatePacManColors = (store: StoreType) => {
+	return store.gameHistory
 		.map((state) => {
-			if (state.pacman.deadReaminingDuration) {
+			if (state.pacman.deadRemainingDuration) {
 				return PACMAN_COLOR_DEAD;
-			} else if (state.pacman.powerupReaminingDuration) {
+			} else if (state.pacman.powerupRemainingDuration) {
 				return PACMAN_COLOR_POWERUP;
 			} else {
 				return PACMAN_COLOR;
@@ -121,22 +104,22 @@ const generatePacManColors = () => {
 		.join(';');
 };
 
-const generateCellColorValues = (x: number, y: number) => {
-	return Store.gameHistory
+const generateCellColorValues = (store: StoreType, x: number, y: number) => {
+	return store.gameHistory
 		.map((state) => {
 			const intensity = state.grid[x][y];
-			return intensity > 0 ? getContributionColor(intensity) : Utils.getCurrentTheme().emptyContributionBoxColor;
+			return intensity > 0 ? getContributionColor(store, intensity) : Utils.getCurrentTheme(store).emptyContributionBoxColor;
 		})
 		.join(';');
 };
 
-const getContributionColor = (intensity: number) => {
+const getContributionColor = (store: StoreType, intensity: number) => {
 	const adjustedIntensity = intensity < 0.2 ? 0.3 : intensity;
-	return Utils.hexToRGBA(Utils.getCurrentTheme().contributionBoxColor, adjustedIntensity);
+	return Utils.hexToRGBA(Utils.getCurrentTheme(store).contributionBoxColor, adjustedIntensity);
 };
 
-const generateGhostPositions = (ghostIndex: number) => {
-	return Store.gameHistory
+const generateGhostPositions = (store: StoreType, ghostIndex: number) => {
+	return store.gameHistory
 		.map((state) => {
 			const ghost = state.ghosts[ghostIndex];
 			const x = ghost.y * (CELL_SIZE + GAP_SIZE);
@@ -146,27 +129,35 @@ const generateGhostPositions = (ghostIndex: number) => {
 		.join(';');
 };
 
-const generateGhostPath = (radius: number) => {
-	return `M ${radius},${radius * 2}
-            Q ${radius * 0.8},${radius * 1.5} ${radius * 0.5},${radius * 1.3}
-            Q ${radius * 0.3},${radius * 1.1} 0,${radius}
-            L 0,0
-            L ${radius * 2},0
-            L ${radius * 2},${radius}
-            Q ${radius * 1.7},${radius * 1.1} ${radius * 1.5},${radius * 1.3}
-            Q ${radius * 1.2},${radius * 1.5} ${radius},${radius * 2}
-            Z`;
-};
-
-const generateGhostColors = (ghostIndex: number) => {
-	return Store.gameHistory
+const generateGhostColors = (store: StoreType, ghostIndex: number) => {
+	return store.gameHistory
 		.map((state) => {
 			const ghost = state.ghosts[ghostIndex];
-			return ghost.scared ? 'blue' : ghost.color;
+			return ghost.scared ? '#scared' : '#' + ghost.name;
 		})
 		.join(';');
 };
 
+const generateGhostsPredefinition = () => {
+	return `<defs>
+		<symbol id="blinky" viewBox="0 0 100 100">
+            <image href="${GHOSTS['blinky'].imgDate}" width="100" height="100"/>
+		</symbol>
+		<symbol id="clyde" viewBox="0 0 100 100">
+            <image href="${GHOSTS['clyde'].imgDate}" width="100" height="100"/>
+		</symbol>
+		<symbol id="inky" viewBox="0 0 100 100">
+            <image href="${GHOSTS['inky'].imgDate}" width="100" height="100"/>
+		</symbol>
+		<symbol id="pinky" viewBox="0 0 100 100">
+            <image href="${GHOSTS['pinky'].imgDate}" width="100" height="100"/>
+		</symbol>
+		<symbol id="scared" viewBox="0 0 100 100">
+            <image href="${GHOSTS['scared'].imgDate}" width="100" height="100"/>
+		</symbol>
+	</defs>`;
+};
+
 export const SVG = {
 	generateAnimatedSVG
 };

package/src/types.ts

@@ -3,14 +3,16 @@ export interface Pacman {
 	y: number;
 	direction: string;
 	points: number;
-	deadReaminingDuration: number;
-	powerupReaminingDuration: number;
+	totalPoints: number;
+	deadRemainingDuration: number;
+	powerupRemainingDuration: number;
 }
 
+export type GhostName = 'blinky' | 'clyde' | 'inky' | 'pinky';
 export interface Ghost {
 	x: number;
 	y: number;
-	color: string;
+	name: GhostName;
 	scared: boolean;
 	target?: { x: number; y: number };
 }
@@ -25,7 +27,7 @@ export interface StoreType {
 	contributions: Contribution[];
 	pacman: Pacman;
 	ghosts: Ghost[];
-	grid: number[][];
+	grid: { intensity: number; commitsCount: number }[][];
 	monthLabels: string[];
 	pacmanMouthOpen: boolean;
 	gameInterval: number;
@@ -48,6 +50,7 @@ export interface Config {
 	gameTheme: ThemeKeys;
 	gameSpeed: number;
 	enableSounds: boolean;
+	pointsIncreasedCallback: (pointsSum: number) => void;
 }
 
 export type ThemeKeys = 'github' | 'github-dark' | 'gitlab' | 'gitlab-dark';

package/src/utils.ts

@@ -1,9 +1,11 @@
 import { GAME_THEMES } from './constants';
-import { Store } from './store';
-import type { Contribution, GameTheme } from './types';
+import type { Contribution, GameTheme, StoreType } from './types';
 
 const getGitlabContribution = async (username: string): Promise<Contribution[]> => {
-	const response = await fetch(`https://gitlab.com/users/${username}/calendar.json`);
+	// const response = await fetch(`https://gitlab.com/users/${username}/calendar.json`);
+	const response = await fetch(
+		`https://v0-new-project-q1hhrdodoye-abozanona-gmailcoms-projects.vercel.app/api/contributions?username=${username}`
+	);
 	const contributionsList = await response.json();
 	return Object.entries(contributionsList).map(([date, count]) => ({
 		date: new Date(date),
@@ -28,8 +30,8 @@ const getGithubContribution = async (username: string): Promise<Contribution[]>
 	);
 };
 
-const getCurrentTheme = (): GameTheme => {
-	return GAME_THEMES[Store.config.gameTheme] ?? GAME_THEMES['github'];
+const getCurrentTheme = (store: StoreType): GameTheme => {
+	return GAME_THEMES[store.config.gameTheme] ?? GAME_THEMES['github'];
 };
 
 function hexToRGBA(hex: string, alpha: number): string {