From ba51582e825477bec23c2aa37ba43bd6482a2a29 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Fri, 23 Aug 2024 15:53:38 -0700 Subject: implement itemprice component --- src/components/AnotherComponent.tsx | 28 ------------ src/components/FFXIVItemPrice.tsx | 83 +++++++++++++++++++++++++++++++++++ src/components/FFXIVWorldSelector.tsx | 17 ++++--- src/content/blog/ffxiv-gil-making.mdx | 13 +++--- src/styles/ffxiv-selector.css | 72 ++++++++++++++++++++++++++++++ 5 files changed, 172 insertions(+), 41 deletions(-) delete mode 100644 src/components/AnotherComponent.tsx create mode 100644 src/components/FFXIVItemPrice.tsx create mode 100644 src/styles/ffxiv-selector.css diff --git a/src/components/AnotherComponent.tsx b/src/components/AnotherComponent.tsx deleted file mode 100644 index f74e924..0000000 --- a/src/components/AnotherComponent.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -const AnotherComponent: React.FC = () => { - const [selectedWorld, setSelectedWorld] = useState(null); - - useEffect(() => { - // Load selected world from localStorage - const savedWorld = localStorage.getItem('selectedWorld'); - if (savedWorld) { - setSelectedWorld(savedWorld); - } - }, []); - - return ( -
-

Selected World: {selectedWorld}

- -
- ); -}; - -export default AnotherComponent; \ No newline at end of file diff --git a/src/components/FFXIVItemPrice.tsx b/src/components/FFXIVItemPrice.tsx new file mode 100644 index 0000000..8f265fc --- /dev/null +++ b/src/components/FFXIVItemPrice.tsx @@ -0,0 +1,83 @@ +import React, { useState, useEffect } from 'react'; + +interface FFXIVItemPriceProps { + itemId: number; + itemName: string; + itemImageUrl: string; +} + +const FFXIVItemPrice: React.FC = ({ itemId = 5530, itemName="Coke", itemImageUrl="https://xivapi.com/i/021000/021462_hr1.png"}) => { + const [selectedWorld, setSelectedWorld] = useState(null); + const [dailySaleVelocity, setDailySaleVelocity] = useState(null); + const [averageSalePrice, setAverageSalePrice] = useState(null); + const [inputQuantity, setInputQuantity] = useState(0); + const [potentialGil, setPotentialGil] = useState(0); + + useEffect(() => { + const savedWorld = localStorage.getItem('selectedWorld'); + if (savedWorld) { + setSelectedWorld(savedWorld); + } else { + setSelectedWorld('Midgardsormr'); + } + + fetch(`https://universalis.app/api/v2/aggregated/${selectedWorld}/${itemId}`) + .then(response => response.json()) + .then(data => { + const result = data.results[0]; + setDailySaleVelocity(Math.round(result.nq.dailySaleVelocity.world.quantity)); + setAverageSalePrice(Math.round(result.nq.averageSalePrice.world.price)); + }) + .catch(error => console.error('Error fetching data:', error)); + }, [itemId, selectedWorld]); + + const handleInputChange = (e: React.ChangeEvent) => { + const quantity = parseInt(e.target.value, 10); + setInputQuantity(quantity); + setPotentialGil(quantity * (averageSalePrice || 0)); + }; + + const formatNumber = (number: number | null) => { + return number !== null ? new Intl.NumberFormat().format(number) : 'N/A'; + }; + + return ( +
+
+

{itemName}

+ {itemName} +
+ + + + + + + + + + + + + + + + + + + +
Daily Sale Velocity:{formatNumber(dailySaleVelocity)} items
Average Price/Item:{formatNumber(averageSalePrice)} gil
Enter Quantity: + +
Potential Gil Earnings:{formatNumber(potentialGil)} gil
+
{selectedWorld} Marketboard Data provided by Universalis API
+
+ ); +}; + +export default FFXIVItemPrice; \ No newline at end of file diff --git a/src/components/FFXIVWorldSelector.tsx b/src/components/FFXIVWorldSelector.tsx index f2dc4cc..63eff07 100644 --- a/src/components/FFXIVWorldSelector.tsx +++ b/src/components/FFXIVWorldSelector.tsx @@ -1,11 +1,15 @@ import React, { useState, useEffect } from 'react'; - +import '../styles/ffxiv-selector.css'; interface World { id: number; name: string; } -const FFXIVWorldSelector: React.FC = () => { +interface FFXIVWorldSelectorProps { + message: string; +} + +const FFXIVWorldSelector: React.FC = ({ message = "Select a World" }) => { const [worlds, setWorlds] = useState([]); const [selectedWorld, setSelectedWorld] = useState(null); @@ -40,9 +44,9 @@ const FFXIVWorldSelector: React.FC = () => { }; return ( -
- - {worlds.map((world) => ( ))} - {selectedWorld &&

Selected World: {selectedWorld}

} - +
); }; diff --git a/src/content/blog/ffxiv-gil-making.mdx b/src/content/blog/ffxiv-gil-making.mdx index 002ab8c..eb35a28 100644 --- a/src/content/blog/ffxiv-gil-making.mdx +++ b/src/content/blog/ffxiv-gil-making.mdx @@ -5,15 +5,16 @@ pubDate: "2024-08-23" --- import '../../styles/ffxiv-gil-making.css' import FFXIVWorldSelector from '../../components/FFXIVWorldSelector'; -import AnotherComponent from '../../components/AnotherComponent'; - -*Enter the world you play on below to get crowdsourced marketboard prices* - +import FFXIVItemPrice from '../../components/FFXIVItemPrice'; + I've seen a lot of these "making gil without crafting" or "making gil with combat job" guides during my time with the game. A lot of these videos and guides are fine, but in my opinion they neglect a lot of the late game and niche options that are available to players. -This post will attempt to be a somewhat comprehensive guide to making gil without having to level any crafting jobs (cause I get it, crafting is not for everyone). - \ No newline at end of file +This post will attempt to be a somewhat comprehensive guide/info sheet to making gil without having to level any crafting jobs (cause I get it, crafting is not for everyone). + +Keep in mind though that crafters are probably one of the most consistent methods of getting gil. There will be a lot more "instability" with these methods. + +# Grand Company Seals \ No newline at end of file diff --git a/src/styles/ffxiv-selector.css b/src/styles/ffxiv-selector.css new file mode 100644 index 0000000..efad540 --- /dev/null +++ b/src/styles/ffxiv-selector.css @@ -0,0 +1,72 @@ +.ffxiv-container { + background-color: #1a1a1a; + color: #e2c08d; + padding: 10px; + border: 2px solid #e2c08d; + border-radius: 10px; + font-family: 'Arial', serif; + max-width: 500px; + margin: auto; +} + +.ffxiv-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; +} + +.ffxiv-item-icon { + width: 50px; + height: 50px; +} + +.ffxiv-h1 { + font-size: 1.5em; + color: #e2c08d; + margin: 0; +} + +.ffxiv-table { + width: 100%; + border-collapse: collapse; +} + +.ffxiv-button { + background-color: #333; + color: #e2c08d; + border: 1px solid #e2c08d; + padding: 5px; + padding-left: 10px; + padding-right: 10px; + margin-left: 10px; + border-radius: 5px; + cursor: pointer; +} + +.ffxiv-table td { + padding: 5px; + border: 1px solid #e2c08d; +} + +.ffxiv-label { + font-size: 1em; +} + +.ffxiv-value { + font-size: 1em; +} + +.ffxiv-input { + background-color: #333; + color: #e2c08d; + border: 1px solid #e2c08d; + padding: 5px; + border-radius: 5px; + width: 100%; + box-sizing: border-box; +} + +.ffxiv-input::placeholder { + color: #e2c08d; +} \ No newline at end of file -- cgit v1.2.3