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, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { renderToString } from "https://esm.sh/react-dom/server";
import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=29";
const App = () => {
const items = [
"tweet steve jobs quotes",
"raise $$$",
"buy clever domain name",
"take a bad app idea and build hardware around it",
"make a splashy ad inspired by black mirror",
"make wearable nobody would wear",
"make it always listening",
"$35 / month subscription",
"make it all about AI but no actual AI on the device",
"ship late",
"never ship",
];
const feedbackMessages = [
"So you want to be the next Steve Jobs?",
"This company may actually succeed!",
"Pivoting faster than a figure skater!",
"Getting a bit sketchy, but still fundable!",
"The Saudis would still fund it.",
"Is this even legal?",
"SEC has entered the chat.",
"Investor money goes brrr...",
"Someone's definitely going to jail.",
"Congratulations! You've speedrun to bankruptcy!",
];
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
};
const [board, setBoard] = useState(shuffleArray([...items]).slice(0, 9));
const [marked, setMarked] = useState(new Array(9).fill(false));
const [feedback, setFeedback] = useState(feedbackMessages[0]);
const toggleMark = (index) => {
const newMarked = [...marked];
newMarked[index] = !newMarked[index];
setMarked(newMarked);
};
useEffect(() => {
const markedCount = marked.filter(Boolean).length;
setFeedback(feedbackMessages[markedCount]);
}, [marked]);
return (
<div className="flex flex-col items-center justify-center min-h-screen w-full p-6 bg-gradient-to-br from-blue-500 to-purple-600">
<div className="w-full max-w-md">
<h2 className="text-3xl font-bold mb-6 text-white text-center">Hardware Startup 2024 Bingo</h2>
<div className="grid grid-cols-3 gap-4 mb-6">
{board.map((item, index) => (
<button
key={index}
className={`w-full h-32 p-3 text-xs border-2 border-white rounded-lg flex items-center justify-center transition-all duration-300 ${
marked[index]
? "bg-yellow-300 text-gray-800 transform scale-105"
: "bg-opacity-20 bg-white text-white hover:bg-opacity-30"
}`}
onClick={() => toggleMark(index)}
>
<span className="text-center">{item}</span>
</button>
))}
</div>
<div className="h-16 mt-4 p-3 bg-white bg-opacity-90 rounded-lg text-purple-700 font-bold text-center flex items-center justify-center transition-all duration-300">
{feedback}
</div>
<div className="flex items-center justify-center">
<a
className={`
mt-4 p-1 rounded-lg text-center underline
transition-all duration-300 font-bold
text-xs text-slate-200 hover:text-white
`}
href={extractValInfo(import.meta.url).htmlUrl}
>
Built on Val Town
</a>
</div>
</div>
</div>
);
};
if (typeof document !== "undefined") { createRoot(document.getElementById("root")).render(<App />); }
export default async function(req: Request): Promise<Response> {
return new Response(