-
+
+
+
+ }>
+ }/>
+ }/>
+ }/>
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/gw2-tools-ui/src/App.test.js b/gw2-tools-ui/src/App.test.js
new file mode 100644
index 0000000..ce94491
--- /dev/null
+++ b/gw2-tools-ui/src/App.test.js
@@ -0,0 +1,2 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
diff --git a/gw2-tools-ui/src/components/common/ApiKeyInput.js b/gw2-tools-ui/src/components/common/ApiKeyInput.js
new file mode 100644
index 0000000..fd334a1
--- /dev/null
+++ b/gw2-tools-ui/src/components/common/ApiKeyInput.js
@@ -0,0 +1,17 @@
+import {useSelector, useDispatch } from 'react-redux'
+import {setTo} from "../../redux/slices/apiKey";
+
+export function ApiKeyInput() {
+ const apiKey = useSelector(state => state.apiKey.value)
+ const loadingState = useSelector(state => state.loadingState.value)
+ const dispatch = useDispatch()
+ return (
+ <>
+
+
+ );
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/common/CurrencyDisplay.js b/gw2-tools-ui/src/components/common/CurrencyDisplay.js
new file mode 100644
index 0000000..03b0921
--- /dev/null
+++ b/gw2-tools-ui/src/components/common/CurrencyDisplay.js
@@ -0,0 +1,29 @@
+import styles from "../creation/InventoryDifference.module.css";
+import {useSelector} from "react-redux";
+
+export const CurrencyDisplay = ({currency}) => {
+ const config = useSelector(state => state.config.value)
+ // TODO render gold coins differently
+ let classNames = `${styles.imageBottom} ${styles.numberDisplay} ${currency.changed > 0 ? styles.changedDisplayPositive : styles.changedDisplayNegative}`;
+
+ function displayItem() {
+ if(config.showChangedOnly) {
+ return currency.changed !== 0
+ } else {
+ return true
+ }
+ }
+
+ let currencyDisplay =
+ 
+ {currency.amount > 1 ? `${currency.amount}x` : ''}
+ {currency.changed !== 0 ? `${currency.changed}x` : ''}
+
+
;
+ return (
+ <>
+ {displayItem() ? currencyDisplay : ''}
+
+ )
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/common/InventoryItem.js b/gw2-tools-ui/src/components/common/InventoryItem.js
new file mode 100644
index 0000000..eadba56
--- /dev/null
+++ b/gw2-tools-ui/src/components/common/InventoryItem.js
@@ -0,0 +1,38 @@
+import styles from "../creation/InventoryDifference.module.css";
+import ItemDisplay from "./ItemDisplay.module.css";
+import {useSelector} from "react-redux";
+
+export const InventoryItem = ({item}) => {
+ const config = useSelector(state => state.config.value)
+ let classNames = `${styles.imageBottom} ${styles.numberDisplay} ${item.changed > 0 ? styles.changedDisplayPositive : styles.changedDisplayNegative}`;
+
+ let rarityClasses = new Map()
+ rarityClasses['LEGENDARY'] = ItemDisplay.legendary;
+ rarityClasses['ASCENDED'] = ItemDisplay.ascended;
+ rarityClasses['EXOTIC'] = ItemDisplay.exotic;
+ rarityClasses['RARE'] = ItemDisplay.rare;
+ rarityClasses['MASTERWORK'] = ItemDisplay.masterwork;
+ rarityClasses['FINE'] = ItemDisplay.fine;
+ rarityClasses['BASIC'] = ItemDisplay.basic;
+ rarityClasses['JUNK'] = ItemDisplay.junk;
+
+ let itemDisplay =
+ 
+ {item.count !== 1 && item.count !== undefined ? `${item.count}x` : ''}
+ {item.changed !== 0 && item.changed !== undefined ? `${item.changed}x` : ''}
+
;
+
+ function displayItem() {
+ if(config.showChangedOnly) {
+ return item.changed !== 0
+ } else {
+ return true
+ }
+ }
+ return (
+ <>
+ {displayItem() ? itemDisplay : ''}
+
+ )
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/common/ItemDisplay.module.css b/gw2-tools-ui/src/components/common/ItemDisplay.module.css
new file mode 100644
index 0000000..a90146c
--- /dev/null
+++ b/gw2-tools-ui/src/components/common/ItemDisplay.module.css
@@ -0,0 +1,31 @@
+.junk {
+ border: 3px solid #AAAAAA;
+}
+
+.basic {
+ border: 3px solid #0000;
+}
+
+.fine {
+ border: 3px solid #62A4DA;
+}
+
+.masterwork {
+ border: 3px solid #1a9306;
+}
+
+.rare {
+ border: 3px solid #fcd00b;
+}
+
+.exotic {
+ border: 3px solid #ffa405;
+}
+
+.legendary {
+ border: 3px solid #4C139D;
+}
+
+.ascended {
+ border: 3px solid #fb3e8d;
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/creation/AddOpening.js b/gw2-tools-ui/src/components/creation/AddOpening.js
new file mode 100644
index 0000000..b672219
--- /dev/null
+++ b/gw2-tools-ui/src/components/creation/AddOpening.js
@@ -0,0 +1,18 @@
+import {ApiKeyInput} from "../common/ApiKeyInput";
+import {Settings} from "./Settings";
+import {OpeningSubmission} from "./OpeningSubmission";
+import {ItemDifference} from "./ItemDifference";
+import styles from "./AddOpening.module.css";
+
+export function AddOpening() {
+ return (
+ <>
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/creation/AddOpening.module.css b/gw2-tools-ui/src/components/creation/AddOpening.module.css
new file mode 100644
index 0000000..2d2a681
--- /dev/null
+++ b/gw2-tools-ui/src/components/creation/AddOpening.module.css
@@ -0,0 +1,5 @@
+.openingConfig {
+ display: flex;
+ gap: 10px;
+ flex-direction: column;
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/creation/Bank.js b/gw2-tools-ui/src/components/creation/Bank.js
new file mode 100644
index 0000000..8b106e1
--- /dev/null
+++ b/gw2-tools-ui/src/components/creation/Bank.js
@@ -0,0 +1,80 @@
+import {useDispatch, useSelector} from 'react-redux'
+import {InventoryItem} from "../common/InventoryItem";
+import fetcher from "../../utils/fetcher";
+import {
+ calculateBankDifferences,
+ parseBank,
+} from "../../utils/inventoryUtils";
+import {useState} from "react";
+import {setAddedBankSlots, setBank, setRemovedBankSlots, updateChangedBankSlots} from "../../redux/slices/bank";
+import styles from "./InventoryDifference.module.css";
+
+export function Bank() {
+ const bank = useSelector(state => state.bank.value)
+ const config = useSelector(state => state.config.value)
+ const apiKey = useSelector(state => state.apiKey.value)
+ const loadingState = useSelector(state => state.loadingState.value)
+
+ const [bankLoading, setBankLoading] = useState(false);
+
+ const dispatch = useDispatch()
+
+ let displayAdded = bank.addedSlots.length > 0
+ let displayRemoved = bank.removedSlots.length > 0
+
+ const removedItems =
+ <>
+ {displayAdded ? Removed items : ''}
+ {bank.removedSlots.map((item) =>
+
+ {bank.slots.map((item) =>
+ Bank
+ {bank.slots.length > 0 ? reloadButton : ''} +Added items
: ''} + {character.addedItems.map((item) => +
+
+
+ {character.items.map((item) =>
+ {character.name}
+ +Inventories
+ {inventory.map(characterInventory => + shouldShowCharacter(characterInventory) ?
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/creation/LockStateInput.js b/gw2-tools-ui/src/components/creation/LockStateInput.js
new file mode 100644
index 0000000..735600d
--- /dev/null
+++ b/gw2-tools-ui/src/components/creation/LockStateInput.js
@@ -0,0 +1,19 @@
+import {useSelector, useDispatch } from 'react-redux'
+import {toggleLocked} from "../../redux/slices/config";
+
+export function LockStateInput() {
+ const loadingState = useSelector(state => state.loadingState.value)
+ const config = useSelector(state => state.config.value)
+ const dispatch = useDispatch()
+ function toggleState() {
+ dispatch(toggleLocked())
+ }
+ return (
+ <>
+
+
+ );
+}
\ No newline at end of file
diff --git a/gw2-tools-ui/src/components/creation/Materials.js b/gw2-tools-ui/src/components/creation/Materials.js
new file mode 100644
index 0000000..633cacb
--- /dev/null
+++ b/gw2-tools-ui/src/components/creation/Materials.js
@@ -0,0 +1,87 @@
+import {useDispatch, useSelector} from 'react-redux'
+import {InventoryItem} from "../common/InventoryItem";
+import fetcher from "../../utils/fetcher";
+import {calculateMaterialsDifference, parseMaterials} from "../../utils/inventoryUtils";
+import {useState} from "react";
+import {
+ setAddedMaterialSlots,
+ setMaterials,
+ setRemovedMaterialSlots,
+ updateChangedMaterialSlots
+} from "../../redux/slices/materials";
+import styles from "./InventoryDifference.module.css";
+
+export function Materials() {
+ const materials = useSelector(state => state.materials.value)
+ const config = useSelector(state => state.config.value)
+ const apiKey = useSelector(state => state.apiKey.value)
+ const loadingState = useSelector(state => state.loadingState.value)
+
+ const [materialsLoading, setMaterialsLoading] = useState(false);
+
+ const dispatch = useDispatch()
+
+ let displayAdded = materials.addedSlots.length
+ let displayRemoved = materials.removedSlots.length
+
+ const removedItems =
+ <>
+ {displayAdded ? Removed items : ''}
+ {materials.removedSlots.map((item) =>
+
+
+ {materials.slots.map((item) =>
+ Materials
+ {materials.slots.length > 0 ? reloadButton : ''} +
+