From bd62e7e4b1a4a617a2983e75d4666f5066096365 Mon Sep 17 00:00:00 2001 From: Pavlos Orfanidis Date: Wed, 1 May 2024 20:41:23 +0300 Subject: [PATCH] Updated bootstrap version and added page for the equipment --- .idea/QuestMatch.iml | 1 + FrontEnd/front-end/package-lock.json | 28 ++- FrontEnd/front-end/package.json | 3 + FrontEnd/front-end/public/index.html | 7 +- FrontEnd/front-end/src/App.js | 108 +++++----- .../front-end/src/CharacterSheet/Equipment.js | 186 +++++++++++++++++- 6 files changed, 269 insertions(+), 64 deletions(-) diff --git a/.idea/QuestMatch.iml b/.idea/QuestMatch.iml index a23a362..2a774a0 100644 --- a/.idea/QuestMatch.iml +++ b/.idea/QuestMatch.iml @@ -11,5 +11,6 @@ + \ No newline at end of file diff --git a/FrontEnd/front-end/package-lock.json b/FrontEnd/front-end/package-lock.json index a1ee879..c913b53 100644 --- a/FrontEnd/front-end/package-lock.json +++ b/FrontEnd/front-end/package-lock.json @@ -22,6 +22,9 @@ "react-router-dom": "^6.23.0", "react-scripts": "5.0.1", "web-vitals": "^3.5.2" + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -635,9 +638,17 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1895,6 +1906,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", diff --git a/FrontEnd/front-end/package.json b/FrontEnd/front-end/package.json index dcbfcfe..edb23e1 100644 --- a/FrontEnd/front-end/package.json +++ b/FrontEnd/front-end/package.json @@ -2,6 +2,9 @@ "name": "front-end", "version": "0.1.0", "private": true, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" + }, "dependencies": { "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.5", diff --git a/FrontEnd/front-end/public/index.html b/FrontEnd/front-end/public/index.html index 35ae183..018f28b 100644 --- a/FrontEnd/front-end/public/index.html +++ b/FrontEnd/front-end/public/index.html @@ -22,7 +22,7 @@ QuestMatch - + @@ -45,8 +45,9 @@ - - + + + diff --git a/FrontEnd/front-end/src/App.js b/FrontEnd/front-end/src/App.js index db9c5bf..c271eef 100644 --- a/FrontEnd/front-end/src/App.js +++ b/FrontEnd/front-end/src/App.js @@ -20,7 +20,7 @@ function App() { const [selectedLevel, setSelectedLevel] = useState(null); const [ setSelectedSpells] = useState(null); - const test = (isLoggedIn) => { + const test = () => { if (isLoggedIn) { return ( - - { - test(isLoggedIn) - } - - - - - - - } /> - } /> - } /> - } /> - }/> - }/> - }/> - }/> - } /> - {/* Add more routes as needed */} - - - - - ); + <> +
+ +
+ + + + }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> + {/* Add more routes as needed */} + + + + + ); } diff --git a/FrontEnd/front-end/src/CharacterSheet/Equipment.js b/FrontEnd/front-end/src/CharacterSheet/Equipment.js index a7fee58..a2e02fa 100644 --- a/FrontEnd/front-end/src/CharacterSheet/Equipment.js +++ b/FrontEnd/front-end/src/CharacterSheet/Equipment.js @@ -1,8 +1,188 @@ +import React, {useEffect, useState} from "react"; +import axios from "axios"; +import {Button, Modal} from "react-bootstrap"; +import {useNavigate} from "react-router-dom"; + export default function Equipment(){ + + const [equipmentPack, setEquipmentPack] = useState([]); + const [selectedEquipmentPackIndices, setselectedEquipmentPackIndices] = useState([]); + const [showModal, setShowModal] = useState(false); + const [selectedEquipmentPackInfo, setselectedEquipmentPackInfo] = useState(null); + + const [selectedEquipment, setSelectedEquipment] = useState([]); + const [showSelectedEquipmentModal, setShowSelectedEquipmentModal] = useState(false); + + const navigate = useNavigate(); + + useEffect(() => { + let url = 'https://www.dnd5eapi.co/api/equipment-categories/equipment-packs'; + + axios.get(url) + .then( async response => { + const results =await response.data.equipment; + setEquipmentPack(results); + console.log("Equipment Packs: ", results); + }) + .catch(error => console.error(error)); + }, []); + + + const handleEquipmentClick = (equipment) => { + const equipmentIndex = selectedEquipmentPackIndices.indexOf(equipment.index); + if (equipmentIndex === -1) { + setselectedEquipmentPackIndices([...selectedEquipmentPackIndices, equipment.index]); + } else { + setselectedEquipmentPackIndices(selectedEquipmentPackIndices.filter(index => index !== equipment.index)); + } + }; + + const selectedEquipmentPack = selectedEquipmentPackIndices.map(index => equipmentPack.find(equipment => equipment.index === index)); + + const handleInfoClick = (equipment) => { + axios.get(`https://www.dnd5eapi.co${equipment.url}`) + .then(response => { + setselectedEquipmentPackInfo(response.data); + console.log(`https://www.dnd5eapi.co${equipment.url}`); + console.log(response.data); + setShowModal(true); + }) + .catch(error => console.error(error)); + }; + + const showDetailsAboutEquipment = (equipment) => { + console.log(equipment); + axios.get(`https://www.dnd5eapi.co${equipment.item.url}`) + .then(response => { + setSelectedEquipment(response.data); + console.log(response.data); + setShowSelectedEquipmentModal(true); + }) + .catch(error => console.error(error)); + } + + return( -
-

Equipment

-

Equipment will go here

+
+

Equipment Packs

+
+
+
+ {equipmentPack&& equipmentPack.map(equipment => ( +
+
handleEquipmentClick(equipment)} + > +
+
{equipment.name}
+ { + e.stopPropagation(); + handleInfoClick(equipment); + }}/> +
+
+
+ ))} +
+
+
+
+ {selectedEquipmentPack.length > 0 && ( +
+

Selected Equipment:

+
    + {selectedEquipmentPack.map(equipment => ( +
  • {equipment.name}
    • + ))} +
+
+ )} + +
+ setShowModal(false)}> + + +

{selectedEquipmentPackInfo && selectedEquipmentPackInfo.name}

+ + + + {selectedEquipmentPackInfo && ( +
+ { + selectedEquipmentPackInfo.contents.map((equipment, index) => { + return ( +
+
+ Quantity: + {equipment.quantity} + Item: + {showDetailsAboutEquipment(equipment)}} className={"text-primary"}>{equipment.item.name} +
+
+ ); + }) + } +
+ )} + + + + + + + + + + + + setShowSelectedEquipmentModal(false)}> + + +

{selectedEquipment && selectedEquipment.name}

+ + + + {selectedEquipment && ( +
+ {selectedEquipment.cost && +
+ Costs: {selectedEquipment.cost.quantity} {selectedEquipment.cost.unit} +
+ } +
+ Weight: {selectedEquipment.weight} +
+ {selectedEquipment.gear_category && +
+ Gear Category: {selectedEquipment.gear_category.name} +
+ } + + {selectedEquipment.desc[0] && +
+ Description:
{selectedEquipment.desc[0]} +
+ } + +
+ )} + + + + +
); }