fix: replaced confetti libraray

Escape-Technologies · Oct 18, 2024 · c657c9d · c657c9d
1 parent 2b7b05a
commit c657c9d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -10,12 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@neoconfetti/svelte": "^2.2.1",
     "@webcontainer/api": "^1.4.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "chalk": "^5.3.0",
-    "monaco-editor": "^0.52.0",
-    "party-js": "^2.2.0"
+    "monaco-editor": "^0.52.0"
   },
   "devDependencies": {
     "@fontsource-variable/inter": "^5.1.0",

diff --git a/packages/app/src/routes/[lesson]/Readme.svelte b/packages/app/src/routes/[lesson]/Readme.svelte
@@ -9,20 +9,31 @@
     getCompleted,
     markCompleted,
   } from '$lib/progress.js';
-  import party from 'party-js';
-  import { onMount } from 'svelte';
-  import type { PageData } from './$types.js';
+  import { confetti } from '@neoconfetti/svelte';
+  import { onMount, tick } from 'svelte';
   import Github from '~icons/simple-icons/github';
+  import type { PageData } from './$types.js';
 
   $: ({ readme } = $page.data as PageData);
 
   let completed = false;
   onMount(() => {
     completed = getCompleted().has($page.params.lesson);
   });
+
+  let showConfetti = false;
 </script>
 
 <article class="markdown-content">
+  {#if showConfetti}
+    <div
+      style="position: absolute; inset: 0;
+      display: flex; justify-content: center; pointer-events: none"
+    >
+      <div use:confetti />
+    </div>
+  {/if}
+
   <h1>{readme.metadata.title}</h1>
 
   <aside>
@@ -59,13 +70,13 @@
 
     <p>
       <button
-        on:click={({ target }) => {
+        on:click={() => {
           if (completed) {
             deleteCompleted($page.params.lesson);
             completed = false;
           } else {
-            // @ts-expect-error target is not properly typed
-            party.confetti(target);
+            showConfetti = false;
+            tick().then(() => (showConfetti = true));
             markCompleted($page.params.lesson);
             completed = true;
           }

diff --git a/yarn.lock b/yarn.lock
@@ -1023,6 +1023,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@neoconfetti/svelte@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "@neoconfetti/svelte@npm:2.2.1"
+  checksum: 10c0/f69f498039bb03910e765d7f097b0068f62a7b1e934f633abd2b8cfb4e6678999098e9bab83830bc41435a35c582a3f542c3057cd25f4b8d5e1ecea1037d091b
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -2175,6 +2182,7 @@ __metadata:
     "@fontsource-variable/inter": "npm:^5.1.0"
     "@iconify-json/ri": "npm:^1.2.1"
     "@iconify-json/simple-icons": "npm:^1.2.8"
+    "@neoconfetti/svelte": "npm:^2.2.1"
     "@sveltejs/adapter-node": "npm:^5.2.8"
     "@sveltejs/kit": "npm:^2.7.1"
     "@sveltejs/vite-plugin-svelte": "npm:^3.1.2"
@@ -2186,7 +2194,6 @@ __metadata:
     mdsvex: "npm:^0.12.3"
     modern-normalize: "npm:^3.0.1"
     monaco-editor: "npm:^0.52.0"
-    party-js: "npm:^2.2.0"
     rehype-external-links: "npm:^3.0.0"
     sass: "npm:^1.80.2"
     svelte: "npm:^4.2.19"
@@ -5972,13 +5979,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"party-js@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "party-js@npm:2.2.0"
-  checksum: 10c0/f99439c31d281c8bfe74ba4627e25f4745b1dc4aebf7ef4528d84b8a2f799ce0ba14d5598707298861162a24a695f88c96b6dfae5404ab805a8a965290c00d12
-  languageName: node
-  linkType: hard
-
 "path-exists@npm:^3.0.0":
   version: 3.0.0
   resolution: "path-exists@npm:3.0.0"