From a7fa6d620ef1ff48c37a357b045d2a2141890e96 Mon Sep 17 00:00:00 2001 From: RezHackXYZ Date: Tue, 6 May 2025 21:05:23 +0530 Subject: [PATCH] now you can move names from one list to another using drag! --- index.html | 4 ++ package-lock.json | 20 +++++++ package.json | 1 + src/RandomName/TopDisplay.svelte | 93 ++++++++++++++++++++++++++++---- src/RandomName/main.svelte | 80 +++++++++++++-------------- src/RandomName/selector.svelte | 4 +- 6 files changed, 150 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index bf54860..9f12de7 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,10 @@ href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" /> +
diff --git a/package-lock.json b/package-lock.json index 64c0d21..bb43459 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,9 @@ "version": "0.0.0", "dependencies": { "chart.js": "^4.4.9", + "drag-drop-touch": "^1.3.1", "random-words": "^2.0.1", + "svelte-drag-drop-touch": "^0.1.9", "svelte-spa-router": "^4.0.1", "word-exists": "^1.0.0" }, @@ -862,6 +864,16 @@ "node": ">=0.10.0" } }, + "node_modules/drag-drop-touch": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/drag-drop-touch/-/drag-drop-touch-1.3.1.tgz", + "integrity": "sha512-Q0/ZgsnW7VUjn+YqSnp1rvxjjPnZX5YLyVaw28einood+eTMcLzgOgHk8nyqIF9O18J68l+2htlEnbw5GsyTvQ==" + }, + "node_modules/dragdroptouch-bug-fixed": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/dragdroptouch-bug-fixed/-/dragdroptouch-bug-fixed-1.0.8.tgz", + "integrity": "sha512-moNgBeWMeUk4zhV3B+a4TZUPmHVJz+cvjWEXENLEU3toVnm3lpS+ZkSwVbBxArDUQ8HSm1qA0UmKWWy1y7nvng==" + }, "node_modules/esbuild": { "version": "0.25.1", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz", @@ -1143,6 +1155,14 @@ "node": ">=18" } }, + "node_modules/svelte-drag-drop-touch": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/svelte-drag-drop-touch/-/svelte-drag-drop-touch-0.1.9.tgz", + "integrity": "sha512-DWAMC+6xBRkl5OuVR7ze+znSKERlX9t9cx4/kzoWOnPwLFvv4g8YTtQxmO8wfWfETi9qgg/cnw58gmhZKY9vyw==", + "dependencies": { + "dragdroptouch-bug-fixed": "^1.0.8" + } + }, "node_modules/svelte-spa-router": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz", diff --git a/package.json b/package.json index cc58dcf..ad57195 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "chart.js": "^4.4.9", + "drag-drop-touch": "^1.3.1", "random-words": "^2.0.1", "svelte-spa-router": "^4.0.1", "word-exists": "^1.0.0" diff --git a/src/RandomName/TopDisplay.svelte b/src/RandomName/TopDisplay.svelte index 9013a61..6c5d48a 100644 --- a/src/RandomName/TopDisplay.svelte +++ b/src/RandomName/TopDisplay.svelte @@ -1,35 +1,108 @@ -
-
+
{ + event.preventDefault(); + if (DragTempName !== "na") { + RandomNamesState.NotSelectedYet.push(DragTempName); + DragTempName = "na"; + } + }} + >

Not Selected Yet

- {#each RandomNamesState.NotSelectedYet as name} - + {#each RandomNamesState.NotSelectedYet as name, i} + { + setTimeout(() => { + RandomNamesState.NotSelectedYet.splice(i, 1); + DragTempName = name; + }, 100); + }} + > {name} {/each}
-
+
{ + event.preventDefault(); + if (DragTempName !== "na") { + RandomNamesState.Selected.push(DragTempName); + DragTempName = "na"; + } + }} + >

Selected

- {#each RandomNamesState.Selected as name} - + {#each RandomNamesState.Selected as name, i} + { + setTimeout(() => { + RandomNamesState.Selected.splice(i, 1); + DragTempName = name; + }, 100); + }} + > {name} {/each}
-
+
{ + event.preventDefault(); + if (DragTempName !== "na") { + RandomNamesState.Absent.push(DragTempName); + DragTempName = "na"; + } + }} + >

Absent

- {#each RandomNamesState.Absent as name} - + {#each RandomNamesState.Absent as name, i} + { + setTimeout(() => { + RandomNamesState.Absent.splice(i, 1); + DragTempName = name; + }, 100); + }} + > {name} {/each} diff --git a/src/RandomName/main.svelte b/src/RandomName/main.svelte index 746473d..0efee88 100644 --- a/src/RandomName/main.svelte +++ b/src/RandomName/main.svelte @@ -6,48 +6,48 @@ console.log("Edit list of names"); } -export let RandomNamesState = $state({ -NotSelectedYet: [ -"John", -"Jane", -"Alice", -"Bob", -"Charlie", -"Diana", -"Eve", -"Frank", -"Grace", -"Hank", -], -Selected: [ -"John", -"Jane", -"Alice", -"Bob", -"Charlie", -"Diana", -"Eve", -"Frank", -"Grace", -"Hank", -], -Absent: [ -"John", -"Jane", -"Alice", -"Bob", -"Charlie", -"Diana", -"Eve", -"Frank", -"Grace", -"Hank", -], -selectedStudent: "none :(", -}); + export let RandomNamesState = $state({ + NotSelectedYet: [ + "John", + "Jane", + "Alice", + "Bob", + "Charlie", + "Diana", + "Eve", + "Frank", + "Grace", + "Hank", + ], + Selected: [ + "John", + "Jane", + "Alice", + "Bob", + "Charlie", + "Diana", + "Eve", + "Frank", + "Grace", + "Hank", + ], + Absent: [ + "John", + "Jane", + "Alice", + "Bob", + "Charlie", + "Diana", + "Eve", + "Frank", + "Grace", + "Hank", + ], + selectedStudent: "none :(", + }); export function SelectStudent() { - if (RandomNamesState.NotSelectedYet.length > 0) { + if (RandomNamesState.NotSelectedYet.length != 0) { let randomIndex = Math.floor( Math.random() * RandomNamesState.NotSelectedYet.length ); diff --git a/src/RandomName/selector.svelte b/src/RandomName/selector.svelte index 4d6c418..ee01f38 100644 --- a/src/RandomName/selector.svelte +++ b/src/RandomName/selector.svelte @@ -4,9 +4,9 @@

The Selected Student is

-

thier name has bean auto moved to the Selected list

-

{RandomNamesState.selectedStudent}

+

(The Selected Student's name will be auto moved to the Selected list)

+