diff options
author | crupest <crupest@outlook.com> | 2023-07-18 17:03:46 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2023-07-18 17:03:46 +0800 |
commit | 2197b07482b3500fdb87db579e7d538be17942c6 (patch) | |
tree | 8bf4a35c543dac2e8cd1bd30728cd9f1855a346e /docker/crupest-nginx/sites/www/src/main.js | |
parent | 60f6e310f344fe6b8b8206038d29500331019895 (diff) | |
download | crupest-2197b07482b3500fdb87db579e7d538be17942c6.tar.gz crupest-2197b07482b3500fdb87db579e7d538be17942c6.tar.bz2 crupest-2197b07482b3500fdb87db579e7d538be17942c6.zip |
Fix #23.
Diffstat (limited to 'docker/crupest-nginx/sites/www/src/main.js')
-rw-r--r-- | docker/crupest-nginx/sites/www/src/main.js | 18 |
1 files changed, 17 insertions, 1 deletions
diff --git a/docker/crupest-nginx/sites/www/src/main.js b/docker/crupest-nginx/sites/www/src/main.js index 04d7b6b..39d2ba8 100644 --- a/docker/crupest-nginx/sites/www/src/main.js +++ b/docker/crupest-nginx/sites/www/src/main.js @@ -23,14 +23,30 @@ function setBodyPaddingForEmotion(emotion) { document.body.style.paddingTop = `${emotionElementHeight(emotion)}px`; } -setBodyPaddingForEmotion(happy); +const sloganEmotionKey = "sloganEmotion"; + +const savedEmotion = localStorage.getItem(sloganEmotionKey) ?? happy; +if (savedEmotion !== happy && savedEmotion !== angry) { + console.error(`Invalid saved emotion: ${savedEmotion}`); +} + +setBodyPaddingForEmotion(savedEmotion); +setTimeout(() => { + document.body.style.transition = "padding-top 1s"; +}) /** @type {HTMLDivElement} */ const sloganContainer = document.querySelector(".slogan-container") +setTimeout(() => { + sloganContainer.dataset.sloganEmotion = savedEmotion; + setBodyPaddingForEmotion(savedEmotion); +}, 500); + for (const emotion of [happy, angry]) { emotionElement(emotion).addEventListener("click", () => { const opposite = emotionOpposite(emotion); + localStorage.setItem(sloganEmotionKey, opposite); sloganContainer.dataset.sloganEmotion = opposite; setBodyPaddingForEmotion(opposite); }); |