na

Gemfile.lock

@@ -133,7 +133,7 @@ GEM
     irb (1.12.0)
       rdoc
       reline (>= 0.4.2)
-    jbuilder (2.11.5)
+    jbuilder (2.12.0)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
     kaminari (1.2.2)
@@ -256,7 +256,7 @@ GEM
     redis-client (0.22.1)
       connection_pool
     regexp_parser (2.9.0)
-    reline (0.5.3)
+    reline (0.5.4)
       io-console (~> 0.5)
     request_store (1.6.0)
       rack (>= 1.4)
@@ -269,7 +269,7 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    sidekiq (7.2.3)
+    sidekiq (7.2.4)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)

app/assets/stylesheets/application.css

@@ -365,7 +365,8 @@ input[type=range] {
 ul.card__stack {
   max-width: 270px;  
   margin-bottom: 24px;
-  
+  aspect-ratio: 0.72972972972973;  
+  position: relative;
 
   & a {
     text-decoration: none;
@@ -381,8 +382,8 @@ ul.card__stack {
 }
 
 .card {    
-  max-width: 270px;
-  aspect-ratio: 0.72972972972973;  
+  position: absolute;
+  inset: 0 0 0 0;
   font-size: var(--fs-xl);
   font-weight: 700;
   display: grid;
@@ -390,6 +391,8 @@ ul.card__stack {
   grid-template-rows: 1fr 4fr 1fr;
   justify-items: center;
   
+  transition: transform 0.3s ease-in-out 0s;
+
   & div {
     text-align: center;
   }

app/helpers/site_helper.rb

@@ -19,4 +19,10 @@ module SiteHelper
     t(:client_name)
   end
 
+
+  def random_value(from, to)
+    range = rand(2) == 0 ? (-to..-from) : (from..to)
+    rand(range)
+  end
+
 end

app/javascript/application.js

@@ -1,3 +1,41 @@
+function rand_in_range(from, to) {
+  
+  const rand = Math.floor(Math.random() * (to - from + 1)) + from
+  const is_neg = Math.random() < 0.5
+
+  return is_neg ? -rand : rand
+}
+
+
+
+function shuffle_cards() {
+
+  const cards = document.querySelectorAll('.card')
+  const random_index = Math.floor(Math.random() * cards.length);
+
+  cards.forEach((card, index) => {
+    if (index == random_index) {
+      card.classList.add('active')
+      card.style.zIndex = '1'
+      card.style.transform = `none`
+    } else {
+      card.classList.remove('active')
+      card.style.zIndex = 'auto'
+      card.style.transform = `rotate(${rand_in_range(2,5)}deg) translate(${rand_in_range(2,5)}px, ${rand_in_range(2,5)}px)`
+    }
+  })
+
+}
+
+document.querySelectorAll('.button_shuffle_cards').forEach((item, index) => {
+  item.addEventListener('click', (e) => {
+    shuffle_cards()
+  })
+  if (index == 0) 
+    shuffle_cards()
+})
+
+
 // Choose language confirmation button
 document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => {
   confirm_btn.addEventListener('click', (e) => {    
@@ -40,8 +78,10 @@ function unlockStartHandler() {
 function unlockEndHandler() {    
   curr_value = +this.value;
     
-  if (curr_value >= this.max) {
-    alert('Unlocked');
+  if (curr_value >= this.max) {    
+    
+    const card = document.querySelector('.card.active')
+    window.location.href = card.parentNode.getAttribute('href')
     
     // reset 
     this.value = 0;

app/views/site/tmpl_list.html.erb

@@ -1,9 +1,13 @@
-<%- content_for :title, node_title(@node) %>
+<%- 
+  content_for :title, node_title(@node) 
+  cards = @node.children.viewable.ordered
+%>
 
 <div class="cards__container">
 
   <ul class="card__stack">
   <% @node.children.viewable.ordered.each do |node| %>
+
     <li>
       <%= link_to node.url do %>
         <div class="card">
@@ -23,7 +27,7 @@
       </div>
     </li>
     <li>
-      <button type="button" class="button__base button__base-light">
+      <button type="button" class="button__base button__base-light button_shuffle_cards">
         <%= t 'shuffle_cards' %>
       </button>
     </li>