improved course overview page

jakmeier · Sep 8, 2024 · 8109baf · 8109baf
1 parent 8faaee3
commit 8109baf
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 61 deletions.
diff --git a/bouncy_frontend/src/routes/HomeFeed_a.svelte b/bouncy_frontend/src/routes/HomeFeed_a.svelte
@@ -88,18 +88,7 @@
 </div>
 
 <div class="dark-stripe">
-  <div
-    class="dancers"
-    style="grid-template-columns: repeat({bigNumDancers}, 1fr);"
-  >
-    {#each { length: bigNumDancers } as _}
-      <DanceAnimation
-        dance={dance(2)}
-        style={BOLD_MAIN_THEME_COLORING}
-        showOverflow
-      />
-    {/each}
-  </div>
+  <div style="height: 40px;"></div>
 </div>
 
 <div class="light-box">
@@ -116,9 +105,9 @@
 <div class="dark-stripe">
   <div
     class="dancers"
-    style="grid-template-columns: repeat({midNumDancers}, 1fr);"
+    style="grid-template-columns: repeat({bigNumDancers}, 1fr);"
   >
-    {#each { length: midNumDancers } as _}
+    {#each { length: bigNumDancers } as _}
       <DanceAnimation
         dance={dance(3)}
         style={BOLD_MAIN_THEME_COLORING}

diff --git a/bouncy_frontend/src/routes/courses/[courseId]/+page.svelte b/bouncy_frontend/src/routes/courses/[courseId]/+page.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores';
   import { t } from '$lib/i18n.js';
   import Header from '$lib/components/ui/Header.svelte';
-  import { getContext } from 'svelte';
+  import { getContext, onDestroy, onMount } from 'svelte';
   import Step from '../../collection/Step.svelte';
   import { counter } from '$lib/timer';
   import { dev } from '$lib/stores/FeatureSelection.js';
@@ -21,69 +21,84 @@
   $: courseProgress = $user.userLessonProgress[id];
 </script>
 
-<Header title={$t('courses.course-overview.title')} />
-
-<h3>{course.name}</h3>
-
-<Step {step} poseIndex={$i} {animationTime} size={100} borderWidth={0}></Step>
+<Header title={course.name} />
 
 <p>{course.explanation}</p>
 
 <div class="ol">
   {#each course.lessons as lesson, index}
-    <div class="index">{index + 1}</div>
-    <div>
-      {#if lesson.parts.length > 0}
-        <Step
-          step={lesson.parts[lesson.parts.length - 1].step}
-          poseIndex={$i}
-          {animationTime}
-          size={75}
-          borderWidth={1}
-          lineWidth={2.5}
-        ></Step>
-      {/if}
-      <div class="rank">
-        {#if courseProgress && courseProgress.lessons}
-          {#if courseProgress.lessons[index] > 0}
-            <span class="material-symbols-outlined done"> verified </span>
-          {/if}
+    <div class="course">
+      <div>
+        {$t('courses.lesson.title')}
+        {index + 1}
+      </div>
+      <div class="step">
+        {#if lesson.parts.length > 0}
+          <Step
+            step={lesson.parts[lesson.parts.length - 1].step}
+            poseIndex={$i}
+            {animationTime}
+            size={175}
+            borderWidth={0}
+            lineWidth={8}
+          ></Step>
+        {/if}
+        <div class="rank">
+          {#if courseProgress && courseProgress.lessons}
+            {#if courseProgress.lessons[index] > 0}
+              <span class="material-symbols-outlined done"> verified </span>
+            {/if}
 
-          {#each Array(Math.max(0, courseProgress.lessons[index] - 1 || 0)) as _}
-            <span class="material-symbols-outlined"> star </span>
-          {/each}
+            {#each Array(Math.max(0, courseProgress.lessons[index] - 1 || 0)) as _}
+              <span class="material-symbols-outlined"> star </span>
+            {/each}
+          {/if}
+        </div>
+      </div>
+      <div class="link">
+        <a href="./exercise/{index}">
+          <button class="light">
+            {$t('courses.course-overview.start-lesson')}
+          </button>
+        </a>
+        {#if $dev}
+          <a href="./{index}">
+            <button class="light"> text explanation (WIP) </button>
+          </a>
         {/if}
       </div>
     </div>
-    <div class="li">
-      {lesson.name}
-      <div class="note"></div>
-      <a href="./exercise/{index}">
-        {$t('courses.course-overview.start-lesson')}
-      </a>
-      {#if $dev}
-        <a href="./{index}">explanation (WIP) </a>
-      {/if}
-    </div>
   {/each}
 </div>
 
 <style>
-  .note {
-    font-style: italic;
+  p {
+    text-align: center;
+    box-shadow: 0 0 4px 2px var(--theme-main);
+    padding: 15px;
+    border-radius: 20px;
+    background-color: var(--theme-neutral-light);
   }
   .ol {
     display: grid;
     margin: 15px 10px 10px;
-    grid-template-columns: min-content 75px auto;
     gap: 10px;
-    align-items: center;
+    justify-content: center;
   }
-  .li {
-    padding: 10px;
+  .course {
+    box-shadow: 0 0 4px 2px var(--theme-main);
+    background-color: var(--theme-neutral-light);
+    padding: 5px 10px;
+    max-width: 400px;
+    font-size: 30px;
+    margin: 10px;
   }
-  .index {
+  .step {
+    margin: 0 15px;
+  }
+  .link {
     padding: 10px;
+    text-align: center;
   }
   .rank {
     display: flex;
@@ -93,4 +108,10 @@
   .done {
     color: var(--theme-main);
   }
+  span {
+    font-size: 50px;
+  }
+  button {
+    margin: 10px;
+  }
 </style>
diff --git a/bouncy_frontend/static/courses/000-rm-basics.ron b/bouncy_frontend/static/courses/000-rm-basics.ron
@@ -126,10 +126,10 @@
       name: "Kick forward",
       id: "kick-forward",
       keyframes: [
-        (pose: "kick-right", orientation: Right),
-        (pose: "left-slightly-up", orientation: Right),
-        (pose: "kick-left", orientation: Right),
-        (pose: "right-slightly-up", orientation: Right),
+        (pose: "kick-right", orientation: Right, jump_height: 0.05),
+        (pose: "left-slightly-up", orientation: Right, jump_height: 0.05),
+        (pose: "kick-left", orientation: Right, jump_height: 0.05),
+        (pose: "right-slightly-up", orientation: Right, jump_height: 0.05),
       ],
     ),
     (