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

add more color modes, respect dark mode setting, use button for among

Browse source 
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2023-02-11 17:33:00 -05:00
parent 7f3de55234
commit 294e147d39
5 changed files with 196 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

144
js/script.js
View file

@ -3,34 +3,30 @@ const canvas = document.querySelector('canvas#bg');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const snowing = false;
const ctx = canvas.getContext('2d');
const FILL_STYLES = {
light: 'rgba(0,0,0,0.05)',
dark: 'rgba(255,255,255,0.15)',
snowing: 'rgb(206, 212, 220)'
dark: 'rgba(255,255,255,0.15)'
};
const BACKGROUNDS = {
evening: 'linear-gradient(#011d32, #3b3b89)',
night: '#000000'
};
ctx.fillStyle = snowing ? FILL_STYLES.snowing : FILL_STYLES.light;
let darkMode = 0;
if(snowing) {
document.body.classList.add('dark-mode');
document.body.style.background = BACKGROUNDS.evening;
const colorMode = localStorage.getItem('color-mode');
if(colorMode) {
document.body.setAttribute('class', colorMode);
}
addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// need to set ctx.fillStyle whenever I resize???
ctx.fillStyle = darkMode ? FILL_STYLES.dark : snowing ? FILL_STYLES.snowing : FILL_STYLES.light;
});
function isDarkMode() {
return document.body.classList.contains('dark-mode') ||
(document.body.classList.length === 0 && matchMedia('(prefers-color-scheme: dark)').matches);
}
function Point() {
const r = snowing ? 4 : 8;
const r = 8;
// progress below 0 is neglected, negative initial
// progress serves to introduce random delays -
@ -44,49 +40,38 @@ function Point() {
this.init = function() {
this.progress = initialProgress;
this.x = Math.random() * canvas.width;
this.y = snowing ? initialProgress * canvas.height / 3 : Math.random() * canvas.height;
this.r = snowing ? Math.random() * r : 0;
this.y = Math.random() * canvas.height;
this.r = 0;
this.rng = Math.random();
}
this.draw = function() {
if(this.progress >= 0) {
ctx.fillStyle = isDarkMode() ? FILL_STYLES.dark : FILL_STYLES.light;
ctx.beginPath();
// radius calculation: maps progress from [0, 1] to [0, pi],
// then takes sine of that to get an increase, then decrease
// in radius. absolute value to prevent floating point errors
// accidentally causing negative sine values which cause ctx.arc
// to throw errors
if(!snowing) ctx.arc(this.x, this.y, Math.abs(Math.sin(Math.PI*this.progress)*r), 0, 2*Math.PI);
else ctx.arc(
this.x + 20 * Math.sin(this.progress * 3 * Math.PI) + Math.cos(this.progress * (5*this.rng) * Math.PI),
this.y, this.r, 0, 2*Math.PI);
ctx.arc(this.x, this.y, Math.abs(Math.sin(Math.PI*this.progress)*r), 0, 2*Math.PI);
ctx.fill();
}
};
this.render = function() {
if(snowing) {
this.y += (Math.pow(this.rng, 0.25)) * 0.5 * (1 + Math.sin(this.progress % Math.PI));
this.x = (this.x + 0.3) % canvas.width; // wind
this.progress += 0.005;
this.draw();
if(this.y >= canvas.height + r) this.init();
}
else {
// stars come faster than they go
// so user can look at them longer
// i guess? idk this just looked pretty
if(this.progress > 0.5) this.progress += 0.005;
else this.progress += 0.05;
this.draw();
if(this.progress >= 1) this.init();
}
// stars come faster than they go
// so user can look at them longer
// i guess? idk this just looked pretty
if(this.progress > 0.5) this.progress += 0.005;
else this.progress += 0.05;
this.draw();
if(this.progress >= 1) this.init();
}
}
const dots = [];
const n = snowing ? 50 : 20;
const n = 20;
for(let i = 0; i < n; i++) {
dots[i] = new Point();
@ -124,62 +109,49 @@ document.querySelector('.age').textContent = `${tens[Math.floor(age / 10)]} ${on
// easter egg
const sequences = [
'CLAPOFF'.split('').map(s => 'Key' + s),
'CLAPON'.split('').map(s => 'Key' + s)
];
'DARK',
'LITE',
'PURP',
'MINT',
'YELL',
'BLUE',
'SAVE'
].map(seq => {
return {
word: seq,
combo: seq.split('').map(c => 'Key' + c)
}
});
let eei = 0;
const lastFourKeys = [];
addEventListener('keypress', e => {
const clapper = document.querySelector('.clapper');
const sequence = sequences[darkMode];
if(e.code == sequence[eei]) {
eei++;
}
else {
eei = 0;
}
if(eei == sequence.length) {
eei = 0;
clapper.classList.toggle('clapping');
setTimeout(() => {
if(!snowing) {
if(darkMode) {
document.body.classList.remove('dark-mode');
ctx.fillStyle = FILL_STYLES.light;
darkMode = 0;
}
else {
document.body.classList.add('dark-mode');
ctx.fillStyle = FILL_STYLES.dark;
darkMode = 1;
}
eei = 0;
} else {
if(darkMode) {
ctx.fillStyle = FILL_STYLES.snowing;
document.body.style.background = BACKGROUNDS.evening;
darkMode = 0;
}
else {
ctx.fillStyle = FILL_STYLES.dark;
document.body.style.background = BACKGROUNDS.night;
darkMode = 1;
lastFourKeys.push(e.code);
while(lastFourKeys.length > 4) lastFourKeys.shift();
sequences.forEach(({word, combo}) => {
if(combo.every((v, i) => v === lastFourKeys[i])) {
if(word === 'SAVE') {
if(confirm('Would you like to save the current color mode to local browser storage?')) {
localStorage.setItem('color-mode', document.body.getAttribute('class'));
}
return;
}
setTimeout(() => clapper.classList.toggle('clapping'), 500);
}, 500);
}
const clapper = document.querySelector('.clapper');
clapper.classList.toggle('clapping');
setTimeout(() => {
document.body.setAttribute('class', `${word.toLowerCase()}-mode`);
setTimeout(() => clapper.classList.toggle('clapping'), 500);
}, 500);
}
});
});
function among() {
alert('haha among us');
}
document.querySelector('.among').addEventListener('keypress', e => {
if(e.code === 'Space') {
e.preventDefault();
among();
}
document.querySelector('.among').addEventListener('click', e => {
e.preventDefault();
among();
});