Skip to content

Commit

Permalink
Add dropdown for kirac map value
Browse files Browse the repository at this point in the history
Closes #16

Signed-off-by: Tomas Slusny <[email protected]>
  • Loading branch information
deathbeam committed Aug 18, 2023
1 parent 45e5796 commit 56f31f6
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 40 deletions.
4 changes: 4 additions & 0 deletions site/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,10 @@ a:hover {
text-decoration: underline;
}

.footer {
margin-bottom: 10rem;
}

/* Tooltips */
.tooltip-tag {
position: relative;
Expand Down
79 changes: 60 additions & 19 deletions site/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ function rateMaps(
cardBaselineInput,
cardBaselineNumberInput,
cardMinPriceInput,
useStandardPriceInput,
cardPriceSourceInput,
cardValueSourceInput,
voidstones
) {
let cardWeightBaseline = preparedCards.find(c => c.name === cardBaselineInput).weight
Expand All @@ -49,9 +50,8 @@ function rateMaps(
const mapCards = []

for (let card of map.cards) {
const cardPrice = useStandardPriceInput === true ? card.standardPrice : card.price
const dropPoolItems = 1 / (cardWeightBaseline / card.poolWeight) / (card.boss ? 10 : 1)
const priceEligible = cardPrice >= cardMinPriceInput
const cardPrice = cardPriceSourceInput === 'standard' ? card.standardPrice : card.price
const dropPoolItems = 1 / (cardWeightBaseline / card.mapWeight) / (card.boss ? 10 : 1)
const cardMinLevel = (card.drop || {}).min_level || 0
const cardMaxLevel = (card.drop || {}).max_level || 99
const dropEligible = mapLevel >= cardMinLevel && mapLevel <= cardMaxLevel
Expand All @@ -60,14 +60,26 @@ function rateMaps(
...card,
price: cardPrice,
dropPoolItems: dropPoolItems,
weight: dropEligible ? card.weight : 0,
value: priceEligible && dropEligible ? cardPrice * (card.weight / card.poolWeight) * dropPoolItems : 0
weight: dropEligible ? card.weight : 0
})
}

for (let card of mapCards) {
const priceEligible = card.price >= cardMinPriceInput
if (!priceEligible) {
card.value = 0
continue
}

if (cardValueSourceInput === 'kirac') {
card.value = map.unique ? 0 : card.stack * card.price * (card.weight / card.kiracWeight)
} else {
card.value = card.price * (card.weight / card.mapWeight) * card.dropPoolItems
}
}

return {
...map,
weight: mapCards.reduce((a, v) => a + v.weight, 0),
cards: mapCards.sort((a, b) => b.price - a.price).sort((a, b) => b.value - a.value)
}
})
Expand Down Expand Up @@ -178,8 +190,14 @@ function App() {
startTransition,
shareableRef
)
const [useStandardPriceInput, setUseStandardPriceInput, useStandardPriceReset, useStandardPriceRef] = useInputField(
'useStandardPriceInput',
const [cardPriceSourceInput, setCardPriceSourceInput, cardPriceSourceReset, cardPriceSourceRef] = useInputField(
'cardPriceSourceInput',
false,
startTransition,
shareableRef
)
const [cardValueSourceInput, setCardValueSourceInput, cardValueSourceReset, cardValueSourceRef] = useInputField(
'cardValueSourceInput',
false,
startTransition,
shareableRef
Expand All @@ -197,7 +215,8 @@ function App() {
cardBaselineInput,
cardBaselineNumberInput,
cardMinPriceInput,
useStandardPriceInput,
cardPriceSourceInput,
cardValueSourceInput,
atlasVoidstones
),
[
Expand All @@ -208,7 +227,8 @@ function App() {
cardBaselineInput,
cardBaselineNumberInput,
cardMinPriceInput,
useStandardPriceInput,
cardPriceSourceInput,
cardValueSourceInput,
atlasVoidstones
]
)
Expand Down Expand Up @@ -264,7 +284,7 @@ function App() {
searchClass = 'col-lg-4 col-12 p-1'
inputSectionClass = 'col col-lg-8 col-12'
inputClass = 'col-lg-3 col-md-6 col-12 p-1'
bigInputClass = 'col-lg-12 col-md-6 col-12 p-1'
bigInputClass = 'col-lg-6 col-md-6 col-12 p-1'
}

return (
Expand Down Expand Up @@ -478,19 +498,39 @@ function App() {
<div className="input-group">
<select
className="form-control"
ref={useStandardPriceRef}
defaultValue={useStandardPriceInput}
onChange={setUseStandardPriceInput}
ref={cardPriceSourceRef}
defaultValue={cardPriceSourceInput}
onChange={setCardPriceSourceInput}
>
<option value="false">League</option>
<option value="true">Standard</option>
<option value="league">League</option>
<option value="standard">Standard</option>
</select>
<button className="btn btn-outline-secondary" onClick={useStandardPriceReset}>
<button className="btn btn-outline-secondary" onClick={cardPriceSourceReset}>
<i className="fa-solid fa-refresh fa-fw" />
</button>
</div>
</div>
<div className={inputClass}>
<span className="tooltip-tag tooltip-tag-bottom tooltip-tag-notice">
<span className="tooltip-tag-text">Source of price data, can be either League or Standard</span>
<label className="form-label">Card value source</label>
</span>
<div className="input-group">
<select
className="form-control"
ref={cardValueSourceRef}
defaultValue={cardValueSourceInput}
onChange={setCardValueSourceInput}
>
<option value="map">Map drops</option>
<option value="kirac">Kirac missions</option>
</select>
<button className="btn btn-outline-secondary" onClick={cardValueSourceReset}>
<i className="fa-solid fa-refresh fa-fw" />
</button>
</div>
</div>
<div className={bigInputClass}>
<span className="tooltip-tag tooltip-tag-bottom tooltip-tag-notice">
<span className="tooltip-tag-text">
Generates string that can be copy/pasted to Path of Exile search boxes that will search for the
Expand Down Expand Up @@ -639,11 +679,12 @@ function App() {
voidstones={atlasVoidstones}
currentSearch={currentSearch}
addToInput={addToInput}
cardValueSourceInput={cardValueSourceInput}
/>
))}
</tbody>
</table>
<div className="container-fluid p-4 text-end mb-5">
<div className="container-fluid p-4 text-end footer">
<div className="d-lg-flex justify-content-between">
<div>
For raw data see:{' '}
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/Map.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import MapConnected from './MapConnected'
import MapCards from './MapCards'
import useLazy from '../hooks/useLazy'

const Map = ({ map, currentSearch, addToInput, voidstones }) => {
const Map = ({ map, currentSearch, addToInput, cardValueSourceInput, voidstones }) => {
const [ref, visible] = useLazy()

return (
Expand Down Expand Up @@ -41,7 +41,7 @@ const Map = ({ map, currentSearch, addToInput, voidstones }) => {
<MapConnected connected={map.connected} />
</td>
<td>
<MapCards weight={map.weight} cards={map.cards} />
<MapCards cardValueSourceInput={cardValueSourceInput} unique={map.unique} cards={map.cards} />
</td>
</>
) : (
Expand Down
43 changes: 25 additions & 18 deletions site/src/components/MapCards.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,15 @@ function calcRate(mapRate, price, stack) {
}
}

function calculateCardData(weight, card) {
const mapRate = (card.weight / card.poolWeight) * card.dropPoolItems
const kiracRate = card.weight / weight
function calculateCardData(card) {
const mapRate = (card.weight / card.mapWeight) * card.dropPoolItems
const kiracRate = card.weight / card.kiracWeight

const calcMap = calcRate(mapRate, card.price, 1)
const calcKirac = calcRate(kiracRate, card.price, card.stack)

return {
...card,
mapWeight: weight,
map: calcMap,
kirac: calcKirac
}
Expand All @@ -50,7 +49,7 @@ function CardRateTooltip({ rate, description, name }) {
)
}

const MapCard = ({ card }) => {
const MapCard = ({ unique, card }) => {
let badgeClass = 'bg-secondary text-dark'
if (card.score >= 8) {
badgeClass = 'bg-light text-dark'
Expand Down Expand Up @@ -79,23 +78,27 @@ const MapCard = ({ card }) => {
img = '/img/chaos.png'
}

const tooltip = (
const tooltip = card.weight > 0 && (
<>
<hr />
<b>{card.weight}</b> (card weight)
<br />/ <b>{card.poolWeight}</b> (drop pool weight)
<br />/ <b>{card.mapWeight}</b> (drop pool weight)
{card.dropPoolItems > 1 && (
<>
<br />* <b>{Math.round(card.dropPoolItems)}</b> (drop pool items)
</>
)}
<br />
<CardRateTooltip rate={card.map} description={'map'} />
<hr />
<b>{card.weight}</b> (card weight)
<br />/ <b>{card.mapWeight}</b> (map pool weight)
<br />
<CardRateTooltip rate={card.kirac} description={'kirac mission'} />
{!unique && (
<>
<hr />
<b>{card.weight}</b> (card weight)
<br />/ <b>{card.kiracWeight}</b> (map pool weight)
<br />
<CardRateTooltip rate={card.kirac} description={'kirac mission'} />
</>
)}
</>
)

Expand Down Expand Up @@ -153,9 +156,9 @@ const MapCard = ({ card }) => {
)
}

const MapCards = ({ weight, cards }) => {
const MapCards = ({ cardValueSourceInput, unique, cards }) => {
const total = useMemo(() => Math.round(cards.reduce((a, b) => a + b.value, 0) * 100) / 100, [cards])
const cardsWithData = useMemo(() => cards.map(c => calculateCardData(weight, c)), [weight, cards])
const cardsWithData = useMemo(() => cards.map(c => calculateCardData(c)), [cards])

return (
<div className="d-lg-flex flex-row">
Expand All @@ -164,16 +167,20 @@ const MapCards = ({ weight, cards }) => {
<span className="tooltip-tag-text">
{cardsWithData
.filter(c => c.value > 0)
.map(c => (
<CardRateTooltip rate={c.map} description={'map'} name={c.name} />
))}
.map(c =>
cardValueSourceInput === 'kirac' ? (
!unique && <CardRateTooltip rate={c.kirac} description={'kirac mission'} name={c.name} />
) : (
<CardRateTooltip rate={c.map} description={'map'} name={c.name} />
)
)}
</span>
<small>{total}</small> <img src="/img/chaos.png" alt="" width="16" className="me-1" />
</span>
</div>
<div>
{cardsWithData.map(c => (
<MapCard card={c} />
<MapCard unique={unique} card={c} />
))}
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion site/src/data/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ export const preparedMaps = maps.map(map => {
const bossWeight = cards.map(c => c.weight).reduce((a, b) => a + b, 0)

for (let card of cards) {
card.poolWeight = preparedGlobals['droppool_weight'] + (card.boss ? bossWeight : mapWeight)
card.mapWeight = preparedGlobals['droppool_weight'] + (card.boss ? bossWeight : mapWeight)
card.kiracWeight = bossWeight
}

if (map.boss.names) {
Expand Down

0 comments on commit 56f31f6

Please sign in to comment.