ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lint codebase and run precommit hook

Browse Source
This commit is contained in:
Rotimi Best
2025-12-25 09:01:51 +00:00
parent 334c67f22a
commit b31ccf3037
214 changed files with 6191 additions and 2880 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/src/lib/features/tools/progress/avatar.svelte
+4 -8
View File
@@ -45,7 +45,7 @@
</Dialog.Header>
<!-- map for each avatar -->
<div class="flex flex-wrap justify-evenly gap-y-3 mt-3">
<div class="mt-3 flex flex-wrap justify-evenly gap-y-3">
{#each avatars as avatar, index}
<button
onclick={() => {
@@ -59,21 +59,17 @@
hoveredIndex = null;
isAddIcon = false;
}}
class="relative w-[17%] flex justify-center items-center shadow-sm rounded-full hover:scale-110 transition-all duration-300"
class="relative flex w-[17%] items-center justify-center rounded-full shadow-sm transition-all duration-300 hover:scale-110"
>
<!-- + icon overlay -->
{#if isAddIcon && hoveredIndex === index}
<div
class="w-full h-full flex justify-center items-center bg-white border absolute rounded-full opacity-[0.7] blur-md"
class="absolute flex h-full w-full items-center justify-center rounded-full border bg-white opacity-[0.7] blur-md"
></div>
<img src="/free-tools/progress-report/hover-plus-icon.svg" alt="" class="absolute" />
{/if}
<!-- avatar -->
<img
src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg"
alt=""
class="w-full"
/>
<img src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg" alt="" class="w-full" />
</button>
{/each}
</div>
apps/website/src/lib/features/tools/progress/background.svelte
+3 -9
View File
@@ -58,21 +58,15 @@
</Dialog.Header>
<!-- -->
<div
class="flex flex-wrap justify-between gap-y-3 mt-3 overflow-y-auto overflow-x-hidden h-[85%]"
>
<div class="mt-3 flex h-[85%] flex-wrap justify-between gap-y-3 overflow-y-auto overflow-x-hidden">
{#each backgrounds as background}
<button
onclick={() => {
selectBackground(background);
}}
class="flex w-[30%] items-center shadow-sm hover:scale-110 transition-all duration-300"
class="flex w-[30%] items-center shadow-sm transition-all duration-300 hover:scale-110"
>
<img
src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp"
alt=""
class=""
/>
<img src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp" alt="" class="" />
</button>
{/each}
</div>
apps/website/src/lib/features/tools/progress/mood.svelte
+3 -3
View File
@@ -72,15 +72,15 @@
</Dialog.Header>
<!-- mapping -->
<div class="flex flex-wrap justify-between gap-y-3 mt-3">
<div class="mt-3 flex flex-wrap justify-between gap-y-3">
{#each moods as mood}
<button
onclick={() => {
selectMood(mood);
}}
class="flex gap-3 items-center shadow-sm rounded-full px-4 py-1 bg-[#F1F6FF] hover:bg-[#0233BD] hover:text-white transition-all duration-700"
class="flex items-center gap-3 rounded-full bg-[#F1F6FF] px-4 py-1 shadow-sm transition-all duration-700 hover:bg-[#0233BD] hover:text-white"
>
<p class="text-xs md:text-sm font-semibold">{mood.text}</p>
<p class="text-xs font-semibold md:text-sm">{mood.text}</p>
<img
src="https://assets.cdn.clsrio.com/progress-report/emojis/{mood.iconSrc}.png"
alt={mood.text}
apps/website/src/lib/features/tools/progress/report.svelte
+24 -25
View File
@@ -30,13 +30,15 @@
nodeStore.set(node);
});
let rootBgImage = $derived(`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
$htmlBody.background || 'blue_tetiary_background'
}.webp`);
let rootBgImage = $derived(
`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
$htmlBody.background || 'blue_tetiary_background'
}.webp`
);
</script>
<div
class="h-full min-h-[500px] max-h-[500px] md:h-[60vh] w-full border relative flex items-center justify-center"
class="relative flex h-full max-h-[500px] min-h-[500px] w-full items-center justify-center border md:h-[60vh]"
style={`font-family: "Space Grotesk", sans-serif; background-image: url('${rootBgImage}'); background-size: cover; background-repeat: no-repeat`}
bind:this={node}
>
@@ -46,7 +48,7 @@
<button
type="button"
onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
class="absolute top-4 right-4 p-1.5 rounded-full hover:scale-90 transition-all duration-300 bg-white"
class="absolute right-4 top-4 rounded-full bg-white p-1.5 transition-all duration-300 hover:scale-90"
>
<img src="/free-tools/progress-report/close-icon.svg" alt="" class="" />
</button>
@@ -54,7 +56,7 @@
<button
type="button"
onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
class="absolute top-4 right-4 w-7 hover:scale-90 transition-all duration-300"
class="absolute right-4 top-4 w-7 transition-all duration-300 hover:scale-90"
>
<img src="/free-tools/progress-report/full-screen-icon.svg" alt="" class="" />
</button>
@@ -64,34 +66,31 @@
<div class="mt-20">
<!-- using both md & lg for the width here because the lib doesn't consider md to be medium screens and above, using md alone will make the output break on desktop so i had to also specify for large screens -->
<div
class="rounded-lg shadow-md bg-white border-4 border-gray-100 z-20 mx-auto flex justify-center items-center w-[16rem] h-[16rem]"
class="z-20 mx-auto flex h-[16rem] w-[16rem] items-center justify-center rounded-lg border-4 border-gray-100 bg-white shadow-md"
>
<div class="relative w-full h-full flex flex-col justify-center gap-3 items-center px-2">
<div class="relative flex h-full w-full flex-col items-center justify-center gap-3 px-2">
<!-- avatar -->
<img
src={`https://assets.cdn.clsrio.com/progress-report/avatar/${
$htmlBody.avatar || 'avatar_a'
}.svg`}
src={`https://assets.cdn.clsrio.com/progress-report/avatar/${$htmlBody.avatar || 'avatar_a'}.svg`}
alt=""
class="absolute top-0 w-[25%] h-[25%] ml-2 -mt-[2.2rem]"
class="absolute top-0 -mt-[2.2rem] ml-2 h-[25%] w-[25%]"
/>
<!-- mood -->
{#if $htmlBody.name || $htmlBody.mood.text}
<div
style="background-color: {$backgroundColor}; color: white; display: flex;"
class="px-3 py-0.5 border border-[#EDEDED] rounded-2xl mt-6 md:mt-3 font-semibold text-[10px] md:text-[0.7rem] flex items-center justify-between"
class="mt-6 flex items-center justify-between rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[10px] font-semibold md:mt-3 md:text-[0.7rem]"
>
<span class="mr-0.5">{$htmlBody.name}</span>
{#if $htmlBody.mood.text}
<span class="flex gap-1 items-center">
<p class="font-semibold text-[10px] md:text-[0.7rem]">
<span class="flex items-center gap-1">
<p class="text-[10px] font-semibold md:text-[0.7rem]">
is {$htmlBody.mood.text}
</p>
<img
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood
.iconSrc}.png"
src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood.iconSrc}.png"
alt={$htmlBody.mood.text}
class="w-3"
/>
@@ -101,7 +100,7 @@
{:else}
<p
style="background-color: {$backgroundColor}"
class="px-3 py-0.5 border border-[#EDEDED] text-white rounded-2xl mt-3 font-medium text-[9px]"
class="mt-3 rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[9px] font-medium text-white"
>
Add your name
</p>
@@ -109,27 +108,27 @@
<!-- learning -->
<span
class="w-full md:my-2 p-1 overflow-hidden text-[0.7rem] md:text-[0.8rem] font-normal text-center outline-none h-[10vh] md:h-[12vh]"
class="h-[10vh] w-full overflow-hidden p-1 text-center text-[0.7rem] font-normal outline-none md:my-2 md:h-[12vh] md:text-[0.8rem]"
>
{$htmlBody.learning}
</span>
<!-- progress -->
<div class="flex flex-col justify-center items-center mb-2 md:mb-0">
<div class="border border-[#d9e0f5] w-full h-4 rounded-full p-0.5 bg-[#f1f6ff]">
<div class="mb-2 flex flex-col items-center justify-center md:mb-0">
<div class="h-4 w-full rounded-full border border-[#d9e0f5] bg-[#f1f6ff] p-0.5">
<div
class="progress-range rounded-full w-full h-full"
class="progress-range h-full w-full rounded-full"
style="background: {$backgroundColor}; width: {$htmlBody.progress}%"
></div>
></div>
</div>
<p class="text-[12px] font-semibold mt-1">Progress Achieved: {$htmlBody.progress}%</p>
<p class="mt-1 text-[12px] font-semibold">Progress Achieved: {$htmlBody.progress}%</p>
</div>
</div>
</div>
<div
style="display: flex;"
class="border mt-20 bottom-5 w-[50%] mx-auto flex gap-1 items-center justify-center bg-white rounded-md px-2 py-1"
class="bottom-5 mx-auto mt-20 flex w-[50%] items-center justify-center gap-1 rounded-md border bg-white px-2 py-1"
>
<img src="/logo-192.png" alt="classroomio logo" class="w-4" />
<p class="text-[10px] font-bold">ClassroomIO.com</p>
apps/website/src/lib/features/tools/stopwatch/timer.svelte
+6 -9
View File
@@ -29,29 +29,26 @@
<div transition:fly={{ y: 100, delay: 0, easing: sineInOut }}>
<div class="px-6 pt-8 text-center">
<button
type="button"
onclick={resetTimer}
class="text-[10px] text-[#656565] font-semibold uppercase underline"
<button type="button" onclick={resetTimer} class="text-[10px] font-semibold uppercase text-[#656565] underline"
>set timer for another activity</button
>
<button
class="border mx-auto mt-7 mb-3 px-2 py-0.5 rounded-full flex items-center gap-1 text-sm text-[#656565] font-semibold border-[#C2D2FF] bg-[#DCE5FF]"
class="mx-auto mb-3 mt-7 flex items-center gap-1 rounded-full border border-[#C2D2FF] bg-[#DCE5FF] px-2 py-0.5 text-sm font-semibold text-[#656565]"
>
{activityName}:
<span class="text-[#0233BD]">{formattedTime}</span>
</button>
<!-- countdown -->
<h1 class="text-[#040F2D] mb-14 text-6xl font-bold">{displayTime}</h1>
<h1 class="mb-14 text-6xl font-bold text-[#040F2D]">{displayTime}</h1>
</div>
<div class="flex">
<button
type="button"
onclick={toggleSound}
class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-bl-md hover:bg-[#F1F6FF] transition-all duration-500"
class="flex w-[34%] flex-col items-center gap-1 rounded-bl-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
>
{#if soundOn}
<img src="/free-tools/stopwatch/speaker-icon.svg" alt="" class="w-7 md:w-12" />
@@ -63,7 +60,7 @@
<button
type="button"
onclick={toggleTimer}
class="bg-[#0F62FE] text-white w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10"
class="flex w-[34%] flex-col items-center gap-1 bg-[#0F62FE] py-5 text-[10px] uppercase text-white md:py-10"
>
{#if isPaused}
<img src="/free-tools/stopwatch/play-icon.svg" alt="" class="w-7 md:w-12" />
@@ -75,7 +72,7 @@
<button
type="button"
onclick={restartTimer}
class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-br-md hover:bg-[#F1F6FF] transition-all duration-500"
class="flex w-[34%] flex-col items-center gap-1 rounded-br-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
>
<img src="/free-tools/stopwatch/reset-icon.svg" alt="" class="w-7 md:w-12" />
restart</button
apps/website/src/lib/features/tools/tic-tac-toe/board.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
<tr>
{#each row as column, columnIndex}
<td
class="cursor-pointer text-center h-25 w-[1.5em] border-r-10 border-b-10 border-white last:border-r-0"
class="h-25 border-r-10 border-b-10 w-[1.5em] cursor-pointer border-white text-center last:border-r-0"
onclick={() => {
game = game.click(rowIndex, columnIndex);
}}
apps/website/src/lib/features/tools/tic-tac-toe/board.ts
+1 -5
View File
@@ -79,11 +79,7 @@ function getWinner(board: string[][]) {
// check columns
for (let column = 0; column < 3; column++) {
if (
board[0][column] === board[1][column] &&
board[0][column] === board[2][column] &&
board[0][column]
) {
if (board[0][column] === board[1][column] && board[0][column] === board[2][column] && board[0][column]) {
return { symbol: board[0][column], direction: 'vertical', column };
}
}
apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte
+3 -5
View File
@@ -29,13 +29,11 @@
{#if winner}
<div
transition:fade={{ delay: 500, duration: 2 }}
class="winning-line absolute bg-[#ffc300] z-[100]"
class="winning-line absolute z-[100] bg-[#ffc300]"
class:horizontal-line={winner.direction === 'horizontal'}
class:vertical-line={winner.direction === 'vertical'}
class:diagonal-line-1={winner.direction === 'diagonal' &&
winner.diagonal === 'top-left-to-bottom-right'}
class:diagonal-line-2={winner.direction === 'diagonal' &&
winner.diagonal === 'top-right-to-bottom-left'}
class:diagonal-line-1={winner.direction === 'diagonal' && winner.diagonal === 'top-left-to-bottom-right'}
class:diagonal-line-2={winner.direction === 'diagonal' && winner.diagonal === 'top-right-to-bottom-left'}
></div>
{/if}