bible270 1.3.2 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1045882b2a544c39d4f9c4b6282c4dd67861f1af380d4af7ad1cd226b57dcaee
-  data.tar.gz: 03c9162733bfaf96cc08fcd101231174efbf97378cdefe47e55d91d603c0b6bd
+  metadata.gz: 8975632aa3e90165634356f25fc0c8cff2909e84b3177a58e192b16ee325b745
+  data.tar.gz: 543aa029054018c26f87d2d1836302ab671de51b70caa7a531ed0011a405f5e6
 SHA512:
-  metadata.gz: 8bc8c454821233d8c899af8c6224b08d5c48b615ac2c6bbf5dc03140cce041c60c7f1208c78a631576875b3eb3507ca82ae61e2c57a19b5c4fe0e6aab3d30c1d
-  data.tar.gz: 735cf1ba5f33e2f56bd87cbd2720eeb6b685822b148b7b2a13fd8e7537dcd63cf73e6253e050445be136087bcacc4802dcda36c939f1080994c2a8733a1f4b78
+  metadata.gz: c76e854eb6449addef5b1deb2066d70cc6c51e8650817efa7c4fef8efa0d847d0b1e85c75d9faa91dde497495a01c980c674342148326f8c43f146a3321175d4
+  data.tar.gz: 80761d784e504c167954827dbe3e3e8193e571e91eee67b8bd9aa12b7990b9845020f20399c3367f63b41d441107fa15748e6e4199d327ce2588d1976a6227ca

data/CHANGELOG.md

@@ -4,10 +4,15 @@ All notable changes to bible270. Format follows [Keep a Changelog](https://keepa
 
 ## Unreleased Changes
 
+### Added
+
+- mark a newly completed day with a brief, translucent dove animation that begins immediately on the final checkoff in JavaScript-capable browsers and remains available after Turbo or HTML-fallback responses; it respects reduced-motion preferences, replaces the final generic success message, and never blocks interaction
+
 ### Fixed
 
 - correct Day 27's New Testament reading to include Matthew 26:75
 - silently recover all Turbo interactions from stale sessions, retry once with a fresh CSRF token, and reload rather than submit with a known-stale token if refreshing fails
+- keep repeated or concurrent explicit checkoffs idempotent instead of raising a duplicate-validation Rails 422 error
 
 **[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.3.0...main)**
 

data/app/controllers/bible270/checkoffs_controller.rb

@@ -18,9 +18,10 @@ module Bible270
       requested_state = params[:checked] if params.key?(:checked)
       head :bad_request and return if params.key?(:checked) && !%w[0 1].include?(requested_state)
 
-      marked_read = apply_checkoff(requested_state)
+      marked_read, checkoff_changed = apply_checkoff(requested_state)
 
       @reader = current_reader.reload.reload_progress
+      @day_just_completed = marked_read && checkoff_changed && @reader.day_complete?(@day)
       @reader_tracks = @reader.read_tracks_for(@day)
       @readings = Plan.readings_for(@day)
 
@@ -34,8 +35,12 @@ module Bible270
       respond_to do |format|
         format.turbo_stream
         format.html do
-          message = marked_read ? 'Reading marked read.' : 'Reading marked unread.'
-          redirect_to day_path(@day), flash: { b270_interaction_status: message }
+          if @day_just_completed
+            redirect_to day_path(@day), flash: { b270_day_just_completed: @day }
+          else
+            message = marked_read ? 'Reading marked read.' : 'Reading marked unread.'
+            redirect_to day_path(@day), flash: { b270_interaction_status: message }
+          end
         end
       end
     end
@@ -43,19 +48,33 @@ module Bible270
   private
 
     def apply_checkoff(requested_state)
-      existing = current_reader.checkoffs.find_by(day: @day, track: @track, part: @part)
+      existing = find_checkoff
       if requested_state == '1'
         current_reader.ensure_started!
-        current_reader.checkoffs.create_or_find_by!(day: @day, track: @track, part: @part)
-        true
+        [true, existing.nil? && create_checkoff]
       elsif requested_state == '0' || existing
-        existing&.destroy
-        false
+        [false, existing ? existing.destroy.present? : false]
       else
         current_reader.ensure_started!
-        current_reader.checkoffs.create(day: @day, track: @track, part: @part)
-        true
+        [true, create_checkoff]
       end
     end
+
+    def find_checkoff
+      Checkoff.uncached do
+        Checkoff.find_by(reader_id: current_reader.id, day: @day, track: @track, part: @part)
+      end
+    end
+
+    def create_checkoff
+      Checkoff.create!(reader: current_reader, day: @day, track: @track, part: @part)
+      true
+    rescue ActiveRecord::RecordInvalid, ActiveRecord::RecordNotUnique
+      # A repeated or concurrent desired-state request is already successful. Do
+      # not hide any other validation failure under the same recovery.
+      raise unless find_checkoff
+
+      false
+    end
   end
 end

data/app/controllers/bible270/days_controller.rb

@@ -20,6 +20,7 @@ module Bible270
       @editing_comment_id = editing_comment_id
       @new_comment = Comment.new(day: @day, parent_id: reply_parent&.id)
       @reader_tracks = current_reader ? current_reader.read_tracks_for(@day) : []
+      @day_just_completed = flash[:b270_day_just_completed].to_i == @day
 
       # Every box on the day, not every track: an Old Testament reading of three
       # chapters is three rows, so counting tracks would call someone finished

data/app/views/bible270/checkoffs/toggle.turbo_stream.erb

@@ -4,7 +4,8 @@
 <% end %>
 
 <%= turbo_stream.replace "day_progress_#{@day}" do %>
-  <%= render "bible270/days/day_progress", day: @day, reader: @reader %>
+  <%= render "bible270/days/day_progress", day: @day, reader: @reader,
+        just_completed: @day_just_completed %>
 <% end %>
 
 <%= turbo_stream.replace "completers_#{@day}" do %>

data/app/views/bible270/days/_day_progress.html.erb

@@ -1,9 +1,10 @@
-<%# locals: (day:, reader:) %>
+<%# locals: (day:, reader:, just_completed: false) %>
 <%
   previous_day = day > 1 ? day - 1 : nil
   next_day = day < Bible270::Plan::DAYS ? day + 1 : nil
   total_parts = Bible270::Plan.total_parts(day)
   complete = reader&.day_complete?(day)
+  completion_data = just_completed ? { b270_day_just_completed: true, b270_day: day } : {}
 %>
 <div id="day_progress_<%= day %>">
   <div class="b270-daynav">
@@ -32,7 +33,9 @@
 
 
   <% if complete %>
-    <div class="b270-day-complete" role="status" aria-live="polite">
+    <%= render "bible270/shared/day_completion_dove", day: day if just_completed %>
+    <div class="b270-day-complete" role="status" aria-live="polite"
+         <%= tag.attributes(data: completion_data) %>>
       <div>
         <strong>Day <%= day %> complete</strong>
         <span>All <%= total_parts %> portions are checked off.</span>

data/app/views/bible270/days/show.html.erb

@@ -1,7 +1,8 @@
 <% content_for :title, "Day #{@day} — #{Bible270.config.app_name}" %>
 
 <div class="b270-day-page">
-  <%= render "bible270/days/day_progress", day: @day, reader: current_reader %>
+  <%= render "bible270/days/day_progress", day: @day, reader: current_reader,
+        just_completed: @day_just_completed %>
 
   <%= render "bible270/shared/interaction_status" %>
 
@@ -33,3 +34,4 @@
 </div>
 
 <%= render "bible270/shared/interaction_ui" %>
+<%= render "bible270/shared/day_completion_effect", day: @day %>

data/app/views/bible270/shared/_day_completion_dove.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (day:) %>
+<svg class="b270-completion-dove" data-b270-completion-dove data-b270-day="<%= day %>"
+     viewBox="0 0 260 200" aria-hidden="true" focusable="false">
+  <defs>
+    <radialGradient id="b270-dove-light" cx="50%" cy="43%" r="68%">
+      <stop offset="0%" stop-color="#fff" />
+      <stop offset="58%" stop-color="#fffef8" />
+      <stop offset="100%" stop-color="#fff9e2" />
+    </radialGradient>
+  </defs>
+  <g class="b270-dove-silhouette">
+    <path d="M122 94C103 82 87 69 72 53L39 17l11 28-23-23 15 32-23-20 19 30-24-16 22 26-25-12 27 23-24-7 30 19-22-3 31 17c20 11 42 16 59 8 5-9 8-18 10-25Z" />
+    <path d="M138 94c19-12 35-25 50-41l33-36-11 28 23-23-15 32 23-20-19 30 24-16-22 26 25-12-27 23 24-7-30 19 22-3-31 17c-20 11-42 16-59 8-5-9-8-18-10-25Z" />
+    <path d="M148 140c6 7 16 14 24 19 2 2 1 5-2 6-5 2-10-1-14-5 4 8 7 17 4 22-2 3-5 1-7-2l-6-11c3 10 2 19-3 24-2 3-5 1-6-3l-4-15c0 11-3 21-8 24-3 2-5-1-6-5l-1-19c-3 10-6 17-11 20-3 2-5-1-5-5l2-19c-4 8-9 13-14 14-3 1-5-2-4-6l6-18c-5 5-11 7-16 4-3-1-3-4 0-7 7-7 17-13 26-19Z" />
+    <path d="M108 116c5-10 9-17 14-17-1-11-2-23 4-29 5-4 12-3 15 1 2 3 2 6 1 9 3 .2 6 .8 8 1.5-2.5 1.3-5.5 2.1-8 2.5-1 5-3 10-5 15 6 3 11 9 15 17-1 15-6 28-16 39-3 4-7 7-10 9-4-2-8-5-11-9-9-11-14-25-11-37 1-1 2-2 4-2Z" />
+  </g>
+</svg>

data/app/views/bible270/shared/_day_completion_effect.html.erb

@@ -0,0 +1,67 @@
+<%# locals: (day:) %>
+<template data-b270-completion-dove-template data-b270-day="<%= day %>">
+  <%= render "bible270/shared/day_completion_dove", day: day %>
+</template>
+<script nonce="<%= content_security_policy_nonce %>">
+  (() => {
+    if (window.Bible270DayCompletionEffect) return;
+
+    function willCompleteDay(form) {
+      const desiredState = form.querySelector("input[name='checked']");
+      if (!desiredState || desiredState.value !== "1") return false;
+
+      const unfinished = Array.from(
+        document.querySelectorAll("form[data-b270-checkoff='true'] input[name='checked'][value='1']")
+      );
+      return unfinished.length === 1 && unfinished[0].form === form;
+    }
+
+    function startDove(day) {
+      if (document.querySelector("[data-b270-completion-dove][data-b270-immediate]")) return;
+
+      const template = document.querySelector("[data-b270-completion-dove-template]");
+      if (!template || template.dataset.b270Day !== day) return;
+
+      const dove = template.content.querySelector("[data-b270-completion-dove]").cloneNode(true);
+      dove.dataset.b270Immediate = "true";
+      document.body.append(dove);
+    }
+
+    function removeServerDuplicate() {
+      const immediate = document.querySelector("[data-b270-completion-dove][data-b270-immediate]");
+      if (!immediate) return;
+
+      document.querySelectorAll("[data-b270-completion-dove]").forEach((dove) => {
+        if (dove !== immediate) dove.remove();
+      });
+    }
+
+    document.addEventListener("submit", (event) => {
+      const form = event.target.closest("form[data-b270-checkoff='true']");
+      const check = form && form.querySelector(".b270-check");
+      if (!check) return;
+
+      const bounds = check.getBoundingClientRect();
+      document.documentElement.style.setProperty(
+        "--b270-dove-origin-x",
+        `${bounds.left + bounds.width / 2}px`
+      );
+      document.documentElement.style.setProperty(
+        "--b270-dove-origin-y",
+        `${bounds.top + bounds.height / 2}px`
+      );
+
+      if (willCompleteDay(form)) startDove(form.action.match(/\/day\/(\d+)/)?.[1] || "");
+    });
+
+    document.addEventListener("animationend", (event) => {
+      if (event.target.matches("[data-b270-completion-dove]")) event.target.remove();
+    });
+
+    new MutationObserver(removeServerDuplicate).observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+    window.Bible270DayCompletionEffect = true;
+  })();
+</script>

data/app/views/bible270/shared/_interaction_ui.html.erb

@@ -177,7 +177,11 @@
           staleSessionResponse(event.detail.fetchResponse)) return;
 
       delete form.dataset.b270RetriedAfterStaleSession;
-      if (event.detail.success) {
+      const completedDay = form.dataset.b270Checkoff === "true" &&
+        document.querySelector("[data-b270-day-just-completed='true']");
+      if (event.detail.success && completedDay) {
+        announce("");
+      } else if (event.detail.success) {
         announce(form.dataset.b270Success || "Saved.", "success");
       } else {
         announce(form.dataset.b270Failure || "Couldn’t save that. Try again.", "error");

data/app/views/bible270/shared/_styles.html.erb

@@ -147,6 +147,18 @@
   .b270-day-complete strong{font-family:"Spectral",serif;font-size:16px}
   .b270-day-complete span{font-size:12px;color:var(--muted)}
   .b270 .b270-day-complete .b270-btn{flex:none;margin:0 0 0 auto}
+  .b270-completion-dove{position:fixed;z-index:1000;top:var(--b270-dove-origin-y,72vh);left:var(--b270-dove-origin-x,50vw);
+                        width:min(75vw,97.5vh);height:auto;overflow:visible;pointer-events:none;opacity:0;
+                        filter:drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 24px rgba(255,252,220,1)) drop-shadow(0 0 52px rgba(225,191,92,.82));
+                        will-change:top,left,transform,opacity;animation:b270-dove-flight 1.6s cubic-bezier(.18,.72,.28,1) both}
+  .b270-dove-silhouette{fill:url(#b270-dove-light);stroke:none}
+  @keyframes b270-dove-flight{
+    0%{top:var(--b270-dove-origin-y,72vh);left:var(--b270-dove-origin-x,50vw);opacity:.22;visibility:visible;transform:translate(-50%,-50%) scale(.02) rotate(-8deg)}
+    8%{top:calc(var(--b270-dove-origin-y,72vh) - 10px);left:var(--b270-dove-origin-x,50vw);opacity:.78;transform:translate(-50%,-50%) scale(.08) rotate(-5deg)}
+    64%{top:38vh;left:52vw;opacity:.92;transform:translate(-50%,-50%) scale(1) rotate(4deg)}
+    99%{visibility:visible}
+    100%{top:-25vh;left:115vw;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(1.55) rotate(12deg)}
+  }
 
   /* readings */
   .b270-readings{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
@@ -156,7 +168,7 @@
   .b270-reading.rest{opacity:.65}
   .b270-toggle{border:none;background:none;padding:0;cursor:pointer}
   .b270-toggle form{margin:0}
-  .b270-check{width:26px;height:26px;border-radius:8px;border:2px solid var(--line);flex:none;display:grid;place-items:center;background:#fff;transition:all .18s}
+  .b270-check{width:26px;height:26px;border-radius:8px;border:2px solid var(--line);flex:none;display:grid;place-items:center;background:#fff;transition:background-color .18s,border-color .18s,opacity .18s}
   .b270-check svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
   .b270-reading.done.ot .b270-check{background:var(--teal);border-color:var(--teal)}
   .b270-reading.done.nt .b270-check{background:var(--oxblood);border-color:var(--oxblood)}
@@ -366,6 +378,7 @@
     .b270 .b270-day-complete .b270-btn{margin:3px 0 0}
   }
   @media (prefers-reduced-motion:reduce){
+    .b270-completion-dove{display:none!important}
     .b270 *,.b270 *::before,.b270 *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
   }
 </style>

data/lib/bible270/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bible270
-  VERSION = '1.3.2'
+  VERSION = '1.4.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bible270
 version: !ruby/object:Gem::Version
-  version: 1.3.2
+  version: 1.4.0
 platform: ruby
 authors:
 - Andrew vonderLuft
@@ -138,6 +138,8 @@ files:
 - app/views/bible270/sessions/new.html.erb
 - app/views/bible270/shared/_comment_drafts.html.erb
 - app/views/bible270/shared/_comment_notification_choices.html.erb
+- app/views/bible270/shared/_day_completion_dove.html.erb
+- app/views/bible270/shared/_day_completion_effect.html.erb
 - app/views/bible270/shared/_day_index.html.erb
 - app/views/bible270/shared/_footer.html.erb
 - app/views/bible270/shared/_grid_legend.html.erb