add confetti

This commit is contained in:
@s.roertgen 2025-04-30 12:52:43 +02:00
parent 4c17428efc
commit 9776f0c1c7
3 changed files with 19 additions and 1 deletions

10
package-lock.json generated
View file

@ -31,6 +31,7 @@
"prettier-plugin-tailwindcss": "^0.6.11", "prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.0.0", "svelte": "^5.0.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.0.0",
"svelte-confetti": "^2.3.1",
"tailwindcss": "^4.0.0", "tailwindcss": "^4.0.0",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^6.2.6" "vite": "^6.2.6"
@ -4655,6 +4656,15 @@
"typescript": ">=5.0.0" "typescript": ">=5.0.0"
} }
}, },
"node_modules/svelte-confetti": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/svelte-confetti/-/svelte-confetti-2.3.1.tgz",
"integrity": "sha512-bKd8etTOeBQyeS9LDPuSd7Oqy5msf0xvxItzsHPajKaarr/LWFzqPq7rp6QQO5rGTzLgM0fmjovOvLkRbrd2gg==",
"dev": true,
"peerDependencies": {
"svelte": ">=5.0.0"
}
},
"node_modules/svelte-eslint-parser": { "node_modules/svelte-eslint-parser": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.1.3.tgz", "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.1.3.tgz",

View file

@ -29,6 +29,7 @@
"prettier-plugin-tailwindcss": "^0.6.11", "prettier-plugin-tailwindcss": "^0.6.11",
"svelte": "^5.0.0", "svelte": "^5.0.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.0.0",
"svelte-confetti": "^2.3.1",
"tailwindcss": "^4.0.0", "tailwindcss": "^4.0.0",
"typescript": "^5.0.0", "typescript": "^5.0.0",
"vite": "^6.2.6" "vite": "^6.2.6"

View file

@ -9,6 +9,8 @@
import { Carta, Markdown, MarkdownEditor } from 'carta-md'; import { Carta, Markdown, MarkdownEditor } from 'carta-md';
import 'carta-md/default.css'; /* Default theme */ import 'carta-md/default.css'; /* Default theme */
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import { Confetti } from "svelte-confetti"
console.log("show reactions", showReactions, event) console.log("show reactions", showReactions, event)
@ -20,6 +22,7 @@
let reactions = writable([]); let reactions = writable([]);
let reacted = writable(window.localStorage.getItem(event.id)); let reacted = writable(window.localStorage.getItem(event.id));
let reaction = writable({}) let reaction = writable({})
let clicked = writable(false);
async function sendReaction() { async function sendReaction() {
const reactionEvent = new NDKEvent($ndk, { const reactionEvent = new NDKEvent($ndk, {
@ -34,6 +37,7 @@
$reactions = Array.from(r); $reactions = Array.from(r);
window.localStorage.setItem(event.id, 'true'); window.localStorage.setItem(event.id, 'true');
$reacted = true; $reacted = true;
$clicked = true
} }
async function deleteVote() { async function deleteVote() {
@ -66,10 +70,13 @@
<span>👍 {$reactions.length}</span> <span>👍 {$reactions.length}</span>
<span class="thanks">Danke für deinen Vote!</span> <span class="thanks">Danke für deinen Vote!</span>
<!-- <button onclick={() => deleteVote()} class="btn">Vote zurückziehen</button> --> <!-- <button onclick={() => deleteVote()} class="btn">Vote zurückziehen</button> -->
{:else if showReactions === "true"} {:else if showReactions === "true"}
<button onclick={() => sendReaction()} class="like">👍</button> <button onclick={() => sendReaction()} class="like">👍</button>
<span>{$reactions.length}</span> <span>{$reactions.length}</span>
{/if} {/if}
{#if $clicked}
<Confetti />
{/if}
</div> </div>
</div> </div>
<style> <style>