1
mirror of https://github.com/thepeacockproject/Peacock synced 2024-11-29 09:15:11 +01:00

Escalation Picker Revamp (#227)

* Separate escalations by location, add Peacock escalations

* Remove debug prints
This commit is contained in:
Anthony Fuller 2023-04-18 23:38:28 +01:00 committed by GitHub
parent 51868f88a2
commit 6c787f324f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 869 additions and 664 deletions

File diff suppressed because it is too large Load Diff

View File

@ -22,7 +22,7 @@ import { produce } from "immer"
import { axiosClient } from "./utils" import { axiosClient } from "./utils"
export interface EscalationLevelPickerProps { export interface EscalationLevelPickerProps {
codenames: readonly CodenameMeta[] codenames: CodenameMeta
user: string user: string
gv: number gv: number
} }
@ -31,6 +31,40 @@ const emptyValue = { __isEmpty: 1 }
type Empty = typeof emptyValue type Empty = typeof emptyValue
const locsInGv = [
// Hitman 2016 (GV 1)
[
"ICA Facility",
"Paris",
"Sapienza",
"Marrakesh",
"Bangkok",
"Colorado",
"Hokkaido",
],
// Hitman 2 (GV 2)
[
"Hawkes Bay",
"Miami",
"Santa Fortuna",
"Mumbai",
"Whittleton Creek",
"Isle of Sgàil",
"New York",
"Haven Island",
],
// Hitman 3 (GV 3)
[
"Dubai",
"Dartmoor",
"Berlin",
"Chongqing",
"Mendoza",
"Carpathian Mountains",
"Ambrose Island",
],
]
export function EscalationLevelPicker({ export function EscalationLevelPicker({
codenames, codenames,
user, user,
@ -93,67 +127,90 @@ export function EscalationLevelPicker({
} }
//#region Bootleg column paginator //#region Bootleg column paginator
const rows: React.ReactElement[][] = [[]] const final: Record<string, React.ReactElement[][]> = {}
let latestRow = 0 const locsInGame = locsInGv.slice(0, gv).flat()
for (const codename of codenames) { for (const location in codenames) {
if (!codename.id) { if (!locsInGame.includes(location)) {
continue continue
} }
const comp = ( const rows: React.ReactElement[][] = [[]]
<div className="col col--4" key={codename.codename}> let latestRow = 0
<div className="card"> for (const codename of codenames[location]) {
<div className="card__header"> if (
<h3>{codename.name}</h3> !codename.id ||
</div> codename.hidden ||
<div className="card__body"> (gv === 1 && codename.isPeacock)
<ul className="tabs"> ) {
<li className="tabs__item elp-tab"> continue
<button }
className="button button--sm button--danger"
onClick={() => onChange(codename.id!, "-")} const comp = (
> <div className="col col--4" key={codename.codename}>
- <div className="card" style={{ padding: "5px" }}>
</button> <div className="card__header centered">
</li> <h3>{codename.name}</h3>
<li className="tabs__item elp-tab"> </div>
<p className="elp-tab"> <div className="card__body">
Current level: {progress[codename.id!] ?? 1} <ul className="tabs">
</p> <li className="tabs__item elp-tab">
</li> <button
<li className="tabs__item elp-tab"> className="button button--sm button--danger"
<button onClick={() =>
className="button button--sm button--success" onChange(codename.id!, "-")
onClick={() => onChange(codename.id!, "+")} }
> >
+ -
</button> </button>
</li> </li>
</ul> <li className="tabs__item elp-tab">
<p className="elp-tab">
Current level:{" "}
{progress[codename.id!] ?? 1}
</p>
</li>
<li className="tabs__item elp-tab">
<button
className="button button--sm button--success"
onClick={() =>
onChange(codename.id!, "+")
}
>
+
</button>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> )
)
if (rows[latestRow].length === 3) { if (rows[latestRow].length === 3) {
latestRow = latestRow + 1 latestRow = latestRow + 1
rows.push([]) rows.push([])
}
rows[latestRow].push(comp)
} }
if (rows[0].length) final[location] = rows
rows[latestRow].push(comp)
} }
//#endregion //#endregion
return ( return (
<section className="app-grid"> <section className="app-grid">
<div className="container"> {Object.keys(final).map((val) => {
{rows.map((row, index) => ( return (
<div className="row" key={index}> <div className="container" style={{ padding: "15px" }}>
{row} <h1>{val}</h1>
{final[val].map((row, index) => (
<div className="row" key={index}>
{row}
</div>
))}
</div> </div>
))} )
</div> })}
</section> </section>
) )
} }

View File

@ -51,7 +51,7 @@ export function SelectUser({
{user.platform} {user.platform}
</div> </div>
<div className="pagination-nav__label centered"> <div className="pagination-nav__label centered">
{user.name} {user.name ?? "No Name Found"}
</div> </div>
</button> </button>
</div> </div>

View File

@ -25,12 +25,16 @@ import { GameVersionTabs } from "../components/GameVersionTabs"
import { EscalationLevelPicker } from "../EscalationLevelPicker" import { EscalationLevelPicker } from "../EscalationLevelPicker"
export interface CodenameMeta { export interface CodenameMeta {
readonly codename: string [location: string]: {
readonly name: string readonly codename: string
/** readonly name: string
* Escalation group ID. /**
*/ * Escalation group ID.
readonly id?: string */
readonly id?: string
readonly isPeacock?: boolean
readonly hidden?: boolean
}[]
} }
export function EscalationLevelPage() { export function EscalationLevelPage() {
@ -96,7 +100,7 @@ export function EscalationLevelPage() {
!isReadyToSelectUser && !isReadyToSelectUser &&
user && ( user && (
<EscalationLevelPicker <EscalationLevelPicker
codenames={codenameData as readonly CodenameMeta[]} codenames={codenameData as CodenameMeta}
gv={gameVersion} gv={gameVersion}
user={user!} user={user!}
/> />