Wick Editor Mod

by Sharxxy

HTML

<!-- Wick Editor CSS -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/wickEditor.min.css">

  <!-- Wick Editor container -->
  <div id="wick-container"></div>

  <!-- Wick Editor JS -->
  <script src="https://unpkg.com/[email protected]/dist/wickEditor.min.js"></script>

  <!-- Custom JS to mod the editor -->

CSS

body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #222;
    }
    #wick-container {
      width: 800px;
      height: 600px;
      border: 2px solid #fff;
    }

JavaScript

// Make sure the page is fully loaded
    window.onload = () => {
      // Initialise Wick Editor
      const wickEditor = new WickEditor.Editor(document.getElementById('wick-container'), {
        width: 800,
        height: 600
      });

      // Add a spinning red circle
      const shape = wickEditor.activeScene.addShape({
        type: 'circle',
        x: 400,
        y: 300,
        radius: 50,
        fillColor: 'red'
      });

      shape.onUpdate = () => {
        shape.rotation += 2; // spins the circle
      };

      // Add a blue square moving left and right
      const square = wickEditor.activeScene.addShape({
        type: 'rect',
        x: 200,
        y: 150,
        width: 100,
        height: 100,
        fillColor: 'blue'
      });

      let direction = 1;
      square.onUpdate = () => {
        square.x += 2 * direction;
        if (square.x > 600 || square.x < 100) direction *= -1;
      };
    };