feat: screenshot house

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>

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()
+    }
+  })
+}

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",

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: {}