update frontend
This commit is contained in:
Your Name
parent
75b43a6b33
commit
c4a6c3cddc
|
|
@ -1,30 +1,36 @@
|
|||
import React from "react";
|
||||
import "./../../styles/filters.css";
|
||||
import "../../styles/filters.css";
|
||||
|
||||
/**
|
||||
* Vertical glossy filter buttons for the main categories.
|
||||
* active: string in { "All", "News", "Friends", "Events", "Market" }
|
||||
* onSelect(code): called with the category code.
|
||||
*/
|
||||
export default function FilterButtons({ active, onSelect }) {
|
||||
const buttons = [
|
||||
{ code: "All", label: "All", icon: "fa-solid fa-globe" },
|
||||
{ code: "News", label: "News", icon: "fa-solid fa-newspaper" },
|
||||
{ code: "Friends", label: "Friends", icon: "fa-solid fa-user-group" },
|
||||
{ code: "Events", label: "Events", icon: "fa-solid fa-calendar-days" },
|
||||
{ code: "Market", label: "Market", icon: "fa-solid fa-chart-line" },
|
||||
];
|
||||
|
||||
export default function FilterButtons({ onSelect }) {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
|
||||
|
||||
<button className="sw-filter-btn" onClick={() => onSelect("news")}>
|
||||
<i className="fa-solid fa-newspaper"></i>
|
||||
<div className="sw-filter-label">News</div>
|
||||
</button>
|
||||
|
||||
<button className="sw-filter-btn" onClick={() => onSelect("friends")}>
|
||||
<i className="fa-solid fa-user-group"></i>
|
||||
<div className="sw-filter-label">Friends</div>
|
||||
</button>
|
||||
|
||||
<button className="sw-filter-btn" onClick={() => onSelect("events")}>
|
||||
<i className="fa-solid fa-calendar-days"></i>
|
||||
<div className="sw-filter-label">Events</div>
|
||||
</button>
|
||||
|
||||
<button className="sw-filter-btn" onClick={() => onSelect("market")}>
|
||||
<i className="fa-solid fa-chart-line"></i>
|
||||
<div className="sw-filter-label">Market</div>
|
||||
</button>
|
||||
|
||||
<div className="sw-filter-column">
|
||||
{buttons.map((btn) => (
|
||||
<button
|
||||
key={btn.code}
|
||||
type="button"
|
||||
className={
|
||||
"sw-filter-btn" +
|
||||
(active === btn.code ? " sw-filter-active" : "")
|
||||
}
|
||||
onClick={() => onSelect && onSelect(btn.code)}
|
||||
>
|
||||
<i className={btn.icon} />
|
||||
<div className="sw-filter-label">{btn.label}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
|
|||
import "../../styles/mapMarkers.css";
|
||||
import "../../styles/overlays.css";
|
||||
import "../../styles/posts.css";
|
||||
import "../../styles/filters.css";
|
||||
|
||||
import { createPost } from "../../api/client";
|
||||
import {
|
||||
|
|
@ -15,6 +16,7 @@ import { useUserPosition } from "./useUserPosition";
|
|||
import { usePostsEngine } from "./usePostsEngine";
|
||||
import PostList from "../Posts/PostList";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import FilterButtons from "../Filters/FilterButtons";
|
||||
|
||||
export default function MapView({ theme = "dark" }) {
|
||||
const { authenticated, username, token } = useAuth();
|
||||
|
|
@ -93,7 +95,7 @@ export default function MapView({ theme = "dark" }) {
|
|||
handleIncomingPost(msg.post);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
// ignore bad messages
|
||||
}
|
||||
};
|
||||
return () => ws && ws.close();
|
||||
|
|
@ -137,7 +139,7 @@ export default function MapView({ theme = "dark" }) {
|
|||
|
||||
const authorName = (username || "").trim() || "anon";
|
||||
|
||||
// Crosshair offset fix
|
||||
// Crosshair offset: adjust so big bubble sits correctly above pointer
|
||||
let baseLng;
|
||||
let baseLat;
|
||||
|
||||
|
|
@ -150,7 +152,8 @@ export default function MapView({ theme = "dark" }) {
|
|||
baseLat = center.lat;
|
||||
}
|
||||
|
||||
const pixelOffsetY = -20;
|
||||
const pixelOffsetY = -20; // tweak if needed
|
||||
|
||||
const screenPoint = map.project([baseLng, baseLat]);
|
||||
const correctedPoint = {
|
||||
x: screenPoint.x,
|
||||
|
|
@ -181,6 +184,7 @@ export default function MapView({ theme = "dark" }) {
|
|||
token
|
||||
);
|
||||
|
||||
// Inject directly into the posts engine in addition to WebSocket broadcast
|
||||
if (newPost && newPost.id) {
|
||||
handleIncomingPost(newPost);
|
||||
}
|
||||
|
|
@ -205,12 +209,18 @@ export default function MapView({ theme = "dark" }) {
|
|||
}
|
||||
};
|
||||
|
||||
// Map right-side category selection from FilterButtons
|
||||
const handleMainFilterSelect = (code) => {
|
||||
if (!FILTER_MAIN_CATEGORIES.includes(code)) return;
|
||||
setMainFilter(code);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="map-view">
|
||||
<div ref={containerRef} className="map-container" />
|
||||
{status && <div className="map-status">{status}</div>}
|
||||
|
||||
{/* TOP: Look / Place */}
|
||||
{/* TOP */}
|
||||
<div className="map-overlay map-overlay-top">
|
||||
<button className="chip-pill" onClick={handleSearchClick}>
|
||||
Look at…
|
||||
|
|
@ -220,65 +230,50 @@ export default function MapView({ theme = "dark" }) {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* LEFT: time filters – NOW / TODAY / RECENT / PAST */}
|
||||
<div className="map-overlay game-filter-column game-filter-column-left">
|
||||
{/* LEFT (time filters) */}
|
||||
<div className="map-overlay map-overlay-left">
|
||||
{[
|
||||
["NOW", "Now"],
|
||||
["TODAY", "Today"],
|
||||
["RECENT", "Recent"],
|
||||
["RECENT", "Recently"],
|
||||
["PAST", "Past"],
|
||||
].map(([code, label]) => (
|
||||
<div className="game-filter-item" key={code}>
|
||||
<button
|
||||
className={
|
||||
"game-filter-circle" +
|
||||
(timeFilter === code ? " game-filter-circle-active" : "")
|
||||
}
|
||||
onClick={() => setTimeFilter(code)}
|
||||
>
|
||||
<span>{label[0]}</span>
|
||||
</button>
|
||||
<span className="game-filter-label">{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* RIGHT: main categories – ALL / NEWS / FRIENDS / EVENTS / MARKET */}
|
||||
<div className="map-overlay game-filter-column game-filter-column-right">
|
||||
{FILTER_MAIN_CATEGORIES.map((cat) => {
|
||||
const label = cat;
|
||||
return (
|
||||
<div className="game-filter-item" key={cat}>
|
||||
<button
|
||||
className={
|
||||
"game-filter-circle" +
|
||||
(mainFilter === cat ? " game-filter-circle-active" : "")
|
||||
}
|
||||
onClick={() => setMainFilter(cat)}
|
||||
>
|
||||
<span>{label[0]}</span>
|
||||
</button>
|
||||
<span className="game-filter-label">{label}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* BOTTOM: subcategories */}
|
||||
<div className="map-overlay map-overlay-bottom">
|
||||
{bottomCategories.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
key={code}
|
||||
className={
|
||||
subFilter === c ? "chip-egg chip-egg-active" : "chip-egg"
|
||||
timeFilter === code ? "chip-round chip-selected" : "chip-round"
|
||||
}
|
||||
onClick={() => setSubFilter(c)}
|
||||
onClick={() => setTimeFilter(code)}
|
||||
>
|
||||
{c}
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* RIGHT (main categories with glossy icons) */}
|
||||
<div className="map-overlay map-overlay-right">
|
||||
<FilterButtons active={mainFilter} onSelect={handleMainFilterSelect} />
|
||||
</div>
|
||||
|
||||
{/* BOTTOM (subcategories glossy pills) */}
|
||||
<div className="map-overlay map-overlay-bottom">
|
||||
<div className="sw-bottom-bar">
|
||||
{bottomCategories.map((c) => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
className={
|
||||
"sw-bottom-btn" +
|
||||
(subFilter === c ? " sw-bottom-btn-active" : "")
|
||||
}
|
||||
onClick={() => setSubFilter(c)}
|
||||
>
|
||||
{c}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MY SPOT */}
|
||||
<div className="map-overlay map-overlay-myloc">
|
||||
<button
|
||||
|
|
@ -290,7 +285,7 @@ export default function MapView({ theme = "dark" }) {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* CROSSHAIR */}
|
||||
{/* CROSSHAIR when creating a post */}
|
||||
{isCreating && (
|
||||
<div className="map-overlay map-crosshair">
|
||||
<div className="crosshair-aim" />
|
||||
|
|
|
|||
|
|
@ -1,37 +1,80 @@
|
|||
/* ===== SocioWire glossy filter buttons ===== */
|
||||
|
||||
/* Vertical circular category buttons (right side) */
|
||||
.sw-filter-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.sw-filter-btn {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #0b1020);
|
||||
border: 2px solid rgba(255,255,255,0.25);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
|
||||
background: radial-gradient(circle at 30% 30%, #38bdf8, #1d4ed8, #020617);
|
||||
border: 2px solid rgba(255,255,255,0.2);
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.7);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
color: #e5f0ff;
|
||||
cursor: pointer;
|
||||
transition: transform .15s, box-shadow .15s;
|
||||
}
|
||||
|
||||
.sw-filter-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.75);
|
||||
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
|
||||
}
|
||||
|
||||
.sw-filter-btn i {
|
||||
font-size: 26px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 24px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sw-filter-label {
|
||||
font-size: 0.7rem;
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
color: #dbeafe;
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
.sw-filter-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 7px 20px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.sw-filter-active {
|
||||
border-color: #38bdf8;
|
||||
box-shadow: 0 0 16px #38bdf8;
|
||||
box-shadow: 0 0 18px rgba(56,189,248,0.9);
|
||||
}
|
||||
|
||||
/* ===== Bottom sub-category glossy pills ===== */
|
||||
|
||||
.sw-bottom-bar {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
background: radial-gradient(circle at 0% 0%, rgba(15,23,42,0.96), rgba(15,23,42,0.85));
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.75);
|
||||
}
|
||||
|
||||
.sw-bottom-btn {
|
||||
border-radius: 999px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid rgba(148,163,184,0.6);
|
||||
background: rgba(15,23,42,0.9);
|
||||
color: #e5e7eb;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
|
||||
}
|
||||
|
||||
.sw-bottom-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.sw-bottom-btn-active {
|
||||
background: linear-gradient(135deg, #38bdf8, #1d4ed8);
|
||||
border-color: #93c5fd;
|
||||
color: #0b1120;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue