diff --git a/Gemfile.lock b/Gemfile.lock index 5a94574..e2b6132 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,29 +3,29 @@ GEM specs: action_text-trix (2.1.19) railties - actioncable (8.1.3) - actionpack (= 8.1.3) - activesupport (= 8.1.3) + actioncable (8.1.3.1) + actionpack (= 8.1.3.1) + activesupport (= 8.1.3.1) nio4r (~> 2.0) websocket-driver (>= 0.6.1) zeitwerk (~> 2.6) - actionmailbox (8.1.3) - actionpack (= 8.1.3) - activejob (= 8.1.3) - activerecord (= 8.1.3) - activestorage (= 8.1.3) - activesupport (= 8.1.3) + actionmailbox (8.1.3.1) + actionpack (= 8.1.3.1) + activejob (= 8.1.3.1) + activerecord (= 8.1.3.1) + activestorage (= 8.1.3.1) + activesupport (= 8.1.3.1) mail (>= 2.8.0) - actionmailer (8.1.3) - actionpack (= 8.1.3) - actionview (= 8.1.3) - activejob (= 8.1.3) - activesupport (= 8.1.3) + actionmailer (8.1.3.1) + actionpack (= 8.1.3.1) + actionview (= 8.1.3.1) + activejob (= 8.1.3.1) + activesupport (= 8.1.3.1) mail (>= 2.8.0) rails-dom-testing (~> 2.2) - actionpack (8.1.3) - actionview (= 8.1.3) - activesupport (= 8.1.3) + actionpack (8.1.3.1) + actionview (= 8.1.3.1) + activesupport (= 8.1.3.1) nokogiri (>= 1.8.5) rack (>= 2.2.4) rack-session (>= 1.0.1) @@ -33,36 +33,36 @@ GEM rails-dom-testing (~> 2.2) rails-html-sanitizer (~> 1.6) useragent (~> 0.16) - actiontext (8.1.3) + actiontext (8.1.3.1) action_text-trix (~> 2.1.15) - actionpack (= 8.1.3) - activerecord (= 8.1.3) - activestorage (= 8.1.3) - activesupport (= 8.1.3) + actionpack (= 8.1.3.1) + activerecord (= 8.1.3.1) + activestorage (= 8.1.3.1) + activesupport (= 8.1.3.1) globalid (>= 0.6.0) nokogiri (>= 1.8.5) - actionview (8.1.3) - activesupport (= 8.1.3) + actionview (8.1.3.1) + activesupport (= 8.1.3.1) builder (~> 3.1) erubi (~> 1.11) rails-dom-testing (~> 2.2) rails-html-sanitizer (~> 1.6) - activejob (8.1.3) - activesupport (= 8.1.3) + activejob (8.1.3.1) + activesupport (= 8.1.3.1) globalid (>= 0.3.6) - activemodel (8.1.3) - activesupport (= 8.1.3) - activerecord (8.1.3) - activemodel (= 8.1.3) - activesupport (= 8.1.3) + activemodel (8.1.3.1) + activesupport (= 8.1.3.1) + activerecord (8.1.3.1) + activemodel (= 8.1.3.1) + activesupport (= 8.1.3.1) timeout (>= 0.4.0) - activestorage (8.1.3) - actionpack (= 8.1.3) - activejob (= 8.1.3) - activerecord (= 8.1.3) - activesupport (= 8.1.3) + activestorage (8.1.3.1) + actionpack (= 8.1.3.1) + activejob (= 8.1.3.1) + activerecord (= 8.1.3.1) + activesupport (= 8.1.3.1) marcel (~> 1.0) - activesupport (8.1.3) + activesupport (8.1.3.1) base64 bigdecimal concurrent-ruby (~> 1.0, >= 1.3.1) @@ -249,20 +249,20 @@ GEM rack (>= 1.3) rackup (2.3.1) rack (>= 3) - rails (8.1.3) - actioncable (= 8.1.3) - actionmailbox (= 8.1.3) - actionmailer (= 8.1.3) - actionpack (= 8.1.3) - actiontext (= 8.1.3) - actionview (= 8.1.3) - activejob (= 8.1.3) - activemodel (= 8.1.3) - activerecord (= 8.1.3) - activestorage (= 8.1.3) - activesupport (= 8.1.3) + rails (8.1.3.1) + actioncable (= 8.1.3.1) + actionmailbox (= 8.1.3.1) + actionmailer (= 8.1.3.1) + actionpack (= 8.1.3.1) + actiontext (= 8.1.3.1) + actionview (= 8.1.3.1) + activejob (= 8.1.3.1) + activemodel (= 8.1.3.1) + activerecord (= 8.1.3.1) + activestorage (= 8.1.3.1) + activesupport (= 8.1.3.1) bundler (>= 1.15.0) - railties (= 8.1.3) + railties (= 8.1.3.1) rails-dom-testing (2.3.0) activesupport (>= 5.0.0) minitest @@ -270,9 +270,9 @@ GEM 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) - activesupport (= 8.1.3) + railties (8.1.3.1) + actionpack (= 8.1.3.1) + activesupport (= 8.1.3.1) irb (~> 1.13) rackup (>= 1.0.0) rake (>= 12.2) @@ -413,17 +413,17 @@ DEPENDENCIES CHECKSUMS action_text-trix (2.1.19) sha256=7012f59421009cf284aa651294896414d653a61a2417c9b8714c8476d2f74009 - actioncable (8.1.3) sha256=e5bc7f75e44e6a22de29c4f43176927c3a9ce4824464b74ed18d8226e75a80f0 - actionmailbox (8.1.3) sha256=df7da474eaa0e70df4ed5a6fef66eb3b3b0f2dbf7f14518deee8d77f1b4aae59 - actionmailer (8.1.3) sha256=831f724891bb70d0aaa4d76581a6321124b6a752cb655c9346aae5479318448d - actionpack (8.1.3) sha256=af998cae4d47c5d581a2cc363b5c77eb718b7c4b45748d81b1887b25621c29a3 - actiontext (8.1.3) sha256=d291019c00e1ea9e6463011fa214f6081a56d7b9a1d224e7d3f6384c1dafc7d2 - actionview (8.1.3) sha256=1347c88c7f3edb38100c5ce0e9fb5e62d7755f3edc1b61cce2eb0b2c6ea2fd5d - activejob (8.1.3) sha256=a149b1766aa8204c3c3da7309e4becd40fcd5529c348cffbf6c9b16b565fe8d3 - activemodel (8.1.3) sha256=90c05cbe4cef3649b8f79f13016191ea94c4525ce4a5c0fb7ef909c4b91c8219 - activerecord (8.1.3) sha256=8003be7b2466ba0a2a670e603eeb0a61dd66058fccecfc49901e775260ac70ab - activestorage (8.1.3) sha256=0564ce9309143951a67615e1bb4e090ee54b8befed417133cae614479b46384d - activesupport (8.1.3) sha256=21a5e0dfbd4c3ddd9e1317ec6a4d782fa226e7867dc70b0743acda81a1dca20e + actioncable (8.1.3.1) sha256=e318528295c878a3efdfe25f0f2267c80cb7a76eba41bb5f64d44aa380a3d91b + actionmailbox (8.1.3.1) sha256=5f704972097d843ade8e435e93694a1dac732b926df1717aceba1f3840082b1c + actionmailer (8.1.3.1) sha256=88ea441b28ff02a0c6c006468892642a3d9942affce9d294e81a74504aa5c43c + actionpack (8.1.3.1) sha256=974cb7154548e81f470b1b0f247b99cb38e87825899dca58610596e2817723d0 + actiontext (8.1.3.1) sha256=5da729d833d1a29cddb1eee938878e55e503d2613e00e735f5daf58c2ba98af2 + actionview (8.1.3.1) sha256=2da68b8414c47b43bfbed1ce69c5afe1c04f78c267aacb5660a4cab5ca12cfb6 + activejob (8.1.3.1) sha256=1c8dd275df930df40deecffec63d913a550a33fd94bd298f69721dd96939954a + activemodel (8.1.3.1) sha256=99cc02ce2faec371d14440949d85787ebd23a907c9baef0a9d4bcd4d21888f88 + activerecord (8.1.3.1) sha256=0a2fb6c28f4938f6b013a3a549bec0a7e37d535f3dc8990e804bcc3258c0403b + activestorage (8.1.3.1) sha256=f555254f387b1cffa499d2fd3115d12635eadc5b15206a8534316a67036163ef + activesupport (8.1.3.1) sha256=85458765f25ea48b9019c46b6bb3fa5683197bf4280d9f06710a6e8d7a831376 acts_as_list (1.2.6) sha256=8345380900b7bee620c07ad00991ccee59af3d8c9e8574f426e321da2865fdc8 addressable (2.9.0) sha256=7fdf6ac3660f7f4e867a0838be3f6cf722ace541dd97767fa42bc6cfa980c7af ancestry (5.1.0) sha256=8a073cf6f7e306eeed36af72595abd19602ef4a197bf4beda2f31cf8f55de27b @@ -519,10 +519,10 @@ CHECKSUMS rack-session (2.1.2) sha256=595434f8c0c3473ae7d7ac56ecda6cc6dfd9d37c0b2b5255330aa1576967ffe8 rack-test (2.2.0) sha256=005a36692c306ac0b4a9350355ee080fd09ddef1148a5f8b2ac636c720f5c463 rackup (2.3.1) sha256=6c79c26753778e90983761d677a48937ee3192b3ffef6bc963c0950f94688868 - rails (8.1.3) sha256=6d017ba5348c98fc909753a8169b21d44de14d2a0b92d140d1a966834c3c9cd3 + rails (8.1.3.1) sha256=ccd11a36bfc171bf9c66d585d14c0ece91c0c9dde840aae60c0118d6f5c9c52a rails-dom-testing (2.3.0) sha256=8acc7953a7b911ca44588bf08737bc16719f431a1cc3091a292bca7317925c1d rails-html-sanitizer (1.7.1) sha256=e797a7c9b01e567307e317c576b49ab4168017e63eea4dba9ce3cb587e2f22c2 - railties (8.1.3) sha256=913eb0e0cb520aac687ffd74916bd726d48fa21f47833c6292576ef6a286de22 + railties (8.1.3.1) sha256=2388a232579a00cefea4487de66c8553c3408c1300abdc6cf1799d86ffb04487 rainbow (3.1.1) sha256=039491aa3a89f42efa1d6dec2fc4e62ede96eb6acd95e52f1ad581182b79bc6a rake (13.4.2) sha256=cb825b2bd5f1f8e91ca37bddb4b9aaf345551b4731da62949be002fa89283701 rbs (4.1.0) sha256=8baba59008b0643b4ba2090e9b1d0149655b0bbd42eb2ffe42b1d0eb6923fd72 diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index db79e25..6dccc39 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -326,6 +326,10 @@ main, .modal-panel { .results { --clr-action: var(--clr-green); margin-block-end: 1rem; + + .hero-container { + display: none; + } } @@ -509,7 +513,8 @@ form:has(.cta) { .share-container { display: flex; margin-block-start: 1rem; - & button { + + button { font-size: var(--fs-base); font-weight: 700; color: var(--clr-black); @@ -518,10 +523,8 @@ form:has(.cta) { display: inline-flex; align-items: center; gap: 0.5rem; + padding: 0; } - - - } .arrow { @@ -743,8 +746,9 @@ dialog::backdrop { flex-direction: column; gap: 2rem; - & svg { + svg.ico-wave { align-self: center; + transform: translateY(1px); } & > div { @@ -779,9 +783,11 @@ dialog::backdrop { display: grid; grid-template-columns: 1fr max-content; - & svg { + svg { fill: var(--clr-green); rotate: 180deg; + width: 190px; + height: 96px; } &>div:first-child { @@ -801,13 +807,13 @@ dialog::backdrop { margin-block-start: 0; } - & h3 { + h3 { font: var(--td-base); font-weight: 700; margin: 0; } - & .icon { + .icon { width: 40px; aspect-ratio: 1; display: inline-flex; @@ -818,7 +824,7 @@ dialog::backdrop { margin-block-end: 0.25rem; } - & details { + details { border-width: 1px 0; border-color: var(--clr-black); border-style: solid; @@ -955,6 +961,15 @@ dialog::backdrop { max-height: 90vh; } + main, .modal-panel { + article h1, .results-header h1 { + font: var(--td-2xl); + font-weight: 400; + + } + + } + .modal-panel { min-height: 0; --clr-bg: var(--clr-white); @@ -1054,7 +1069,26 @@ dialog::backdrop { display: grid; grid-template-columns: 4fr 6fr; + h1, h2 { + font: var(--td-2xl); + } + + .hero-container { + display: grid; + position: sticky; + top: 0; + align-self: start; + height: 100vh; + + + } + &.intro { + + h2 { + font-size: var(--fs-2xl); + } + .hero-container { grid-column: 1 / span 2; article { @@ -1112,41 +1146,34 @@ dialog::backdrop { } } - &.stage, &.good_answer, &.bad_answer { + &.stage, &.good_answer, &.bad_answer, &.last_save { grid-template-columns: 6fr 4fr; grid-template-rows: auto 1fr auto; height: 100dvh; overflow: hidden; - svg.ico-wave { - place-self: start end; - display: block; - width: 345px; - height: 174px; - transform-origin: 0 0; - transform: rotate(-90deg) translate(-345px, 174px); - } - + .hero-container { grid-area: 1 / 1 / span 3 / span 1; - min-height: 0; - overflow: hidden; - - img { - display: block; - min-height: 0; - } - + article { display: none; - } - - + } #inter-ikea-systems { bottom: 1rem; - top: inherit; + top: auto; } + + svg.ico-wave { + place-self: start end; + display: block; + width: 345px; + height: 174px; + transform-origin: 0 0; + transform: rotate(-90deg) translate(-345px, 174px); + } + } .stage-header-container { @@ -1211,6 +1238,10 @@ dialog::backdrop { font-size: var(--fs-lg); } } + + .hero-container img { + display: block; + } } &.good_answer { @@ -1232,6 +1263,72 @@ dialog::backdrop { } } + &.results { + margin-block-end: 0; + + .results-header { + background-image: none; + } + + .icon { + background-color: var(--clr-sand-light); + margin-block-end: 0.5rem; + } + + .impact { + font: var(--td-lg); + h3 { + font-size: var(--fs-lg); + } + + details { + margin: 1rem 0; + } + } + + & > *:not(.hero-container) { + grid-column-start: 1; + background-color: var(--clr-green); + margin: 0; + padding: 1.5rem 2.5rem 0 2.5rem; + } + + .results-tagline { + display: block; + + svg { + display: none; + } + + &>div:first-child { + font: var(--td-lg); + padding: 0; + } + } + + .hero-container { + display: block; + grid-column: 2 / span 1; + grid-row: 1 / span 8; + + svg.ico-wave { + top: 0; + left: 0; + position: absolute; + width: 345px; + height: 174px; + transform-origin: 0 0; + transform: rotate(90deg) translate(345px, -174px) scaleX(-1); + } + } + .cta-container { + gap: 1rem; + padding-bottom: 2.5rem; + + --clr-action: var(--clr-sand-light); + } + } + } } diff --git a/app/controllers/game_controller.rb b/app/controllers/game_controller.rb index c491dec..a430a02 100644 --- a/app/controllers/game_controller.rb +++ b/app/controllers/game_controller.rb @@ -22,6 +22,11 @@ class GameController < ApplicationController ResolvePlayerCountryJob.perform_later(player.id, request.remote_ip) if player.country.blank? session[:player_id] = player.id + if params[:skip_facts] + redirect_to action: "intro" + return + end + @node = root_node&.children&.facts&.first respond_to do |format| format.turbo_stream diff --git a/app/views/game/done.html.erb b/app/views/game/done.html.erb index cde976e..804e014 100644 --- a/app/views/game/done.html.erb +++ b/app/views/game/done.html.erb @@ -1,9 +1,10 @@ <%- content_for :title, node_title(@node) %> -<% image_attachment = @node.attachments.select { |a| a.asset&.file&.image? }[0] %> +<% image_attachment = @node.attachments&.select { |a| a.asset&.file&.image? }[0] %> <%= render partial: "stage_header" %>
+ <%= render_responsive_picture(image_attachment.asset, alt: "Hero", fetchpriority: "high") if image_attachment %>
<%= @result_node.attachments[0]&.body&.html_safe %>
@@ -11,14 +12,17 @@ <%= svg "ico-wave" %>
-
- <%= @result_node.attachments[1]&.body&.html_safe %> +
+ <%= @result_node.attachments[0]&.body&.html_safe %> +
+
+
+ <%= @result_node.attachments[1]&.body&.html_safe %> +
<%= link_to tag.span(t("game.drumroll_see_the_result")), { action: "results" }, class: (@result_node.parent.chance? and @result_node.bad_answer?) ? "cta last_save" : "cta" %>
- - diff --git a/app/views/game/last_save.html.erb b/app/views/game/last_save.html.erb index f63a72a..7d1d5e1 100644 --- a/app/views/game/last_save.html.erb +++ b/app/views/game/last_save.html.erb @@ -13,7 +13,13 @@ <%= svg "ico-wave" %> +
+ <%= image_attachment.body.html_safe %> +
+
+ + <% @node.children.each do |node| %> <%= button_to node.title, url_for(action: "answer_last_save", value: node.id) %> <% end %> diff --git a/app/views/game/results.html.erb b/app/views/game/results.html.erb index 1842347..11b19d7 100644 --- a/app/views/game/results.html.erb +++ b/app/views/game/results.html.erb @@ -9,18 +9,15 @@ <%= tag.span t("game.share") %> - +
<%= result_description(current_player) %>
- - <%= svg "ico-wave" %>
-
<%= svg "ico-last-save" %>

<%= impact_label(:food_waste) %>

@@ -77,7 +74,6 @@
-