👭💕 Checkpoint

./public/styles.css:1954897/236
./views/index.html:1954897/83
./server.js:1954897/8
./public/script.js:1954897/3977
./palabras.js:1954897/229

palabras.js

@@ -14,7 +14,7 @@ const words = [
     "adj:Feliz",
     "adj:Frío/a",
     "adj:Grande",
-    "adj:Guapo",
+    "adj:Guapo/a",
     "adj:Igual",
     "adj:Ligero/a",
     "adj:Nuevo/a",
@@ -138,23 +138,26 @@ const words = [
     "noun:Zombi",
     // Verbos
     "verb:Amar",
-    "verb:Amar",
     "verb:Andar",
     "verb:Burlar",
     "verb:Comer",
     "verb:Decir",
+    "verb:Doler",
     "verb:Echar",
     "verb:Enseñar",
     "verb:Escribir",
     "verb:Escuchar",
+    "verb:Fiar",
     "verb:Girar",
     "verb:Guardar",
     "verb:Gustar",
+    "verb:Herir",
     "verb:Llamar",
     "verb:Manejar",
     "verb:Morir",
     "verb:Nadar",
     "verb:Oír",
+    "verb:Oler",
     "verb:Pelear",
     "verb:Tomar",
     "verb:Ver",

public/script.js

@@ -41,6 +41,7 @@
                     let b = document.createElement('button')
                     b.classList.add('chip')
                     b.innerText = word.p
+                    b.onclick = function () { input.value = this.innerText }
                     wordBank.appendChild(b)
                 }
             })

public/styles.css

@@ -115,6 +115,12 @@ input:focus {
   padding: 6px 12px;
   margin: 2px;
 }
+.chip:hover:not([disabled]) {
+  background: rgba(255,255,255, .54);
+}
+.chip:active:not([disabled]) {
+  background: rgba(255,255,255, .72);
+}
 
 .graphic {
   width: 100%;
@@ -123,6 +129,7 @@ input:focus {
   padding: 2rem;
 }
 .right {float: right;}
+.bump { margin-bottom: 1rem; }
 .flex {
   display: flex;
   flex-direction: row;

server.js

@@ -9,7 +9,7 @@ app.get('/', function (req, res) {
 });
 app.get('/palabras.json', function (req, res) {
     res.json({
-        words: getRandom(palabras, 10)
+        words: getRandom(palabras, 16)
     })
 });
 

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">Jugar</button>
+                <button class="btn" data-open="view1" data-fire="word">Jugar</button>
                 <button class="btn" data-open="rules">Repasar las reglas</button>
             </div>
         </div>
@@ -57,7 +57,7 @@
             <h1 class="h4 center">Dale el celular a la persona a&nbsp;tu&nbsp;izquierda.</h1>
             <img src="unboxing.svg" class="graphic" alt="">
             <div class="btn-row">
-                <button class="btn" data-open="view2" data-fire="word">¡Listo!</button>
+                <button class="btn" data-open="view2">¡Listo!</button>
             </div>
         </div>
         <div class="container" id="view2" hidden>
@@ -68,7 +68,7 @@
                 No se permiten artículos, pronombres, conjunciones ni exclamaciones.
             </p>
             <input type="text" placeholder="p. ej., " id="input">
-            <div id="wordBank">&hellip;</div>
+            <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-open="view3" data-fire="fs" disabled>¡Listo!</button>