1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222"use client"
import { useState, useEffect } from "react"
import { useSpring, animated } from "react-spring"
import { AlertCircle, ChevronRight, Eye, Map, Database, Wifi, Shield, Battery } from "lucide-react"
interface CyberpunkHUDProps {
health?: number
objective?: string
location?: string
scanMode?: boolean
toggleScanMode?: () => void
notifications?: Array<{
id: string
message: string
type: "warning" | "info" | "error" | "success"
}>
}
export default function CyberpunkHUD({
health = 100,
objective = "Explore the Non-Euclidean Museum",
location = "Main Hall",
scanMode = false,
toggleScanMode = () => {},
notifications = [],
}: CyberpunkHUDProps) {
const [time, setTime] = useState<string>("")
const [showMap, setShowMap] = useState<boolean>(false)
const [showObjective, setShowObjective] = useState<boolean>(true)
// Animate health bar
const healthProps = useSpring({
width: `${health}%`,
backgroundColor: health > 60 ? "#00ffaa" : health > 30 ? "#ffaa00" : "#ff3366",
config: { tension: 300, friction: 20 },
})
// Get current time
useEffect(() => {
const timer = setInterval(() => {
const date = new Date()
setTime(date.toLocaleTimeString())
}, 1000)
return () => clearInterval(timer)
}, [])
// Random glitch effect
const [glitchEffect, setGlitchEffect] = useState<boolean>(false)
useEffect(() => {
const glitchInterval = setInterval(() => {
if (Math.random() > 0.8) {
setGlitchEffect(true)
setTimeout(() => setGlitchEffect(false), 150)
}
}, 5000)
return () => clearInterval(glitchInterval)
}, [])
return (
<div className={`fixed inset-0 pointer-events-none ${glitchEffect ? "glitch-effect" : ""}`}>
{/* Top Bar */}
<div className="absolute top-0 left-0 right-0 h-12 flex items-center justify-between px-4 bg-black/40 backdrop-blur-sm border-b border-cyan-500/30">
<div className="flex items-center space-x-2">
<span className="text-cyan-400 font-mono text-sm font-bold tracking-wider">VRTX://</span>
<span className="text-white/80 font-mono text-xs">{location}</span>
</div>
<div className="flex items-center space-x-4">
<Wifi size={16} className="text-cyan-400" />
<Database size={16} className="text-cyan-400" />
<Shield size={16} className="text-cyan-400" />
<Battery size={16} className="text-cyan-400" />
<span className="text-cyan-400 font-mono text-sm">{time}</span>
</div>
</div>
{/* Health Bar - Bottom Left */}
<div className="absolute bottom-4 left-4 w-48">
<div className="flex items-center justify-between mb-1">
<span className="text-cyan-400 font-mono text-xs">NEURAL LINK</span>
<span className="text-white font-mono text-xs">{health}%</span>
</div>
<div className="h-2 bg-black/50 border border-cyan-500/50 overflow-hidden">
<animated.div className="h-full" style={healthProps} />
</div>
<div className="flex justify-between items-center mt-2">
<button
className="text-cyan-400 font-mono text-xs flex items-center hover:text-cyan-300 pointer-events-auto"
onClick={() => setShowMap(!showMap)}
>
<Map size={14} className="mr-1" /> MAP
</button>
<button
className={`text-cyan-400 font-mono text-xs flex items-center hover:text-cyan-300 pointer-events-auto ${scanMode ? "text-purple-400" : ""}`}
onClick={toggleScanMode}
>
<Eye size={14} className="mr-1" /> SCAN
</button>
</div>
</div>
{/* Objective - Top Right */}
<div className="absolute top-16 right-4 max-w-xs">
<div
className="flex items-center text-white/80 mb-1 cursor-pointer pointer-events-auto"
onClick={() => setShowObjective(!showObjective)}
>
<ChevronRight
size={16}
className={`text-cyan-400 transform transition-transform ${showObjective ? "rotate-90" : ""}`}
/>
<span className="text-cyan-400 font-mono text-xs font-bold">CURRENT OBJECTIVE</span>
</div>
{showObjective && (
<div className="bg-black/40 backdrop-blur-sm p-3 border-l-2 border-cyan-500 text-white/90 font-mono text-xs">
{objective}
</div>
)}
</div>
{/* Map Overlay */}
{showMap && (
<div className="absolute bottom-20 left-4 w-64 h-64 bg-black/60 backdrop-blur-sm border border-cyan-500/50 pointer-events-auto">
<div className="flex justify-between items-center p-2 border-b border-cyan-500/30">
<span className="text-cyan-400 font-mono text-xs">SPATIAL MAPPING</span>
<button className="text-white/80 hover:text-white" onClick={() => setShowMap(false)}>
×
</button>
</div>
<div className="p-4 flex items-center justify-center h-[calc(100%-32px)]">
{/* Simplified mini-map implementation */}
<div className="relative w-full h-full">
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-cyan-400 rounded-full"></div>
<div className="absolute w-full h-full border border-cyan-500/30 grid grid-cols-4 grid-rows-4">
{Array(16)
.fill(0)
.map((_, i) => (
<div key={i} className="border border-cyan-500/10"></div>
))}
</div>
{/* Room indicators */}
<div className="absolute top-1/4 left-1/4 w-4 h-4 border border-cyan-500/50 opacity-70"></div>
<div className="absolute bottom-1/4 right-1/4 w-4 h-4 border border-cyan-500/50 opacity-70"></div>
<div className="absolute top-1/4 right-1/3 w-3 h-3 border border-cyan-500/50 opacity-70"></div>
</div>
</div>
</div>
)}
{/* Notifications */}
<div className="absolute top-16 left-4 max-w-xs space-y-2">
{notifications.map((notification) => (
<div
key={notification.id}
className={`bg-black/60 backdrop-blur-sm p-3 border-l-2 text-white/90 font-mono text-xs flex items-start animate-slideIn ${
notification.type === "warning"
? "border-yellow-500"
: notification.type === "error"
? "border-red-500"
: notification.type === "success"
? "border-green-500"
: "border-cyan-500"
}`}
>
<AlertCircle size={14} className="mr-2 mt-0.5 flex-shrink-0" />
<p>{notification.message}</p>
</div>
))}
</div>
{/* Crosshair */}
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
<div className="w-6 h-6 flex items-center justify-center">
<div className="w-1 h-1 bg-cyan-400 rounded-full"></div>
<div className="absolute w-3 h-px bg-cyan-400/50"></div>
<div className="absolute w-px h-3 bg-cyan-400/50"></div>
</div>
</div>
{/* Scan Mode Overlay */}
{scanMode && (
<div className="absolute inset-0 bg-purple-900/10 mix-blend-screen pointer-events-none">
<div className="absolute inset-0 bg-grid-pattern opacity-20"></div>
</div>
)}
{/* CSS for the HUD */}
<style jsx global>{`
.glitch-effect {
animation: glitch 0.2s linear;
}
@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}
.bg-grid-pattern {
background-image:
linear-gradient(to right, rgba(100, 220, 255, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(100, 220, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.animate-slideIn {
animation: slideIn 0.3s ease-out forwards;
}
@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
`}</style>
</div>
)
}