feat: use value in the game

index.css

@@ -168,3 +168,34 @@ details.hud li {
   visibility: hidden;
   height: 0;
 }
+
+.use-value {
+  display: none;
+  visibility: hidden;
+  text-align: center;
+  text-decoration: underline;
+  background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, #ff3399, #6666ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: rainbow-animation 5s ease-in-out infinite;
+  background-size: 400% 100%;
+}
+
+.display-use-value {
+  display: inline;
+  visibility: visible;
+}
+
+
+@keyframes rainbow-animation {
+
+  0%,
+  100% {
+    background-position: 0 0;
+  }
+
+  50% {
+    background-position: 100% 0;
+  }
+}

index.html

@@ -24,7 +24,8 @@
         <section class="customer-satisfaction-roof focusable">
           <h2 class="customer-satisfaction">Customer Satisfaction</h2>
           <p class="value-analysis-value-engineering">
-            Value analysis / Value engineering
+            <span class="use-value">Use</span> Value analysis /
+            <span class="use-value">Use</span> Value engineering
           </p>
         </section>
       </div>

main.ts

@@ -89,3 +89,12 @@ if (screenshotHouseButton) {
     }
   })
 }
+
+const useValue = params.get('use-value')
+
+if (useValue !== null) {
+  const value = document.querySelectorAll('.use-value')
+  value.forEach((value) => {
+    value.classList.add('display-use-value')
+  })
+}