Add API for Character through AJAX and select2

app/javascript/packs/application.js

@@ -3,19 +3,21 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-import Rails from '@rails/ujs'
-import Turbolinks from 'turbolinks'
-import * as ActiveStorage from '@rails/activestorage'
-import "channels"
-
-Rails.start()
-Turbolinks.start()
-ActiveStorage.start()
+require("@rails/ujs").start()
+require("turbolinks").start()
+require("@rails/activestorage").start()
+require("channels")
+require('jquery') // may be redundant. Also made available in environment.js as a global plugin
+window.$ = $
+require('select2')
+$.fn.select2.defaults.set( "theme", "bootstrap" );
 
 // Toastr
 global.toastr = require('toastr')
 
-// Bootstrap
+// Stylesheets import
 import 'bootstrap/dist/js/bootstrap'
-import "bootstrap/dist/css/bootstrap";
+import "bootstrap/dist/css/bootstrap"
+import 'select2/dist/css/select2.css'
+import 'select2-bootstrap-theme/dist/select2-bootstrap'
 import "stylesheets/application"

app/javascript/stylesheets/application.scss

@@ -2,4 +2,17 @@
 
 html {
   background-color: red;
-}
+};
+
+// GLOBAL STYLES
+.bold {
+  font-weight: bold;
+ }
+
+ .italic {
+  font-style: italic;
+ }
+
+ .underline {
+  text-decoration: underline;
+ }

app/views/backstories/edit.html.erb

@@ -6,25 +6,33 @@
       <%= f.text_area :body %>
     </div>
 
+    <button id="traits-help-btn" type="button">Example Traits</button>
+    <%= image_tag('ajax-loader.gif', class: 'ajax-loading') %>
+
     <div>
       <%= f.label :personality %>
       <%= f.text_area :personality %>
     </div>
+    <div id="personality-help" class="help-box"><ul id="personality-help-list"></ul></div>
 
     <div>
       <%= f.label :ideals %>
       <%= f.text_area :ideals %>
     </div>
+    <div id="ideals-help" class="help-box"><ul id="ideals-help-list"></ul></div>
 
     <div>
       <%= f.label :bonds %>
       <%= f.text_area :bonds %>
     </div>
+    <div id="bonds-help" class="help-box"><ul id="bonds-help-list"></ul></div>
 
     <div>
       <%= f.label :flaws %>
       <%= f.text_area :flaws %>
     </div>
+    <div id="flaws-help" class="help-box"><ul id="flaws-help-list"></ul></div>
+
   <div>
     <%= f.submit %>
   </div>
@@ -37,4 +45,46 @@
   <%= link_to 'Delete Backstory details',  character_backstories_path(@character),
       method: :delete, data: {confirm: "Are you sure you want to delete this Character's Backstory details?"},
       class: 'button-delete' %>
-<% end %>
+<% end %>
+
+<script>
+  $(document).ready(function() {
+    $(".help-box").hide()
+    $(".ajax-loading").hide()
+    $("#traits-help-btn").on("click", fetch_traits);
+  });
+
+  function fetch_traits(ajax_loader) {
+    $.ajax({
+      type: "GET",
+      url: ("https://www.dnd5eapi.co/api/backgrounds/acolyte"),
+      dataType: "json",
+      beforeSend: function() {
+        $('.ajax-loading').show();
+      },
+      complete: function() {
+        $('.ajax-loading').hide();
+      },
+      success: function (result, status, xhr) {
+        result.personality_traits.from.forEach(element => {
+          $("#personality-help-list").append(`<li>${element}</li>`)
+        })
+        result.ideals.from.forEach(object => {
+          $("#ideals-help-list").append(`<li>${object.desc}</li>`)
+        })
+        result.bonds.from.forEach(element => {
+          $("#bonds-help-list").append(`<li>${element}</li>`)
+        })
+        result.flaws.from.forEach(element => {
+          $("#flaws-help-list").append(`<li>${element}</li>`)
+        })
+        $("#traits-help-btn").prop("disabled", true);
+      },
+      error: function (xhr, status, error) {
+        alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
+      }
+    })
+
+    $(".help-box").show();
+  }
+</script>

app/views/characters/_form.html.erb

@@ -38,6 +38,21 @@
       <%= form.text_field :background %>
     </div>
 
+    <div>
+      <%= form.label :race %>*
+      <%= form.select(:race,
+                      options_for_select(["Select Race", "Dragonborn", "Dwarf", "Elf", "Gnome", "Half-Elf","Half-Orc",
+                                            "Halfling", "Human", "Tiefling"],
+                                          {selected: "Select Race", disabled: "Select Race"}),
+                      {},
+                      {class: 'form-control',
+                      id: 'character_race'}) %>
+    </div>
+
+    <button id="alignment-help-btn" type="button">Help</button>    
+    <%= image_tag('ajax-loader.gif', class: 'ajax-loading') %>
+    <div id="alignment-help"><span id="alignment-help-race"></span> alignment description: <span id="alignment-help-text"></span></div>
+
     <div>
       <%= form.label :alignment %>*
       <%= form.select :alignment, 
@@ -46,24 +61,33 @@
         ["Lawful Evil", 'lawful_evil'], ["Neutral Evil", 'neutral_evil'], ["Chaotic Evil", 'chaotic_evil']] %>
     </div>
 
-    <div>
-      <%= form.label :race %>*
-      <%= form.text_field :race %>
-    </div>
-
     <div>
       <%= form.label :sex %>*
-      <%= form.text_field :sex %>
+      <%= form.select(:sex,
+                      options_for_select(["Select Sex assigned at birth", "Male", "Female", "Intersex", "Prefer not to say"],
+                                         {selected: "Select Sex assigned at birth", disabled: "Select Sex assigned at birth"}),
+                      {},
+                      {class: 'form-control'}) %>
     </div>
 
     <div>
       <%= form.label :gender %>
-      <%= form.text_field :gender %>
+      <%= form.select(:gender,
+                      options_for_select(["Male", "Female", "Non-binary", "Agender", "Genderfluid",
+                                            "Bigender", "Polygender", "Prefer not to say"],
+                                          "Prefer not to say"),
+                      {},
+                      {class: 'form-control'}) %>
     </div>
 
     <div>
       <%= form.label :sexual_orientation %>
-      <%= form.text_field :sexual_orientation %>
+      <%= form.select(:sexual_orientation,
+                      options_for_select(['Asexual', 'Bisexual', 'Gay or Lesbian', 'Straight', 
+                                            'Pansexual', 'Queer', 'Prefer not to say'],
+                                          'Prefer not to say'),
+                      {},
+                      {class: 'form-control'}) %>
     </div>
 
     <div>
@@ -76,18 +100,24 @@
     <h1>Class and Level</h1>
     <%= form.fields_for :class_and_levels do |ff| %>
       <div>
-        <%= ff.label :character_class %>*
-        <%= ff.text_field :character_class %>
+        <%= ff.label :character_class, class: 'label-character-class' %>*
+        <%= ff.select(:character_class,
+                      options_for_select(["Select Character Class", "Barbarian", "Bard", "Cleric", "Druid", "Fighter", "Monk", 
+                                            "Paladin", "Ranger", "Rogue", "Sorcerer", "Warlock", "Wizard"],
+                                          {selected: "Select Character Class", disabled: "Select Character Class"}),
+                      {},
+                      {class: 'form-control'}) %>
       </div>
 
+
       <div> 
         <%= ff.label :character_subclass %>*
         <%= ff.text_field :character_subclass %>
       </div>
 
       <div> 
         <%= ff.label :character_level %>*
-        <%= ff.text_field :character_level %>
+        <%= ff.number_field :character_level, step: 1, min: 1, max: 30 %>
       </div>
 
       <div>
@@ -103,3 +133,58 @@
     <%= form.submit %>
   </div>
 <% end %>
+
+<script>
+  $(document).ready(function() {
+    $("#alignment-help").hide()
+    $(".ajax-loading").hide()
+    $("#alignment-help-btn").on("click", fetch_race_alignment)
+    $(".form-control").select2({tags: true})
+  });
+
+  function validate_race() {
+    var errorMessage = "";
+    if ($("#character_race").val() == "") {
+      errorMessage += "Select Character Race for Alignment help."
+      alert(errorMessage);
+    }
+    return errorMessage;
+  }
+
+  function fetch_race_alignment() {
+    var validated = validate_race();
+    var race = $("#character_race").val()
+    var race_lower_cased = race.toLowerCase()
+    var races = ["dragonborn", "dwarf", "elf", "gnome", "half-elf", "half-orc", "halfling", "human", "tiefling"]
+
+    if (validated.length == 0) {
+      if (races.includes(race_lower_cased)) {
+        $.ajax({
+          type: "GET",
+          url: ("https://www.dnd5eapi.co/api/races/" + race_lower_cased),
+          dataType: "json",
+          beforeSend: function() {
+            $('.ajax-loading').show();
+          },
+          complete: function() {
+            $('.ajax-loading').hide();
+          },
+          success: function (result, status, xhr) {
+            $("#alignment-help-text").html(result.alignment)
+            $("#alignment-help-text").removeClass('italic')
+          },
+          error: function (xhr, status, error) {
+            alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
+          }
+        })
+      } else {
+        let message = 'No information available in the D&D 5e Systems Reference Document (SRD).'
+        $("#alignment-help-text").html(message)
+        $("#alignment-help-text").addClass('italic')
+      }
+
+      $("#alignment-help-race").html(race) // Puts Race text to help box 
+      $("#alignment-help").show();
+    }
+  }
+</script>

app/views/physical_attributes/edit.html.erb

@@ -1,16 +1,23 @@
 <h1>Editing Character's Physical Attributes</h1>
-
 <%= form_with(model: @physical_attribute, url: "/characters/#{@character.id}/physical_attributes/", method: 'put') do |f| %>
     <div>
       <%= f.label :age %>
-      <%= f.text_field :age %>
+      <%= f.number_field :age %>
     </div>
 
+    <button id="age-help-btn" type="button">Help</button>
+    <%= image_tag('ajax-loader.gif', class: 'ajax-loading') %>
+    <div id="age-help"><span id="age-help-race"><%= @character.race %></span> Age: <span id="age-help-text"></span></div>
+
     <div>
       <%= f.label :height %>
       <%= f.text_field :height %>
     </div>
 
+    <button id="size-help-btn" type="button">Help</button>    
+    <%= image_tag('ajax-loader.gif', class: 'ajax-loading') %>
+    <div id="size-help"><span id="age-help-race"><%= @character.race %></span> Size description: <span id="size-help-text"></span></div>
+
     <div>
       <%= f.label :weight %>
       <%= f.text_field :weight %>
@@ -43,4 +50,53 @@
   <%= link_to 'Delete all Physical Attributes',  character_physical_attributes_path(@character),
       method: :delete, data: {confirm: "Are you sure you want to delete this Character's Physical Attributes?"},
       class: 'button-delete' %>
-<% end %>
+<% end %>
+
+<script>
+  $(document).ready(function() {
+    $("#age-help").hide()
+    $("#size-help").hide()
+    $(".ajax-loading").hide()
+    $("#age-help-btn").on("click", fetch_age_height)
+    $("#size-help-btn").on("click", fetch_age_height);
+  });
+
+  function fetch_age_height() {
+    var race = $("#age-help-race").html().toLowerCase();
+    var races = ["dragonborn", "dwarf", "elf", "gnome", "half-elf", "half-orc", "halfling", "human", "tiefling"]
+
+    if (races.includes(race)) {
+      $.ajax({
+        type: "GET",
+        url: ("https://www.dnd5eapi.co/api/races/" + race),
+        dataType: "json",
+        beforeSend: function() {
+          $('.ajax-loading').show();
+        },
+        complete: function() {
+          $('.ajax-loading').hide();
+        },
+        success: function (result, status, xhr) {
+          $("#age-help-text").html(result.age)
+          $("#size-help-text").html(result.size_description)
+          $("#age-help-btn").prop("disabled", true) 
+          $("#size-help-btn").prop("disabled", true)
+        },
+        error: function (xhr, status, error) {
+          alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
+        }
+      })
+    } else {
+      let message = 'No information available in the D&D 5e Systems Reference Document (SRD).'
+      $("#age-help-text").html(message)
+      $("#age-help-text").addClass('italic')
+      $("#size-help-text").html(message)
+      $("#size-help-text").addClass('italic')
+      $("#age-help-btn").prop("disabled", true)
+      $("#size-help-btn").prop("disabled", true);
+    }
+
+    $("#age-help").show()
+    $("#size-help").show();
+  }
+</script>

config/webpack/environment.js

@@ -1,3 +1,12 @@
 const { environment } = require('@rails/webpacker')
 
+const webpack = require("webpack")
+environment.plugins.append('Provide',
+ new webpack.ProvidePlugin({
+   $: 'jquery',
+   jQuery: 'jquery',
+   Popper: ['popper.js', 'default']
+  })
+)
+
 module.exports = environment

package.json

@@ -10,7 +10,10 @@
     "ansi-regex": "^6.0.1",
     "bootstrap": "^5.1.1",
     "glob-parent": "^5.1.2",
+    "jquery": "^3.6.0",
     "nth-check": "^2.0.1",
+    "select2": "^4.1.0-rc.0",
+    "select2-bootstrap-theme": "^0.1.0-beta.10",
     "set-value": "^4.0.1",
     "toastr": "^2.1.4",
     "turbolinks": "^5.2.0",