ikea-foundation
/
week_2024
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

na

main
Mattias Bodlund 1 month ago
parent
e751260d27
commit
f76bbb75c4
6 changed files with 223 additions and 108 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +66
    -66
      Gemfile.lock
  2. +128
    -31
      app/assets/stylesheets/application.css
  3. +5
    -0
      app/controllers/game_controller.rb
  4. +9
    -5
      app/views/game/done.html.erb
  5. +6
    -0
      app/views/game/last_save.html.erb
  6. +9
    -6
      app/views/game/results.html.erb

+ 66
- 66
Gemfile.lock View File

@ -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


+ 128
- 31
app/assets/stylesheets/application.css View File

@ -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);
}
}
}
}


+ 5
- 0
app/controllers/game_controller.rb View File

@ -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


+ 9
- 5
app/views/game/done.html.erb View File

@ -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" %>
<div class="hero-container">
<%= render_responsive_picture(image_attachment.asset, alt: "Hero", fetchpriority: "high") if image_attachment %>
<article>
<%= @result_node.attachments[0]&.body&.html_safe %>
</article>
@ -11,14 +12,17 @@
<%= svg "ico-wave" %>
</div>
<article class="answers-container">
<%= @result_node.attachments[1]&.body&.html_safe %>
<article class="question-container">
<%= @result_node.attachments[0]&.body&.html_safe %>
</article>
<article class="answers-container">
<div>
<%= @result_node.attachments[1]&.body&.html_safe %>
</div>
<div>
<%= 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" %>
</div>
</article>

+ 6
- 0
app/views/game/last_save.html.erb View File

@ -13,7 +13,13 @@
<%= svg "ico-wave" %>
</div>
<article class="question-container">
<%= image_attachment.body.html_safe %>
</article>
<article class="answers-container" data-controller="chance">
<% @node.children.each do |node| %>
<%= button_to node.title, url_for(action: "answer_last_save", value: node.id) %>
<% end %>


+ 9
- 6
app/views/game/results.html.erb View File

@ -9,18 +9,15 @@
<%= tag.span t("game.share") %>
</button>
</div>
</div>
<div class="results-tagline">
<div>
<div><%= result_description(current_player) %></div>
</div>
<%= svg "ico-wave" %>
</div>
<div class="impact food-waste">
<div class="icon"><%= svg "ico-last-save" %></div>
<h3><%= impact_label(:food_waste) %></h3>
@ -77,7 +74,6 @@
<button class="thumbs-up"><%= svg "ico-thumb" %></button>
<button class="thumbs-down"><%= svg "ico-thumb" %></button>
</div>
</div>
<div class="newsletter-container">
@ -87,5 +83,12 @@
<div class="cta-container">
<%= link_to tag.span(t("game.subscribe_to_newsletter")), "#", class: "cta cta-link" %>
<%= button_to tag.span(t("game.save_another_tomato")), start_path, class: "cta" %>
<%= button_to tag.span(t("game.save_another_tomato")), start_path(skip_facts: true), class: "cta" %>
</div>
<div class="hero-container">
<%= render_responsive_picture(@node.icon, alt: "Hero", fetchpriority: "high") if @node.icon %>
<%= svg "inter-ikea-systems" %>
<%= svg "ico-wave" %>
</div>

Write Preview
Loading…
Cancel
Save