First iteration of pepper animation

TobiasFG · Sep 5, 2024 · bc1de01 · bc1de01
1 parent 052aa26
commit bc1de01
Show file tree

Hide file tree

Showing 21 changed files with 566 additions and 99 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -44,7 +44,10 @@
     "animejs": "^3.2.2",
     "flowbite": "^2.5.1",
     "flowbite-svelte": "^0.46.16",
-    "luxon": "^3.5.0"
+    "luxon": "^3.5.0",
+    "@theatre/core": "^0.7.2",
+    "@theatre/r3f": "^0.7.2",
+    "@theatre/studio": "^0.7.2"
   },
   "trustedDependencies": [
     "@sveltejs/kit",

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
@@ -1,14 +1,14 @@
 <script>
-  import { base } from '$app/paths'
   import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte'
   import logo from '$lib/images/logo.png'
+  import { LinkHandler } from '$lib/utility/LinkHandler'
 </script>
 
 <div
   class="mx-auto flex h-16 w-full flex-wrap items-center justify-between divide-gray-100 border-b border-gray-200 px-2 py-2.5 sm:px-4 dark:divide-gray-700 dark:border-gray-700"
 >
   <a
-    href={base}
+    href={LinkHandler('/')}
     class="flex flex-row justify-start"
   >
     <img

diff --git a/src/lib/components/Player.svelte b/src/lib/components/Player.svelte
@@ -1,44 +1,70 @@
 <script lang="ts">
   import { PlayerMapping } from '$lib/mappings/PlayerMappings'
-  import { Badge, Tooltip } from 'flowbite-svelte'
+  import { Tooltip } from 'flowbite-svelte'
 
-  export let type: keyof typeof PlayerMapping
+  export let type: keyof typeof PlayerMapping = 'P'
   export let team: 1 | 2 | 3 | 4 | null = null
+  export let size: number = 400
+  export let x: number = 0
+  export let y: number = 0
+  export let opacity: number = 1
+  export let scale: number = 1
+
+  const uniqueId = crypto.randomUUID()
 </script>
 
-<div
-  class=" relative flex h-12 w-12 cursor-pointer select-none items-center justify-center rounded-full bg-gray-600 text-white outline outline-2
-  {team === 1 ? 'outline-red-400' : ''}
-  {team === 2 ? 'outline-green-400' : ''}
-  {team === 3 ? 'outline-teal-400' : ''}
-  {team === 4 ? 'outline-violet-400' : ''}
-  {team === null ? 'outline-gray-600' : ''}
-  {type === 'C' ? ' bg-sky-400 !outline-sky-400' : ''}
-  "
->
-  {#if team !== null}
-    <Badge
-      rounded
-      class="absolute -right-2 -top-2 h-6 w-6 p-0 font-black text-white dark:text-white
-      {team === 1 ? '!bg-red-400' : ''}
-      {team === 2 ? '!bg-green-400' : ''}
-      {team === 3 ? '!bg-teal-400' : ''}
-      {team === 4 ? '!bg-violet-400' : ''}
-      ">{team}</Badge
-    >
-  {/if}
-  <div class="flex flex-col items-center">
-    <p class="text-center font-black leading-3">
-      {type}
-    </p>
-    <!-- {#if team !== null}
-			<p class="text-center text-xs font-black leading-3 text-black">{team}</p>
-		{/if} -->
-  </div>
-</div>
+<!-- prettier-ignore-start -->
+<svg {...$$restProps} x={x} y={y} opacity={opacity} scale={scale} width={size} height={size} viewBox="0 0 1200 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id={"Player-"+uniqueId} clip-path="url(#{"clip0_0_1-"+uniqueId})">
+    <!-- Player Circle -->
+    <circle id={"PlayerCircle-"+uniqueId} class="
+    fill-gray-600 stroke-gray-600
+    {team === 1 ? 'stroke-red-400' : ''}
+    {team === 2 ? 'stroke-green-400' : ''}
+    {team === 3 ? 'stroke-teal-400' : ''}
+    {team === 4 ? 'stroke-violet-400' : ''}
+    {team === null ? 'stroke-gray-600' : ''}
+    {type === 'C' ? ' fill-sky-400 stroke-sky-400' : ''}
+    " cx="500" cy="700" r="490" stroke-width="70" clip-path="url(#{"PlayerCircleClip-"+uniqueId})"/>
+
+    <!-- Player Type Text (Centered in the Player Circle) -->
+    <text id={"PlayerType-"+uniqueId} class="fill-white select-none" x="500" y="740" text-anchor="middle" dominant-baseline="middle" font-family="Inter" font-size="450" font-weight="bold" letter-spacing="0em">
+      <tspan>{type}</tspan>
+    </text>
+
+    {#if team !== null}
+      <!-- Team Number Circle -->
+      <circle id={"TeamNumberCircle-"+uniqueId} class="
+        {team === 1 ? 'fill-red-400' : ''}
+        {team === 2 ? 'fill-green-400' : ''}
+        {team === 3 ? 'fill-teal-400' : ''}
+        {team === 4 ? 'fill-violet-400' : ''}
+      " cx="974.5" cy="225.5" r="225.5" />
+
+      <!-- Team Number Text (Centered in the Team Circle) -->
+      <text id={"TeamNumber-"+uniqueId} class="fill-white select-none" x="974.5" y="245.5" text-anchor="middle" dominant-baseline="middle" font-family="Inter" font-size="300" font-weight="bold" letter-spacing="0em">
+        <tspan>{team}</tspan>
+      </text>
+    {/if}
+    <rect class="cursor-pointer fill-transparent" width="1200" height="1200"/>
+  </g>
+  <defs>
+    <clipPath id={"PlayerCircleClip-"+uniqueId}>
+		  <use xlink:href={"#PlayerCircle-"+uniqueId}/>
+	  </clipPath>
+    <clipPath id={"clip0_0_1-"+uniqueId}>
+      <rect width="1200" height="1200" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
+<!-- prettier-ignore-end -->
 <Tooltip
-  >{PlayerMapping[type]}
+  class="z-50"
+  reference={'#PlayerCircle-' + uniqueId}
+  triggeredBy={'#Player-' + uniqueId}
+>
+  {PlayerMapping[type]}
   {#if team !== null}
     team {team}
-  {/if}</Tooltip
->
+  {/if}
+</Tooltip>
diff --git a/src/lib/components/PlayerDescriptionCard.svelte b/src/lib/components/PlayerDescriptionCard.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { base } from '$app/paths'
   import { PlayerMapping } from '$lib/mappings/PlayerMappings'
+  import { LinkHandler } from '$lib/utility/LinkHandler'
   import Player from './Player.svelte'
-  import PlayerEtc from './PlayerEtc.svelte'
 
   export let type: keyof typeof PlayerMapping
 
@@ -17,7 +16,7 @@
     hovered = false
   }}
   class="rounded-md border border-transparent p-4 transition-all duration-500 ease-in-out hover:scale-[1.02] hover:border-sky-400"
-  href={base}
+  href={LinkHandler('/')}
 >
   <p class="mb-2 text-lg font-medium">{PlayerMapping[type]}</p>
 
@@ -27,7 +26,10 @@
 
   <div class="mb-6 border-sky-400 pl-4">
     <p class="mb-2 text-sm">Icon</p>
-    <Player {type} />
+    <Player
+      {type}
+      size={60}
+    />
   </div>
 
   <div class="mb-6 border-sky-400 pl-4">
@@ -37,12 +39,17 @@
         <Player
           {type}
           team={1}
+          size={60}
         />
         <Player
           {type}
           team={2}
+          size={60}
+        />
+        <Player
+          type="..."
+          size={60}
         />
-        <PlayerEtc />
       </div>
     {/if}
   </div>

diff --git a/src/lib/components/PlayerEtc.svelte b/src/lib/components/PlayerEtc.svelte
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -3,59 +3,59 @@
   import SidebarCredit from './sidebar/SidebarCredit.svelte'
   import SidebarItem from './sidebar/SidebarItem.svelte'
   import SidebarItemDropdown from './sidebar/SidebarItemDropdown.svelte'
-  import TagSkill from './TagSkill.svelte'
-  import TagSize from './TagSize.svelte'
-  import { base } from '$app/paths'
+  import { LinkHandler } from '$lib/utility/LinkHandler'
+  import TagSkill from './tags/TagSkill.svelte'
+  import TagSize from './tags/TagSize.svelte'
 </script>
 
 <div
   class=" flex h-full min-w-52 max-w-52 flex-col justify-between overflow-y-auto border-r border-gray-200 px-3 py-4 dark:border-gray-700"
 >
   <div class="flex w-full flex-col gap-1">
     <SidebarItem
-      href={base}
+      link={LinkHandler('/')}
       text="Home"
     />
     <SidebarItemDropdown text="Roles">
       <svelte:fragment slot="DropdownSidebarItems">
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Setter"
         />
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Attacker"
         />
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Middle"
         />
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Opposite"
         />
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Libero"
         />
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Coach"
         />
       </svelte:fragment>
     </SidebarItemDropdown>
     <SidebarItem
-      href={base}
+      link={LinkHandler('/')}
       text="5:1 Rotations"
     />
     <SidebarItem
-      href="{base}/court"
+      link={LinkHandler('/court')}
       text="The court"
     />
     <SidebarItemDropdown text="Pepper">
       <svelte:fragment slot="DropdownSidebarItems">
         <SidebarItem
-          href={base}
+          link={LinkHandler('/pepper/traditional')}
           text="Traditional"
         >
           <svelte:fragment slot="tags">
@@ -64,19 +64,19 @@
           </svelte:fragment>
         </SidebarItem>
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Running"
         >
           <svelte:fragment slot="tags">
             <TagSkill difficulty="medium" />
             <TagSize
               min={3}
-              canVary
+              max={5}
             />
           </svelte:fragment>
         </SidebarItem>
         <SidebarItem
-          href={base}
+          link={LinkHandler('/')}
           text="Focused"
         >
           <svelte:fragment slot="tags">

diff --git a/src/lib/components/Volleyball.svelte b/src/lib/components/Volleyball.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let size: number = 100
+  export let x: number = 0
+  export let y: number = 0
+  export let opacity: number = 1
+  export let scale: number = 1
+</script>
+
+<!-- prettier-ignore-start -->
+<svg {...$$restProps} width={size} height={size} x={x} y={y} opacity={opacity} scale={scale} viewBox="0 0 2419 2419" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="2419" height="2419"/>
+  <g id="Volleyball">
+    <circle id="Yellow" cx="1209.5" cy="1209.5" r="1209.5" fill="#FFD742"/>
+    <path id="Blue" d="M327.403 581.307L337.24 619.416L360.604 657.524L404.872 710.384L484.8 765.703L574.566 812.416L668.02 848.066L743.03 861.588L816.81 867.735H960.681L1100.86 857.9L1289 834.544L1389.84 821.021H1499.28L1624.7 841.919L1758.74 882.486L1889.08 947.639L2009.59 1028.77L2060 1073.03L2106.73 1122.2L2152.23 1178.75L2191.58 1240.21L2212.48 1279.55L2229.7 1320.12L2271.51 1290.61L2314.55 1238.98L2346.52 1176.29L2358.81 1130.81L2367.42 1071.8V989.436L2360.04 926.741L2351.44 871.423L2336.68 813.645L2299.79 703.008L2324.38 759.556L2346.52 819.792L2357.58 855.442L2377.26 926.741L2390.78 989.436L2401.85 1071.8L2408 1149.25V1226.69L2404.31 1301.68L2395.7 1376.67L2380.95 1450.42L2352.67 1531.56L2339.14 1589.34L2321.92 1644.65L2271.51 1758.98L2224.78 1837.65L2185.43 1897.89L2155.92 1936L2100.58 2002.38L2047.71 2057.7L1992.37 2109.33L1908.76 2175.71L1862.03 2207.67L1811.61 2238.41L1763.65 2264.22L1732.91 2280.2L1696.02 2297.41L1633.31 2322L1686.19 2288.81L1715.7 2270.37L1746.44 2249.47L1790.71 2215.05L1838.66 2175.71L1887.85 2129L1938.27 2077.37L1992.37 2018.36L2036.64 1960.59L2087.06 1897.89L2109.19 1865.93L2127.64 1831.51L2123.95 1815.53L2116.57 1795.86L2106.73 1772.5L2079.68 1735.62L2044.02 1702.43L1980.08 1658.18L1898.92 1622.53L1811.61 1600.4L1742.75 1585.65L1675.12 1578.27H1536.17L1392.29 1593.02L1258.26 1612.69L1180.79 1622.53L1100.86 1626.21L1016.02 1624.99L943.466 1615.15L864.767 1599.17L754.097 1565.98L685.236 1537.7L639.738 1515.58L563.499 1472.55L488.489 1420.92L439.302 1382.81L374.13 1316.43L312.647 1242.67L265.919 1173.83L230.259 1103.76L173.694 1143.1L131.885 1187.35L96.2251 1242.67L74.0911 1295.53L61.7944 1352.08L55.646 1408.63V1475.01L61.7944 1535.25L77.7801 1615.15L56.8757 1554.92L40.89 1503.28L32.2824 1465.18L19.9857 1400.02L10.1483 1325.04L4 1252.51V1143.1L13.8373 1028.77L26.134 998.041L38.4307 964.85L45.8087 951.327L54.4164 937.805L66.713 919.366L74.0911 898.467L81.4691 872.652L85.1581 845.607L104.833 779.225L120.818 728.824L140.493 679.651L183.531 583.766L220.421 508.778L274.527 436.249L351.996 350.198L435.613 273.981L500.786 224.809L563.499 181.784L647.116 133.841L712.289 103.108L763.935 80.9809L806.973 65L782.38 78.5223L739.341 108.026L687.695 151.051L647.116 185.472L573.336 256.771L504.475 329.3L440.532 409.205L375.36 500.173L327.403 581.307Z" fill="#222E94"/>
+  </g>
+</svg>
+<!-- prettier-ignore-end -->
+
+<style>
+</style>
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-  import { base } from '$app/paths'
   import { page } from '$app/stores'
   $: activeUrl = $page.url.pathname
-  export let href: string = base
+  export let link: string
   export let text: string
 </script>
 
 <a
   class=" flex flex-row justify-between rounded-md px-4 py-1.5 transition-all first-letter:uppercase hover:bg-gray-200/50 dark:hover:bg-gray-700
-  {activeUrl === href ? 'bg-sky-400 text-white hover:bg-sky-400/80' : ''}
+  {activeUrl === link ? 'bg-sky-400 text-white hover:bg-sky-400/80' : ''}
   "
-  {href}
+  href={link}
 >
   <p>{text}</p>
 

diff --git a/src/lib/components/sidebar/SidebarItemDropdown.svelte b/src/lib/components/sidebar/SidebarItemDropdown.svelte
@@ -21,7 +21,7 @@
 
 {#if open}
   <div
-    class="*:*:ml-2"
+    class="flex flex-col gap-1 *:ml-2"
     transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}
   >
     <slot name="DropdownSidebarItems"></slot>

diff --git a/src/lib/components/sidebar/SidebarNotification.svelte b/src/lib/components/sidebar/SidebarNotification.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
-  import { base } from '$app/paths'
+  import { LinkHandler } from '$lib/utility/LinkHandler'
   import { Button } from 'flowbite-svelte'
 </script>
 
 <div
   class=" my-1.5 rounded px-2.5 py-2 shadow outline outline-1 outline-red-400"
 >
-  <p class="mb-3 font-black">Beta 0.3</p>
+  <div class="mb-3 flex flex-row items-baseline justify-between">
+    <p class="font-black">Beta 0.3</p>
+    <Button
+      href={LinkHandler('/changelog')}
+      class="inline-block rounded bg-white px-2 py-1 text-xs text-black hover:bg-sky-400/80 hover:text-white"
+      >Changelog</Button
+    >
+  </div>
   <p class="mb-3 text-sm">
     Volleyball drills is currently in beta. The website might contain errors or
     incomplete content for the time being.
   </p>
-  <Button
-    href="{base}/changelog"
-    class="inline-block rounded px-1.5 py-0.5">Changelog</Button
-  >
 </div>
 
 <style>

diff --git a/src/lib/components/TagEquipment.svelte → src/lib/components/tags/TagEquipment.svelte b/src/lib/components/TagEquipment.svelte → src/lib/components/tags/TagEquipment.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { Tooltip } from 'flowbite-svelte'
+
   export let size: 'small' | 'large' = 'small'
   export let name: string | null = null
 </script>
@@ -13,3 +15,10 @@
     <p>{name}</p>
   {/if}
 </div>
+<Tooltip class="max-w-52">
+  {#if name === null}
+    Equipment needed.
+  {:else}
+    {name} needed.
+  {/if}
+</Tooltip>