diff --git a/potain05/assets/icons/android-chrome-192x192.png b/potain05/assets/icons/android-chrome-192x192.png
new file mode 100644
index 0000000..d68fda6
Binary files /dev/null and b/potain05/assets/icons/android-chrome-192x192.png differ
diff --git a/potain05/assets/icons/android-chrome-256x256.png b/potain05/assets/icons/android-chrome-256x256.png
new file mode 100644
index 0000000..75f888b
Binary files /dev/null and b/potain05/assets/icons/android-chrome-256x256.png differ
diff --git a/potain05/assets/icons/apple-touch-icon.png b/potain05/assets/icons/apple-touch-icon.png
new file mode 100644
index 0000000..eea84b2
Binary files /dev/null and b/potain05/assets/icons/apple-touch-icon.png differ
diff --git a/potain05/assets/icons/browserconfig.xml b/potain05/assets/icons/browserconfig.xml
new file mode 100644
index 0000000..ce37b62
--- /dev/null
+++ b/potain05/assets/icons/browserconfig.xml
@@ -0,0 +1,9 @@
+
+
+
+
+
+ #da532c
+
+
+
diff --git a/potain05/assets/icons/favicon-16x16.png b/potain05/assets/icons/favicon-16x16.png
new file mode 100644
index 0000000..6f7cd3f
Binary files /dev/null and b/potain05/assets/icons/favicon-16x16.png differ
diff --git a/potain05/assets/icons/favicon-32x32.png b/potain05/assets/icons/favicon-32x32.png
new file mode 100644
index 0000000..87cc60f
Binary files /dev/null and b/potain05/assets/icons/favicon-32x32.png differ
diff --git a/potain05/assets/icons/favicon.ico b/potain05/assets/icons/favicon.ico
new file mode 100644
index 0000000..a51cde2
Binary files /dev/null and b/potain05/assets/icons/favicon.ico differ
diff --git a/potain05/assets/icons/mstile-150x150.png b/potain05/assets/icons/mstile-150x150.png
new file mode 100644
index 0000000..cf0d088
Binary files /dev/null and b/potain05/assets/icons/mstile-150x150.png differ
diff --git a/potain05/assets/icons/safari-pinned-tab.svg b/potain05/assets/icons/safari-pinned-tab.svg
new file mode 100644
index 0000000..7b478de
--- /dev/null
+++ b/potain05/assets/icons/safari-pinned-tab.svg
@@ -0,0 +1,29 @@
+
+
+
diff --git a/potain05/assets/icons/site.webmanifest b/potain05/assets/icons/site.webmanifest
new file mode 100644
index 0000000..705506a
--- /dev/null
+++ b/potain05/assets/icons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+ "name": "",
+ "short_name": "",
+ "icons": [
+ {
+ "src": "/icons/android-chrome-192x192.png?v=potain",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/icons/android-chrome-256x256.png?v=potain",
+ "sizes": "256x256",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/potain05/assets/jeu.js b/potain05/assets/jeu.js
new file mode 100644
index 0000000..33d579d
--- /dev/null
+++ b/potain05/assets/jeu.js
@@ -0,0 +1,83 @@
+"use strict";
+
+const GAME_NOT_STARTED = 0;
+const GAME_STARTED = 1;
+const GAME_WON = 2;
+const GAME_LOST = 3;
+
+let gameState = GAME_NOT_STARTED;
+
+let zones = undefined;
+let endTimeout = undefined;
+let roundTimeout = undefined;
+let timeBetween = 2000;
+const MIN_TIME_BETWEEN = 1000;
+const ACCELERATION = 100;
+
+(function () {
+ zones = document.getElementsByClassName("zone");
+ for (const zone of zones) {
+ zone.addEventListener("click", event => {
+ if (gameState !== GAME_STARTED) {
+ return;
+ }
+ console.log(event.target.classList);
+ if (event.target.classList.contains("inactive")) {
+ gameState = GAME_LOST;
+ end();
+ } else {
+ event.target.style.transition = "";
+ event.target.classList.remove("fade-out");
+ event.target.classList.add("inactive");
+ }
+ })
+ }
+})();
+
+function start() {
+ console.log("start!");
+ document.getElementsByTagName("button")[0].disabled = true;
+ gameState = GAME_STARTED;
+ endTimeout = setTimeout(end, 30_000);
+ roundTimeout = setTimeout(round, 1);
+}
+
+function round() {
+ if (gameState !== GAME_STARTED) {
+ end();
+ return;
+ }
+
+ let zone = zones[Math.floor(Math.random() * zones.length)];
+ zone.classList.remove("inactive");
+ setTimeout(function () {
+ zone.style.transition = `background-color ${timeBetween}ms`;
+ }, 100);
+ setTimeout(function () {
+ zone.classList.add("fade-out");
+ }, MIN_TIME_BETWEEN / 2);
+ let zoneTimeout = setTimeout(() => {
+ if (!zone.classList.contains("inactive")) {
+ console.log("lost because didn't click fast enough", zone.id);
+ gameState = GAME_LOST;
+ end();
+ }
+ }, timeBetween);
+ zone.addEventListener("click", () => {clearTimeout(zoneTimeout)})
+
+ // Recursive call
+ timeBetween -= ACCELERATION;
+ if (timeBetween <= MIN_TIME_BETWEEN) {timeBetween = MIN_TIME_BETWEEN;}
+ roundTimeout = setTimeout(round, timeBetween);
+}
+
+function end() {
+ clearTimeout(roundTimeout);
+ clearTimeout(endTimeout);
+ if (gameState === GAME_STARTED) {
+ gameState = GAME_WON;
+ document.getElementsByClassName("success stamp")[0].classList.remove("hidden");
+ } else if (gameState === GAME_LOST) {
+ document.getElementsByClassName("failure stamp")[0].classList.remove("hidden");
+ }
+}
diff --git a/potain05/assets/style.css b/potain05/assets/style.css
new file mode 100644
index 0000000..546ac4d
--- /dev/null
+++ b/potain05/assets/style.css
@@ -0,0 +1,96 @@
+html {
+ height:100%;
+ box-sizing: border-box;
+}
+
+* {
+ box-sizing: inherit;
+}
+
+body {
+ height: 100%;
+ margin: 0;
+ font-family: Arial, sans-serif;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+}
+
+header {
+ background-color: rgb(40,53,131);
+ color: white;
+ margin-bottom: 20px;
+}
+
+main, footer {
+ max-width: 1600px;
+ width: 100%;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.stamp {
+ position: absolute;
+ font-size: 60px;
+ transform: rotate(-20deg);
+ display: inline-block;
+ padding: .2em .5em;
+ border-radius: 10px;
+}
+
+.success.stamp {
+ top: 120px;
+ left: 60px;
+ color: #0f5132;
+ background-color: #d1e7dd;
+ border: 3px solid #859a99;
+}
+
+.failure.stamp {
+ /* TODO center the stamp */
+ top: 120px;
+ left: 60px;
+ color: #510f0f;
+ background-color: #e7d1d1;
+ border: 3px solid #9a8585;
+}
+
+.hidden {
+ display: none;
+}
+
+.failure {
+ color: #a71717;
+}
+
+.success {
+ color: green;
+}
+
+h2 {
+ margin-top: 0;
+}
+
+header h1 {
+ text-align: center;
+}
+
+a {
+ color: rgb(40,53,131);
+}
+
+.img-holder {
+ position: relative;
+ top: 0;
+ left: 0;
+}
+
+.img-holder .zone {
+ position: absolute;
+ display: block;
+ background-color: red;
+}
+
+.img-holder .zone.inactive,
+.img-holder .zone.fade-out {
+ background-color: transparent;
+}
diff --git a/potain05/images/fond.png b/potain05/images/fond.png
new file mode 100644
index 0000000..5a62c42
Binary files /dev/null and b/potain05/images/fond.png differ
diff --git a/potain05/index.html b/potain05/index.html
new file mode 100644
index 0000000..55930ea
--- /dev/null
+++ b/potain05/index.html
@@ -0,0 +1,49 @@
+
+
+
+
+ Potain de chantier #5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Potain de chantier #5
+
+
+ Jeu interactif
+
+ Aide Pimpin le technicien à reboucher les fuites !
+
+
+
+
+
+
+
+
+
FÉLICITATIONS 🎉
+
PERDU 😞
+