Skip to content

Commit 069e4e6

Browse files
mastercomsmastercoms
committed
add gamemode detail info
1 parent 302c1c1 commit 069e4e6

3 files changed

Lines changed: 61 additions & 5 deletions

File tree

‎src/components/quickplay/MatchGroupSelector.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { useCallback, useEffect, useState } from "react";
22

33
import useQuickplayStore from "@store/quickplay";
44

5+
import { OverlayTrigger, Popover } from "react-bootstrap";
6+
57
import ServerFinder from "./ServerFinder";
68
import { baseGamemodeSet, classicGameModeSet, coreGameModeCodes, getDefaultMatchGroups, getDefaultMatchGroupSettings } from "@ssg/quickplayStaticData";
79

@@ -196,6 +198,12 @@ export function MatchGroupSelector({ hash }) {
196198
className={`carousel-item h-100 d-flex flex-column ${index == 0 ? "active" : ""}`}
197199
key={resource.code}
198200
>
201+
<div
202+
className="position-absolute top-0 start-0 p-3 fs-5 fw-bold text-dark"
203+
style={{ zIndex: 1, textShadow: "0 0 1px #000" }}
204+
>
205+
{index + 1} / {matchGroups.length}
206+
</div>
199207
<div
200208
className="flex-grow-1"
201209
style={{
@@ -216,6 +224,24 @@ export function MatchGroupSelector({ hash }) {
216224
}}
217225
>
218226
{resource.name}
227+
{resource.detail && (
228+
<OverlayTrigger
229+
trigger="click"
230+
placement="bottom"
231+
rootClose
232+
overlay={
233+
<Popover id={`popover-${resource.code}`} className="bs-theme-dark text-start">
234+
<Popover.Body style={{ whiteSpace: "pre-wrap" }}>
235+
{resource.detail}
236+
</Popover.Body>
237+
</Popover>
238+
}
239+
>
240+
<button className="btn btn-link text-dark ms-2 p-0 mb-3">
241+
<span className="fas fa-circle-info fs-3"></span>
242+
</button>
243+
</OverlayTrigger>
244+
)}
219245
</h2>
220246
</div>
221247
<div

‎src/components/quickplay/ServerFinder.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
getSpecialEventDesc,
88
} from "@ssg/quickplayStaticData";
99
import { useEffect, useMemo, useRef, useState } from "react";
10-
import { OverlayTrigger, Tooltip } from "react-bootstrap";
10+
import { OverlayTrigger, Popover, Tooltip } from "react-bootstrap";
1111

1212
import fastClone from "@utils/fastClone";
1313
import { filterString } from "@utils/filter";
@@ -1757,8 +1757,30 @@ export default function ServerFinder({ hash }: { hash: string }) {
17571757
backgroundRepeat: "no-repeat",
17581758
}}
17591759
></div>
1760-
<div className="p-2">
1761-
<h4 className="fw-bold">{gm.name}</h4>
1760+
<div className="p-2 d-flex justify-content-center align-items-center">
1761+
<h4 className="fw-bold mb-0">{gm.name}</h4>
1762+
{gm.detail && (
1763+
<OverlayTrigger
1764+
trigger={["hover", "focus"]}
1765+
placement="bottom"
1766+
rootClose
1767+
overlay={
1768+
<Popover id={`popover-normal-${gm.code}`} className="bs-theme-dark text-start" onClick={(e) => e.stopPropagation()}>
1769+
<Popover.Body style={{ whiteSpace: "pre-wrap" }}>
1770+
{gm.detail}
1771+
</Popover.Body>
1772+
</Popover>
1773+
}
1774+
>
1775+
<button
1776+
className="btn btn-link text-dark ms-2 p-0 align-baseline position-relative"
1777+
style={{ zIndex: 1 }}
1778+
onClick={(e) => e.stopPropagation()}
1779+
>
1780+
<span className="fas fa-circle-info fs-5"></span>
1781+
</button>
1782+
</OverlayTrigger>
1783+
)}
17621784
</div>
17631785
</div>
17641786
</div>

‎src/ssg/quickplayStaticData.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,41 +19,47 @@ export const coreGamemodes = {
1919
name: "Payload",
2020
code: "payload",
2121
description: "BLU pushes the cart down the track. RED need to stop them.",
22+
detail: "BLU team wins by escorting the payload cart to the enemy base. Stand near the payload to make it move.\n\nRED team wins by preventing the payload cart from reaching the heart of their base.\n\nEnemies can block the payload by getting close to it.",
2223
skill: 0,
2324
img: payloadImg,
2425
},
2526
koth: {
2627
name: "King of the Hill",
2728
code: "koth",
2829
description: "One team must control a single point until time runs out.",
30+
detail: "Capture the Control Point and defend it until your team's timer runs out.\n\nThe Control Point cannot be captured while locked.\n\nIf the enemy team captures the Control Point, your team's timer will pause until you recapture the point.",
2931
skill: 0,
3032
img: kothImg,
3133
},
3234
attack_defense: {
3335
name: "Attack / Defense",
3436
code: "attack_defense",
3537
description: "BLU wins by capturing all points. RED wins by stopping them.",
38+
detail: "BLU team wins by capturing the Control Points on each stage before the time runs out.\n\nRED team wins by preventing all the points from being captured.",
3639
skill: 1,
3740
img: adImg,
3841
},
3942
ctf: {
4043
name: "Capture the Flag",
4144
code: "ctf",
4245
description: "And by flag we mean a glowing briefcase.",
46+
detail: "To win a point, steal the enemy's intelligence briefcase and return it to your base.\n\nYou should also prevent the opposing team from taking your intelligence briefcase to their base.",
4347
skill: 1,
4448
img: ctfImg,
4549
},
4650
capture_point: {
4751
name: "Capture Points",
4852
code: "capture_point",
4953
description: "Capture all points to win.",
54+
detail: "To win, each team must own all Control Points.\n\nSome Control Points will be locked until others are captured.",
5055
skill: 1,
5156
img: cpImg,
5257
},
5358
payload_race: {
5459
name: "Payload Race",
5560
code: "payload_race",
5661
description: "Two teams. Two bombs. Two tracks. Hilarity ensues.",
62+
detail: "Escort your payload cart to the finish line before the opposing team can deliver theirs.\n\nStand near the cart to make it move.",
5763
skill: 1,
5864
img: plrImg,
5965
},
@@ -67,6 +73,7 @@ export const casualGameModes = {
6773
name: "Misc",
6874
code: "alternative",
6975
description: "Game modes that don't fit into one of the other categories.",
76+
detail: "Select this option to play game modes like Territorial Control, Special Delivery, Medieval, and Player Destruction.",
7077
skill: 2,
7178
img: miscImg,
7279
},
@@ -78,6 +85,7 @@ export const baseGamemodes = {
7885
name: "Arena",
7986
code: "arena",
8087
description: "Quick rounds. No respawns. It's like Counter-Strike!",
88+
detail: "Arena is a fast-paced game mode with no respawns. Be the last team standing to win!\n\nAfter a set amount of time, a control point will become available to capture to win the round without hunting down the entire enemy team.",
8189
skill: 2,
8290
img: arenaImg,
8391
},
@@ -90,7 +98,7 @@ export const classicGameModes = {
9098
name: "Payload",
9199
code: "payload",
92100
description: "BLU pushes the cart down the track. RED need to stop them.",
93-
detail: "Blue team wins by escorting the payload cart to the enemy base. Stand near the payload to make it move.\n\nRed team wins by preventing the payload cart from reaching the heart of their base.\n\nEnemies can block the payload by getting close to it.",
101+
detail: "BLU team wins by escorting the payload cart to the enemy base. Stand near the payload to make it move.\n\nRED team wins by preventing the payload cart from reaching the heart of their base.\n\nEnemies can block the payload by getting close to it.",
94102
skill: 0,
95103
img: payloadImg,
96104
},
@@ -106,7 +114,7 @@ export const classicGameModes = {
106114
name: "Attack / Defense",
107115
code: "attack_defense",
108116
description: "BLU wins by capturing all points. RED wins by stopping them.",
109-
detail: "Blue team wins by capturing the Control Points on each stage before the time runs out.\n\nRed team wins by preventing all the points from being captured.",
117+
detail: "BLU team wins by capturing the Control Points on each stage before the time runs out.\n\nRED team wins by preventing all the points from being captured.",
110118
skill: 0,
111119
img: adImg,
112120
},

0 commit comments

Comments
 (0)