na

Gemfile.lock

@@ -94,8 +94,9 @@ GEM
     concurrent-ruby (1.3.6)
     connection_pool (3.0.2)
     crass (1.0.6)
-    css_parser (2.2.0)
+    css_parser (3.0.0)
       addressable
+      ssrf_filter (~> 1.5)
     date (3.5.1)
     date_validator (0.12.0)
       activemodel (>= 3)
@@ -151,7 +152,7 @@ GEM
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
     language_server-protocol (3.17.0.5)
-    lexxy (0.9.15.alpha.2)
+    lexxy (0.9.15.alpha.3)
       rails (>= 8.0.2)
     lint_roller (1.1.0)
     logger (1.7.0)
@@ -232,7 +233,7 @@ GEM
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
       rack
-    psych (5.3.1)
+    psych (5.4.0)
       date
       stringio
     public_suffix (7.0.5)
@@ -331,6 +332,7 @@ GEM
       logger (>= 1.7.0)
       rack (>= 3.2.0)
       redis-client (>= 0.29.0)
+    ssrf_filter (1.5.0)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.2.0)
@@ -429,7 +431,7 @@ CHECKSUMS
   concurrent-ruby (1.3.6) sha256=6b56837e1e7e5292f9864f34b69c5a2cbc75c0cf5338f1ce9903d10fa762d5ab
   connection_pool (3.0.2) sha256=33fff5ba71a12d2aa26cb72b1db8bba2a1a01823559fb01d29eb74c286e62e0a
   crass (1.0.6) sha256=dc516022a56e7b3b156099abc81b6d2b08ea1ed12676ac7a5657617f012bd45d
-  css_parser (2.2.0) sha256=23d1b247d7bc78cb2f2fe54629fb755e68d3004f1d1bd5c66d5096d42bff6325
+  css_parser (3.0.0) sha256=eaf0e9283fd581d06e815235ceef4f0910c0b394c606355dbc69f93e84443885
   date (3.5.1) sha256=750d06384d7b9c15d562c76291407d89e368dda4d4fff957eb94962d325a0dc0
   date_validator (0.12.0) sha256=68c9834da240347b9c17441c553a183572508617ebfbe8c020020f3192ce3058
   dkim (1.1.0) sha256=74f2e3075c89cd2967995f3ee293da9dccccffee21ee593715a068ab39a717f8
@@ -460,7 +462,7 @@ CHECKSUMS
   kaminari-activerecord (1.2.2) sha256=0dd3a67bab356a356f36b3b7236bcb81cef313095365befe8e98057dd2472430
   kaminari-core (1.2.2) sha256=3bd26fec7370645af40ca73b9426a448d09b8a8ba7afa9ba3c3e0d39cdbb83ff
   language_server-protocol (3.17.0.5) sha256=fd1e39a51a28bf3eec959379985a72e296e9f9acfce46f6a79d31ca8760803cc
-  lexxy (0.9.15.alpha.2) sha256=4bcbc2d1e6d6462707fdf34ead5f4a916d226b089695c1446099a17ba7386432
+  lexxy (0.9.15.alpha.3) sha256=a82ff518c34b4ee7e59a155eabc2c236369dd0444cd672026ad0596f3fbfcbef
   lint_roller (1.1.0) sha256=2c0c845b632a7d172cb849cc90c1bce937a28c5c8ccccb50dfd46a485003cc87
   logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
   loofah (2.25.1) sha256=d436c73dbd0c1147b16c4a41db097942d217303e1f7728704b37e4df9f6d2e04
@@ -501,7 +503,7 @@ CHECKSUMS
   prettyprint (0.2.0) sha256=2bc9e15581a94742064a3cc8b0fb9d45aae3d03a1baa6ef80922627a0766f193
   prism (1.9.0) sha256=7b530c6a9f92c24300014919c9dcbc055bf4cdf51ec30aed099b06cd6674ef85
   propshaft (1.3.2) sha256=1d56a3e56a92c21bfc29caf07406b5386b00d4c47ddf357cf989a5a234b1389e
-  psych (5.3.1) sha256=eb7a57cef10c9d70173ff74e739d843ac3b2c019a003de48447b2963d81b1974
+  psych (5.4.0) sha256=14f72d69a611af663d7d70e4a7b67d9eb1f3ae9f8d916b478961d5a0075ba5b7
   public_suffix (7.0.5) sha256=1a8bb08f1bbea19228d3bed6e5ed908d1cb4f7c2726d18bd9cadf60bc676f623
   puma (8.0.2) sha256=c8ed871dfbbe66448ea9ffd46692342d9804d4071522b52b5331b7b6e7b686fb
   racc (1.8.1) sha256=4a7f6929691dbec8b5209a0b373bc2614882b55fc5d2e447a21aaa691303d62f
@@ -530,6 +532,7 @@ CHECKSUMS
   ruby-vips (2.3.0) sha256=e685ec02c13969912debbd98019e50492e12989282da5f37d05f5471442f5374
   securerandom (0.4.1) sha256=cc5193d414a4341b6e225f0cb4446aceca8e50d5e1888743fac16987638ea0b1
   sidekiq (8.1.6) sha256=be20cd051124b1a16cf97ea9157137abbd30a515c16a5ae9312d2eadd045e40f
+  ssrf_filter (1.5.0) sha256=e03dcdb9d1730d7f6710532a606b3543df2a448a0293ce04a2d995523c5a97f6
   stimulus-rails (1.3.4) sha256=765676ffa1f33af64ce026d26b48e8ffb2e0b94e0f50e9119e11d6107d67cb06
   stringio (3.2.0) sha256=c37cb2e58b4ffbd33fe5cd948c05934af997b36e0b6ca6fdf43afa234cf222e1
   thor (1.5.0) sha256=e3a9e55fe857e44859ce104a84675ab6e8cd59c650a49106a05f55f136425e73

app/assets/stylesheets/application.css

@@ -270,6 +270,12 @@ main {
 .stage {
   --clr-bg: var(--clr-sand-light);
   --clr-action: var(--clr-white);
+
+
+  & .hero-container article {
+    color: var(--clr-white);
+    text-align: left;
+  }
 }
 
 
@@ -294,7 +300,8 @@ main {
   & article {
     grid-area: 1 / 1;
     place-self: start start;
-    z-index: 1;
+    z-index: 1;    
+    background-color: transparent;
   }
 
   &:has(video) {
@@ -385,9 +392,36 @@ main {
   }
 }
 
-.stage-header {
+.stage-header-container {
   background-color: var(--clr-bg);
   padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.stage-progress {
+  list-style: none;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: stretch;
+  margin: 0;
+  padding: 0;
+
+  & li {
+    flex-grow: 1;
+    height: 0.25rem;
+    border-radius: 100vw;
+    background-color: var(--clr-white);
+    &.done {
+      background-color: var(--clr-green);
+    }
+  }
+}
+
+.stage-header {
+  
+  
   display: flex;  
   gap: 0.5rem;
   align-items: center;

app/models/node.rb

@@ -29,7 +29,10 @@ class Node < ApplicationRecord
     start: 0,
     facts: 1,
     intro: 2,
-    stage: 3
+    stage: 3,
+    good_answer: 4,
+    bad_answer: 5,
+    chance: 6,
   }
 
   def available_templates
@@ -39,7 +42,9 @@ class Node < ApplicationRecord
     when 1
       [ :facts, :intro, :stage ]
     when 2
-      []
+      [ :good_answer, :bad_answer, :chance ]
+    when 3
+      [ :good_answer, :bad_answer ]
     else
       []
     end

app/views/site/stage.html.erb

@@ -1,21 +1,33 @@
 <%- content_for :title, node_title(@node) %>
+<% image_attachment = @node.attachments.select { |a| a.asset&.file&.image? }[0] %>
 
-<div class="stage-header">
-  <div class="stage-icon"> 
-    <%= svg "ico-soil" %>
-  </div>
-  <div>
-    <%= tag.div t("game.stage_i_of_n", i: 1, n: 5), class: "stage-progress" %>
-    <%= tag.h1 @node.title %>
+<div class="stage-header-container">
+
+  <ol class="stage-progress" role="progressbar" >
+    <li class="done"></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+  </ol>
+  
+  <div class="stage-header">
+    <div class="stage-icon"><%= svg "ico-soil" %></div>
+    <div>
+      <%= tag.div t("game.stage_i_of_n", i: 1, n: 5), class: "stage-progress" %>
+      <%= tag.h1 @node.title %>
+    </div>
   </div>
 </div>
 
 <div class="hero-container">
-  <%= render_responsive_picture(@node.icon, alt: "Hero", fetchpriority: "high") %>
+  <%= render_responsive_picture(image_attachment.asset, alt: "Hero", fetchpriority: "high") %>
+  <article>
+    <%= image_attachment.body.html_safe %>
+  </article>
   <%= svg "ico-wave" %>
 </div>
 
 <article>
   <%= tag.h1 t("game.intro_title").html_safe %>
- 
 </article>

config/locales/en.yml

@@ -276,7 +276,9 @@ en:
       facts: Facts
       intro: Intro
       stage: Stage
-      
+      good_answer: Good answer
+      bad_answer: Bad answer
+      chance: Chance
 
     categories: 
       box: Box