AquaMotion Advanced

by Sharxxy

HTML

<link rel="stylesheet" href="style.css">

<div id="app">
  <!-- Left Toolbox -->
  <div id="toolbox">
    <h3>Tools</h3>
    <button id="brush">Brush</button>
    <button id="eraser">Eraser</button>
    <button id="bucket">Bucket</button>
    <button id="rect">Rectangle</button>
    <button id="ellipse">Ellipse</button>
    <button id="polygon">Polygon</button>
    <button id="pen">Path</button>
    <div id="brush-settings">
      <label>Size: <input type="range" id="brush-size" min="1" max="100" value="10"></label>
      <label>Opacity: <input type="range" id="brush-opacity" min="0" max="1" step="0.01" value="1"></label>
    </div>
  </div>

  <!-- Canvas -->
  <div id="canvas-container">
    <canvas id="canvas"></canvas>
    <input type="range" id="zoom-slider" min="0.5" max="3" step="0.01" value="1">
  </div>

  <!-- Right Layers -->
  <div id="layers">
    <h3>Layers</h3>
    <div id="layer-list"></div>
    <button id="add-layer">Add Layer</button>
  </div>
</div>

<!-- Timeline -->
<div id="timeline">
  <h3>Frames</h3>
  <div id="frame-list"></div>
  <button id="add-frame">Add Frame</button>
</div>

<script src="script.js"></script>

CSS

/* style.css */
body, html { margin:0; padding:0; font-family:sans-serif; background:#181818; color:#fff; overflow:hidden;}
#app{display:flex;height:calc(100% - 120px);}
#toolbox,#layers{width:200px;background:#222;padding:10px;overflow-y:auto;}
#canvas-container{flex:1;position:relative;background:#1e1e1e;display:flex;justify-content:center;align-items:center;}
#canvas{background:#2c2c2c;cursor:crosshair;border:1px solid #555;}
#zoom-slider{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:200px;}
#timeline{height:120px;background:#222;display:flex;flex-direction:column;padding:5px;}
#frame-list{display:flex;overflow-x:auto;gap:5px;}
button{display:block;width:100%;margin:5px 0;background:#333;border:none;color:#fff;padding:8px;cursor:pointer;}
button:hover{background:#444;}
#brush-settings{margin-top:10px;}

JavaScript

// script.js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const zoomSlider = document.getElementById('zoom-slider');

canvas.width = window.innerWidth - 400;
canvas.height = window.innerHeight - 120;

let zoom = 1;
let offsetX = 0, offsetY = 0;
let dragging = false, lastX, lastY;

let layers = [];
let currentLayer = null;
let frames = [];
let currentFrame = 0;

// Brush settings
let brushSize = document.getElementById('brush-size').value;
let brushOpacity = document.getElementById('brush-opacity').value;
let currentTool = 'brush';
let drawing = false;

// Zoom
zoomSlider.addEventListener('input', e=> { zoom = e.target.value; draw(); });

// Layer management
document.getElementById('add-layer').addEventListener('click', ()=>{
    const layer = document.createElement('canvas');
    layer.width = canvas.width;
    layer.height = canvas.height;
    layers.push({canvas: layer, ctx: layer.getContext('2d'), visible:true});
    currentLayer = layers[layers.length-1];
    updateLayerList();
    draw();
});

function updateLayerList(){
    const list = document.getElementById('layer-list');
    list.innerHTML = '';
    layers.forEach((l,i)=>{
        const div = document.createElement('div');
        div.textContent = 'Layer '+(i+1);
        div.style.cursor='pointer';
        div.addEventListener('click',()=>{currentLayer = l;});
        list.appendChild(div);
    });
}

// Tool buttons
document.getElementById('brush').onclick = ()=>currentTool='brush';
document.getElementById('eraser').onclick = ()=>currentTool='eraser';
document.getElementById('rect').onclick = ()=>currentTool='rect';
document.getElementById('ellipse').onclick = ()=>currentTool='ellipse';
document.getElementById('polygon').onclick = ()=>currentTool='polygon';
document.getElementById('pen').onclick = ()=>currentTool='pen';

// Brush settings
document.getElementById('brush-size').addEventListener('input',...