Loading...
This site
Loading...
Estimated reading time: 1min 59s
Created: 13.12.2022, 18:58
- Updated: 16.12.2022, 10:28
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);
}
}
Turbo MariaDB Stimulus Symfony Sonata Docker