From ad92779176de12ee2d88bb6d4c70fbdf96e96863 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Sat, 5 Jun 2021 17:13:34 +0200
Subject: [PATCH] Add success stamp

---
 jeux/assets/jeu.js    |  1 +
 jeux/assets/style.css | 14 ++++++++++++++
 jeux/camel.html       |  1 +
 jeux/nature.html      |  1 +
 jeux/signal.html      |  1 +
 5 files changed, 18 insertions(+)

diff --git a/jeux/assets/jeu.js b/jeux/assets/jeu.js
index 41d6a3d..005299d 100644
--- a/jeux/assets/jeu.js
+++ b/jeux/assets/jeu.js
@@ -4,6 +4,7 @@ function win() {
     clearTimeout(timeout);
     document.querySelector(".failure").classList.add("hidden");
     document.querySelector(".success").classList.remove("hidden");
+    document.querySelector(".success-stamp").classList.remove("hidden");
 }
 
 function lose() {
diff --git a/jeux/assets/style.css b/jeux/assets/style.css
index d216f00..e3b8585 100644
--- a/jeux/assets/style.css
+++ b/jeux/assets/style.css
@@ -28,6 +28,20 @@ main, footer {
     padding: 0 20px;
 }
 
+.success-stamp {
+    position: absolute;
+    top: 250px;
+    left: 20px;
+    font-size: 60px;
+    transform: rotate(-20deg);
+    color: #0f5132;
+    display: inline-block;
+    background-color: #d1e7dd;
+    border: 1px solid #badbcc;
+    padding: .2em .5em;
+    border-radius: 10px;
+}
+
 .hidden {
     display: none;
 }
diff --git a/jeux/camel.html b/jeux/camel.html
index e39120e..9e0ba25 100644
--- a/jeux/camel.html
+++ b/jeux/camel.html
@@ -37,6 +37,7 @@
             <area shape="poly" coords="378,226,378,264,441,264,441,316,467,316,468,226" onclick="zone('Zone grise/beige')">
             <area shape="rect" coords="353,324,443,340" onclick="zone('Ligne bleue')">
         </map>
+        <span class="success-stamp hidden">FÉLICITATIONS 🎉</span>
     </p>
     <p>
         Couleurs non contractuelles.
diff --git a/jeux/nature.html b/jeux/nature.html
index 5b1e434..27eb92e 100644
--- a/jeux/nature.html
+++ b/jeux/nature.html
@@ -25,6 +25,7 @@
     </p>
     <p class="img-holder">
         <img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette">
+        <span class="success-stamp hidden">FÉLICITATIONS 🎉</span>
     </p>
 </main>
 <footer>
diff --git a/jeux/signal.html b/jeux/signal.html
index b0198e9..6101be0 100644
--- a/jeux/signal.html
+++ b/jeux/signal.html
@@ -36,6 +36,7 @@
             <area shape="rect" coords="527,48,585,229" onclick="win()">
             <area shape="rect" coords="0,0,1260,1292" onclick="lose()">
         </map>
+        <span class="success-stamp hidden">FÉLICITATIONS 🎉</span>
     </p>
 </main>
 <footer>