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
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [page, setPage] = useState("home");
const [showModal, setShowModal] = useState(false);
const [amount, setAmount] = useState("");
const [userEntry, setUserEntry] = useState(null);
const [leaderboard, setLeaderboard] = useState([
{ name: "Passenger #1", amount: 1000 },
{ name: "Passenger #2", amount: 950 },
{ name: "Passenger #3", amount: 900 },
{ name: "Passenger #4", amount: 850 },
{ name: "Passenger #5", amount: 800 },
{ name: "Passenger #6", amount: 750 },
{ name: "Passenger #7", amount: 700 },
{ name: "Passenger #8", amount: 650 },
{ name: "Passenger #9", amount: 600 },
{ name: "Passenger #10", amount: 550 },
]);
const [isFrozen, setIsFrozen] = useState(false);
const intervalRef = useRef(null);
useEffect(() => {
if (page === "leaderboard" && !isFrozen) {
const updateLeaderboard = () => {
setLeaderboard(prevLeaderboard => {
const newLeaderboard = prevLeaderboard
.filter(entry => entry.name !== "You")
.map(entry => ({
...entry,
amount: entry.amount + Math.floor(Math.random() * 100) - 50,
}));
if (userEntry) {
newLeaderboard.push(userEntry);
}
return newLeaderboard.sort((a, b) => b.amount - a.amount).slice(0, 10);
});
};
const startUpdatingLeaderboard = () => {
intervalRef.current = setInterval(() => {
updateLeaderboard();
}, Math.floor(Math.random() * 3000) + 1000); // 1-4 seconds
};
startUpdatingLeaderboard();
}
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, [page, userEntry, isFrozen]);
const handleSubmit = (e) => {
e.preventDefault();
setUserEntry({ name: "You", amount: Number(amount) });
setAmount("");
setShowModal(false);
setPage("leaderboard");
};
const handleGoBack = () => {
setPage("home");
if (userEntry) {
setAmount(userEntry.amount.toString());
}
};
const toggleFreeze = () => {
setIsFrozen(prev => !prev);
};
const Logo = () => (
<img
src="https://utfs.io/f/561a343e-48b8-4628-abe5-845237ba375e-n3173f.png"
alt="Logo"
className="logo"
/>
);
if (page === "home") {
return (
<div className="container">
<Logo />
<div className="alert">
<h2>🚨 Attention Valued Customer! 🚨</h2>
<p>Due to our commitment to maximizing value, we've strategically overbooked your flight. 📈💼</p>
<p>Please state your price for voluntary denial of service. Remember, loyalty is priceless! 💰🔒</p>
</div>
<p>
As a token of our appreciation for your flexibility, enjoy our exclusive <br />"Stranded Traveler" package:
</p>
<p>🛋️ Lounge access</p>
<p>🥤 A refreshing Coke Zero</p>