From c5232ca11b1facbabe41771f1896a476ebb63339 Mon Sep 17 00:00:00 2001
From: William Seiti Mizuta <william.mizuta@gmail.com>
Date: Tue, 29 Sep 2020 19:25:28 -0300
Subject: [PATCH] Add a button to select a new word in tabu game

---
 tabu/cartas.css | 12 +++++++++++-
 tabu/index.html | 20 ++++++++++++++++----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/tabu/cartas.css b/tabu/cartas.css
index 9a3c6b8..b2d66be 100644
--- a/tabu/cartas.css
+++ b/tabu/cartas.css
@@ -81,7 +81,17 @@ li:first-child {
 	.instructions p em {
 		display: block;
 		margin-top: 1em;
-		text-align: right;
+	}
+
+	.instructions p button {
+		background-color: #ff6946;
+		border: none;
+		border-radius: 1em;
+		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+		display: block;
+		margin-top: 1em;
+		padding: 0.5em 1em;
+		cursor: pointer;
 	}
 
 	.contribute {
diff --git a/tabu/index.html b/tabu/index.html
index 8e832b1..6df9768 100644
--- a/tabu/index.html
+++ b/tabu/index.html
@@ -15,7 +15,8 @@ <h1>Jogo do Tabú</h1>
 	<p>
 		<strong>O jogo é simples:</strong> o objetivo é descrever a palavra no alto do cartão para os outros jogadores -- mas sem usar nenhuma das outras palavras do cartão sorteado!
 
-		<em>Já usou sua palavra, recarregue a página para receber outra! ↻</em>
+		<em>Já usou sua palavra, clique neste botão para receber outra!</em>
+		<button>Nova palavra</button>
 	</p>
 </div>
 
@@ -7990,9 +7991,20 @@ <h1>Jogo do Tabú</h1>
 
 <a href="https://github.com/ceci/ceci.github.io/tree/master/tabu" class="contribute" target="_blank">Contribua no Github</a>
 <script>
-	let cards = document.getElementsByTagName("ul");
-	var selected = Math.round(Math.random()*cards.length);
-	cards[selected].className = "show";
+	(function() {
+		function selectCard(cards) {
+			var selected = Math.round(Math.random()*cards.length);
+			cards.forEach(card => card.classList.remove("show"));
+			cards[selected].classList.add("show");
+		}
+
+		const cards = document.querySelectorAll("ul");
+		selectCard(cards);
+
+		document.querySelector("button").addEventListener("click", function() {
+			selectCard(cards);
+		});
+	})();
 </script>
 
 </body>