JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Wordle Game — Single File</title>
</head>
<body>
  <wordle-game></wordle-game>

  <script>
    class WordleGame extends HTMLElement {
      connectedCallback() {
        this.wordList = [
          'REACT','CLASS','STYLE','MAGIC','DREAM','BEACH','DANCE',
          'LIGHT','MUSIC','OCEAN','PIANO','QUEST','RAPID','SMILE',
          'TRAIN','BRAVE','CHARM','FLAME','GRACE','HEART','JOINT',
          'KNIFE','LEMON','MOUNT','NOBLE','PRIDE','QUEEN','ROUND',
          'SHARP','TOWER','UNITY','VOICE','WHALE','YOUTH','ZEBRA'
        ];
        this.word = this.getRandomWord();
        this.currentRow = 0;
        this.currentCol = 0;
        this.guesses = Array(6).fill('');
        this.gameOver = false;
        this.darkMode = false;
        this.hintsUsed = 0;
        this.maxHints = 2;
        this.stats = this.loadStats();
        this.render();
        this.setupEventListeners();
      }

      getRandomWord() {
        return this.wordList[Math.floor(Math.random() * this.wordList.length)];
      }

      loadStats() {
        try {
          const saved = localStorage.getItem('wordle-stats');
          return saved ? JSON.parse(saved) : {
            played: 0, won: 0, currentStreak: 0, maxStreak: 0,
            guessDistribution: [0, 0, 0, 0, 0, 0]
          };
        } catch (e) {
          return { played: 0, won: 0, currentStreak: 0, maxStreak: 0, guessDistribution: [0,0,0,0,0,0] };
        }
      }

      saveStats() {
        try { localStorage.setItem('wordle-stats', JSON.stringify(this.stats)); } catch(e) {}
      }

      render() {
        this.innerHTML = `
          <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            .wordle-container {
              max-width: 500px;
              margin: 0 auto;
             ...