HTML, CSS and JavaScript playground

/*
  Paste this entire code into JSFiddle (JavaScript panel) with an empty HTML panel.
  It will build a minimal turn-based Pokémon battle simulator with a 2D left-vs-right layout,
  smooth bounce animations for active Pokémon, and animated "element icons" flying from the attacker
  to the target. It also implements the "Synergy Resonance" mechanic. All styles are created
  dynamically, so no external CSS is needed.
*/

(function() {
  // --------------------------------------------------
  // 1. Create Global Styles (like an Apple designer)
  // --------------------------------------------------
  const createGlobalStyles = () => {
    const styleEl = document.createElement("style");
    styleEl.innerHTML = `
    /* Minimalist, sleek design with gentle animations */

body {
      margin: 0;
      padding: 0;
      background: #f8f8f8;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      overflow-x: hidden;
    }

#battlefield {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.battle-container {
      position: relative;
      width: 80vw;
      height: 60vh;
      background: linear-gradient(to bottom, #fff, #eee);
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      border-radius: 1rem;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
    }

.pokemon-box {
      position: relative;
      width: 30%;
      height: 80%;
      background: #ffffffcc;
      border-radius: 1rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 1rem;
      transition: transform 0.4s ease;
    }

/* Bouncing animation for the active Pokémon */
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

.active-pokemon {
      animation: bounce 1s infinite;
    }

.pokemon-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #ddd;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: #555;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

.pokemon-info {
      width: 100%;
      text-align: center;
    }

.pokemon-name {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

.hp-bar-container {
      width: 100%;
      height: 10px;
      background: #ccc;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 0.5rem;
    }

.hp-bar-fill {
      height: 10px;
      background: #4caf50;
      width: 100%;
      border-radius: 5px;
      transition: width 0.3s ease;
    }

.resonance-info {
      font-size: 0.85rem;
      color: #777;
    }

/* Attack icon animation */
    .attack-icon {
      position: absolute;
      font-size: 1.5rem;
      pointer-events: none;
      transition: transform 0.8s ease;
      z-index: 10;
    }
    `;
    document.head.appendChild(styleEl);
  };

// --------------------------------------------------
  // 2. Create Battlefield Elements
  // --------------------------------------------------
  const createBattleField = () => {
    // Main battlefield container
    const battlefield = document.createElement("div");
    battlefield.id = "battlefield";
    document.body.appendChild(battlefield);

// Inner container
    const container = document.createElement("div");
    container.className = "battle-container";
    battlefield.appendChild(container);

// Left Pokémon box
    const leftPokemonBox = document.createElement("div");
    leftPokemonBox.className = "pokemon-box";
    leftPokemonBox.id = "pokemon-box-left";
    container.appendChild(leftPokemonBox);

// Right Pokémon box
    const rightPokemonBox = document.createElement("div");
    rightPokemonBox.className = "pokemon-box";
    rightPokemonBox.id = "pokemon-box-right";
    container.appendChild(rightPokemonBox);

return {
      battlefield,
      leftPokemonBox,
      rightPokemonBox
    };
  };

// --------------------------------------------------
  // 3. Represent Pokémon, Moves, and Type Chart
  // --------------------------------------------------
  // Basic type effectiveness chart for Fire, Water, Grass, Rock
  // (Extend as needed)
  const effectivenessChart = {
    Fire:   { Fire: 1, Water: 0.5, Grass: 2,   Rock: 1 },
    Water:  { Fire: 2, Water: 1,   Grass: 0.5, Rock: 2 },
    Grass:  { Fire: 0.5, Water: 2, Grass: 1,   Rock: 1 },
    Rock:   { Fire: 0.5, Water: 1, Grass: 1,   Rock: 1 }
  };

// --------------------------------------------------
  // 4. DOM Helpers to display Pokémon data
  // --------------------------------------------------
  function createPokemonDOM(pokemon, side) {
    // side: 'left' or 'right'
    const box = (side === 'left')
      ? document.getElementById("pokemon-box-left")
      : document.getElementById("pokemon-box-right");

box.innerHTML = ""; // Clear any previous content

// Avatar
    const avatar = document.createElement("div");
    avatar.className = "pokemon-avatar";
    avatar.textContent = pokemon.name[0] || "?"; // First letter as a minimal avatar
    box.appendChild(avatar);

// Info container
    const info = document.createElement("div");
    info.className = "pokemon-info";

// Name
    const nameEl = document.createElement("div");
    nameEl.className = "pokemon-name";
    nameEl.textContent = pokemon.name;
    info.appendChild(nameEl);

// HP bar
    const hpContainer = document.createElement("div");
    hpContainer.className = "hp-bar-container";
    const hpFill = document.createElement("div");
    hpFill.className = "hp-bar-fill";
    // Calculate HP percentage
    const hpPercent = (pokemon.hp / pokemon.maxHp) * 100;
    hpFill.style.width = `${Math.max(hpPercent, 0)}%`;
    hpContainer.appendChild(hpFill);
    info.appendChild(hpContainer);

// Resonance info
    const resonanceEl = document.createElement("div");
    resonanceEl.className = "resonance-info";
    resonanceEl.textContent = `Resonance: ${pokemon.resonance}`;
    info.appendChild(resonanceEl);

box.appendChild(info);
  }

function updatePokemonDOM(pokemon, side) {
    // Just updates HP bar and resonance after each turn
    const box = (side === 'left')
      ? document.getElementById("pokemon-box-left")
      : document.getElementById("pokemon-box-right");

const hpFill = box.querySelector(".hp-bar-fill");
    if (hpFill) {
      const hpPercent = (pokemon.hp / pokemon.maxHp) * 100;
      hpFill.style.width = `${Math.max(hpPercent, 0)}%`;
    }

const resonanceEl = box.querySelector(".resonance-info");
    if (resonanceEl) {
      resonanceEl.textContent = `Resonance: ${pokemon.resonance}`;
    }
  }

// --------------------------------------------------
  // 5. Animations: Bouncing Active Pokémon, Attack Icons
  // --------------------------------------------------
  function setActivePokemon(side) {
    // Remove bounce from both sides
    const leftBox = document.getElementById("pokemon-box-left");
    const rightBox = document.getElementById("pokemon-box-right");
    leftBox.classList.remove("active-pokemon");
    rightBox.classList.remove("active-pokemon");

// Add bounce to the active side
    if (side === 'left') {
      leftBox.classList.add("active-pokemon");
    } else {
      rightBox.classList.add("active-pokemon");
    }
  }

// Return an emoji matching move type
  function getMoveIcon(moveType) {
    switch (moveType) {
      case 'Fire':   return '