Add color to city circle

isucon · Dec 4, 2024 · dcb7533 · dcb7533
1 parent 586d645
commit dcb7533
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/frontend/app/components/modules/map/map-data.ts b/frontend/app/components/modules/map/map-data.ts
@@ -11,6 +11,7 @@ type Town = {
   name: string;
   image: Image;
   centerCoordinate: Coordinate;
+  color: string;
 };
 
 const CityObjectImages = [
@@ -56,10 +57,12 @@ export const TownList = [
     name: "チェアタウン",
     centerCoordinate: { latitude: 0, longitude: 0 },
     image: { src: "/images/town.svg", width: 500, height: 500 },
+    color: "emerald",
   },
   {
     name: "コシカケシティ",
     centerCoordinate: { latitude: 300, longitude: 300 },
     image: { src: "/images/town.svg", width: 500, height: 500 },
+    color: "amber",
   },
 ] satisfies Town[];
diff --git a/frontend/app/components/modules/map/map.tsx b/frontend/app/components/modules/map/map.tsx
@@ -263,7 +263,7 @@ const ChairLayer: FC<{
 const TownLayer = memo(function TownLayer() {
   return (
     <div className="flex w-full h-full absolute top-0 left-0 select-none">
-      {TownList.map(({ centerCoordinate, name, image }) => {
+      {TownList.map(({ centerCoordinate, name, image, color }) => {
         const pos = coordinateToPos(centerCoordinate);
         return (
           <div
@@ -282,7 +282,7 @@ const TownLayer = memo(function TownLayer() {
             >
               <div
                 role="presentation"
-                className="absolute rounded-full bg-neutral-100 bg-opacity-40 border-2 border-neutral-200"
+                className={`absolute rounded-full bg-neutral-300 bg-opacity-40 border-4 border-${color}-500`}
                 style={{
                   width: image.width + 20,
                   height: image.width + 20,
@@ -300,7 +300,7 @@ const TownLayer = memo(function TownLayer() {
               <div className="absolute bottom-[-54px] w-full text-center">
                 <Text
                   tagName="span"
-                  className="px-3 py-1 bg-neutral-400 text-white rounded-md"
+                  className={`px-3 py-1 bg-${color}-600 text-white rounded-md`}
                   size="sm"
                 >
                   {name}

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -3,4 +3,5 @@ import type { Config } from "tailwindcss";
 export default {
   content: ["./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}"],
   plugins: [],
+  safelist: [{ pattern: /bg-.+-[56]00/ }, { pattern: /border-.+-500/ }],
 } satisfies Config;