fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

js: need to set fillStyle on resize????

Browse source 
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2022-10-31 16:53:34 -04:00
parent d3698f2d94
commit c2ab665f0b
1 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
js/script.js
View file

@ -9,10 +9,13 @@ const FILL_STYLES = {
dark: 'rgba(255,255,255,0.15)' dark: 'rgba(255,255,255,0.15)'
} }
ctx.fillStyle = FILL_STYLES.light; ctx.fillStyle = FILL_STYLES.light;
let darkMode = 0;
addEventListener('resize', () => { addEventListener('resize', () => {
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
// need to set ctx.fillStyle whenever I resize???
ctx.fillStyle = darkMode ? FILL_STYLES.dark : FILL_STYLES.light;
}); });
function Point() { function Point() {
@ -102,13 +105,11 @@ const sequences = [
[ 99, 108, 97, 112, 111, 110 ], [ 99, 108, 97, 112, 111, 110 ],
]; ];
let mode = 0;
let eei = 0; let eei = 0;
addEventListener('keypress', e => { addEventListener('keypress', e => {
const clapper = document.querySelector('.clapper'); const clapper = document.querySelector('.clapper');
const sequence = sequences[mode]; const sequence = sequences[darkMode];
if(e.keyCode == sequence[eei]) { if(e.keyCode == sequence[eei]) {
eei++; eei++;
} }
@ -119,15 +120,15 @@ addEventListener('keypress', e => {
if(eei == sequence.length) { if(eei == sequence.length) {
clapper.classList.toggle('clapping'); clapper.classList.toggle('clapping');
setTimeout(() => { setTimeout(() => {
if(mode === 1) { if(darkMode) {
document.body.classList.remove('dark-mode'); document.body.classList.remove('dark-mode');
ctx.fillStyle = FILL_STYLES.light; ctx.fillStyle = FILL_STYLES.light;
mode = 0; darkMode = 0;
} }
else { else {
document.body.classList.add('dark-mode'); document.body.classList.add('dark-mode');
ctx.fillStyle = FILL_STYLES.dark; ctx.fillStyle = FILL_STYLES.dark;
mode = 1; darkMode = 1;
} }
eei = 0; eei = 0;
setTimeout(() => clapper.classList.toggle('clapping'), 500); setTimeout(() => clapper.classList.toggle('clapping'), 500);