-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
214 lines (148 loc) · 5.67 KB
/
app.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
/**
* App
* The following class implements the Etch-a-Sketch Project and supports multiple modes.
*/
class App {
// Configuration
#mode; // "color|rainbow|eraser"
#color_mode_button_el;
#rainbow_mode_button_el;
#eraser_mode_button_el;
// Clear
#clear_button_el;
// Size
#sketch_pad_size_el;
#sketch_pad_size_text_el;
#rows = 16;
#cols = 16;
// Sketch Pad
#primary_color = "#312e2e";
#drawing = false;
#sketch_pad_container;
constructor () {
// Initialize the mode buttons & activate the default
this.#color_mode_button_el = document.getElementById("color_mode_button");
this.#rainbow_mode_button_el = document.getElementById("rainbow_mode_button");
this.#eraser_mode_button_el = document.getElementById("eraser_mode_button");
this.#activate_mode("color");
// Subscribe to the modes' click events
this.#color_mode_button_el.addEventListener("click", () => this.#activate_mode("color"));
this.#rainbow_mode_button_el.addEventListener("click", () => this.#activate_mode("rainbow"));
this.#eraser_mode_button_el.addEventListener("click", () => this.#activate_mode("eraser"));
// Initialize the reset button and subscribe to its events
this.#clear_button_el = document.getElementById("clear_button");
this.#clear_button_el.addEventListener("click", () => this.#build_sketch_pad())
// Initialize the sketch pad size elements and subscribe to changes
this.#sketch_pad_size_el = document.getElementById("sketch_pad_size");
this.#sketch_pad_size_text_el = document.getElementById("sketch_pad_size_text");
this.#sketch_pad_size_el.addEventListener("input", (e) => {
const size = Number(e.target.value);
this.#rows = size;
this.#cols = size;
this.#build_sketch_pad();
});
// Initialize the sketch pad element
this.#sketch_pad_container = document.getElementById("sketch_pad_container");
this.#sketch_pad_container.addEventListener("mousedown", (e) => this.#drawing = true );
this.#sketch_pad_container.addEventListener("mousemove", (e) => this.#draw(e));
this.#sketch_pad_container.addEventListener("mouseup", (e) => this.#drawing = false );
// Build the sketch pad container
this.#build_sketch_pad();
}
/***************************
* SKETCHPAD CONFIGURATION *
***************************/
/**
* Activates a given mode and handles the deactivation & activation of the button element.
* @param {*} mode
*/
#activate_mode(mode) {
// Only activate the mode if it is different to the current one
if (mode != this.#mode) {
// Set the new mode
this.#mode = mode;
// Remove the active class from all the mode buttons
this.#color_mode_button_el.classList.remove("active");
this.#rainbow_mode_button_el.classList.remove("active");
this.#eraser_mode_button_el.classList.remove("active");
// Activate the mode button
switch (mode) {
case "color":
this.#color_mode_button_el.classList.add("active");
break;
case "rainbow":
this.#rainbow_mode_button_el.classList.add("active");
break;
case "eraser":
this.#eraser_mode_button_el.classList.add("active");
break;
}
}
}
/**
* Puts together the size of the pad in string format.
* @returns string
*/
#get_sketch_pad_size_text() { return `${this.#rows} x ${this.#cols}` }
/********************
* SKETCH PAD BUILD *
********************/
/**
* Builds the Sketch Pad based on the current configuration.
*/
#build_sketch_pad() {
// Initialize the rows & columns container
let content = "";
// Iterate according to the current rows and cols updating the content
for (let i_row = 0; i_row < this.#rows; i_row++) {
let row = "<div class='row'>";
for (let i_col = 0; i_col < this.#cols; i_col++) row += "<div class='col'></div>";
row += "</div>";
content += row;
}
// Set the size of the sketch pad
this.#sketch_pad_size_text_el.innerText = this.#get_sketch_pad_size_text();
// Finaly, set the content on the element
this.#sketch_pad_container.innerHTML = content;
}
/*********************
* SKETCHPAD DRAWING *
*********************/
/**
* Draws on the sketchpad based on the active mode
* @param e
*/
#draw(e) { if (this.#drawing) e.target.style.backgroundColor = this.#get_color() }
/**
* Derives the color to be used based on the mode.
* @returns string
*/
#get_color() {
switch (this.#mode) {
case "color":
return this.#primary_color;
case "rainbow":
return this.#generate_random_color();
case "eraser":
return "#FFFFFF";
}
}
/**
* Generates a random hexadecimal color.
* @returns string
*/
#generate_random_color() {
const letters = "0123456789ABCDEF";
let color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
}
/**
* App Initializer
* Initializes the instance of the application once the HTML has been put together.
* DO NOT MODIFY THIS CODE
*/
const app = new App();