{/* Background images layer */}
= 768 ? "desktop" : "mobile2"
}/${index}.jpg`}
alt=""
- className="absolute inset-0 w-full h-full object-cover pointer-events-none"
+ className="object-cover absolute inset-0 w-full h-full pointer-events-none"
style={{
opacity: +(index === currentIndex),
}}
@@ -812,7 +812,7 @@ function MasterplanPage() {
draggable={false}
/>
))}
-
+ {/*
{isShowVideo && (
= 768 ? "desktop" : "mobile"
}/${currentFrame}.jpg`}
alt=""
- className="absolute inset-0 w-full h-full object-cover"
+ className="object-cover absolute inset-0 w-full h-full"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
draggable={false}
/>
)}
-
+ */}
{/* SVG layer for masks and interactive elements */}
@@ -835,7 +835,7 @@ function MasterplanPage() {
ref={containerRef}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 3840 2160"
- className="absolute inset-0 touch-none select-none overflow-hidden"
+ className="touch-none overflow-hidden absolute inset-0 select-none"
preserveAspectRatio="xMidYMid slice"
style={{
cursor: isDragging ? "grabbing" : "grab",
@@ -889,7 +889,7 @@ function MasterplanPage() {
exit={{ opacity: 0 }}
key={`${currentFrame}-${index}`}
style={{
- display: !blockHasSelectedUnits(index) ? "none" : "block",
+ // display: !blockHasSelectedUnits(index) ? "none" : "block",
scale: 1 / zoom,
transformOrigin: `${
x - Math.max(0.00694 * innerWidth, 10) / 2
@@ -900,12 +900,16 @@ function MasterplanPage() {
cx={x - Math.max(0.00694 * innerWidth, 10) / 2}
cy={y - Math.max(0.00694 * innerWidth, 10) / 2}
r={Math.max(0.00694 * innerWidth, 10) / 2}
- fill="white"
- stroke="rgba(50, 77, 67, 0.15)"
+ fill={blockHasSelectedUnits(index) ? "#F3713F" : "white"}
+ stroke={
+ blockHasSelectedUnits(index)
+ ? "white"
+ : "rgba(50, 77, 67, 0.15)"
+ }
strokeWidth={2}
className={clsx(
- "cursor-pointer",
- !blockHasSelectedUnits(index) && "hidden"
+ "cursor-pointer transition-[fill,stroke] duration-300"
+ // !blockHasSelectedUnits(index) && "hidden"
)}
/>
@@ -1041,7 +1045,7 @@ function MasterplanPage() {
/>
diff --git a/src/components/pages/SurroundingsPage.tsx b/src/components/pages/SurroundingsPage.tsx
index 0ca5778..9a285f4 100644
--- a/src/components/pages/SurroundingsPage.tsx
+++ b/src/components/pages/SurroundingsPage.tsx
@@ -1012,7 +1012,7 @@ function SurroundingsPage({ maxZoom = 3 }: MapProps) {