Finish maps

client/src/components/ChatMessage.tsx

@@ -14,6 +14,7 @@ import thumbAICEO from "@/assets/thumb-aiceo.svg";
 import { CEOS } from "@/data";
 
 import { CEOAvatar } from "./CEOAvatar";
+import { FloorMap } from "./FloorMap";
 
 export interface ChatMessageProps {
   message: APIChatMessage;
@@ -82,25 +83,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
               ))}
               <div>
                 <div className="font-bold">展示場所はこちら</div>
-                <div className="relative">
-                  <img
-                    className="border-2 rounded-xl border-green-700 w-full"
-                    src={floormap}
-                    alt="Floor Map"
-                  />
-                  {message.ceoDetails.map((ceo) => (
-                    <img
-                      className="w-16 h-16 absolute"
-                      key={ceo.key}
-                      src={CEOS[ceo.key].thumbnail}
-                      alt={CEOS[ceo.key].name}
-                      style={{
-                        top: CEOS[ceo.key].position.top,
-                        left: CEOS[ceo.key].position.left,
-                      }}
-                    />
-                  ))}
-                </div>
+                <FloorMap ceoKeys={message.ceoDetails.map((ceo) => ceo.key)} />
               </div>
             </div>
           )}

client/src/components/FloorMap.tsx

@@ -0,0 +1,32 @@
+import floormap from "@/assets/floormap.svg";
+import { CEOS } from "@/data";
+import { twMerge } from "tailwind-merge";
+
+export interface FloorMapProps {
+  ceoKeys: string[];
+}
+
+export function FloorMap({ ceoKeys }: FloorMapProps) {
+  const ceos = ceoKeys.map((key) => ({ ...CEOS[key], key }));
+  return (
+    <div className="relative">
+      <img
+        className="border-2 rounded-xl border-green-700 w-full"
+        src={floormap}
+        alt="Floor Map"
+      />
+      {ceos.map((ceo) => (
+        <img
+          key={ceo.key}
+          alt={ceo.name}
+          src={ceo.pin}
+          className="w-[9%] absolute"
+          style={{
+            top: ceo.position.top,
+            left: ceo.position.left,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

client/src/data/ceos.ts

@@ -1,98 +1,98 @@
-import floormapEizawaAkimasa from "@/assets/floormap-eizawa-akimasa.svg";
-import floormapFuruiAtsushi from "@/assets/floormap-furui-atsushi.svg";
-import floormapMatsuyaMitsuru from "@/assets/floormap-matsuya-mitsuru.svg";
-import floormapMurotaShigeki from "@/assets/floormap-murota-shigeki.svg";
-import floormapNomuraFigeo from "@/assets/floormap-nomura-figeo.svg";
-import floormapOidaShuji from "@/assets/floormap-oida-shuji.svg";
-import floormapTamotoNaohiro from "@/assets/floormap-tamoto-naohiro.svg";
-import floormapTanikawaToshiko from "@/assets/floormap-tanikawa-toshiko.svg";
-import thumbEizawaAkimasa from "@/assets/thumb-eizawa-akimasa.svg";
-import thumbFuruiAtsushi from "@/assets/thumb-furui-atsushi.svg";
-import thumbMatsuyaMitsuru from "@/assets/thumb-matsuya-mitsuru.svg";
-import thumbMurotaShigeki from "@/assets/thumb-murota-shigeki.svg";
-import thumbNomuraFigeo from "@/assets/thumb-nomura-figeo.svg";
-import thumbOidaShuji from "@/assets/thumb-oida-shuji.svg";
-import thumbTamotoNaohiro from "@/assets/thumb-tamoto-naohiro.svg";
-import thumbTanikawaToshiko from "@/assets/thumb-tanikawa-toshiko.svg";
+import pinEizawaAkimasa from "@/assets/pin-eizawa-akimasa.png";
+import pinFuruiAtsushi from "@/assets/pin-furui-atsushi.png";
+import pinMatsuyaMitsuru from "@/assets/pin-matsuya-mitsuru.png";
+import pinMurotaShigeki from "@/assets/pin-murota-shigeki.png";
+import pinNomuraFigeo from "@/assets/pin-nomura-figeo.png";
+import pinOidaShuji from "@/assets/pin-oida-shuji.png";
+import pinTamotoNaohiro from "@/assets/pin-tamoto-naohiro.png";
+import pinTanikawaToshiko from "@/assets/pin-tanikawa-toshiko.png";
+import thumbEizawaAkimasa from "@/assets/thumb-eizawa-akimasa.png";
+import thumbFuruiAtsushi from "@/assets/thumb-furui-atsushi.png";
+import thumbMatsuyaMitsuru from "@/assets/thumb-matsuya-mitsuru.png";
+import thumbMurotaShigeki from "@/assets/thumb-murota-shigeki.png";
+import thumbNomuraFigeo from "@/assets/thumb-nomura-figeo.png";
+import thumbOidaShuji from "@/assets/thumb-oida-shuji.png";
+import thumbTamotoNaohiro from "@/assets/thumb-tamoto-naohiro.png";
+import thumbTanikawaToshiko from "@/assets/thumb-tanikawa-toshiko.png";
 
 export interface CEODetails {
   name: string;
   thumbnail: string;
-  floormap: string;
+  pin: string;
   position: { top: string; left: string };
 }
 
 export const CEOS: Record<string, CEODetails> = {
   "eizawa-akimasa": {
     name: "榮澤暁誠",
     thumbnail: thumbEizawaAkimasa,
-    floormap: floormapEizawaAkimasa,
+    pin: pinEizawaAkimasa,
     position: {
-      top: "25%",
-      left: "45%",
+      top: "23%",
+      left: "47.5%",
     },
   },
   "furui-atsushi": {
     name: "古井敦士",
     thumbnail: thumbFuruiAtsushi,
-    floormap: floormapFuruiAtsushi,
+    pin: pinFuruiAtsushi,
     position: {
-      top: "25%",
-      left: "45%",
+      top: "26%",
+      left: "60.5%",
     },
   },
   "matsuya-mitsuru": {
-    name: "松谷 充",
+    name: "松谷充",
     thumbnail: thumbMatsuyaMitsuru,
-    floormap: floormapMatsuyaMitsuru,
+    pin: pinMatsuyaMitsuru,
     position: {
-      top: "25%",
-      left: "45%",
+      top: "27%",
+      left: "73%",
     },
   },
   "murota-shigeki": {
     name: "室田茂樹",
     thumbnail: thumbMurotaShigeki,
-    floormap: floormapMurotaShigeki,
+    pin: pinMurotaShigeki,
     position: {
-      top: "36%",
-      left: "26%",
+      top: "44%",
+      left: "35%",
     },
   },
   "nomura-figeo": {
     name: "室田茂樹",
     thumbnail: thumbNomuraFigeo,
-    floormap: floormapNomuraFigeo,
+    pin: pinNomuraFigeo,
     position: {
       top: "36%",
-      left: "26%",
+      left: "48%",
     },
   },
   "oida-shuji": {
-    name: "室田茂樹",
+    name: "種田宗司",
     thumbnail: thumbOidaShuji,
-    floormap: floormapOidaShuji,
+    pin: pinOidaShuji,
     position: {
-      top: "36%",
-      left: "26%",
+      top: "39%",
+      left: "73.3%",
     },
   },
   "tamoto-naohiro": {
     name: "田本直弘",
     thumbnail: thumbTamotoNaohiro,
-    floormap: floormapTamotoNaohiro,
+    pin: pinTamotoNaohiro,
     position: {
-      top: "50%",
-      left: "70%",
+      top: "25%",
+      left: "35%",
     },
   },
   "tanikawa-toshiko": {
     name: "谷脇とし子",
     thumbnail: thumbTanikawaToshiko,
-    floormap: floormapTanikawaToshiko,
+    pin: pinTanikawaToshiko,
     position: {
-      top: "50%",
-      left: "70%",
+      top: "41%",
+      left: "60.5%",
     },
   },
 };

client/src/layouts/styles.css

@@ -2,6 +2,49 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .pin {
+    width: 100%;
+    height: 100%;
+    margin-left: 0.05rem;
+    border-radius: 50% 50% 50% 0;
+    background: #89849b;
+    transform: rotate(-45deg);
+  }
+
+  .pin.eizawa-akimasa {
+    background: #D46982;
+  }
+
+  .pin.furui-atsushi {
+    background: #00A2B1;
+  }
+
+  .pin.matsuya-mitsuru {
+    background: #F091A7;
+  }
+
+  .pin.murota-shigeki {
+    background: #F6AC19;
+  }
+
+  .pin.nomura-figeo {
+    background: #008643;
+  }
+
+  .pin.oida-shuji {
+    background: #87C142;
+  }
+
+  .pin.tamoto-naohiro {
+    background: #008CC2;
+  }
+
+  .pin.tanikawa-toshiko {
+    background: #ED6D1F;
+  }
+}
+
 html {
   overflow-x: hidden;
   height: 100%;