feat: Add and rename screens

- Add windows screen
- Add windows.js
- Different variants of classes for drag and edge snap behaviour
- Rename js files to better distinguish usage

source/code/_ui.js

@@ -1,127 +0,0 @@
-// Creates a div element which is draggable
-class NewDiv {
-  constructor(x, y, width, height, backgroundColor, content) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-    this.backgroundColor = backgroundColor;
-    this.element = null;
-    this.content = content;
-  }
-
-  // Create the div element
-  createDiv() {
-    this.element = this._content;
-    this.element.style.position = 'absolute';
-    this.element.style.left = `${this.x}px`;
-    this.element.style.top = `${this.y}px`;
-    this.element.style.width = `${this.width}px`;
-    this.element.style.height = `${this.height}px`;
-    this.element.style.background = this.backgroundColor;
-    this.element.style.cursor = 'move';
-
-    // Add event listeners for dragging
-    let isDown = false;
-    let offset = [0, 0];
-
-    this
-      .element
-      .addEventListener('mousedown', (event) => {
-        if (event.button === 0) { // Left mouse button
-          isDown = true;
-          offset = [
-            this.element.offsetLeft - event.clientX,
-            this.element.offsetTop - event.clientY
-          ];
-        }
-      });
-
-    document.addEventListener('mouseup', () => {
-      isDown = false;
-    });
-
-    document.addEventListener('mousemove', (event) => {
-      if (isDown) {
-        const maxX = window.innerWidth - this.element.offsetWidth;
-        const maxY = window.innerHeight - this.element.offsetHeight;
-        let x = event.clientX + offset[0];
-        let y = event.clientY + offset[1];
-
-        // Boundary checks
-        if (x < 0)
-          x = 0;
-        if (y < 0)
-          y = 0;
-        if (x > maxX)
-          x = maxX;
-        if (y > maxY)
-          y = maxY;
-
-        this.element.style.left = `${x}px`;
-        this.element.style.top = `${y}px`;
-      }
-    });
-
-    // Save position and size
-    const saveData = () => {
-      const data = {
-        x: this.element.offsetLeft,
-        y: this.element.offsetTop,
-        width: this.element.offsetWidth,
-        height: this.element.offsetHeight
-      };
-      // Save data to local storage or a database
-      localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
-    };
-
-    // Load saved data
-    const loadData = () => {
-      const data = localStorage.getItem(`divData${this.element.id}`);
-      if (data) {
-        const parsedData = JSON.parse(data);
-        this.element.style.left = `${parsedData.x}px`;
-        this.element.style.top = `${parsedData.y}px`;
-        this.element.style.width = `${parsedData.width}px`;
-        this.element.style.height = `${parsedData.height}px`;
-      }
-    };
-
-    // Call the save function when the user stops dragging
-    document.addEventListener('mouseup', saveData);
-
-    // Load saved data on page load
-    loadData();
-  }
-
-  // FIXME: this.element wird von appendToFrame() verwendet
-  get content() {
-    return this._content = this.content;
-  }
-
-  set content(value) {
-    if (!value) {
-      value = document.createElement('div');
-    }
-
-    this._content = value;
-  }
-
-  // Append the div to the space
-  appendToFrame(space) {
-    this.element.id = `newDiv${space.children.length}`;
-    space.appendChild(this.element);
-  }
-}
-
-// Function to generate a random color
-function getRandomColor() {
-  const letters = '0123456789ABCDEF';
-  let color = '#';
-
-  for (let i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-
-  return color;
-}