From 851ee4fe1c12353404fd9e3dc38c50e621be5755 Mon Sep 17 00:00:00 2001 From: Your Name Date: Wed, 10 Dec 2025 23:12:14 -0500 Subject: [PATCH] update frontend --- src/components/Map/MapView.jsx | 83 ++++++++++++++++---------------- src/main.jsx | 1 + src/styles/game-filters.css | 88 ++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+), 43 deletions(-) create mode 100644 src/styles/game-filters.css diff --git a/src/components/Map/MapView.jsx b/src/components/Map/MapView.jsx index c724dea..e5f0ca2 100644 --- a/src/components/Map/MapView.jsx +++ b/src/components/Map/MapView.jsx @@ -137,8 +137,7 @@ export default function MapView({ theme = "dark" }) { const authorName = (username || "").trim() || "anon"; - // ----- CROSSHAIR OFFSET FIX ----- - // Point de départ : soit coords définies, soit centre de la map + // Crosshair offset fix let baseLng; let baseLat; @@ -151,24 +150,15 @@ export default function MapView({ theme = "dark" }) { baseLat = center.lat; } - // Offset vertical en pixels : - // 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 pixelOffsetY = -20; 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" }) {
{status &&
{status}
} - {/* TOP */} + {/* TOP: Look / Place */}
- {/* LEFT */} -
+ {/* LEFT: time filters – NOW / TODAY / RECENT / PAST */} +
{[ ["NOW", "Now"], ["TODAY", "Today"], - ["RECENT", "Recently"], + ["RECENT", "Recent"], ["PAST", "Past"], ].map(([code, label]) => ( - +
+ + {label} +
))}
- {/* RIGHT */} -
- {FILTER_MAIN_CATEGORIES.map((cat) => ( - - ))} + {/* RIGHT: main categories – ALL / NEWS / FRIENDS / EVENTS / MARKET */} +
+ {FILTER_MAIN_CATEGORIES.map((cat) => { + const label = cat; + return ( +
+ + {label} +
+ ); + })}
- {/* BOTTOM SUBCATEGORIES */} + {/* BOTTOM: subcategories */}
{bottomCategories.map((c) => (
- {/* CROSSHAIR au centre pendant la création */} + {/* CROSSHAIR */} {isCreating && (
diff --git a/src/main.jsx b/src/main.jsx index afc3720..c5b7ea5 100644 --- a/src/main.jsx +++ b/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( diff --git a/src/styles/game-filters.css b/src/styles/game-filters.css new file mode 100644 index 0000000..dd20133 --- /dev/null +++ b/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; + } +}