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