na

Gemfile.lock

@@ -205,7 +205,7 @@ GEM
       activesupport (>= 7.0.0)
       rack
       railties (>= 7.0.0)
-    psych (5.2.3)
+    psych (5.2.4)
       date
       stringio
     public_suffix (6.0.2)

app/assets/stylesheets/application.css

@@ -318,6 +318,16 @@ main {
   padding: 1.6rem 1.2rem;
 }
 
+.error {
+  padding: 1.6rem 1.2rem;
+  border-radius: 1.6rem;
+  background-color: var(--clr-text-highlight);
+  color: var(--clr-black);
+  font-size: var(--fs-s);
+  line-height: 1.2;
+  
+}
+
 .question-answer {
     
   font-size: var(--fs-lg);
@@ -342,8 +352,7 @@ main {
 
   &:has(input[type=radio]:checked) {
     & label {
-      outline: 4px solid var(--clr-text-highlight);
-      outline-offset: -4px;
+      background-color: var(--clr-text-highlight);      
     }    
   }
 
@@ -454,7 +463,7 @@ label.question-answer {
   }
 
   &:has(.field_with_errors) {
-    outline: 4px solid var(--clr-error);
+    outline: 4px solid var(--clr-text-highlight);
     outline-offset: -4px;
   }
 }

app/models/player.rb

@@ -1,6 +1,6 @@
 class Player < ApplicationRecord
 
-  validates_presence_of :name
+  validates_presence_of :name, message: I18n.t('please_type_your_name_to_continue')
 
   has_many :answers, dependent: :destroy
 

app/views/players/new.html.erb

@@ -14,6 +14,14 @@
     <div class="question-header">
       <%= t 'what_is_your_name' %>
     </div>
+
+    <% if form.object.errors.any? %>    
+      <div class="error">
+        <% form.object.errors.messages.each do |k, v| %>
+          <%= v.join(', ') %>
+        <% end %>
+      </div>
+    <% end %>
     
     <%= form.label :name, class: "question-answer" do %>    
       <%= form.text_field :name, placeholder: t('what_is_your_name') %>

config/locales/en.yml

@@ -12,7 +12,8 @@ en:
   see_results: See results
   results: Results
   read_more: Read more
-  share_on_story: Share on story  
+  share_on_story: Share on story
+  please_type_your_name_to_continue: Please type your name to continue  
 
   
   languages: