Add Level 3 content: Space Invaders + More! (#7325)

* Add spot checker * Remove unused code (#7327) * Remove main functions * Add function use detectors * Finish off exercise * Add laser * Fix nested ands * Progress * Progress * Add new images * Add more instructions * Finish space invaders * Add digital clock exercise * Add if and rock-paper-scissors * Add rock paper sciissors * Improve exercises * Add instructions * Add more rbs images * Add rps description * Overflow-auto pre tag in instructions (#7345) * Parse md of errors * Improve error handling * Add rainbow ball * Improve maze * Add more interesting looking mazes * Don't wait for timeline completion if the timeline doesn't exist (#7346) * Show last test if all tests pass (#7347) * Fix tests * Add annotations for if statements * Update descriptions --------- Co-authored-by: Aron Demeter <[email protected]> Co-authored-by: dem4ron <[email protected]>
exercism · Jan 20, 2025 · 5de55da · 5de55da
1 parent 6ecc928
commit 5de55da
Show file tree

Hide file tree

Showing 137 changed files with 2,969 additions and 246 deletions.
diff --git a/app/css/bootcamp/components/completed-bar.css b/app/css/bootcamp/components/completed-bar.css
@@ -13,7 +13,7 @@
         @apply text-18 leading-150 font-semibold text-gray-900;
     }
     .stat {
-        @apply font-semibold text-gray-600;
+        @apply font-semibold text-darkSuccessGreen;
     }
 
     c-prominent-link {

diff --git a/app/css/bootcamp/components/editor-information-tooltip.css b/app/css/bootcamp/components/editor-information-tooltip.css
@@ -59,6 +59,12 @@
             @apply pt-10 px-20 pb-12;
             @apply relative z-tooltip-content bg-white;
             @apply rounded-b-8;
+            & > *:first-child {
+                margin-top: 0;
+            }
+            & > *:last-child {
+                margin-bottom: 0;
+            }
         }
         .tooltip-arrow {
             border-right-color: rgb(239 68 68);

diff --git a/app/css/bootcamp/components/exercise-widget.css b/app/css/bootcamp/components/exercise-widget.css
@@ -3,25 +3,6 @@
     @apply flex flex-col items-stretch;
     @apply bg-white;
 
-    &.available,
-    &.in_progress {
-        @apply shadow-base;
-
-        .tag {
-            @apply border-gray-300;
-            background-image: url("icons/bootcamp-available.svg");
-        }
-    }
-    &.locked {
-        @apply bg-gray-200;
-        @apply opacity-[0.5] cursor-not-allowed;
-
-        .tag {
-            @apply border-gray-400;
-            background-image: url("icons/lock.svg");
-        }
-    }
-
     img {
         @apply w-[80px] h-[80px] mr-12;
     }
@@ -51,8 +32,29 @@
 
         @apply ml-auto;
         @apply border-1 rounded-circle;
+    }
 
-        &.completed {
+    &.available,
+    &.in_progress {
+        @apply shadow-base;
+
+        .tag {
+            @apply border-gray-300;
+            background-image: url("icons/bootcamp-available.svg");
+        }
+    }
+    &.locked {
+        @apply bg-gray-200;
+        @apply opacity-[0.5] cursor-not-allowed;
+
+        .tag {
+            @apply border-gray-400;
+            background-image: url("icons/lock.svg");
+        }
+    }
+
+    &.completed {
+        .tag {
             background: #e7fdf6;
             border-color: #43b593;
             color: #43b593;

diff --git a/app/css/bootcamp/components/project-widget.css b/app/css/bootcamp/components/project-widget.css
@@ -4,26 +4,6 @@
     @apply bg-white;
     @apply relative;
 
-    &.available {
-        @apply shadow-base;
-
-        .tag {
-            @apply border-gray-300;
-            background-image: url("icons/bootcamp-available.svg");
-        }
-    }
-    &.completed {
-    }
-    &.locked {
-        @apply bg-gray-200;
-        @apply opacity-[0.5] cursor-not-allowed;
-
-        .tag {
-            @apply border-gray-400;
-            background-image: url("icons/lock.svg");
-        }
-    }
-
     img {
         @apply w-[80px] h-[80px] mr-16;
     }
@@ -46,11 +26,33 @@
 
         @apply ml-auto;
         @apply border-1 rounded-circle;
+    }
 
-        &.completed {
+    &.available {
+        @apply shadow-base;
+
+        .tag {
+            @apply border-gray-300;
+            background-image: url("icons/bootcamp-available.svg");
+        }
+    }
+    &.completed {
+        .tag {
             background: #e7fdf6;
             border-color: #43b593;
             color: #43b593;
+            background-image: url("icons/bootcamp-completed-check-circle.svg");
+            background-repeat: no-repeat;
+        }
+    }
+
+    &.locked {
+        @apply bg-gray-200;
+        @apply opacity-[0.5] cursor-not-allowed;
+
+        .tag {
+            @apply border-gray-400;
+            background-image: url("icons/lock.svg");
         }
     }
 }
diff --git a/app/css/bootcamp/components/prose.css b/app/css/bootcamp/components/prose.css
@@ -47,6 +47,7 @@
         code {
             font-size: calc(var(--prose-base-text-size) - 1px);
         }
+        @apply overflow-auto;
     }
     *:not(pre) > code {
         @apply bg-blue-100;

diff --git a/app/css/bootcamp/components/scenario.css b/app/css/bootcamp/components/scenario.css
@@ -15,7 +15,7 @@
                 @apply py-16 px-12;
 
                 h3 {
-                    @apply text-18 leading-140;
+                    @apply text-17 leading-140;
                     @apply mb-12;
                     strong {
                         @apply font-semibold;

diff --git a/app/css/bootcamp/exercises/digital-clock.css b/app/css/bootcamp/exercises/digital-clock.css
@@ -0,0 +1,48 @@
+#bootcamp-solve-exercise-page {
+    .exercise-digital-clock {
+        background-image: url("bootcamp/assets/digital-clock/background.png");
+        background-size: cover;
+        position: relative;
+        container-type: size;
+
+        .time,
+        .meridiem {
+            font-family: "DSDigital";
+            color: #ec1d26;
+            position: absolute;
+            font-weight: bold;
+        }
+        .time {
+            top: 32%;
+            left: 14%;
+            text-align: center;
+            font-size: 26cqw;
+            letter-spacing: 1cqw;
+            @apply grid;
+            grid-template-columns: 3fr 1fr 3fr;
+
+            .hour,
+            .minute {
+                @apply grid grid-cols-2;
+            }
+
+            .h1,
+            .h2,
+            .m1,
+            .m2 {
+                @apply text-right;
+            }
+        }
+        .meridiem {
+            font-size: 8cqw;
+            letter-spacing: 1cqw;
+            right: 10%;
+            &.am {
+                top: 36%;
+            }
+            &.pm {
+                top: 46%;
+            }
+        }
+    }
+}
diff --git a/app/css/bootcamp/exercises/draw.css b/app/css/bootcamp/exercises/draw.css
@@ -1,5 +1,6 @@
 #bootcamp-solve-exercise-page {
-    .exercise-draw {
+    .exercise-draw,
+    .exercise-golf {
         @apply border-1 border-[#efefef] rounded-5;
         @apply bg-white;
         .bg-grid {
@@ -15,3 +16,124 @@
         }
     }
 }
+
+#bootcamp-solve-exercise-page {
+    .exercise-golf {
+        overflow: hidden;
+        .pyro {
+            position: absolute;
+            top: -20%;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        .pyro > .before,
+        .pyro > .after {
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            box-shadow: 0 0 #fff;
+            animation: bang 0.5s ease-out infinite backwards,
+                gravity 0.5s ease-in infinite backwards,
+                position 2.5s linear infinite backwards;
+        }
+
+        .pyro > .after {
+            animation-delay: 1.25s, 1.25s, 1.25s;
+            animation-duration: 1.25s, 1.25s, 6.25s;
+        }
+
+        @keyframes bang {
+            to {
+                box-shadow: -22.8px -0.21px hsl(205, 100%, 50%),
+                    63.07px -245.43px hsl(192, 100%, 50%),
+                    65.32px -185.75px hsl(179, 100%, 50%),
+                    102.49px -2.39px hsl(329, 100%, 50%),
+                    31.87px -27.35px hsl(45, 100%, 50%),
+                    -118.2px -96.67px hsl(161, 100%, 50%),
+                    133.1px -241.29px hsl(335, 100%, 50%),
+                    -119.48px -116.08px hsl(307, 100%, 50%),
+                    19.64px -78.75px hsl(208, 100%, 50%),
+                    -89.42px -210.48px hsl(1, 100%, 50%),
+                    18.92px 15.69px hsl(258, 100%, 50%),
+                    95.55px -41.73px hsl(110, 100%, 50%),
+                    69.81px -137.35px hsl(33, 100%, 50%),
+                    -135.49px -245.52px hsl(280, 100%, 50%),
+                    -134.59px -154.29px hsl(101, 100%, 50%),
+                    104.7px -123.09px hsl(233, 100%, 50%),
+                    -57.68px -155.87px hsl(150, 100%, 50%),
+                    -76.97px -114.88px hsl(268, 100%, 50%),
+                    -92.16px -217.84px hsl(132, 100%, 50%),
+                    -58.75px -150.84px hsl(184, 100%, 50%),
+                    -149.62px -99.51px hsl(111, 100%, 50%),
+                    58.01px 27.91px hsl(40, 100%, 50%),
+                    -132.26px -12.65px hsl(218, 100%, 50%),
+                    -90.31px -182.81px hsl(92, 100%, 50%),
+                    68.37px -236.77px hsl(119, 100%, 50%),
+                    -70.38px -231.64px hsl(214, 100%, 50%),
+                    67.73px -22.6px hsl(191, 100%, 50%),
+                    -51.2px -193.87px hsl(318, 100%, 50%),
+                    107.13px 21.89px hsl(300, 100%, 50%),
+                    83.84px -180.51px hsl(73, 100%, 50%),
+                    122.64px -23.57px hsl(354, 100%, 50%),
+                    88.04px -149.07px hsl(316, 100%, 50%),
+                    94.75px 8.9px hsl(296, 100%, 50%),
+                    104.12px 37.5px hsl(86, 100%, 50%),
+                    -22.38px -211.89px hsl(209, 100%, 50%),
+                    95.01px -140.74px hsl(164, 100%, 50%),
+                    65.33px -155.1px hsl(123, 100%, 50%),
+                    -93.98px -243.33px hsl(315, 100%, 50%),
+                    109.75px -140.47px hsl(308, 100%, 50%),
+                    -0.31px -131.13px hsl(37, 100%, 50%),
+                    16.14px -239.49px hsl(85, 100%, 50%),
+                    -16.31px 30.98px hsl(141, 100%, 50%),
+                    -12.49px -110.72px hsl(200, 100%, 50%),
+                    149.21px -93.92px hsl(200, 100%, 50%),
+                    -75.92px 47.33px hsl(129, 100%, 50%),
+                    20.02px -28.57px hsl(134, 100%, 50%),
+                    147.71px -167.23px hsl(244, 100%, 50%),
+                    -129.99px -178.95px hsl(206, 100%, 50%),
+                    -16.7px -63.95px hsl(304, 100%, 50%),
+                    -134.97px -115.69px hsl(211, 100%, 50%);
+            }
+        }
+
+        @keyframes gravity {
+            to {
+                transform: translateY(200px);
+                opacity: 0;
+            }
+        }
+
+        @keyframes position {
+            0%,
+            19.9% {
+                margin-top: 10%;
+                margin-left: 40%;
+            }
+            20%,
+            39.9% {
+                margin-top: 40%;
+                margin-left: 30%;
+            }
+            40%,
+            59.9% {
+                margin-top: 20%;
+                margin-left: 70%;
+            }
+            60%,
+            79.9% {
+                margin-top: 30%;
+                margin-left: 20%;
+            }
+            80%,
+            99.9% {
+                margin-top: 30%;
+                margin-left: 80%;
+            }
+        }
+    }
+}
diff --git a/app/css/bootcamp/exercises/maze.css b/app/css/bootcamp/exercises/maze.css
@@ -55,16 +55,54 @@
             background-color: white;
             border: 0.5px solid #000;
             &.blocked {
-                background-color: red;
+                background: radial-gradient(
+                        circle,
+                        transparent 20%,
+                        #f9dcdc 20%,
+                        #f9dcdc 80%,
+                        transparent 80%,
+                        transparent
+                    ),
+                    radial-gradient(
+                            circle,
+                            transparent 20%,
+                            #f9dcdc 20%,
+                            #f9dcdc 80%,
+                            transparent 80%,
+                            transparent
+                        )
+                        10px 10px,
+                    linear-gradient(#f74545 0.8px, transparent 0.8px) 0 -0.4px,
+                    linear-gradient(90deg, #f74545 0.8px, #f9dcdc 0.8px) -0.4px 0;
+                background-size: 10px 10px, 10px 10px, 5px 5px, 5px 5px;
             }
             &.start {
-                background-color: lightblue;
+                background-color: #e4e6ff;
             }
             &.target {
-                background-color: lightgreen;
+                background-color: #8effb3;
+                opacity: 1;
+                background-image: radial-gradient(
+                        circle at center center,
+                        #08b600,
+                        #8effb3
+                    ),
+                    repeating-radial-gradient(
+                        circle at center center,
+                        #08b600,
+                        #08b600,
+                        11px,
+                        transparent 22px,
+                        transparent 11px
+                    );
+                background-blend-mode: multiply;
             }
             &.bomb {
-                background-color: purple;
+                @apply grid place-items-center;
+                &:before {
+                    content: "🔥";
+                    font-size: 140%;
+                }
             }
         }