feat: implement popping nms

app/assets/stylesheets/application.css

@@ -28,17 +28,27 @@ header .muted {
     padding: 10px;
 }
 
-.nm-list {
+#nm-list {
 
 }
 
-.nm-list section {
+#nm-list section {
     margin-bottom: 5px;
     display: grid;
-    grid-template-columns: .05fr 1fr 1fr .5fr;
+    grid-template-columns: .05fr 1fr 1fr .3fr;
     align-items: center;
-    padding: 0 10px;
+    padding-left: 10px;
-    background-color: #eee;
+    background-color: #3D9970;
+    color: white;
+}
+
+#nm-list section.popped {
+    background-color: #b5443a;
+    color: #63f0fd;
+}
+
+#nm-list section div.button {
+    height: 100%;
 }
 
 img {
@@ -59,7 +69,7 @@ h3.nm-info {
 .badge {
     font-size: 12px;
     font-weight: bold;
-    border: 1px solid black;
+    border: 1px solid white;
     vertical-align: middle;
     padding: 1px 6px;
     border-radius: 10px;
@@ -70,13 +80,31 @@ small.badge {
     font-size: 10px;
 }
 
+.popped .badge {
+    border-color: #63f0fd;
+}
+
 button.action {
     width: 100%;
     height: 100%;
+    border: 0;
+    display: block;
+    background-color: #005ba4;
+    color: #daffbe;
+    font-size: 18px;
+    text-transform: uppercase;
+}
+
+button.reset {
+    background-color: tomato;
+}
+
+button.action:hover {
+    cursor: pointer;
 }
 
 section .meta {
     padding-left: 10px;
-    padding-top: 4px;
+    padding-top: 10px;
-    padding-bottom: 4px;
+    padding-bottom: 10px;
 }

app/controllers/instance_controller.rb

@@ -11,7 +11,17 @@ class InstanceController < ApplicationController
   end
 
   def show
-    @instance = Instance.find_by(public_id: show_instance_params)
+    @instance = Instance.includes(:pops).find_by(public_id: show_instance_params)
+  end
+
+  def pop
+    instance_id, nm = pop_instance_params
+    parent_instance = Instance.find_by(public_id: instance_id)
+    pop = Pop.new(instance_id: parent_instance.id, name: nm)
+    if pop.save
+      @instance = Instance.includes(:pops).find_by(public_id: instance_id)
+      render partial: "list", locals: { instance: @instance }
+    end
   end
 
   private
@@ -23,4 +33,8 @@ class InstanceController < ApplicationController
   def show_instance_params
     params.expect(:public_id)
   end
+
+  def pop_instance_params
+    params.expect(:instance, :nm)
+  end
 end

app/javascript/application.js

@@ -1,3 +1,8 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "@hotwired/turbo-rails"
+import "htmx.org"
-import "controllers"
+import htmx from "htmx.org"
+htmx.logger = function(elt, event, data) {
+    if(console) {
+        console.log(event, elt, data);
+    }
+}

app/javascript/controllers/application.js

@@ -1,9 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-
-const application = Application.start()
-
-// Configure Stimulus development experience
-application.debug = false
-window.Stimulus   = application
-
-export { application }

app/javascript/controllers/hello_controller.js

@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}

app/javascript/controllers/index.js

@@ -1,4 +0,0 @@
-// Import and register all your controllers from the importmap via controllers/**/*_controller
-import { application } from "controllers/application"
-import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-eagerLoadControllersFrom("controllers", application)

app/models/instance.rb

@@ -1,3 +1,5 @@
 class Instance < ApplicationRecord
+  has_many :pops
+
   validates :zone, inclusion: { in: %w[anemos pagos pyros hydatos] }
 end

app/models/pop.rb

@@ -0,0 +1,3 @@
+class Pop < ApplicationRecord
+  belongs_to :instance
+end

app/views/instance/_list.html.erb

@@ -0,0 +1,48 @@
+<main id="nm-list">
+  <% APP_DATA[instance.zone.to_sym][:nms].each do |nm| %>
+    <% is_popped = instance.pops.any? { |pop| pop.name == nm[:name].parameterize } %>
+    <section class="<%= class_names(popped: is_popped) %>">
+      <div>
+        <img src="<%= "/#{nm[:element]}.png" %>" alt="<%= nm[:element] %>" width="30" />
+      </div>
+      <div class="meta">
+        <h3 class="nm-info">
+          <span class="badge">LV<%= nm[:level].to_s.rjust(2, "0") %></span>
+          <%= nm[:name] %>
+          <% if nm[:weather] %>
+            <img src="/<%= nm[:weather] %>.png" title="during <%= nm[:weather] %> only" width="15" />
+          <% end %>
+        </h3>
+        <div class="spawn-info">
+          «
+          <strong><%= nm[:spawned_by][:name] %></strong>
+          <% if nm[:spawned_by][:night_only] %>
+            <span title="only at night">🌙</span>
+          <% end %>
+          <% if nm[:spawned_by][:weather] %>
+            <img src="/<%= nm[:spawned_by][:weather] %>.png" title="during <%= nm[:spawned_by][:weather] %> only" width="15" />
+          <% end %>
+          <small class="badge">LV<%= nm[:spawned_by][:level].to_s.rjust(2, "0") %></small>
+
+        </div>
+      </div>
+      <div></div>
+      <div class="button">
+        <% if is_popped %>
+          <button
+            class="action reset"
+            hx-post="/reset?instance=<%= @instance.public_id %>&nm=<%= nm[:name].parameterize %>"
+            hx-target="#nm-list"
+          >Reset</button>
+        <% else %>
+          <button
+            class="action"
+            hx-post="/pop?instance=<%= @instance.public_id %>&nm=<%= nm[:name].parameterize %>"
+            hx-target="#nm-list"
+          >Pop</button>
+        <% end %>
+
+      </div>
+    </section>
+  <% end %>
+</main>

app/views/instance/show.html.erb

@@ -4,37 +4,4 @@
   <%= render partial: "zone_img", locals: { zone: @instance.zone, alt: @instance.zone, title: @instance.zone.upcase_first } %>
 </header>
 
-<main class="nm-list">
+<%= render partial: "list", locals: { instance: @instance } %>
-  <% APP_DATA[@instance.zone.to_sym][:nms].each do |nm| %>
-    <section class="<%= nm[:element] %>">
-      <div>
-        <img src="<%= "/#{nm[:element]}.png" %>" alt="<%= nm[:element] %>" width="30" />
-      </div>
-      <div class="meta">
-        <h3 class="nm-info">
-          <span class="badge">LV<%= nm[:level].to_s.rjust(2, "0") %></span>
-          <%= nm[:name] %>
-          <% if nm[:weather] %>
-            <img src="/<%= nm[:weather] %>.png" title="during <%= nm[:weather] %> only" width="15" />
-          <% end %>
-        </h3>
-        <div class="spawn-info">
-          «
-          <strong><%= nm[:spawned_by][:name] %></strong>
-          <% if nm[:spawned_by][:night_only] %>
-            <span title="only at night">🌙</span>
-          <% end %>
-          <% if nm[:spawned_by][:weather] %>
-            <img src="/<%= nm[:spawned_by][:weather] %>.png" title="during <%= nm[:spawned_by][:weather] %> only" width="15" />
-          <% end %>
-          <small class="badge">LV<%= nm[:spawned_by][:level].to_s.rjust(2, "0") %></small>
-
-        </div>
-      </div>
-      <div></div>
-      <div>
-        <button class="action">Pop</button>
-      </div>
-    </section>
-  <% end %>
-</main>

app/views/layouts/application.html.erb

@@ -21,7 +21,7 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body>
+  <body hx-headers='{"X-CSRF-Token": "<%= form_authenticity_token %>"}'>
     <%= yield %>
   </body>
 </html>

config/importmap.rb

@@ -1,7 +1,4 @@
 # Pin npm packages by running ./bin/importmap
 
 pin "application"
-pin "@hotwired/turbo-rails", to: "turbo.min.js"
+pin "htmx.org" # @2.0.1
-pin "@hotwired/stimulus", to: "stimulus.min.js"
-pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
-pin_all_from "app/javascript/controllers", under: "controllers"

config/routes.rb

@@ -3,6 +3,7 @@ Rails.application.routes.draw do
 
   post "/new", to: "instance#create", as: :new_instance
   get "/:public_id", to: "instance#show", as: :show_instance
+  post "/pop", to: "instance#pop", as: :pop_in_instance
 
   get "up" => "rails/health#show", as: :rails_health_check
 

test/fixtures/pops.yml

@@ -0,0 +1,11 @@
+# Read about fixtures at https://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
+
+# This model initially had no columns defined. If you add columns to the
+# model remove the "{}" from the fixture names and add the columns immediately
+# below each fixture, per the syntax in the comments below
+#
+one: {}
+# column: value
+#
+two: {}
+# column: value

test/models/pop_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class PopTest < ActiveSupport::TestCase
+  # test "the truth" do
+  #   assert true
+  # end
+end