L16 exercises (exercism#7888)

* Add take control

* Add hot zones

* Add controlled snake

* Improve tasks

* Fix stubs

* Add tic-tac-toe

* Add tic-tac-toe

* Use vmin for font

---------

Co-authored-by: dem4ron <[email protected]>

Author: iHiD

.prettierignore

@@ -1,4 +1,5 @@
 *.rb
 *.haml
 stub.html
-stub.js
+stub.js
+stub.css

app/commands/bootcamp/solution/generate_stub.rb

@@ -7,9 +7,19 @@ def call
     exercise.stub(language).gsub(Regexp.new("{{EXERCISE:([-a-z0-9]+)/([-a-z0-9]+)}}")) do
       project_slug = ::Regexp.last_match(1)
       exercise_slug = ::Regexp.last_match(2)
-      user.bootcamp_solutions.joins(exercise: :project).
+      sol = user.bootcamp_solutions.joins(exercise: :project).
         where('bootcamp_exercises.slug = ? AND bootcamp_projects.slug = ?', exercise_slug, project_slug).
-        first&.code || ""
+        first
+
+      if sol
+        if language == "jikiscript"
+          sol.code
+        else
+          JSON.parse(sol.code)[language]
+        end
+      else
+        ""
+      end
     end
   end
 end

app/helpers/react_components/bootcamp/frontend_exercise_page.rb

@@ -33,9 +33,9 @@ def data
             css: exercise&.default("css")
           },
           stub: {
-            css: exercise.stub("css"),
-            html: exercise.stub("html"),
-            js: exercise.stub("js")
+            css: ::Bootcamp::Solution::GenerateStub.(exercise, current_user, "css"),
+            html: ::Bootcamp::Solution::GenerateStub.(exercise, current_user, "html"),
+            js: ::Bootcamp::Solution::GenerateStub.(exercise, current_user, "js")
           },
           aspect_ratio: editor_config[:aspect_ratio] || 1,
           code: solution&.code,

bootcamp_content/levels/16.md

@@ -0,0 +1,7 @@
+# Level 16
+
+Welcome to Level 16. This is a really exciting level as you finally start to get to interact with the games that you're making.
+
+Your exercises this week build on what you made last week, but also add a new project as well!
+
+Good luck!

bootcamp_content/levels/config.json

@@ -58,5 +58,9 @@
   {
     "title": "CSS Absolute Positioning & JS Game mechanics",
     "description": "We learn about absolute positioning in CSS and some JS game mecahnics."
+  },
+  {
+    "title": "JavaScript Interactions",
+    "description": "Learn how to manage mouse and keyboard events in JavaScript."
   }
 ]

bootcamp_content/projects/breakout/config.json

@@ -8,6 +8,8 @@
     "paddle",
     "break-out-those-classes",
     "breakout-css",
-    "bouncy-ball"
+    "bouncy-ball",
+    "take-control",
+    "hot-zones"
   ]
 }

bootcamp_content/projects/breakout/exercises/hot-zones/config.json

@@ -0,0 +1,7 @@
+{
+  "title": "Hot Zones",
+  "description": "Add some rules to the paddle interactions.",
+  "level": 16,
+  "idx": 5,
+  "language": "frontend"
+}

bootcamp_content/projects/breakout/exercises/hot-zones/default.css

@@ -0,0 +1,10 @@
+body {
+    background: #fdfaf6;
+    font-family: sans-serif;
+    padding: 0;
+    margin: 0;
+    overflow: auto;
+
+    height: 100%;
+    margin: 0;
+}

bootcamp_content/projects/breakout/exercises/hot-zones/example.css

@@ -0,0 +1,31 @@
+body {
+    background: white;
+}
+#game {
+    width: 80vmin;
+    height: 80vmin;
+    margin: 10vmin auto;
+    background: rgb(10, 18, 21);
+    position: relative;
+}
+#ball {
+    border-radius: 100%;
+    width: 4%;
+    height: 4%;
+    position: absolute;
+    left: 50%;
+    top: 94%;
+    transform: translateX(-50%) translateY(-50%);
+    background: white;
+}
+
+#paddle {
+    width: 20%;
+    background: white;
+    height: 3%;
+    border-radius: 10px;
+    position: absolute;
+    left: 50%;
+    top: 96%;
+    transform: translateX(-50%);
+}

bootcamp_content/projects/breakout/exercises/hot-zones/example.html

@@ -0,0 +1,4 @@
+<main id="game">
+  <div id="ball"></div>
+  <div id="paddle"></div>
+</main>