🖖👱 Checkpoint

./public/script.js:1954897/103
./public/styles.css:1954897/321
./views/index.html:1954897/70819

public/script.js

@@ -31,7 +31,7 @@
         }
     )
 
-    document.addEventListener('word', function () {
+    document.addEventListener('generate-words', function () {
         fetch('palabras.json')
             .then(x => x.json())
             .then(w => w.words)
@@ -57,9 +57,7 @@
             .documentElement
             .requestFullscreen()
             .then(function () {
-                screen.orientation.lock('landscape').catch(function () {
-                    document.exitFullscreen()
-                })
+                screen.orientation.lock('landscape')
             })
     })
 

public/styles.css

@@ -129,6 +129,16 @@ input:focus {
   padding: 2rem;
 }
 .right {float: right;}
+.affix {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  width: 100%;
+  height: 100%;
+  opacity: .000000001;
+  background: transparent;
+  color: transparent;
+  border: 0;
+}
 .bump { margin-bottom: 1rem; }
 .flex {
   display: flex;
@@ -144,4 +154,7 @@ input:focus {
   padding: 1rem;
   border: 1px solid red;
   border-radius: .2em;
+}
+.alt {
+  opacity: .52;
 }

views/index.html

@@ -32,7 +32,7 @@
                 <p class="warn">Este juego requiere que JavaScript esté habilitado. Por favor préndalo y actualiza la página.</p>
             </noscript>
             <div class="flex no-js-hide">
-                <button class="btn" data-open="view1" data-fire="word">Jugar</button>
+                <button class="btn" data-open="view1" data-fire="generate-words">Jugar</button>
                 <button class="btn" data-open="rules">Repasar las reglas</button>
             </div>
         </div>
@@ -70,7 +70,7 @@
             <input type="text" placeholder="p. ej., " id="input">
             <div id="wordBank" class="bump">&hellip;</div>
             <div class="btn-row">
-                <button class="btn" data-fire="word">Más palabras</button>
+                <button class="btn" data-fire="generate-words">Más palabras</button>
                 <button class="btn" data-open="view3" id="listo" disabled>¡Listo!</button>
             </div>
         </div>
@@ -84,11 +84,12 @@
         <div class="container middle" id="view4" hidden>
             <h1 class="h4">Coloca el teléfono sobre la frente</h1>
             <p>Toca la pantalla cuando estés listo.</p>
+            <button data-open="view5" data-fire="view-word" class="affix">Ready!</button>
+        </div>
+        <div class="container middle" id="view5" hidden>
+            <div class="alt">Mi palabra prohibida es...</div>
+            <h1 class="center" style="font-size: 22px">nerd</h1>
         </div>
-        <!-- <div class="container middle" id="view3" hidden>
-            <h1 class="h4">Coloca el teléfono sobre la frente</h1>
-            <p>Toca la pantalla cuando estés listo.</p>
-        </div> -->
     </body>
     <script src="./script.js" charset="utf-8"></script>
 </html>