Loading...

This site

content

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["plane", "cells"];
  initialize() {
    this.BuildGrid();
    this.addAndRemoveSquare();
  }
  BuildGrid() {
    this.makeRows(25, this.planeTarget);
    this.makeColumns(25);
  }
  //Takes (rows, columns) input and makes a grid
  makeRows(rowNum, el) {
    //Creates rows
    for (var r = 0; r < rowNum; r++) {
      let row = document.createElement("div");
      el.appendChild(row).className = "BgridRow";
    }
  }
  //Creates columns
  makeColumns(cellNum) {
    let rows = document.getElementsByClassName("BgridRow");
    let count = 0;
    for (var j = 0; j < cellNum; j++) {
      for (var i = 0; i < rows.length; i++) {
        let newCell = document.createElement("div");
        newCell.setAttribute("data-bgrid-target", "cells");
        newCell.setAttribute("data-bgrid-id-param", count);
        newCell.setAttribute("data-action", "click->bgrid#cellClick");
        rows[j].appendChild(newCell).className = "cell";
        count++;
      }
    }
  }
  connect() {
    //console.log(this.cellsTargets)
  }
  createDivDot(id) {
    let cell = this.cellsTargets[id];
    let direction = Math.floor(Math.random() * 4);
    let allowRight = true;
    let allowLeft = true;
    let allowUp = true;
    let allowDown = true;
    let rowId = id % 100;
    if (rowId >= 50) {
      // scale row numbers
      rowId = rowId - 50;
    }
    if (rowId < 25) {
      // only allow right direction
      allowLeft = false;
      allowUp = false;
      allowDown = false;
    }
    //console.log(allowRight, allowLeft, allowUp, allowDown )
    if (direction === 0 && allowRight) {
      this.moveDot(cell, "Right");
    } else if (direction === 1 && allowUp) {
      this.moveDot(cell, "Up");
    } else if (direction === 2 && allowDown) {
      this.moveDot(cell, "Down");
    } else if (direction === 3 && allowLeft) {
      this.moveDot(cell, "Left");
    }
  }
  moveDot(cell, dir) {
    let mclass = "move" + dir;
    let dot = document.createElement("div");
    dot.className = "dot";
    cell.appendChild(dot);
    void dot.offsetHeight;
    dot.classList.add(mclass);
    setTimeout(() => {
      cell.removeChild(dot);
    }, 3100);
  }
  createSVGDot(id) {
    const svgns = "http://www.w3.org/2000/svg";
    let svg = document.createElementNS(svgns, "svg");
    svg.setAttribute("fill", "none");
    svg.setAttribute("viewBox", "0 0 10 10");
    svg.setAttribute("stroke", "none");
    let rect = document.createElementNS(svgns, "rect");
    rect.setAttribute("x", 0);
    rect.setAttribute("y", 0);
    rect.setAttribute("width", "10px");
    rect.setAttribute("height", "5px");
    rect.setAttribute("fill", "#ff00ff");
    svg.appendChild(rect);
    id.appendChild(svg);
  }
  addAndRemoveSquare() {
    if (!document.hidden) {
      let activate_cell_number = Math.floor(
        Math.random() * this.cellsTargets.length
      );
      let deactivate_cell_number = Math.floor(
        Math.random() * this.cellsTargets.length
      );
      this.cellsTargets[activate_cell_number].className = "cell active";
      this.cellsTargets[deactivate_cell_number].className = "cell";
      //this.createDivDot(deactivate_cell_number);
      var timer = setTimeout(() => {
        this.addAndRemoveSquare();
        //console.log('addSquare')
      }, 4000);
    } else {
      console.log("stop animations");
      clearInterval(timer);
    }
  }

  cellClick({ params: { id } }) {
    //this.createSVGDot(this.cellsTargets[id+3]);
    this.createDivDot(id);
    // console.log(id);
  }
}