What is this?

Ever felt bored and craved a dash of digital unpredictability? Russian Roulette: Web Edition is your answer! It’s a simple, slightly mischievous game where, with the click of a button, you’re whisked away to a random website. Think of it as a slot machine for web destinations – you never know where you’ll land!

It’s a bit of fun, a way to discover new (or hilariously useless) parts of the internet, and a playful nod to the vast, chaotic beauty of the World Wide Web.

🕹️ How to Play (and a Little Warning!)

Playing is easy:

1. Hit the “SPIN CHAMBER” button. The background will whirl with potential destinations.
2. Wait for the reveal! After a moment of suspense, your destination website will be chosen.
3. Countdown: You’ll see a 3-second countdown: “Redirecting to [website] in 3… 2… 1…”
4. Blast Off! You’ll automatically be taken to the chosen website in a new browser tab. (Don’t worry, you can also click the link to go there immediately if you’re impatient!)
5. Feeling Lucky? Submit a Site! If you know a cool, weird, or wonderful website that deserves a spot in the roulette, click the “SUBMIT SITE” button and add its URL.

The Official Warning (from the app itself):

Warning: The internet is a vast and unpredictable place. Click with caution (or throw it to the wind!).

We’re not responsible for where you end up, but we hope it’s an adventure!

🎲 The “Fun” Part: Why Play?

• Boredom Buster: The perfect antidote to “nothing to do” online.
• Discovery Engine: Stumble upon websites you’d never find otherwise.
• Digital Thrill-Seeking: Embrace the randomness! Who knows what gem (or oddity) awaits?
• A Shared Laugh: Send it to friends and see where they land.

🛠️ How it Works: A Peek Under the Hood

For Everyone: The Basic Idea

Imagine a digital barrel full of website addresses. When you click “SPIN CHAMBER,” the barrel spins, and one website is randomly picked. We then show you what you got and, after a brief countdown, send you there. The cool moving names in the background? That’s just a bit of visual flair to make the spinning more fun! If you submit a site, we (carefully) add it to the barrel for future spins.

For the Curious & Tech-Savvy:

This little game packs a few interesting technologies:

• Core Structure (Astro): The main website is built with Astro. This helps it load quickly and efficiently. The interactive game part is then brought in as a special component.
• Interactive Game Logic (React): The “Russian Roulette” game itself is a React component. Astro loads this using client:load, so all the interactive bits run in your browser.
• The Spinning Chamber Visuals (HTML5 Canvas):
  • The dynamic background with website names floating around is rendered on an HTML5 <canvas> element.
  • Each website name is treated as a “particle” in a 2D animation. These particles move, bounce off the edges, and even glow a bit when you hover your mouse over them. This is all drawn frame by frame using JavaScript.
• Choosing Your Fate (The Spin Logic):
  • When you hit “SPIN CHAMBER”, a JavaScript function randomly selects a website from a predefined list.
  • A brief timeout simulates the “spinning” suspense before the chosen website is revealed.
  • Another short countdown (managed with setTimeout and React state) ticks down before window.open(URL, '_blank') launches the site in a new tab.
• User “Identity” for Submissions (FingerprintJS):
  • To allow users to submit websites and to potentially manage these submissions without requiring a full login system, FingerprintJS is used.
  • It generates a unique visitor identifier for your browser. When you submit a site, this ID is sent along with the URL. This helps distinguish submissions, perhaps for rate-limiting or simple tracking, in a privacy-friendlier way than traditional accounts.
• Submitting New Websites (API Interaction):
  • When you enter a URL and hit “Submit,” the React component makes an asynchronous Workspace request to a backend API (defined by apiUrl).
  • This request sends the URL you provided and your FingerprintJS visitor ID. The backend would then process and store this website (presumably after some validation).
• Styling (Tailwind CSS): All the visual styling – colors, layout, button appearances – is handled efficiently using Tailwind CSS utility classes.
• Key React Features Used:
  • useState: For managing all the dynamic pieces of the game: the currently chosen website, whether the spinner is visible, if the “Submit Site” modal is open, the current countdown value, etc.
  • useEffect: Crucial for side effects. This includes:
    • Loading the browser fingerprint when the component first mounts.
    • Managing the 3-second countdown timer and triggering the redirect.
    • Setting up and tearing down the canvas animation loop (requestAnimationFrame).
  • useRef: Used to get a direct reference to the <canvas> DOM element for drawing, and to hold onto animation frame IDs or timer IDs so they can be cancelled if needed.
  • useCallback: To memoize functions passed to useEffect or as props, preventing unnecessary re-renders or re-calculations, especially for the animation loop.

Here’s a highly simplified conceptual snippet of the spin and redirect logic in React:

const [chosenWebsite, setChosenWebsite] = useState('');
const [countdown, setCountdown] = useState(null);
const websites = ["example.com", "another.com"]; // Sample list

const spinChamber = () => {
  // Show a loading spinner, etc.
  setIsSpinnerVisible(true);
  setChosenWebsite(''); // Clear previous site

  setTimeout(() => {
    const randomIndex = Math.floor(Math.random() * websites.length);
    const randomSite = websites[randomIndex];
    
    setIsSpinnerVisible(false);
    setChosenWebsite(randomSite);
    setCountdown(3); // Start the 3-second countdown
  }, 2000 /* Simulate spin duration */);
};

useEffect(() => {
  let timerId;
  if (chosenWebsite && countdown > 0) {
    timerId = setTimeout(() => {
      setCountdown(currentCountdown => currentCountdown - 1);
    }, 1000);
  } else if (chosenWebsite && countdown === 0) {
    window.open(`https://${chosenWebsite}`, '_blank', 'noopener,noreferrer');
    // Reset for next round
    setChosenWebsite('');
    setCountdown(null);
  }
  return () => clearTimeout(timerId); // Cleanup timer
}, [chosenWebsite, countdown]);

🚀 What’s Next?

This is just a bit of fun, but who knows! Future ideas could include:

• Fetching a much larger, curated list of interesting websites.
• Allowing users to choose categories of sites to spin for.
• Leaderboards for… well, we’re not sure what yet! Most sites visited?
• Themed roulettes!

🤝 Contribute or Suggest a Site!

The easiest way to contribute is to submit cool websites you find directly through the “SUBMIT SITE” button on the app!

If this project were open source on a platform like GitHub, you might also be able to contribute code, suggest features, or report bugs there. For now, enjoy the spin!