JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Dynamic OOP Shapes</title>
  <style>
    #stage {
      position: relative;
      width: 600px;
      height: 400px;
      margin: 20px auto;
      border: 2px solid #ccc;
      background: #f9f9f9;
    }

    .shape {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-weight: bold;
    }

    .circle {
      border-radius: 50%;
    }

    .triangle {
      width: 0;
      height: 0;
      background: none;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 50px solid green;
      color: transparent;
    }
  </style>
</head>
<body>

  <div style="text-align: center; margin-bottom: 10px;">
    <button onclick="createAndAddShape('circle')">Add Red Circle</button>
    <button onclick="createAndAddShape('rectangle')">Add Blue Rectangle</button>
    <button onclick="createAndAddShape('triangle')">Add Green Triangle</button>
  </div>

  <div id="stage"></div>

  <script>
    let elementIdCounter = 0;
    const shapes = [];

    // ---------------------------
    // Base Shape Class
    // ---------------------------
    class Shape {
      constructor(type, x, y) {
        this.id = `element-${++elementIdCounter}`;
        this.type = type;
        this.x = x;
        this.y = y;
      }

      onClick() {
        console.log(`Clicked: ${this.id}`);
      }

      onDoubleClick() {
        console.log(`Double-clicked: ${this.id}`);
      }

      onHoverIn(el) {
        el.style.opacity = 0.7;
      }

      onHoverOut(el) {
        el.style.opacity = 1;
      }

      attachCommonEvents(el) {
        el.addEventListener('click', () => this.onClick());
        el.addEventListener('dblclick', () => this.onDoubleClick());
        el.addEventListener('mouseenter', () => this.onHoverIn(el));
        el.addEventListener('mouseleave', () =>...