From d1b105db084b503f84e4c805b7ca4e4261010ffc Mon Sep 17 00:00:00 2001
From: wryk <milia@guerilla.studio>
Date: Wed, 1 Mar 2023 23:32:20 +0100
Subject: [PATCH] add counter poc

---
 .eleventy.js           |  3 ++
 package-lock.json      |  8 ++--
 package.json           |  8 ++--
 src/_includes/base.njk |  2 +
 src/index.html         |  9 ++---
 src/js/script.js       | 87 ++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 104 insertions(+), 13 deletions(-)
 create mode 100644 src/js/script.js

diff --git a/.eleventy.js b/.eleventy.js
index 41a3d9a..d7347de 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -3,6 +3,9 @@ const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss")
 module.exports = function (eleventyConfig) {
 	eleventyConfig.addPlugin(eleventySass)
 
+	eleventyConfig.setServerPassthroughCopyBehavior("passthrough")
+	eleventyConfig.addPassthroughCopy("src/js/**/*.js")
+
 	return {
 		htmlTemplateEngine: "njk",
 		dir: {
diff --git a/package-lock.json b/package-lock.json
index ce438d2..77572b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@11ty/eleventy": "^2.0.0-beta.3",
+        "@11ty/eleventy": "^2.0.0",
         "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0"
       },
       "devDependencies": {
@@ -24,9 +24,9 @@
       "integrity": "sha512-5R+DsT9LJ9tXiSQ4y+KLFppCkQyXhzAm1AIuBWE/sbU0hSXY5pkhoqQYEcPJQFg/nglL+wD55iv2j+7O96UAvg=="
     },
     "node_modules/@11ty/eleventy": {
-      "version": "2.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.0-beta.3.tgz",
-      "integrity": "sha512-MGbvIbOn+P021U8E8hCM/QmaWPkTzfEdKVN8UGyLE8fI2J2hElgM/n6o28//+H/mw/4yPtlrYBtgiTHzsPkCNg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-2.0.0.tgz",
+      "integrity": "sha512-heNLjt1FD2nx7fvidIgA4zrIvxuslgBK0w5/Ckr5iape1CoLzmDx1uIxPa66Atr1M6YzwG9hcOxoZUYV7PfLXw==",
       "dependencies": {
         "@11ty/dependency-tree": "^2.0.1",
         "@11ty/eleventy-dev-server": "^1.0.3",
diff --git a/package.json b/package.json
index c1bff8a..dd189e8 100644
--- a/package.json
+++ b/package.json
@@ -4,15 +4,15 @@
   "description": "",
   "main": "index.html",
   "scripts": {
-    "dev": "eleventy  --serve --port=1312",
+    "dev": "eleventy --serve --port=1312",
     "build": "eleventy",
-	"lintcss": "npx stylelint 'src/css/**/*.scss'",
-	"lintcss-autofix": "npx stylelint 'src/css/**/*.scss' --fix"
+    "lintcss": "npx stylelint 'src/css/**/*.scss'",
+    "lintcss-autofix": "npx stylelint 'src/css/**/*.scss' --fix"
   },
   "author": "Guérilla.Studio",
   "license": "ISC",
   "dependencies": {
-    "@11ty/eleventy": "^2.0.0-beta.3",
+    "@11ty/eleventy": "^2.0.0",
     "@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0"
   },
   "devDependencies": {
diff --git a/src/_includes/base.njk b/src/_includes/base.njk
index 387c29c..771a461 100644
--- a/src/_includes/base.njk
+++ b/src/_includes/base.njk
@@ -5,6 +5,8 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{{ title }}</title>
 	<link rel="stylesheet" href="{{ '/css/style.css' | url }}" />
+	<style>[v-cloak] { display: none; }</style>
+	<script type="module" src="{{ '/js/script.js' | url }}"></script>
 
 	<!-- TODO: REMOVE IN PROD, but safer to have it for now -->
 	<meta name="robots" content="none">
diff --git a/src/index.html b/src/index.html
index 758780c..e6e2afb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,15 +2,14 @@
 layout: base.njk
 title: Compteur de grève
 ---
-
-<section class="banner">
+<section class="banner" v-scope="App({ initialCount: 148563 })" @vue:mounted="mounted" @vue:unmounted="unmounted">
 	<div class="grid grid-2 gap">
 		<article class="text-center">
 			<h1 class="visually-hidden">Compteur de Grève</h1>
 			<p>
 				<span class="color-3">Contre la réforme des retraites,</span><br>
 				à l’appel de l’ensemble des organisations syndicales, le 7 mars
-				<strong class="block counter text-big text-bold">148&nbsp;563</strong>
+				<strong class="block counter text-big text-bold" v-text="count">148&nbsp;563</strong>
 				<span class="separator">personnes seront</span>
 				<em class="block text-big text-bold">en grève<span class="visually-hidden"> !</span></em>
 			</p>
@@ -20,10 +19,10 @@ title: Compteur de grève
 			<h2>Et vous&nbsp;?</h2>
 			<div class="flex flex-col">
 				<div>
-					<form action="/" method="post">
+					<form action="/" method="post" v-if="!participating" @submit="submit">
 						<button class="btn w100 mb15">Je fais grève</button>
 					</form>
-					<div class="success" v-cloak>
+					<div class="success" v-cloak v-if="participating">
 						<strong class="block text-bold">Merci pour votre participation ! ✨</strong>
 						↓ Nous avons <strong>besoin de vous</strong> pour faire du <em class="text-bold">7 mars</em> une journée de mobilisation qui restera dans les mémoires
 					</div>
diff --git a/src/js/script.js b/src/js/script.js
new file mode 100644
index 0000000..a0edb3c
--- /dev/null
+++ b/src/js/script.js
@@ -0,0 +1,87 @@
+import { createApp } from "https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js"
+
+
+let internalCount = 0
+
+
+createApp({
+	App
+}).mount(document.body)
+
+function App({ initialCount }) {
+	internalCount = initialCount
+
+	return {
+		count: initialCount,
+		participating: false,
+
+		async submit(event) {
+			event.preventDefault()
+			this.count = await incrementCount()
+			this.participating = true
+		},
+
+		unsubscribeCount: null,
+
+		mounted() {
+			this.unsubscribeCount = subscribeCount((newCount) => this.count = newCount)
+		},
+
+		unmounted() {
+			if (this.unsubscribeCount) {
+				this.unsubscribeCount()
+				this.countSubcriber = null
+			}
+		},
+	}
+}
+
+function subscribeCount(onCount) {
+	let unsubscribed = false
+	let timeoutId = null
+
+	async function execute() {
+		const count = await fetchCount()
+
+		if (!unsubscribed) {
+			timeoutId = setTimeout(execute, 2000)
+			onCount(count)
+		}
+	}
+
+	execute()
+
+	return () => {
+		unsubscribed = true
+
+		if (timeoutId) {
+			clearTimeout(timeoutId)
+		}
+	}
+}
+
+
+
+// fake api
+async function fetchCount() {
+	await wait(1000)
+	internalCount += randomInt(0, 9)
+	return internalCount
+}
+
+async function incrementCount() {
+	await wait(1000)
+	internalCount += 1 + randomInt(0, 9)
+	return internalCount
+}
+
+
+function wait(ms) {
+	return new Promise(res => setTimeout(res, ms))
+}
+
+function randomInt(min, max) {
+	min = Math.ceil(min)
+	max = Math.floor(max)
+	return Math.floor(Math.random() * (max - min + 1)) + min
+}