-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
132 lines (107 loc) · 4.7 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// ability for the user to paint in the gridContainer with the cursor
function paint(element, container, color) {
let isMousedown = false;
element.addEventListener("mouseover", e => {
const MAX_RGB_COLOR = 3;
if (isMousedown) {
// remove the unwanted drag effect/not allowed cursor when maintaining mousedown
e.preventDefault();
if (color === "rainbow") {
let randomR;
let randomG;
let randomB;
for (let j = 0; j < MAX_RGB_COLOR; j++) {
randomR = Math.floor(Math.random() * 256);
randomG = Math.floor(Math.random() * 256);
randomB = Math.floor(Math.random() * 256);
}
element.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
} else {
element.style.backgroundColor = `${color}`;
}
}
})
document.addEventListener("mousedown", () => {
isMousedown = true;
})
document.addEventListener("mouseup", () => {
isMousedown = false;
})
}
function eraseAll(paintableDivs) {
paintableDivs.forEach(div => {
div.style.backgroundColor = "#FFFFFF";
const colorPickerInput = document.querySelector("#color-picker");
colorChoosen = colorPickerInput.value;
paint(div, paintableDivs, colorChoosen);
})
}
function changeGridSize(gridContainer, gridLength) {
// size of paintable div in square (height and width)
const PIXEL_PROPORTION = 16;
// remove all the old paintable divs if there is any
while (gridContainer.firstChild) {
gridContainer.removeChild(gridContainer.firstChild);
}
gridLength = parseInt(gridLength);
gridContainer.style.height = gridLength;
gridContainer.style.width = gridLength;
/* gets the amount of paintable divs in the current grid line
(e.g: gridLength = 192px, PIXEL_PROPORTION = 16px
gridLength / PIXEL_PROPORTION = 12.
Meaning that 12 blocks of divs in the current line can be painted) */
let paintableUnitSize = gridLength / PIXEL_PROPORTION;
/* add paintables divs filling in the gridContainer.
use paintableUnitSize ** 3 to get the area size of the gridContainer
where a paintableUnitSize represent a paintable square div (block)
*/
for (let i = paintableUnitSize; i <= Math.pow((paintableUnitSize), 3); i += paintableUnitSize) {
const div = document.createElement("div");
div.style.height = "16px";
div.style.width = "16px";
div.classList.add("grid");
gridContainer.appendChild(div);
}
}
window.addEventListener("DOMContentLoaded", () => {
let gridLength = 560;
const gridContainer = document.querySelector(".grid-container");
changeGridSize(gridContainer, gridLength);
let paintableDivs = gridContainer.querySelectorAll(".grid");
// disable drag/select effect with the cursor to avoid any conflicts when drawing in the gridContainer
document.addEventListener("dragstart", () => {
return false;
});
document.addEventListener("selectstart", () => {
return false;
});
const colorPickerInput = document.querySelector("#color-picker");
let colorChoosen = "#000000";
const rainbowModeButton = document.getElementById("rainbow-mode-btn");
rainbowModeButton.addEventListener("click", () => {
colorChoosen = "rainbow";
paintableDivs.forEach(div => paint(div, gridContainer, colorChoosen));
})
const eraseButton = document.getElementById("erase-btn");
eraseButton.addEventListener("click", e => {
// use white color to erase
colorChoosen = "#FFFFFF";
paintableDivs.forEach(div => paint(div, gridContainer, colorChoosen));
})
colorPickerInput.addEventListener("change", () => {
colorChoosen = colorPickerInput.value;
paintableDivs.forEach(div => paint(div, gridContainer, colorChoosen));
})
paintableDivs.forEach(div => paint(div, gridContainer, colorChoosen));
const gridDragController = document.getElementById("grid-drag-controller");
const labelController = document.getElementById("label-controller");
gridDragController.addEventListener("mouseup", () => {
gridContainer.style.height = `${gridDragController.value}px`;
gridContainer.style.width = `${gridDragController.value}px`;
gridLength = gridDragController.value;
labelController.textContent = `${gridLength} x ${gridLength}`;
changeGridSize(gridContainer, gridLength);
paintableDivs = gridContainer.querySelectorAll(".grid");
paintableDivs.forEach(div => paint(div, gridContainer, colorChoosen));
})
});