Skip to content

Commit

Permalink
Option to view lists of trade offers as table or list on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@dumbmatter
dumbmatter committed Nov 7, 2024
1 parent 6565599 commit 462dcd2
Show file tree
Hide file tree
Showing 6 changed files with 227 additions and 166 deletions.
3 changes: 0 additions & 3 deletions TODO
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
hype should impact the magnitude of the home court advantage

support sorting mobile trade tables (like saved trades, trading block)
- or have toggle to switch between them?

embed facesjs ui
- what to do about all the dependencies?
- could load async
Expand Down
37 changes: 37 additions & 0 deletions src/ui/hooks/useTradeOffersSwitch.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { useMemo } from "react";
import useLocalStorageState from "use-local-storage-state";

const useTradeOffersSwitch = () => {
const [value, setValue] = useLocalStorageState<"table" | "list">(
"tradeOffersOverride",
{
defaultValue: "list",
},
);

const toggle = useMemo(
() => (
<form className="mb-2 d-flex justify-content-end">
<select
className="form-select"
style={{ width: 100 }}
value={value}
onChange={event => {
setValue(event.target.value as any);
}}
>
<option value="list">List</option>
<option value="table">Table</option>
</select>
</form>
),
[setValue, value],
);

return {
toggle: window.mobile ? toggle : null,
value: window.mobile ? value : "table",
};
};

export default useTradeOffersSwitch;
100 changes: 53 additions & 47 deletions src/ui/views/SavedTrades.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
playerScore,
} from "./TradingBlock";
import { Dropdown } from "react-bootstrap";
import useTradeOffersSwitch from "../hooks/useTradeOffersSwitch";

const SavedTrades = (props: View<"savedTrades">) => {
const {
Expand All @@ -30,6 +31,8 @@ const SavedTrades = (props: View<"savedTrades">) => {

const { teamInfoCache } = useLocalPartial(["teamInfoCache"]);

const tradeOffersSwitch = useTradeOffersSwitch();

if (spectator) {
return <p>You're not allowed to make trades in spectator mode.</p>;
}
Expand Down Expand Up @@ -102,9 +105,7 @@ const SavedTrades = (props: View<"savedTrades">) => {
pages.
</p>
<Dropdown>
<Dropdown.Toggle variant="danger" className="mb-3">
Clear
</Dropdown.Toggle>
<Dropdown.Toggle variant="danger">Clear</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={async () => {
Expand All @@ -129,8 +130,12 @@ const SavedTrades = (props: View<"savedTrades">) => {
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{offers.length === 0 ? <div>No saved trades</div> : null}
<div className="d-none d-lg-block">
{offers.length === 0 ? (
<div className="mt-3">No saved trades</div>
) : (
tradeOffersSwitch.toggle
)}
{tradeOffersSwitch.value === "table" ? (
<OfferTable
assetCols={[
{
Expand Down Expand Up @@ -190,48 +195,49 @@ const SavedTrades = (props: View<"savedTrades">) => {
salaryCap={salaryCap}
salaryCapType={salaryCapType}
/>
</div>

<div className="d-block d-lg-none">
{offers.map(offer => {
return (
<Offer
key={offer.hash}
challengeNoRatings={challengeNoRatings}
onNegotiate={() => {
handleNegotiate(offer);
}}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
teamInfo={teamInfoCache[offer.tid]}
hideTopTeamOvrs
{...offer}
>
<div className="d-flex gap-5">
{offer.summary.teams.map((t, j) => {
const missingKey = j === 0 ? "missing" : "missingUser";
return (
<div key={j}>
<SummaryTeam
challengeNoRatings={challengeNoRatings}
hideFinanceInfo
luxuryPayroll={luxuryPayroll}
luxuryTax={luxuryTax}
missingAssets={offer[missingKey]}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
showInlinePlayerInfo
summary={offer.summary}
t={t}
/>
</div>
);
})}
</div>
</Offer>
);
})}
</div>
) : (
<>
{offers.map((offer, i) => {
return (
<Offer
key={offer.hash}
challengeNoRatings={challengeNoRatings}
onNegotiate={() => {
handleNegotiate(offer);
}}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
teamInfo={teamInfoCache[offer.tid]}
hideTopTeamOvrs
first={i === 0}
{...offer}
>
<div className="d-flex gap-5">
{offer.summary.teams.map((t, j) => {
const missingKey = j === 0 ? "missing" : "missingUser";
return (
<div key={j}>
<SummaryTeam
challengeNoRatings={challengeNoRatings}
hideFinanceInfo
luxuryPayroll={luxuryPayroll}
luxuryTax={luxuryTax}
missingAssets={offer[missingKey]}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
showInlinePlayerInfo
summary={offer.summary}
t={t}
/>
</div>
);
})}
</div>
</Offer>
);
})}
</>
)}
</>
);
};
Expand Down
96 changes: 50 additions & 46 deletions src/ui/views/TradeProposals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
} from "./TradingBlock";
import { useEffect, useState } from "react";
import { ActionButton } from "../components";
import useTradeOffersSwitch from "../hooks/useTradeOffersSwitch";

const TradeProposals = (props: View<"tradeProposals">) => {
const {
Expand Down Expand Up @@ -47,6 +48,8 @@ const TradeProposals = (props: View<"tradeProposals">) => {

const [refreshing, setRefreshing] = useState(false);

const tradeOffersSwitch = useTradeOffersSwitch();

if (spectator) {
return <p>You're not allowed to make trades in spectator mode.</p>;
}
Expand Down Expand Up @@ -119,7 +122,6 @@ const TradeProposals = (props: View<"tradeProposals">) => {
here every 10 games.
</p>
<ActionButton
className="mb-3"
onClick={async () => {
setRefreshing(true);
await toWorker("main", "incrementTradeProposalsSeed", undefined);
Expand All @@ -131,7 +133,8 @@ const TradeProposals = (props: View<"tradeProposals">) => {
>
Refresh trade proposals
</ActionButton>
<div className="d-none d-lg-block">
{tradeOffersSwitch.toggle}
{tradeOffersSwitch.value === "table" ? (
<OfferTable
assetCols={[
{
Expand Down Expand Up @@ -193,50 +196,51 @@ const TradeProposals = (props: View<"tradeProposals">) => {
salaryCap={salaryCap}
salaryCapType={salaryCapType}
/>
</div>

<div className="d-block d-lg-none">
{filteredOffers.map(offer => {
return (
<Offer
key={offer.tid}
challengeNoRatings={challengeNoRatings}
onNegotiate={() => {
handleNegotiate(offer);
}}
onRemove={() => {
const tid = offer.tid;
setRemovedTids(prevTids => [...prevTids, tid]);
}}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
teamInfo={teamInfoCache[offer.tid]}
hideTopTeamOvrs
{...offer}
>
<div className="d-flex gap-5">
{offer.summary.teams.map((t, j) => {
return (
<div key={j}>
<SummaryTeam
challengeNoRatings={challengeNoRatings}
hideFinanceInfo
luxuryPayroll={luxuryPayroll}
luxuryTax={luxuryTax}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
showInlinePlayerInfo
summary={offer.summary}
t={t}
/>
</div>
);
})}
</div>
</Offer>
);
})}
</div>
) : (
<>
{filteredOffers.map((offer, i) => {
return (
<Offer
key={offer.tid}
challengeNoRatings={challengeNoRatings}
onNegotiate={() => {
handleNegotiate(offer);
}}
onRemove={() => {
const tid = offer.tid;
setRemovedTids(prevTids => [...prevTids, tid]);
}}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
teamInfo={teamInfoCache[offer.tid]}
hideTopTeamOvrs
first={i === 0}
{...offer}
>
<div className="d-flex gap-5">
{offer.summary.teams.map((t, j) => {
return (
<div key={j}>
<SummaryTeam
challengeNoRatings={challengeNoRatings}
hideFinanceInfo
luxuryPayroll={luxuryPayroll}
luxuryTax={luxuryTax}
salaryCap={salaryCap}
salaryCapType={salaryCapType}
showInlinePlayerInfo
summary={offer.summary}
t={t}
/>
</div>
);
})}
</div>
</Offer>
);
})}
</>
)}
</>
);
};
Expand Down
Loading

0 comments on commit 462dcd2

Please sign in to comment.