na

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-ruby "3.4.9"
+ruby "4.0.6"
 
 gem "dotenv-rails"
 

Gemfile.lock

@@ -91,13 +91,13 @@ GEM
     bootsnap (1.24.6)
       msgpack (~> 1.2)
     builder (3.3.0)
-    concurrent-ruby (1.3.7)
+    concurrent-ruby (1.3.8)
     connection_pool (3.0.2)
     crass (1.0.7)
     css_parser (3.0.0)
       addressable
       ssrf_filter (~> 1.5)
-    csv (3.3.5)
+    csv (3.3.6)
     date (3.5.1)
     date_validator (0.12.0)
       activemodel (>= 3)
@@ -108,7 +108,7 @@ GEM
       dotenv (= 3.2.0)
       railties (>= 6.1)
     drb (2.2.3)
-    erb (6.0.4)
+    erb (6.0.6)
     erubi (1.13.1)
     ffi (1.17.4-aarch64-linux-gnu)
     ffi (1.17.4-aarch64-linux-musl)
@@ -156,11 +156,11 @@ GEM
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
     language_server-protocol (3.17.0.6)
-    lexxy (0.9.24)
+    lexxy (0.9.27)
       rails (>= 8.0.2)
     lint_roller (1.1.0)
     logger (1.7.0)
-    loofah (2.25.1)
+    loofah (2.25.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.9.1)
@@ -180,7 +180,7 @@ GEM
       i18n (>= 0.6.10, < 2)
       request_store (~> 1.0)
     msgpack (1.8.3)
-    net-imap (0.6.4.1)
+    net-imap (0.6.6)
       date
       net-protocol
     net-pop (0.1.2)
@@ -208,7 +208,7 @@ GEM
       racc (~> 1.4)
     openssl (4.0.2)
     parallel (2.1.0)
-    parser (3.3.11.1)
+    parser (3.3.12.0)
       ast (~> 2.4.1)
       racc
     pg (1.6.3)
@@ -267,8 +267,8 @@ GEM
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.7.0)
-      loofah (~> 2.25)
+    rails-html-sanitizer (1.7.1)
+      loofah (~> 2.25, >= 2.25.2)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     railties (8.1.3)
       actionpack (= 8.1.3)
@@ -281,7 +281,7 @@ GEM
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.4.2)
-    rbs (4.0.3)
+    rbs (4.1.0)
       logger
       prism (>= 1.6.0)
       tsort
@@ -292,7 +292,7 @@ GEM
       tsort
     redis (5.4.1)
       redis-client (>= 0.22.0)
-    redis-client (0.30.0)
+    redis-client (0.30.1)
       connection_pool
     regexp_parser (2.12.0)
     reline (0.6.3)
@@ -342,11 +342,11 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     thor (1.5.0)
-    thruster (0.1.22)
-    thruster (0.1.22-aarch64-linux)
-    thruster (0.1.22-arm64-darwin)
-    thruster (0.1.22-x86_64-darwin)
-    thruster (0.1.22-x86_64-linux)
+    thruster (0.1.23)
+    thruster (0.1.23-aarch64-linux)
+    thruster (0.1.23-arm64-darwin)
+    thruster (0.1.23-x86_64-darwin)
+    thruster (0.1.23-x86_64-linux)
     timeout (0.6.1)
     tsort (0.2.0)
     turbo-rails (2.0.23)
@@ -435,18 +435,18 @@ CHECKSUMS
   bootsnap (1.24.6) sha256=c60bab88c70332290f0a2636a288f675299eb4f804a02a3c085b42eca9da164a
   builder (3.3.0) sha256=497918d2f9dca528fdca4b88d84e4ef4387256d984b8154e9d5d3fe5a9c8835f
   bundler (4.0.14) sha256=d09a0a965cf772266a7e49e83610be7c2f4e49e61134c42a56804bb383cc24b8
-  concurrent-ruby (1.3.7) sha256=4412caec3a5ea2e5fdc52076724c071a81f2c0593d83b2ac8cbb8ca63b3151b0
+  concurrent-ruby (1.3.8) sha256=b2f1be836e968ccc78ccfce277ea79c72a88633f22306782c16ff23fb415d1e1
   connection_pool (3.0.2) sha256=33fff5ba71a12d2aa26cb72b1db8bba2a1a01823559fb01d29eb74c286e62e0a
   crass (1.0.7) sha256=94868719948664c89ddcaf0a37c65048413dfcb1c869470a5f7a7ceb5390b295
   css_parser (3.0.0) sha256=eaf0e9283fd581d06e815235ceef4f0910c0b394c606355dbc69f93e84443885
-  csv (3.3.5) sha256=6e5134ac3383ef728b7f02725d9872934f523cb40b961479f69cf3afa6c8e73f
+  csv (3.3.6) sha256=aba61e7e507a66f03d45cb1f3c4b6359861c3504038b422962875dce099e4456
   date (3.5.1) sha256=750d06384d7b9c15d562c76291407d89e368dda4d4fff957eb94962d325a0dc0
   date_validator (0.12.0) sha256=68c9834da240347b9c17441c553a183572508617ebfbe8c020020f3192ce3058
   dkim (1.1.0) sha256=74f2e3075c89cd2967995f3ee293da9dccccffee21ee593715a068ab39a717f8
   dotenv (3.2.0) sha256=e375b83121ea7ca4ce20f214740076129ab8514cd81378161f11c03853fe619d
   dotenv-rails (3.2.0) sha256=657e25554ba622ffc95d8c4f1670286510f47f2edda9f68293c3f661b303beab
   drb (2.2.3) sha256=0b00d6fdb50995fe4a45dea13663493c841112e4068656854646f418fda13373
-  erb (6.0.4) sha256=38e3803694be357fe2bfe312487c74beaf9fb4e5beb3e22498952fe1645b95d9
+  erb (6.0.6) sha256=a9b24986700f5bf127c4f297c5403c3ca41b83b0a316c0cd09a096b56e644ae5
   erubi (1.13.1) sha256=a082103b0885dbc5ecf1172fede897f9ebdb745a4b97a5e8dc63953db1ee4ad9
   ffi (1.17.4-aarch64-linux-gnu) sha256=b208f06f91ffd8f5e1193da3cae3d2ccfc27fc36fba577baf698d26d91c080df
   ffi (1.17.4-aarch64-linux-musl) sha256=9286b7a615f2676245283aef0a0a3b475ae3aae2bb5448baace630bb77b91f39
@@ -471,10 +471,10 @@ CHECKSUMS
   kaminari-activerecord (1.2.2) sha256=0dd3a67bab356a356f36b3b7236bcb81cef313095365befe8e98057dd2472430
   kaminari-core (1.2.2) sha256=3bd26fec7370645af40ca73b9426a448d09b8a8ba7afa9ba3c3e0d39cdbb83ff
   language_server-protocol (3.17.0.6) sha256=5ef2c0c138f8267e1bc631d3328347d354f96724b0af22f2c79516120443b7f0
-  lexxy (0.9.24) sha256=c9bef53302b827c278e4116b8a47192cdaa7d600c0bdeab6fa0a45eb1fdef903
+  lexxy (0.9.27) sha256=f7e17e6ada031b5be4f5f40a0c3f3161db19f5752f929056869d7e6b8e20cd7f
   lint_roller (1.1.0) sha256=2c0c845b632a7d172cb849cc90c1bce937a28c5c8ccccb50dfd46a485003cc87
   logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
-  loofah (2.25.1) sha256=d436c73dbd0c1147b16c4a41db097942d217303e1f7728704b37e4df9f6d2e04
+  loofah (2.25.2) sha256=2007f746959ac65552456e04b433e83deb22759ab38c838b4445c70e43425918
   mail (2.9.1) sha256=06574eca475253d6c18145dd70af80d0eb970182d55053497c5f4d797ea160e8
   marcel (1.2.1) sha256=1678e9360e32f9eafa917c80029e2f6d10b2715c66a4b87b6d0da9b9cd1f859f
   mini_magick (5.3.2) sha256=a7ef54b480b15283c396eb8343d9e088471f54b31d9974cb7e523cc57598609f
@@ -482,7 +482,7 @@ CHECKSUMS
   minitest (6.0.6) sha256=153ea36d1d987a62942382b61075745042a2b3123b1cd48f4c3675af9cc7d6f1
   mobility (1.3.2) sha256=32fbbb0e53118ef42de20daa6ac94dbb758c628874092eba311b968a1e1d757b
   msgpack (1.8.3) sha256=8bda4a6428d3244e50d6bd55854d354edbada88a4e1f4f5731a39a0f86bee6a1
-  net-imap (0.6.4.1) sha256=29f0360d75a7efd3539f16ac1957dea5c0a51ddeceb348db4553c3120914ea0d
+  net-imap (0.6.6) sha256=96aa4ee50df3060203e649efc341f53480b791d49e150f2fdebf68beb141a8df
   net-pop (0.1.2) sha256=848b4e982013c15b2f0382792268763b748cce91c9e91e36b0f27ed26420dff3
   net-protocol (0.2.2) sha256=aa73e0cba6a125369de9837b8d8ef82a61849360eba0521900e2c3713aa162a8
   net-smtp (0.5.1) sha256=ed96a0af63c524fceb4b29b0d352195c30d82dd916a42f03c62a3a70e5b70736
@@ -497,7 +497,7 @@ CHECKSUMS
   nokogiri (1.19.4-x86_64-linux-musl) sha256=17dfb7c1fa194ae02fbf7c51a7afc8d278045ab3fdacfd86f91d02d7b274470b
   openssl (4.0.2) sha256=1037ad2868ae58df9ad917891c0c0f9815a1172f6846d4bcdd508e4c2ee747c2
   parallel (2.1.0) sha256=b35258865c2e31134c5ecb708beaaf6772adf9d5efae28e93e99260877b09356
-  parser (3.3.11.1) sha256=d17ace7aabe3e72c3cc94043714be27cc6f852f104d81aa284c2281aecc65d54
+  parser (3.3.12.0) sha256=21a6d7f755d5a24dfbdc6e6b772e4e879a52e7631a88bc5a3a134606052c9828
   pg (1.6.3) sha256=1388d0563e13d2758c1089e35e973a3249e955c659592d10e5b77c468f628a99
   pg (1.6.3-aarch64-linux) sha256=0698ad563e02383c27510b76bf7d4cd2de19cd1d16a5013f375dd473e4be72ea
   pg (1.6.3-aarch64-linux-musl) sha256=06a75f4ea04b05140146f2a10550b8e0d9f006a79cdaf8b5b130cde40e3ecc2c
@@ -521,14 +521,14 @@ CHECKSUMS
   rackup (2.3.1) sha256=6c79c26753778e90983761d677a48937ee3192b3ffef6bc963c0950f94688868
   rails (8.1.3) sha256=6d017ba5348c98fc909753a8169b21d44de14d2a0b92d140d1a966834c3c9cd3
   rails-dom-testing (2.3.0) sha256=8acc7953a7b911ca44588bf08737bc16719f431a1cc3091a292bca7317925c1d
-  rails-html-sanitizer (1.7.0) sha256=28b145cceaf9cc214a9874feaa183c3acba036c9592b19886e0e45efc62b1e89
+  rails-html-sanitizer (1.7.1) sha256=e797a7c9b01e567307e317c576b49ab4168017e63eea4dba9ce3cb587e2f22c2
   railties (8.1.3) sha256=913eb0e0cb520aac687ffd74916bd726d48fa21f47833c6292576ef6a286de22
   rainbow (3.1.1) sha256=039491aa3a89f42efa1d6dec2fc4e62ede96eb6acd95e52f1ad581182b79bc6a
   rake (13.4.2) sha256=cb825b2bd5f1f8e91ca37bddb4b9aaf345551b4731da62949be002fa89283701
-  rbs (4.0.3) sha256=5a7bf70e2628549d9a1f44eae447b2cfe55968a9c60cfff52693a4bdcc020e14
+  rbs (4.1.0) sha256=8baba59008b0643b4ba2090e9b1d0149655b0bbd42eb2ffe42b1d0eb6923fd72
   rdoc (8.0.0) sha256=03bf8c08a9639658855a0cfd77c0abca8325c227693f7f33f82957811348c469
   redis (5.4.1) sha256=b5e675b57ad22b15c9bcc765d5ac26f60b675408af916d31527af9bd5a81faae
-  redis-client (0.30.0) sha256=743f11ed42f0a41a0341554087b077479fec7e2d47a7c123fd90a12c0db5e477
+  redis-client (0.30.1) sha256=5151bc5c7bbfe48623732cdae3b900d8a22dc691cc7cdfacfb351ac55116522d
   regexp_parser (2.12.0) sha256=35a916a1d63190ab5c9009457136ae5f3c0c7512d60291d0d1378ba18ce08ebb
   reline (0.6.3) sha256=1198b04973565b36ec0f11542ab3f5cfeeec34823f4e54cebde90968092b1835
   request_store (1.7.0) sha256=e1b75d5346a315f452242a68c937ef8e48b215b9453a77a6c0acdca2934c88cb
@@ -544,11 +544,11 @@ CHECKSUMS
   ssrf_filter (1.5.0) sha256=e03dcdb9d1730d7f6710532a606b3543df2a448a0293ce04a2d995523c5a97f6
   stimulus-rails (1.3.4) sha256=765676ffa1f33af64ce026d26b48e8ffb2e0b94e0f50e9119e11d6107d67cb06
   thor (1.5.0) sha256=e3a9e55fe857e44859ce104a84675ab6e8cd59c650a49106a05f55f136425e73
-  thruster (0.1.22) sha256=f34fb82bd3e31570ae8f8b930e484f9e1db7b080cbc993d49090b161879c3e05
-  thruster (0.1.22-aarch64-linux) sha256=6c306241e8ff8912fb26705a15cbb7b44a4dfcedd59fa890b2c72811f15cfa0e
-  thruster (0.1.22-arm64-darwin) sha256=d0506142832b1b020ab687dbfb938ec7cb07eeaabebc7f8682a73e8f0636917b
-  thruster (0.1.22-x86_64-darwin) sha256=2598d4122176bebd9d2debfcc5d330886168ca95e1e4705a5f38e80734c4e959
-  thruster (0.1.22-x86_64-linux) sha256=b96436be7f0854db632f421b4a53b795429a0bc95c15c2e1c1a7a6fdd1ed090f
+  thruster (0.1.23) sha256=ad3081e8ff3b5cb413768292c367f1e015c423bb6b35919b9b9f533af50d639f
+  thruster (0.1.23-aarch64-linux) sha256=042a05581dd1d750d1583d83817460b1f7fde254ed0b2bcd7ec56f9bed278c7a
+  thruster (0.1.23-arm64-darwin) sha256=2f1b73119ffec813cdb104d64dd39bfc3771b5308eb0f4dc2428077141140022
+  thruster (0.1.23-x86_64-darwin) sha256=2b22a951f6ac1218c9f461bfc6004b61854147308649475a07bc05fae2e69869
+  thruster (0.1.23-x86_64-linux) sha256=9cd7265bf54e954575c8442e42d050ed8eb55df4f9d7da8fd6f94fcc0339baa5
   timeout (0.6.1) sha256=78f57368a7e7bbadec56971f78a3f5ecbcfb59b7fcbb0a3ed6ddc08a5094accb
   tsort (0.2.0) sha256=9650a793f6859a43b6641671278f79cfead60ac714148aabe4e3f0060480089f
   turbo-rails (2.0.23) sha256=ee0d90733aafff056cf51ff11e803d65e43cae258cc55f6492020ec1f9f9315f
@@ -563,7 +563,7 @@ CHECKSUMS
   zeitwerk (2.8.2) sha256=7212a61311083c604184b1ea2574b9aa05cd14f855a0841c06985cabe9181d12
 
 RUBY VERSION
-  ruby 3.4.9
+  ruby 4.0.6
 
 BUNDLED WITH
   4.0.14

app/assets/images/ico-wave.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="190" height="96" viewBox="0 0 190 96"><path d="M.01,96h189.99c-8.68,0-18.02-1.28-27.76-3.75-27.52-7.02-57.98-23.68-84.83-48.34C62.23,29.96,49.84,14.97,40.54,0c3.7,7.29,6.63,14.51,8.75,21.52,3.83,12.63,5.01,24.56,3.37,35.06-1.64,10.49-6.11,19.49-13.55,26.32-7.44,6.83-17.24,10.93-28.67,12.44-3.35.44-6.83.66-10.44.66h.01Z"/></svg>
+<svg class="ico-wave" xmlns="http://www.w3.org/2000/svg" width="190" height="96" viewBox="0 0 190 96"><path d="M.01,96h189.99c-8.68,0-18.02-1.28-27.76-3.75-27.52-7.02-57.98-23.68-84.83-48.34C62.23,29.96,49.84,14.97,40.54,0c3.7,7.29,6.63,14.51,8.75,21.52,3.83,12.63,5.01,24.56,3.37,35.06-1.64,10.49-6.11,19.49-13.55,26.32-7.44,6.83-17.24,10.93-28.67,12.44-3.35.44-6.83.66-10.44.66h.01Z"/></svg>

app/assets/stylesheets/application.css

@@ -104,14 +104,11 @@
   font: 16px/1.4 var(--ff-ikea);
 }
 
-
 .turbo-progress-bar {
   height: 3px;
   background-color: #0058a3;
 }
 
-
-
 body {
   margin: 0;
   display: flex;
@@ -129,25 +126,7 @@ body {
   }
 }
 
-.debug-score {
-  position: fixed;
-  font-size: var(--fs-s);
-  right: 0;
-  top: 0;
-  padding: 1rem;
-  background-color: var(--clr-white);
-  z-index: 100;
-
-  & dl {
-    display: grid;
-    grid-template-columns: max-content max-content;
-    gap: 0 1ch;
 
-    & dd {
-      text-align: right;
-    }
-  }
-}
 
 button {
   cursor: pointer;
@@ -216,10 +195,18 @@ header {
   background-color: var(--clr-sand);
   padding: calc(1rem + 4rem + 2rem) 1rem 1rem 1rem;
 
+  & .language-button {
+    display: none;
+  }
+
   & h2 {
     font: var(--td-xl);
     font-weight: 400;
     margin: 0 0 1rem 0;
+
+    strong {
+      display: block;
+    }
   }
 
   & ul {
@@ -429,7 +416,7 @@ main {
   }
 
 
-  & svg {
+  svg.ico-wave {
     grid-area: 1 / 1;
     place-self: end end;
     fill: var(--clr-bg, var(--clr-green));
@@ -921,3 +908,137 @@ dialog::backdrop {
   }
 }
 
+
+
+@media (min-width: 800px) {
+  header {
+    inset: 1.5625rem 1.75rem auto 1.75rem;
+  }
+
+  #language-menu {
+    position: fixed;
+    background-color: var(--clr-white);
+    inset: 0;
+    margin: auto;
+    width: max-content;
+    max-width: 90vw;
+    height: 50%;
+    min-height: 24rem;
+    padding: 1.5rem;
+    border-radius: 0;
+    overflow-y: auto;
+    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
+
+    .language-button {
+      display: flex;
+      width: 1.5rem;
+      height: 1.5rem;
+      padding: 0;
+      box-sizing: border-box;
+      background-color: transparent;
+      border: 1px solid var(--clr-black);
+      margin-block-end: 1rem;
+
+      svg {
+        width: 37.5%;
+        display: block;
+        aspect-ratio: 1;        
+      }
+    }
+
+    h2 strong {
+      display: inline;
+    }
+
+    &::-webkit-scrollbar {
+      width: 0.75rem;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 0;
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 0;
+      background-color: var(--clr-white);
+    }
+  }
+
+  main {
+    display: grid;
+    grid-template-columns: 4fr 6fr;
+
+    &.start {
+      article {        
+        grid-area: 1 / 1;
+        display: flex;
+        flex-direction: column;
+        padding: 2.5rem;
+        text-align: left;
+        
+        h1, p, .cta {
+          margin-left: 0;
+          margin-right: 0;
+        }
+
+        h1 {
+          font-size: var(--fs-3xl);
+        }
+
+        p {
+          font-size: var(--fs-lg);
+        }
+
+        & > div:first-child {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        
+        }
+      }
+
+      .play-time {
+        flex: 0 0 auto;
+      }
+
+      .hero-container {
+        grid-area: 1 / 2;        
+
+        svg.ico-wave {
+          place-self: start start;
+          display: block;
+          width: 345px;
+          height: 174px;
+
+          height: auto;
+          transform-origin: 0 0;
+          transform: rotate(90deg) translate(345px, -174px) scaleX(-1);
+        }
+
+      }
+    }
+  }
+
+}
+
+
+.debug-score {
+  display: none;
+  position: fixed;
+  font-size: var(--fs-s);
+  right: 0;
+  top: 0;
+  padding: 1rem;
+  background-color: var(--clr-white);
+  z-index: 100;
+
+  & dl {
+    display: grid;
+    grid-template-columns: max-content max-content;
+    gap: 0 1ch;
+
+    & dd {
+      text-align: right;
+    }
+  }
+}

app/views/game/_language-menu.html.erb

@@ -18,6 +18,14 @@
         data-language-menu-target="menu"
         aria-labelledby="language-title"
         hidden>
+
+    <button type="button"
+            class="language-button" 
+            data-language-menu-target="button"
+            data-action="click->language-menu#close">
+      <%= svg "ico-close" %>
+    </button>
+
     <h2 id="language-title"><%= t("game.please_choose_a_language").html_safe %></h2>
     <ul class="languages">
       <% t("language_names").each do |k, v| %>

app/views/game/start.html.erb

@@ -11,10 +11,12 @@
 </div>
 
 <article>
-  <%= tag.h1 t("game.intro_title").html_safe %>
-  <%= tag.p t("game.intro_description") %>
+  <div>
+    <%= tag.h1 t("game.intro_title").html_safe %>
+    <%= tag.p t("game.intro_description") %>
 
-  <%= button_to tag.span(t("game.let_me_try")), start_path, class: "cta" %>
+    <%= button_to tag.span(t("game.let_me_try")), start_path, class: "cta" %>
+  </div>
   
   <%= tag.div class: "play-time" do %>
     <%= svg "ico-clock" %>

config/locales/da.yml

@@ -2,7 +2,7 @@
 da:
   game:
     please_choose_a_language: |
-      <strong>Vælg venligst</strong><br>
+      <strong>Vælg venligst</strong>
       et sprog
     intro_title: |
       Kan du redde<br>

config/locales/en.yml

@@ -5,8 +5,7 @@ en:
 
   game:
     please_choose_a_language: |
-      <strong>Please</strong><br>
-      choose a language
+      <strong>Please</strong> choose a language
     intro_title: |
       Can you save<br>
       <strong>the tomato?</strong>

mise.toml

@@ -1,2 +1,2 @@
 [tools]
-ruby = "3.4.9"
+ruby = "4.0.6"