1
mirror of https://github.com/thepeacockproject/Peacock synced 2024-11-22 22:12:45 +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"
export interface EscalationLevelPickerProps {
codenames: readonly CodenameMeta[]
codenames: CodenameMeta
user: string
gv: number
}
@ -31,6 +31,40 @@ const emptyValue = { __isEmpty: 1 }
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({
codenames,
user,
@ -93,67 +127,90 @@ export function EscalationLevelPicker({
}
//#region Bootleg column paginator
const rows: React.ReactElement[][] = [[]]
let latestRow = 0
const final: Record<string, React.ReactElement[][]> = {}
const locsInGame = locsInGv.slice(0, gv).flat()
for (const codename of codenames) {
if (!codename.id) {
for (const location in codenames) {
if (!locsInGame.includes(location)) {
continue
}
const comp = (
<div className="col col--4" key={codename.codename}>
<div className="card">
<div className="card__header">
<h3>{codename.name}</h3>
</div>
<div className="card__body">
<ul className="tabs">
<li className="tabs__item elp-tab">
<button
className="button button--sm button--danger"
onClick={() => onChange(codename.id!, "-")}
>
-
</button>
</li>
<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>
const rows: React.ReactElement[][] = [[]]
let latestRow = 0
for (const codename of codenames[location]) {
if (
!codename.id ||
codename.hidden ||
(gv === 1 && codename.isPeacock)
) {
continue
}
const comp = (
<div className="col col--4" key={codename.codename}>
<div className="card" style={{ padding: "5px" }}>
<div className="card__header centered">
<h3>{codename.name}</h3>
</div>
<div className="card__body">
<ul className="tabs">
<li className="tabs__item elp-tab">
<button
className="button button--sm button--danger"
onClick={() =>
onChange(codename.id!, "-")
}
>
-
</button>
</li>
<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>
)
)
if (rows[latestRow].length === 3) {
latestRow = latestRow + 1
rows.push([])
if (rows[latestRow].length === 3) {
latestRow = latestRow + 1
rows.push([])
}
rows[latestRow].push(comp)
}
rows[latestRow].push(comp)
if (rows[0].length) final[location] = rows
}
//#endregion
return (
<section className="app-grid">
<div className="container">
{rows.map((row, index) => (
<div className="row" key={index}>
{row}
{Object.keys(final).map((val) => {
return (
<div className="container" style={{ padding: "15px" }}>
<h1>{val}</h1>
{final[val].map((row, index) => (
<div className="row" key={index}>
{row}
</div>
))}
</div>
))}
</div>
)
})}
</section>
)
}

View File

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

View File

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