update characters

app/controllers/characters_controller.rb

@@ -1,20 +1,20 @@
 class CharactersController < ApplicationController
-    before_action :set_character, only: [:destroy]
+    before_action :set_character, only: [:update, :destroy]
     rescue_from ActiveRecord::RecordInvalid, with: :render_unprocessable_entity_response
     rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response
 
     # GET /characters
     def index
         # Get all characters belonging to the current user
-        @character = @current_user.characters
+        @characters = @current_user.characters
 
         # Checks to see if a character exists with the current user
-        if @character.blank? === true
+        if @characters.blank? === true
             # If no character exists, return the render_not_found message
             render_not_found_response
         else
         # Render the characters in JSON format with a "ok" status code 200
-        render json: @character, status: :ok
+        render json: @characters, status: :ok
     end
 end
 
@@ -53,7 +53,13 @@ def create
 
         # Render the new character in JSON format with a "created" status code 201
         render json: @character, status: 201
-    end    
+    end 
+
+    # PATCH/PUT /activities/1
+    def update
+        @character.update!(character_params)
+        render json: @character, status: :accepted
+    end
 
     # DELETE /characters/:id 
     def destroy 

client/src/Components/CharacterCard.js

@@ -1,8 +1,11 @@
+import { useState } from "react"
 import { useNavigate, useLocation } from "react-router-dom"
 import axios from 'axios'
 
 // component that renders the details of a single character
 function CharacterCard({ onDelete }) {
+    const [editable, setEditable] = useState(false)
+    const [points, setPoints] = useState(0)
 
     // useLocation hook to access the state passed in from CharacterList component and save it to a variable
     const { state } = useLocation()
@@ -24,22 +27,75 @@ function CharacterCard({ onDelete }) {
             })
         navigate('/characters')
     }
-
+
+    const handleSubtract = (stat) => {
+        if (points < 30 && character.stats[stat] > 0) {
+            setPoints(points + 1)
+            console.log(points)
+            character.stats[stat] = character.stats[stat] - 1
+        }
+    }
+
+    const handleAdd = (stat) => {
+        if (points > 0) {
+            setPoints(points - 1)
+            character.stats[stat] = character.stats[stat] + 1
+        }
+    }
+
+    const handleUpdate = () => {
+        if (points === 0) {
+            axios.patch(`/characters/${character.id}`, { stats: character.stats })
+        } else {
+            alert("Please spend the rest of your points.")
+        }
+    }
+
+    const handleEditable = () => {
+        setEditable(!editable)
+    }
+
+    console.log(character)
+
+    const stats = Object.keys(character.stats).map((stat) => (
+        <li key={stat}>
+          {stat.charAt(0).toUpperCase() + stat.slice(1)}: {character.stats[stat]}
+        </li>
+      ))
+
+      const updateStats = Object.keys(character.stats).map((stat) => (
+        <li key={stat}>
+          {stat.charAt(0).toUpperCase() + stat.slice(1)}: {character.stats[stat]}
+            <button onClick={() => handleSubtract(stat)} disabled={points === 30 || character.stats[stat] === 0}>
+            Subtract
+            </button>
+            <button onClick={() => handleAdd(stat)} disabled={points === 0}>
+            Add
+            </button>
+        </li>
+      ))
+
+
     return (
         <div>
                 <div>
                     <h3>{character.name}</h3>
                     <h5>{character.character_class_type}</h5>
                     <label>Character's History: <br/> {character.history}</label>
                     <p>Character's Stats: 
-                        <li>Constitution: {character.stats.constitution}</li>
-                        <li>Strength: {character.stats.strength}</li>
-                        <li>Dexterity: {character.stats.dexterity}</li>
-                        <li>Intelligence: {character.stats.intelligence}</li>
-                        <li>Charisma: {character.stats.charisma}</li>
-                        <li>Wisdom: {character.stats.wisdom}</li>
+                        <li>Level: {character.level} </li>
+                        {editable ? 
+                        <div>
+                            {updateStats}
+                            <button onClick={handleUpdate}>{`Update ${character.name}`}</button>
+                            <p>Available Points: {points}</p>
+                        </div> : 
+                        <div>
+                            {stats}
+                        </div>}
                     </p>
-                    <button onClick={handleDelete}>X</button>
+                    <button onClick={handleEditable}>{editable ? "Cancel" : `Edit ${character.name}`}</button>
+                    <button onClick={handleDelete}>{`Delete ${character.name}`}</button>
                 </div>
         </div>
     )

config/routes.rb

@@ -5,7 +5,7 @@
   resources :clerics
   resources :barbarians
   resources :bards
-  resources :characters, only: %i[index create destroy]
+  resources :characters
 
   post "/login", to: "sessions#create"
   delete "/logout", to: "sessions#destroy"