From 35f72bf4eebcf1f300366a2f170766a11daf7e83 Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Wed, 18 Dec 2019 18:48:50 -0500 Subject: [PATCH] Add option to make text vanish entirely. --- game.js | 33 ++++++++++++++++++++++++--------- stroll.html | 1 + style.css | 20 +++++++++++++++++++- 3 files changed, 44 insertions(+), 10 deletions(-) diff --git a/game.js b/game.js index d182e35..f4619ce 100644 --- a/game.js +++ b/game.js @@ -38,7 +38,25 @@ let text_verbosity = "verbose"; let autoVerbose = true; -let textFade = false; +const textFadeChoices = { + stays: { + name: "Text Stays", + animation: "none", + next: "dims" + }, + dims: { + name: "Text Dims", + animation: "log-dim 10s linear", + next: "fades" + }, + fades: { + name: "Text Fades", + animation: "log-fade 10s linear", + next: "stays" + } +}; + +let textFade = textFadeChoices["stays"]; let newline = " "; @@ -5333,16 +5351,13 @@ function updatePreview(name) { } function toggleTextFade() { + textFade = textFadeChoices[textFade.next]; + const button = document.querySelector("#button-option-toggleTextFade"); - if (textFade) { - document.querySelectorAll(".log").forEach(log => log.style.setProperty("--fade-animation", "none")); - button.textContent = "Text Stays" - } else { - document.querySelectorAll(".log").forEach(log => log.style.setProperty("--fade-animation", "log-fade 10s linear")); - button.textContent = "Text Fades" - } + button.innerText = textFade.name; + + document.querySelectorAll(".log").forEach(log => log.style.setProperty("--fade-animation", textFade.animation)); - textFade = !textFade; } function debugLog() { diff --git a/stroll.html b/stroll.html index 01a68b3..fb8b063 100644 --- a/stroll.html +++ b/stroll.html @@ -4,6 +4,7 @@ Stroll + diff --git a/style.css b/style.css index 0682db7..71e0023 100644 --- a/style.css +++ b/style.css @@ -813,7 +813,7 @@ body.dark .meterLabel { animation-fill-mode: forwards; } -@keyframes log-fade { +@keyframes log-dim { 0% { opacity: 1; } @@ -823,4 +823,22 @@ body.dark .meterLabel { 100% { opacity: 0.6; } +} + +@keyframes log-fade { + 0% { + opacity: 1; + } + 70% { + opacity: 1; + height: auto; + } + 99% { + opacity: 0; + height: auto; + } + 100% { + opacity: 0; + height: 0; + } } \ No newline at end of file