From 890cbde0a74b97f4ed0d380519d63e9512d4ee01 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 28 Jan 2025 10:12:06 +0100
Subject: [PATCH] feat: screenshot house

---
 index.html     |  6 +++++-
 main.ts        | 17 +++++++++++++++++
 package.json   |  1 +
 pnpm-lock.yaml |  8 ++++++++
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f3fe836..3bcffa5 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
     <header class="hud">
       <h1 class="thinking-people-system">Thinking People System</h1>
     </header>
-    <main>
+    <main id="thinking-people-system">
       <div class="customer-satisfaction-roof-parent">
         <section class="customer-satisfaction-roof focusable">
           <h2 class="customer-satisfaction">Customer Satisfaction</h2>
@@ -154,6 +154,10 @@
           <code><a href="?scroll=end">end</a></code>
         </li>
       </ul>
+      <p>
+        Screenshot the house:
+        <button class="button" id="screenshot-house">Screenshot</button>
+      </p>
     </details>
     <svg class="round-svg" xmlns="http://www.w3.org/2000/svg">
       <defs>
diff --git a/main.ts b/main.ts
index c247224..2d9b9be 100644
--- a/main.ts
+++ b/main.ts
@@ -1,3 +1,5 @@
+import { domToPng } from 'modern-screenshot'
+
 const params = new URL(document.location.href).searchParams
 
 const display = params.get('display')
@@ -78,3 +80,18 @@ const colorParam = params.get('color')
 if (colorParam) {
   document.documentElement.style.setProperty('--color', `#${colorParam}`)
 }
+
+const screenshotHouseButton = document.querySelector('#screenshot-house')
+
+if (screenshotHouseButton) {
+  screenshotHouseButton.addEventListener('click', async () => {
+    const house = document.querySelector('#thinking-people-system')
+    if (house) {
+      const png = await domToPng(house)
+      const a = document.createElement('a')
+      a.href = png
+      a.download = 'thinking-people-system.png'
+      a.click()
+    }
+  })
+}
diff --git a/package.json b/package.json
index f341265..e19b43c 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@vueuse/core": "^12.2.0",
     "chart.xkcd": "^1.1.15",
     "comlink": "^4.4.2",
+    "modern-screenshot": "^4.5.5",
     "pinia": "^2.3.0",
     "random-js": "^2.1.0",
     "vue": "^3.5.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71abf9f..10d5979 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       comlink:
         specifier: ^4.4.2
         version: 4.4.2
+      modern-screenshot:
+        specifier: ^4.5.5
+        version: 4.5.5
       pinia:
         specifier: ^2.3.0
         version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
@@ -800,6 +803,9 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  modern-screenshot@4.5.5:
+    resolution: {integrity: sha512-k5AC0UjY8YccnKn53upeQMzgDdPYkDN/706ma3yPHCwOZi+AoL0NeMlLS3nQwA/s0xrM7s8WO+UWnx5YJNpQeA==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1665,6 +1671,8 @@ snapshots:
       picomatch: 2.3.1
     optional: true
 
+  modern-screenshot@4.5.5: {}
+
   ms@2.1.3: {}
 
   nanoid@3.3.8: {}