Hero image uploadable

app/app/assets/stylesheets/admin/field-value.css

@@ -5,7 +5,7 @@
 }
 
 .admin-field-value-image {
-  width: 200px;
+  width: fit-content;
   height: 200px;
   border: 1px solid var(--default-border-color);
 }

app/app/assets/stylesheets/admin/field.css

@@ -1,7 +1,7 @@
 .admin-field {
-  min-height: 2rem;
   display: flex;
-  gap: 1rem;
+  flex-direction: column;
+  gap: 0.25rem;
 
   .admin-field__label, .admin-field__value {
     display: flex;

app/app/assets/stylesheets/admin/fields.css

@@ -1,5 +1,5 @@
 .admin-fields {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 2.0rem;
 }

app/app/assets/stylesheets/admin/list.css

@@ -36,6 +36,17 @@
     color: var(--color-gray-900);
     white-space: nowrap;
   }
+
+  &.is-image {
+    height: fit-content;
+  }
+
+  &.is-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1.0rem;
+    word-break: keep-all;
+  }
 }
 
 .admin-list-cell-with-icon {

app/app/assets/stylesheets/common/text-link.css

@@ -18,5 +18,6 @@
 
   &:hover {
     text-decoration: none;
+    cursor: pointer;
   }
 }

app/app/assets/stylesheets/media/hero.css

@@ -26,26 +26,122 @@
   bottom: 0;
   right: 0;
   opacity: 0;
+}
+
+.hero-container {
+
+  &[data-hero-image-count="1"] {
+    .hero-image {
+      animation: image-switch-animation 5s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+    }
+  }
+
+  &[data-hero-image-count="2"] {
+    .hero-image {
+      animation: image-switch-animation 10s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+    }
+  }
+
+  &[data-hero-image-count="3"] {
+    .hero-image {
+      animation: image-switch-animation 15s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+      &:nth-child(3) { animation-delay: 10s; }
+    }
+  }
 
-  animation: image-switch-animation 25s infinite;
+  &[data-hero-image-count="4"] {
+    .hero-image {
+      animation: image-switch-animation 20s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+      &:nth-child(3) { animation-delay: 10s; }
+      &:nth-child(4) { animation-delay: 15s; }
+    }
+  }
+
+  &[data-hero-image-count="5"] {
+    .hero-image {
+      animation: image-switch-animation 25s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+      &:nth-child(3) { animation-delay: 10s; }
+      &:nth-child(4) { animation-delay: 15s; }
+      &:nth-child(5) { animation-delay: 20s; }
+    }
+  }
 
-  &:nth-child(1) {
-    animation-delay: 0s;
+  &[data-hero-image-count="6"] {
+    .hero-image {
+      animation: image-switch-animation 30s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+      &:nth-child(3) { animation-delay: 10s; }
+      &:nth-child(4) { animation-delay: 15s; }
+      &:nth-child(5) { animation-delay: 20s; }
+      &:nth-child(6) { animation-delay: 25s; }
+    }
   }
 
-  &:nth-child(2) {
-    animation-delay: 5s;
+  &[data-hero-image-count="7"] {
+    .hero-image {
+      animation: image-switch-animation 35s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+      &:nth-child(3) { animation-delay: 10s; }
+      &:nth-child(4) { animation-delay: 15s; }
+      &:nth-child(5) { animation-delay: 20s; }
+      &:nth-child(6) { animation-delay: 25s; }
+      &:nth-child(7) { animation-delay: 30s; }
+    }
   }
 
-  &:nth-child(3) {
-    animation-delay: 10s;
+  &[data-hero-image-count="8"] {
+    .hero-image {
+      animation: image-switch-animation 40s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+      &:nth-child(3) { animation-delay: 10s; }
+      &:nth-child(4) { animation-delay: 15s; }
+      &:nth-child(5) { animation-delay: 20s; }
+      &:nth-child(6) { animation-delay: 25s; }
+      &:nth-child(7) { animation-delay: 30s; }
+      &:nth-child(8) { animation-delay: 35s; }
+    }
   }
 
-  &:nth-child(4) {
-    animation-delay: 15s;
+  &[data-hero-image-count="9"] {
+    .hero-image {
+      animation: image-switch-animation 45s infinite;
+      &:nth-child(1) { animation-delay: 0s; }
+      &:nth-child(2) { animation-delay: 5s; }
+      &:nth-child(3) { animation-delay: 10s; }
+      &:nth-child(4) { animation-delay: 15s; }
+      &:nth-child(5) { animation-delay: 20s; }
+      &:nth-child(6) { animation-delay: 25s; }
+      &:nth-child(7) { animation-delay: 30s; }
+      &:nth-child(8) { animation-delay: 35s; }
+      &:nth-child(9) { animation-delay: 40s; }
+    }
   }
 
-  &:nth-child(5) {
-    animation-delay: 20s;
+  &[data-hero-image-count="10"] {
+    .hero-image {
+      animation: image-switch-animation 50s infinite;
+      &:nth-child(1)  { animation-delay: 0s;  }
+      &:nth-child(2)  { animation-delay: 5s;  }
+      &:nth-child(3)  { animation-delay: 10s; }
+      &:nth-child(4)  { animation-delay: 15s; }
+      &:nth-child(5)  { animation-delay: 20s; }
+      &:nth-child(6)  { animation-delay: 25s; }
+      &:nth-child(7)  { animation-delay: 30s; }
+      &:nth-child(8)  { animation-delay: 35s; }
+      &:nth-child(9)  { animation-delay: 40s; }
+      &:nth-child(10) { animation-delay: 45s; }
+    }
   }
 }

app/app/controllers/admin/media_page_settings/media_hero_images_controller.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Admin
+  module MediaPageSettings
+    class MediaHeroImagesController < Admin::ApplicationController
+      def new
+        @media_hero_image = MediaHeroImage.new
+      end
+
+      def edit
+        @media_hero_image = MediaHeroImage.find(params[:id])
+      end
+
+      def create
+        @media_hero_image = MediaHeroImage.new(media_hero_image_params)
+
+        if @media_hero_image.save
+          redirect_to admin_media_page_setting_path
+        else
+          render :new
+        end
+      end
+
+      def update
+        @media_hero_image = MediaHeroImage.find(params[:id])
+
+        if @media_hero_image.update(media_hero_image_params)
+          redirect_to admin_media_page_setting_path
+        else
+          render :edit
+        end
+      end
+
+      def destroy
+        @media_hero_image = MediaHeroImage.find(params[:id])
+
+        @media_hero_image.destroy
+
+        redirect_to admin_media_page_setting_path
+      end
+
+      private
+
+      def media_hero_image_params
+        params.require(:media_hero_image).permit(:image)
+      end
+    end
+  end
+end

app/app/controllers/admin/media_page_settings_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Admin
+  class MediaPageSettingsController < ApplicationController
+    def show
+      @media_hero_images = MediaHeroImage.sort_order_ordered
+    end
+  end
+end

app/app/controllers/media/homes_controller.rb

@@ -5,6 +5,8 @@ class HomesController < ApplicationController
     NOTICES_LIMIT = 3
 
     def show
+      @media_hero_images = MediaHeroImage.sort_order_ordered
+
       @notices = Notice.only_published
                        .published_at_ordered
                        .limit(NOTICES_LIMIT)

app/app/models/media_hero_image.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class MediaHeroImage < ApplicationRecord
+  include UniversalId
+
+  setup_universal_id('mhi')
+  has_one_attached(:image)
+
+  validates :sort_order, presence: true, uniqueness: true, numericality: { only_integer: true, greater_than: 0 }
+
+  before_validation :set_sort_order, on: :create
+
+  scope :sort_order_ordered, -> { order(:sort_order) }
+
+  private
+
+  def set_sort_order
+    return if sort_order.present?
+
+    self.sort_order = MediaHeroImage.maximum(:sort_order).to_i + 1
+  end
+end

app/app/views/admin/game_fields/_form.html.haml

@@ -14,7 +14,7 @@
         .admin-field__label
           = GameField.human_attribute_name(:name)
         .admin-field__value
-          = form.text_field :name, class: 'admin-form-text_field', required: true
+          = form.text_field :name, class: 'admin-form-text_field is-long', required: true
     .admin-fields__field
       .admin-field
         .admin-field__label

app/app/views/admin/media_page_settings/media_hero_images/_form.html.haml

@@ -0,0 +1,23 @@
+= form_with model: media_hero_image, url:, local: true do |form|
+  .admin-fields
+    .admin-fields__field
+      .admin-field
+        .admin-field__label
+          = MediaHeroImage.human_attribute_name(:image)
+        .admin-field__value
+          .admin-form-file_field__wrapper
+            = form.file_field :image, class: 'admin-form-file_field__field', accept: 'image/*', required: true
+            = image_tag media_hero_image.image.url, class: 'admin-field-value-image' if media_hero_image.image.attached?
+    - if media_hero_image.errors.any?
+      .admin-fields__field
+        .admin-form-errors
+          %ul.admin-form-error-list
+            - media_hero_image.errors.full_messages.each do |message|
+              %li.admin-form-error-list__item
+                = message
+    .admin-fields__field
+      .admin-form-action_buttons
+        .admin-form-action_buttons__action
+          = form.submit t('view.admin.button.save'), class: 'admin-form-action_button'
+        .admin-form-action_buttons__action
+          = link_to t('view.admin.button.cancel'), cancel_path, class: 'admin-form-action_button is-cancel'

app/app/views/admin/media_page_settings/media_hero_images/edit.html.haml

@@ -0,0 +1,17 @@
+:ruby
+  add_breadcrumb t('view.admin.breadcrumbs.media_page_settings.show'), admin_media_page_setting_path
+  add_breadcrumb t('view.admin.breadcrumbs.media_page_settings.media_hero_images.edit')
+
+.admin-content
+  .admin-content__title
+    .admin-title
+      .admin-title__image
+        = image_tag 'icon-setting.png', class: 'admin-title-image'
+      .admin-title__text
+        %h1.admin-title_text
+          ヒーロー画像
+
+  .admin-content__fields
+    = render 'form', media_hero_image: @media_hero_image,
+                     url: admin_media_page_setting_media_hero_image_path(@media_hero_image),
+                     cancel_path: admin_media_page_setting_path

app/app/views/admin/media_page_settings/media_hero_images/new.html.haml

@@ -0,0 +1,17 @@
+:ruby
+  add_breadcrumb t('view.admin.breadcrumbs.media_page_settings.show'), admin_media_page_setting_path
+  add_breadcrumb t('view.admin.breadcrumbs.media_page_settings.media_hero_images.new')
+
+.admin-content
+  .admin-content__title
+    .admin-title
+      .admin-title__image
+        = image_tag 'icon-setting.png', class: 'admin-title-image'
+      .admin-title__text
+        %h1.admin-title_text
+          ヒーロー画像
+
+  .admin-content__fields
+    = render 'form', media_hero_image: @media_hero_image,
+                     url: admin_media_page_setting_media_hero_images_path,
+                     cancel_path: admin_media_page_setting_path