MayaTheShy/remoteturtle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Add shadow-receiving ground plane and update UI colors for improved consistency and depth

Browse Source
This commit is contained in:
MayaTheShy
2026-02-20 03:05:59 -05:00
parent 997201b139
commit b7221327c2
1 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/components/Map3D.jsx
View File

@@ -1231,6 +1231,12 @@ function Scene({ interactionMode, onInteraction }) {
color="#8ec5fc"
/>
{/* Shadow-receiving ground plane */}
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.01, 0]} receiveShadow>
<planeGeometry args={[200, 200]} />
<shadowMaterial transparent opacity={0.3} />
</mesh>
{/* Grid */}
<Grid
args={[100, 100]}
@@ -1325,12 +1331,12 @@ function InteractionToolbar({ mode, setMode, lastInteraction }) {
transform: 'translateX(-50%)',
display: 'flex',
gap: '4px',
background: 'rgba(15, 23, 42, 0.9)',
background: '#3b3b3b',
padding: '6px',
borderRadius: '12px',
border: '1px solid rgba(100, 116, 139, 0.3)',
border: '2px solid #1a1a1a',
boxShadow: 'inset 0 2px 0 #555, inset 0 -2px 0 #2a2a2a, 0 4px 12px rgba(0,0,0,0.5)',
zIndex: 10,
backdropFilter: 'blur(10px)',
fontFamily: "'Silkscreen', 'Courier New', monospace",
}}>
{modes.map(m => (
<button
@@ -1339,16 +1345,20 @@ function InteractionToolbar({ mode, setMode, lastInteraction }) {
title={m.desc}
style={{
padding: '8px 14px',
borderRadius: '8px',
border: mode === m.key ? '2px solid #3b82f6' : '1px solid transparent',
background: mode === m.key ? 'rgba(59, 130, 246, 0.2)' : 'rgba(30, 41, 59, 0.8)',
color: mode === m.key ? '#60a5fa' : '#94a3b8',
border: `2px solid ${mode === m.key ? '#4a8c2a' : '#1a1a1a'}`,
background: mode === m.key ? '#4a8c2a' : '#6b6b6b',
color: mode === m.key ? '#ffffff' : '#e0e0e0',
cursor: 'pointer',
fontSize: '13px',
fontSize: '12px',
fontFamily: "'Silkscreen', 'Courier New', monospace",
display: 'flex',
alignItems: 'center',
gap: '6px',
transition: 'all 0.15s ease',
transition: 'all 0.1s',
textShadow: '1px 1px 0 #1a1a1a',
boxShadow: mode === m.key
? 'inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a'
: 'inset 0 2px 0 #888, inset 0 -2px 0 #444',
}}
>
<span style={{ fontSize: '16px' }}>{m.icon}</span>
@@ -1364,12 +1374,14 @@ function InteractionToolbar({ mode, setMode, lastInteraction }) {
transform: 'translateX(-50%)',
marginBottom: '8px',
padding: '6px 12px',
background: 'rgba(15, 23, 42, 0.95)',
borderRadius: '8px',
border: '1px solid rgba(100, 116, 139, 0.3)',
color: '#94a3b8',
fontSize: '12px',
background: '#3b3b3b',
border: '2px solid #1a1a1a',
boxShadow: 'inset 0 2px 0 #555, inset 0 -2px 0 #2a2a2a',
color: '#e0e0e0',
fontSize: '11px',
fontFamily: "'Silkscreen', 'Courier New', monospace",
whiteSpace: 'nowrap',
textShadow: '1px 1px 0 #1a1a1a',
}}>
{lastInteraction.mode === 'move' && `🎯 Moving turtle to (${lastInteraction.target.x}, ${lastInteraction.target.y}, ${lastInteraction.target.z})`}
{lastInteraction.mode === 'build' && `🧱 Build at (${lastInteraction.target.x}, ${lastInteraction.target.y}, ${lastInteraction.target.z})`}
@@ -1396,11 +1408,13 @@ function BlockCountHUD({ blocks }) {
top: '12px',
right: '12px',
padding: '8px 12px',
background: 'rgba(15, 23, 42, 0.85)',
borderRadius: '8px',
border: '1px solid rgba(100, 116, 139, 0.2)',
color: '#94a3b8',
fontSize: '12px',
background: '#3b3b3b',
border: '2px solid #1a1a1a',
boxShadow: 'inset 0 2px 0 #555, inset 0 -2px 0 #2a2a2a, 0 2px 8px rgba(0,0,0,0.4)',
color: '#55ffff',
fontSize: '11px',
fontFamily: "'Silkscreen', 'Courier New', monospace",
textShadow: '1px 1px 0 #1a1a1a',
zIndex: 10,
}}>
🧊 {count.toLocaleString()} blocks · 📦 {chunkCount} chunks