update frontend

src/components/Map/MapView.jsx

@@ -137,8 +137,7 @@ export default function MapView({ theme = "dark" }) {
 
     const authorName = (username || "").trim() || "anon";
 
-    // ----- CROSSHAIR OFFSET FIX -----
+    // Crosshair offset fix
-    // Point de départ : soit coords définies, soit centre de la map
     let baseLng;
     let baseLat;
 
@@ -151,24 +150,15 @@ export default function MapView({ theme = "dark" }) {
       baseLat = center.lat;
     }
 
-    // Offset vertical en pixels :
+    const pixelOffsetY = -20;
-    // si le post apparaît trop bas, on remonte (pixelOffsetY négatif)
-    const pixelOffsetY = -20; // ajuste à -25/-30 si nécessaire
-
-    // lng/lat -> pixels
     const screenPoint = map.project([baseLng, baseLat]);
-
-    // appliquer l'offset vertical
     const correctedPoint = {
       x: screenPoint.x,
       y: screenPoint.y + pixelOffsetY,
     };
-
-    // pixels -> lng/lat corrigé
     const correctedLngLat = map.unproject([correctedPoint.x, correctedPoint.y]);
     const lng = correctedLngLat.lng;
     const lat = correctedLngLat.lat;
-    // ----- END FIX -----
 
     if (!draftTitle.trim()) {
       setSaveError("Title required.");
@@ -178,7 +168,6 @@ export default function MapView({ theme = "dark" }) {
     try {
       setIsSaving(true);
 
-      // On récupère le post retourné par le backend
       const newPost = await createPost(
         {
           title: draftTitle.trim(),
@@ -191,8 +180,7 @@ export default function MapView({ theme = "dark" }) {
         },
         token
       );
-// On l’injecte direct dans le moteur de posts,
+
-      // en plus du broadcast WebSocket
       if (newPost && newPost.id) {
         handleIncomingPost(newPost);
       }
@@ -222,7 +210,7 @@ export default function MapView({ theme = "dark" }) {
       <div ref={containerRef} className="map-container" />
       {status && <div className="map-status">{status}</div>}
 
-      {/* TOP */}
+      {/* TOP: Look / Place */}
       <div className="map-overlay map-overlay-top">
         <button className="chip-pill" onClick={handleSearchClick}>
           Look at…
@@ -232,42 +220,51 @@ export default function MapView({ theme = "dark" }) {
         </button>
       </div>
 
-      {/* LEFT */}
+      {/* LEFT: time filters – NOW / TODAY / RECENT / PAST */}
-      <div className="map-overlay map-overlay-left">
+      <div className="map-overlay game-filter-column game-filter-column-left">
         {[
           ["NOW", "Now"],
           ["TODAY", "Today"],
-          ["RECENT", "Recently"],
+          ["RECENT", "Recent"],
           ["PAST", "Past"],
         ].map(([code, label]) => (
+          <div className="game-filter-item" key={code}>
             <button
-            key={code}
               className={
-              timeFilter === code ? "chip-round chip-selected" : "chip-round"
+                "game-filter-circle" +
+                (timeFilter === code ? " game-filter-circle-active" : "")
               }
               onClick={() => setTimeFilter(code)}
             >
-            {label}
+              <span>{label[0]}</span>
             </button>
+            <span className="game-filter-label">{label}</span>
+          </div>
         ))}
       </div>
 
-      {/* RIGHT */}
+      {/* RIGHT: main categories – ALL / NEWS / FRIENDS / EVENTS / MARKET */}
-      <div className="map-overlay map-overlay-right">
+      <div className="map-overlay game-filter-column game-filter-column-right">
-        {FILTER_MAIN_CATEGORIES.map((cat) => (
+        {FILTER_MAIN_CATEGORIES.map((cat) => {
+          const label = cat;
+          return (
+            <div className="game-filter-item" key={cat}>
               <button
-            key={cat}
                 className={
-              mainFilter === cat ? "chip-pill chip-selected" : "chip-pill"
+                  "game-filter-circle" +
+                  (mainFilter === cat ? " game-filter-circle-active" : "")
                 }
                 onClick={() => setMainFilter(cat)}
               >
-            {cat}
+                <span>{label[0]}</span>
               </button>
-        ))}
+              <span className="game-filter-label">{label}</span>
+            </div>
+          );
+        })}
       </div>
 
-      {/* BOTTOM SUBCATEGORIES */}
+      {/* BOTTOM: subcategories */}
       <div className="map-overlay map-overlay-bottom">
         {bottomCategories.map((c) => (
           <button
@@ -293,7 +290,7 @@ export default function MapView({ theme = "dark" }) {
         </button>
       </div>
 
-      {/* CROSSHAIR au centre pendant la création */}
+      {/* CROSSHAIR */}
       {isCreating && (
         <div className="map-overlay map-crosshair">
           <div className="crosshair-aim" />

src/main.jsx

@@ -13,6 +13,7 @@ import "./styles/posts.css";
 import "./styles/theme.css";
 // dans main.jsx, avec les autres styles
 import "./styles/auth-modal.css";
+import "./styles/game-filters.css";
 import { AuthProvider } from "./auth/AuthContext.jsx";
 
 ReactDOM.createRoot(document.getElementById("root")).render(

src/styles/game-filters.css

@@ -0,0 +1,88 @@
+/* ===== SOCIOWIRE – GAME STYLE FILTER BUTTONS ===== */
+
+/* Columns on left/right of the map */
+.game-filter-column {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  z-index: 25;
+  pointer-events: none; /* overlay container */
+}
+
+.game-filter-column * {
+  pointer-events: auto; /* real buttons clickable */
+}
+
+.game-filter-column-left {
+  left: 0.45rem;
+}
+
+.game-filter-column-right {
+  right: 0.45rem;
+}
+
+/* One line: circle + vertical label */
+.game-filter-item {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+/* Round “avatar style” button */
+.game-filter-circle {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, #3f9dfd, #1d4ed8, #020617);
+  border: 3px solid rgba(255, 255, 255, 0.35);
+  box-shadow:
+    0 4px 14px rgba(0, 0, 0, 0.7),
+    0 0 10px rgba(59, 130, 246, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.game-filter-circle span {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #e5f2ff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+/* Selected state */
+.game-filter-circle-active {
+  background: radial-gradient(circle at 30% 30%, #4ade80, #16a34a, #052e16);
+  border-color: #22c55e;
+  box-shadow:
+    0 0 16px rgba(34, 197, 94, 0.9),
+    0 6px 18px rgba(0, 0, 0, 0.85);
+}
+
+/* Vertical label like AVATAR / QUEST */
+.game-filter-label {
+  font-size: 0.55rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: #f9fafb;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+/* Tiny tweak for small screens */
+@media (max-width: 480px) {
+  .game-filter-circle {
+    width: 46px;
+    height: 46px;
+  }
+}