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",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"svelte-confetti": "^2.3.1",
"tailwindcss": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^6.2.6"
@ -4655,6 +4656,15 @@
"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": {
"version": "1.1.3",
"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",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"svelte-confetti": "^2.3.1",
"tailwindcss": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^6.2.6"

View file

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