Add option to make text vanish entirely.

vor 5 Jahren · 35f72bf4ee
--- 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 = "&nbsp;";
@@ -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() {
--- a/stroll.html
+++ b/stroll.html
@@ -4,6 +4,7 @@
 <head>
  <meta charset="utf-8">
  <title>Stroll</title>
  <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="sounds.js"></script>
  <script src="features.js"></script>
--- 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;
  }
 }