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:
parent
51868f88a2
commit
6c787f324f
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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!}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user