chore: optimize assets

components/Map.tsx

@@ -102,6 +102,8 @@ export const Map = () => {
                       goal.location.row - 1 === rowIndex
                   );
 
+                  const selectedGoal = GOALS[goal?.player_id || "a"];
+
                   // Step 3: check if this cell has cell value
                   const cellValue = gameState?.map[rowIndex][colIndex];
                   let point = 0;
@@ -157,10 +159,10 @@ export const Map = () => {
 
                       {goal && (
                         <Image
-                          src={GOALS[goal.player_id! || "a"]}
+                          src={selectedGoal.src}
                           alt="goal"
                           fill
-                          className="scale-125"
+                          className={`scale-125 ${selectedGoal.css}`}
                         />
                       )}
 

constants/goal.ts

@@ -1,6 +1,23 @@
-export const GOALS: Record<string, string> = {
-  a: "/assets/spritesheets/portals/portal-green.webp",
-  b: "/assets/spritesheets/portals/portal-purple.webp",
-  c: "/assets/spritesheets/portals/portal-red.webp",
-  d: "/assets/spritesheets/portals/portal-yellow.webp",
+type Goal = {
+  src: string;
+  css: string;
+};
+
+export const GOALS: Record<string, Goal> = {
+  a: {
+    src: "/assets/spritesheets/portals/portal-red.webp",
+    css: "hue-rotate-120", // green
+  },
+  b: {
+    src: "/assets/spritesheets/portals/portal-red.webp",
+    css: "hue-rotate-240", // purple
+  },
+  c: {
+    src: "/assets/spritesheets/portals/portal-red.webp",
+    css: "",
+  },
+  d: {
+    src: "/assets/spritesheets/portals/portal-yellow.webp",
+    css: "",
+  },
 };

styles/globals.css

@@ -213,3 +213,11 @@ input[type="text"] {
 .card-br::before {
   clip-path: polygon(var(--border-path-br));
 }
+
+.hue-rotate-120 {
+  filter: hue-rotate(120deg);
+}
+
+.hue-rotate-240 {
+  filter: hue-rotate(240deg);
+}