Level 15 exercises

bootcamp_content/projects/breakout/config.json

@@ -7,6 +7,7 @@
     "smashing-blocks",
     "paddle",
     "break-out-those-classes",
+    "breakout-css",
     "bouncy-ball"
   ]
 }

bootcamp_content/projects/breakout/exercises/bouncy-ball/example.css

@@ -1,8 +1,8 @@
 #game {
-    width: 80vmin;
-    height: 80vmin;
-    margin: 10vmin auto;
-    background: lightgray; /* Just to visualize it */
+    margin: 10%;
+    aspect-ratio: 1;
+    background: #ddd;
+    width: 90%;
     position: relative;
 }
 #ball {
@@ -12,6 +12,6 @@
     position: absolute;
     left: 50%;
     top: 95%;
-    transform: translateX(-5%);
+    transform: translateX(-50%);
     background: red;
 }

bootcamp_content/projects/breakout/exercises/bouncy-ball/example.js

@@ -8,18 +8,20 @@ function updateBallCoordinates() {
   ballLeft += ballVelocityX
   ballTop += ballVelocityY
 
-  if (ballLeft < 0) {
+  if (ballLeft < 2.5) {
+    return false
     ballVelocityX = 1 * ballSpeed
   }
-  if (ballLeft > 95) {
+  if (ballLeft > 97.5) {
     ballVelocityX = -1 * ballSpeed
   }
-  if (ballTop < 0) {
+  if (ballTop < 2.5) {
     ballVelocityY = 1 * ballSpeed
   }
-  if (ballTop > 95) {
+  if (ballTop > 97.5) {
     ballVelocityY = -1 * ballSpeed
   }
+  return true
 }
 function render() {
   document.querySelector('#ball').style.left = `${ballLeft}%`
@@ -28,10 +30,12 @@ function render() {
 let lastTime = 0
 
 function gameLoop() {
-  updateBallCoordinates() // game state logic
+  const couldContinue = updateBallCoordinates() // game state logic
   render() // drawing logic
 
-  requestAnimationFrame(gameLoop)
+  if (couldContinue) {
+    requestAnimationFrame(gameLoop)
+  }
 }
 
 requestAnimationFrame(gameLoop)

bootcamp_content/projects/breakout/exercises/breakout-css/config.json

@@ -0,0 +1,10 @@
+{
+  "title": "Breakout CSS",
+  "description": "Create a CSS layout for the Breakout game.",
+  "language": "css",
+  "level": 15,
+  "idx": 1,
+  "editor_config": {
+    "aspect_ratio": 1.5
+  }
+}

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

@@ -0,0 +1,18 @@
+body,
+.--jiki-faux-body {
+    overflow: hidden;
+    font-family: ui-serif, system-ui, serif, Apple Color Emoji, Segoe UI Emoji,
+        Segoe UI Symbol, Noto Color Emoji;
+    background: pink;
+
+    display: flex;
+    justify-content: stretch;
+    align-items: stretch;
+
+    height: 100%;
+    width: 100%;
+
+    & > * {
+        flex: 1;
+    }
+}

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

@@ -0,0 +1,35 @@
+#game {
+    position: relative;
+
+    #bricks {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 5px;
+        margin: 25px;
+        div {
+            height: 15px;
+            border-radius: 10%;
+            background: red;
+        }
+    }
+    #paddle {
+        border-radius: 10%;
+        height: 10px;
+        width: 80px;
+        background: red;
+        position: absolute;
+        left: 50%;
+        bottom: 5%;
+        transform: translateX(-50%);
+    }
+    #ball {
+        border-radius: 100%;
+        height: 10px;
+        width: 10px;
+        background: blue;
+        position: absolute;
+        left: 50%;
+        bottom: 10%;
+        transform: translateX(-50%);
+    }
+}

bootcamp_content/projects/breakout/exercises/breakout-css/example.html

@@ -0,0 +1,21 @@
+<div id="game">
+  <div id="bricks">
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+    <div id="brick"></div>
+  </div>
+  <div id="ball"></div>
+  <div id="paddle"></div>
+</div>

bootcamp_content/projects/breakout/exercises/breakout-css/introduction.md

@@ -0,0 +1,30 @@
+# Flag of Norway
+
+Next we have the flag of Norway. This is a similar flag to one you had with Flexbox, but a little more complex.
+
+The blue lines are the same width and height horizontally and vertically, so the blue rectangle in the middle is a square. Similarly the white lines are the same width and height.
+
+You can use the fact that the flag has an aspect ratio of 1.5 to make this easier for yourself. Something with a width of 9% is the same size as something with a height of 6%. I recommend specifying % widths for the white and blue sections, and for the width of the red squares. The remaining space can flow via fractional units.
+
+## Instructions
+
+Behind the scenes we've added some CSS so that your outermost element will fill the space fully.
+
+You should **only** use the following properties:
+
+- `background`: The flag has stripes of `white`, `#BA0C2F` and `#00205B`.
+- `display`: Used to turn an element into a grid container.
+- `grid-template-rows`: Sets the layout of rows.
+- `grid-template-columns`: Sets the layout of columns.
+- `grid-column`: Specify the start and end column lines of a grid item.
+- `grid-row`: Specify the start and end row lines of a grid item.
+
+You might find it helpful to use `nth-child` selectors in this exercise. We looked at these briefly in the teaching video. To target the 3rd div in a section, you could use:
+
+```css
+#flag div:nth-child(3) {
+  ...;
+}
+```
+
+Remember to nest the `div:nth-child` selector if you take this approach, else you might end up adding rules to other divs that you can't see.

bootcamp_content/projects/breakout/exercises/breakout-css/task-1.md

@@ -0,0 +1,3 @@
+# Task 1
+
+Change the paddings to margins!

bootcamp_content/projects/positioned-patterns/config.json

@@ -0,0 +1,10 @@
+{
+  "slug": "positioned-patterns",
+  "title": "Positioned Patterns",
+  "description": "Use your existing knowledge plus positioning to reproduce various flag designs.",
+  "exercises": [
+    "positioned-portugal",
+    "positioned-trinidad-and-tobago",
+    "positioned-namibia"
+  ]
+}

bootcamp_content/projects/positioned-patterns/exercises/positioned-namibia/config.json

@@ -0,0 +1,10 @@
+{
+  "title": "Positioned Portugal",
+  "description": "Reproduce Portugal's flag using CSS",
+  "language": "css",
+  "level": 15,
+  "idx": 5,
+  "editor_config": {
+    "aspect_ratio": 1.5
+  }
+}

bootcamp_content/projects/positioned-patterns/exercises/positioned-namibia/default.css

@@ -0,0 +1,18 @@
+body,
+.--jiki-faux-body {
+    overflow: hidden;
+    font-family: ui-serif, system-ui, serif, Apple Color Emoji, Segoe UI Emoji,
+        Segoe UI Symbol, Noto Color Emoji;
+    background: pink;
+
+    display: flex;
+    justify-content: stretch;
+    align-items: stretch;
+
+    height: 100%;
+    width: 100%;
+
+    & > * {
+        flex: 1;
+    }
+}

bootcamp_content/projects/positioned-patterns/exercises/positioned-namibia/example.css

@@ -0,0 +1,87 @@
+#flag {
+    .stripes {
+        position: absolute;
+        width: 170%;
+        height: 170%;
+        top: -50%;
+        left: -20%;
+        display: grid;
+        transform: rotate(-35deg);
+        grid-template-rows: 40% 3% 14% 3% 40%;
+
+        .blue {
+            background: #002f6c;
+        }
+        .white {
+            background: white;
+        }
+        .red {
+            background: #c8102e;
+        }
+        .green {
+            background: #009a44;
+        }
+    }
+    .emblem {
+        position: absolute;
+        left: 40px;
+        top: 30px;
+        width: 100px;
+        height: 100px;
+        display: grid;
+        place-items: center;
+        .circle {
+            position: relative;
+            border: 5px solid #002f6c;
+            background: #ffcd00;
+            border-radius: 100%;
+            width: 50px;
+            height: 50px;
+            z-index: 2;
+        }
+        .triangles {
+            position: absolute;
+            inset: 0;
+            img {
+                height: 50px;
+                transform-origin: bottom center;
+                position: absolute;
+                left: 50px;
+                transform: translateX(-50%);
+            }
+            img:nth-child(2) {
+                transform: translateX(-50%) rotate(30deg);
+            }
+            img:nth-child(3) {
+                transform: translateX(-50%) rotate(60deg);
+            }
+            img:nth-child(4) {
+                transform: translateX(-50%) rotate(90deg);
+            }
+            img:nth-child(5) {
+                transform: translateX(-50%) rotate(120deg);
+            }
+            img:nth-child(6) {
+                transform: translateX(-50%) rotate(150deg);
+            }
+            img:nth-child(7) {
+                transform: translateX(-50%) rotate(180deg);
+            }
+            img:nth-child(8) {
+                transform: translateX(-50%) rotate(210deg);
+            }
+            img:nth-child(9) {
+                transform: translateX(-50%) rotate(240deg);
+            }
+            img:nth-child(10) {
+                transform: translateX(-50%) rotate(270deg);
+            }
+            img:nth-child(11) {
+                transform: translateX(-50%) rotate(300deg);
+            }
+            img:nth-child(12) {
+                transform: translateX(-50%) rotate(330deg);
+            }
+        }
+    }
+}

bootcamp_content/projects/positioned-patterns/exercises/positioned-namibia/example.html

@@ -0,0 +1,26 @@
+<div id="flag">
+  <div class="stripes">
+    <div class="blue"></div>
+    <div class="white"></div>
+    <div class="red"></div>
+    <div class="white"></div>
+    <div class="green"></div>
+  </div>
+  <div class="emblem">
+    <div class="circle"></div>
+    <div class="triangles">
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+      <img src="/bootcamp/images/namibia-triangle.svg" />
+    </div>
+  </div>
+</div>

bootcamp_content/projects/positioned-patterns/exercises/positioned-namibia/introduction.md

@@ -0,0 +1,36 @@
+# Flag of Namibia
+
+This is a tough one!
+
+The flag of Namibia has two challenging properties:
+
+1. It has diagonal stripes
+2. It has a tricky emblem that you need to create.
+
+Consider this your final boss!
+
+## Instructions
+
+Behind the scenes we've added some CSS so that your outermost element will fill the space fully.
+
+- You have a triangle image you can use, which lives at `/bootcamp/images/namibia-triangle.svg`.
+
+### Stripes
+
+For the stripes:
+
+- The target implementation uses `%` divisible by 10 for all the positioning (e.g. any widths, heights, tops, lefts, rotations, etc) with one exception - the width of the stripes - which are whole number % but not all divisible by 10.
+- The blue is `#002f6c`, the red is `#c8102e`, the green is `#009a44` and the gold is `#002f6c`
+
+### The Emblem
+
+For the emblem:
+
+- The target implemenation uses `px` values for nearly everything. The only exception is `transform` and `border-radius` which use `%`.
+- There is a straight-forward approach to positioning the triangles that is pain-free. Try and find the right method, not the right arbitary set of magic co-ordinates!
+
+## Think first!
+
+This exercise is not simple, but it **is** achievable. The key to all of the parts are choosing the right concepts and mechanisms. Get one part right first before worrying about the next part etc.
+
+Good luck!

bootcamp_content/projects/positioned-patterns/exercises/positioned-namibia/stub.html

@@ -0,0 +1,4 @@
+
+<!--
+<img src="/bootcamp/images/namibia-triangle.svg"/>
+-->

bootcamp_content/projects/positioned-patterns/exercises/positioned-namibia/task-1.md

@@ -0,0 +1,3 @@
+# Task 1
+
+Recreate the flag!