Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: opacity show

Browse source
This commit is contained in:
Théo 2023-09-13 17:24:50 +02:00
parent 7d499e73ba
commit fce8817541
2 changed files with 58 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Chapter.svelte
View file

@ -11,8 +11,8 @@
class={cn( class={cn(
'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ', 'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
{ {
'cursor-not-allowed': !chapter.show,
'hover:bg-primary-600': chapter.show, 'hover:bg-primary-600': chapter.show,
'opacity-50': !chapter.show,
} }
)} )}
> >

33
src/lib/components/Puzzle.svelte
View file

@ -13,16 +13,18 @@
<li <li
class={cn( class={cn(
'font-code group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150 hover:bg-primary-600', 'font-code group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
{ {
'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'), 'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'), 'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'), 'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
'border-highlight-primary': !puzzle.tags?.length 'border-highlight-primary': !puzzle.tags?.length,
// 'cursor-not-allowed': !isStarted(chapter) 'hover:bg-primary-600': puzzle.show,
'opacity-50': !puzzle.show
} }
)} )}
> >
{#if puzzle.show}
<a <a
class="flex h-full w-full items-center gap-4 p-4" class="flex h-full w-full items-center gap-4 p-4"
href="/dashboard/chapters/{chapterId}/puzzle/{puzzle.id}" href="/dashboard/chapters/{chapterId}/puzzle/{puzzle.id}"
@ -52,4 +54,29 @@
<ChevronRight /> <ChevronRight />
</span> </span>
</a> </a>
{:else}
<span class="flex h-full w-full items-center gap-4 p-4">
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
<h2 class="text-base font-semibold">
{puzzle.name}
<span class="text-sm text-highlight-secondary">
({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
</span>
</h2>
<div class="flex items-center gap-x-6">
{#if puzzle.tags?.length}
<div class="flex gap-x-2 text-sm">
{#each puzzle.tags as tag}
<span
class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
>
{tag.name}
</span>
{/each}
</div>
{/if}
</div>
</div>
</span>
{/if}
</li> </li>