Mored on ui for the Random Name , now working on seting the absentesa nd all thing
This commit is contained in:
parent
1ac14dca72
commit
70c9a703c5
8 changed files with 359 additions and 73 deletions
90
src/RandomName/TopDisplay.svelte
Normal file
90
src/RandomName/TopDisplay.svelte
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script>
|
||||
import { RandomNamesState } from "./main.svelte";
|
||||
</script>
|
||||
|
||||
<div id="root">
|
||||
<div id="NotSelectedYet">
|
||||
<h1>Not Selected Yet</h1>
|
||||
<div class="wrap">
|
||||
{#each RandomNamesState.NotSelectedYet as name}
|
||||
<span draggable="true" class="NotSelectedYet">
|
||||
{name}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div id="Selected">
|
||||
<h1>Selected</h1>
|
||||
<div class="wrap">
|
||||
{#each RandomNamesState.Selected as name}
|
||||
<span draggable="true" class="Selected">
|
||||
{name}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div id="Absent">
|
||||
<h1>Absent</h1>
|
||||
<div class="wrap">
|
||||
{#each RandomNamesState.Absent as name}
|
||||
<span draggable="true" class="Absent">
|
||||
{name}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#root {
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #4d4d4d;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#NotSelectedYet,
|
||||
#Selected {
|
||||
min-width: 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
#Absent {
|
||||
min-width: 20%;
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: fit-content;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.NotSelectedYet {
|
||||
color: #ffe677;
|
||||
}
|
||||
|
||||
.Selected {
|
||||
color: #a3ffa3;
|
||||
}
|
||||
|
||||
.Absent {
|
||||
color: #242424;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,50 +1,117 @@
|
|||
<script>
|
||||
<script module>
|
||||
import Selector from "./selector.svelte";
|
||||
import TopDisplay from "./TopDisplay.svelte";
|
||||
|
||||
function EditList() {
|
||||
console.log("Edit list of names");
|
||||
}
|
||||
function EditList() {
|
||||
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 function SelectStudent() {
|
||||
if (RandomNamesState.NotSelectedYet.length > 0) {
|
||||
let randomIndex = Math.floor(
|
||||
Math.random() * RandomNamesState.NotSelectedYet.length
|
||||
);
|
||||
RandomNamesState.selectedStudent =
|
||||
RandomNamesState.NotSelectedYet[randomIndex];
|
||||
RandomNamesState.Selected.push(
|
||||
RandomNamesState.NotSelectedYet[randomIndex]
|
||||
);
|
||||
RandomNamesState.NotSelectedYet.splice(randomIndex, 1);
|
||||
} else {
|
||||
alert("All students have been selected.");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="nav">
|
||||
<a href="#/" aria-label="Back to main menu"
|
||||
><button aria-label="Back to main menu"
|
||||
><span class="front"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"
|
||||
/></svg
|
||||
> GO BACK
|
||||
</span></button
|
||||
></a
|
||||
>
|
||||
<h1>Random Name</h1>
|
||||
<div>
|
||||
<button
|
||||
aria-label="Back to main menu"
|
||||
onclick={() => EditList()}
|
||||
><span class="front"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="M400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18h14q6 0 12 2-8 18-13.5 37.5T404-360h-4q-71 0-127.5 18T180-306q-9 5-14.5 14t-5.5 20v32h252q6 21 16 41.5t22 38.5H80Zm560 40-12-60q-12-5-22.5-10.5T584-204l-58 18-40-68 46-40q-2-14-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T628-460l12-60h80l12 60q12 5 22.5 11t21.5 15l58-20 40 70-46 40q2 12 2 25t-2 25l46 40-40 68-58-18q-11 8-21.5 13.5T732-180l-12 60h-80Zm40-120q33 0 56.5-23.5T760-320q0-33-23.5-56.5T680-400q-33 0-56.5 23.5T600-320q0 33 23.5 56.5T680-240ZM400-560q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Zm12 400Z"
|
||||
/></svg
|
||||
> Edit list of names
|
||||
</span></button
|
||||
<div id="wrap">
|
||||
<div id="nav">
|
||||
<a href="#/" aria-label="Back to main menu"
|
||||
><button aria-label="Back to main menu"
|
||||
><span class="front"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"
|
||||
/></svg
|
||||
> GO BACK
|
||||
</span></button
|
||||
></a
|
||||
>
|
||||
<h1>Random Name</h1>
|
||||
<div>
|
||||
<button aria-label="Back to main menu" onclick={() => EditList()}
|
||||
><span class="front"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="M400-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM80-160v-112q0-33 17-62t47-44q51-26 115-44t141-18h14q6 0 12 2-8 18-13.5 37.5T404-360h-4q-71 0-127.5 18T180-306q-9 5-14.5 14t-5.5 20v32h252q6 21 16 41.5t22 38.5H80Zm560 40-12-60q-12-5-22.5-10.5T584-204l-58 18-40-68 46-40q-2-14-2-26t2-26l-46-40 40-68 58 18q11-8 21.5-13.5T628-460l12-60h80l12 60q12 5 22.5 11t21.5 15l58-20 40 70-46 40q2 12 2 25t-2 25l46 40-40 68-58-18q-11 8-21.5 13.5T732-180l-12 60h-80Zm40-120q33 0 56.5-23.5T760-320q0-33-23.5-56.5T680-400q-33 0-56.5 23.5T600-320q0 33 23.5 56.5T680-240ZM400-560q33 0 56.5-23.5T480-640q0-33-23.5-56.5T400-720q-33 0-56.5 23.5T320-640q0 33 23.5 56.5T400-560Zm0-80Zm12 400Z"
|
||||
/></svg
|
||||
> Edit list of names
|
||||
</span></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div id="root">
|
||||
<div id="listWrap"><TopDisplay /></div>
|
||||
<Selector />
|
||||
</div>
|
||||
</div>
|
||||
<div id="root"></div>
|
||||
|
||||
<style>
|
||||
#wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -87,13 +154,12 @@ function EditList() {
|
|||
}
|
||||
|
||||
#root {
|
||||
height: 90%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
font-family: "Sour Gummy", sans-serif;
|
||||
background-color: #121212;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 5px 0px;
|
||||
|
|
@ -109,4 +175,11 @@ function EditList() {
|
|||
text-decoration: none;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#listWrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
99
src/RandomName/selector.svelte
Normal file
99
src/RandomName/selector.svelte
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<script>
|
||||
import { RandomNamesState, SelectStudent } from "./main.svelte";
|
||||
</script>
|
||||
|
||||
<div id="root">
|
||||
<p>The Selected Student is</p>
|
||||
<p>thier name has bean auto moved to the Selected list</p>
|
||||
|
||||
<h1>{RandomNamesState.selectedStudent}</h1>
|
||||
<button
|
||||
aria-label="Back to main menu"
|
||||
onclick={() => {
|
||||
SelectStudent();
|
||||
}}
|
||||
><span class="front"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
|
||||
/></svg
|
||||
>
|
||||
|
||||
{#if RandomNamesState.selectedStudent !== "none :("}
|
||||
<span>Select Another Student</span>
|
||||
{:else}
|
||||
<span>Select one now :D</span>{/if}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
|
||||
/></svg
|
||||
>
|
||||
</span></button
|
||||
>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#root {
|
||||
background-color: #222;
|
||||
border-radius: 30px 30px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #292929;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
margin: 10px;
|
||||
padding: 2px 0px;
|
||||
cursor: pointer;
|
||||
outline-offset: 4px;
|
||||
width: fit-content;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
button:hover .front {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
|
||||
button:active .front {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.front {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: 12px;
|
||||
background: #4d4d4d;
|
||||
color: white;
|
||||
transform: translateY(-4px);
|
||||
transition: all 0.1s ease-in-out;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-size: 25px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #aaa;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue