Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-21 18:44:51 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Unify ranked/scrim LFGGroupSelector buttons

Browse Source
This commit is contained in:
Kalle
2022-03-17 01:25:35 +02:00
parent 0551a3eb05
commit 0dedf45552
6 changed files with 82 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/play/GroupCard.tsx
View File

@@ -60,7 +60,7 @@ export function GroupCard({
<div className="play__card">
{typeof ranked === "boolean" && (
<div className={clsx("play__card__ranked-text", { ranked })}>
{ranked ? "Ranked" : "Unranked"}
{ranked ? "Ranked" : "Scrim"}
</div>
)}
<GroupMembers members={group.members} />

56
app/components/play/LFGGroupSelector.tsx
View File

@@ -10,13 +10,13 @@ const OPTIONS = [
type: "VERSUS-RANKED",
image: "rotations",
text: "Versus",
explanation: "Private Battle (ranked)",
explanation: "Ranked",
},
{
type: "VERSUS-UNRANKED",
image: "rotations",
text: "Versus",
explanation: "Private Battle (unranked)",
explanation: "Scrim",
},
{
type: "TWIN",
@@ -32,27 +32,51 @@ const OPTIONS = [
},
] as const;
type Type = "VERSUS-RANKED" | "VERSUS-UNRANKED" | "TWIN" | "QUAD";
export function LFGGroupSelector({
counts,
}: {
counts: PlayFrontPageLoader["counts"];
}) {
const [type, setType] = React.useState("VERSUS-RANKED");
const [selectedType, setSelectedType] = React.useState<Type>("VERSUS-RANKED");
const count = (
type: "VERSUS-RANKED" | "VERSUS-UNRANKED" | "TWIN" | "QUAD"
) => {
switch (type) {
case "VERSUS-RANKED":
case "VERSUS-UNRANKED":
return counts["VERSUS"];
case "QUAD":
return counts["QUAD"];
case "TWIN":
return counts["TWIN"];
}
};
return (
<>
<input type="hidden" name="type" value={type} />
<input type="hidden" name="type" value={selectedType} />
<RadioGroup
className="play__type-radio-group"
value={type}
onChange={setType}
value={selectedType}
onChange={setSelectedType}
>
{OPTIONS.map((option, i) => {
return (
<RadioGroup.Option key={i} value={option.type}>
<RadioGroup.Option
key={i}
className={clsx({ "mt-3": i > 1 })}
value={option.type}
>
{({ checked }) => (
<div
className={clsx("play__type-radio-group__item", { checked })}
className={clsx("play__type-radio-group__item", {
checked,
"top-half": i === 0,
"bottom-half": i === 1,
})}
>
<label className="play__type-radio-group__label">
{option.text}
@@ -67,12 +91,26 @@ export function LFGGroupSelector({
<span
className={clsx("play__type-radio-group__label__count", {
checked,
"scooted-over": i === 0,
invisible: i === 1,
})}
>
<UsersIcon className="play__type-radio-group__label__icon" />
{counts[option.type]}
<span
className={clsx("z-10", {
"play__forced-black-number":
option.type === "VERSUS-RANKED" &&
selectedType === "VERSUS-UNRANKED",
"play__forced-white-number":
option.type === "VERSUS-RANKED" &&
selectedType === "VERSUS-RANKED",
})}
>
{count(option.type)}
</span>
</span>
</label>
{/* TODO: remove */}
<img
className={clsx("play__type-radio-group__image", {
checked,

8
app/core/play/utils.ts
View File

@@ -271,15 +271,13 @@ export function countGroups(
acc.QUAD += memberCount;
} else if (group.type === "TWIN" && memberCount !== 2) {
acc.TWIN += memberCount;
} else if (group.type === "VERSUS" && group.ranked) {
acc["VERSUS-RANKED"] += memberCount;
} else if (group.type === "VERSUS" && !group.ranked) {
acc["VERSUS-UNRANKED"] += memberCount;
} else if (group.type === "VERSUS") {
acc["VERSUS"] += memberCount;
}
return acc;
},
{ TWIN: 0, QUAD: 0, "VERSUS-RANKED": 0, "VERSUS-UNRANKED": 0 }
{ TWIN: 0, QUAD: 0, VERSUS: 0 }
);
}

2
app/routes/play/index.tsx
View File

@@ -95,7 +95,7 @@ export const action: ActionFunction = async ({ request, context }) => {
};
export interface PlayFrontPageLoader {
counts: Record<"TWIN" | "QUAD" | "VERSUS-RANKED" | "VERSUS-UNRANKED", number>;
counts: Record<"TWIN" | "QUAD" | "VERSUS", number>;
ownMMR?: {
value: number;
topX?: number;

4
app/styles/global.css
View File

@@ -651,3 +651,7 @@ hr {
.rounded {
border-radius: var(--rounded);
}
.z-10 {
z-index: 10;
}

28
app/styles/play.css
View File

@@ -19,7 +19,6 @@
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--s-3);
}
.play__type-radio-group__item {
@@ -30,9 +29,22 @@
margin: 0 auto;
background-color: var(--bg-lighter-transparent);
border-radius: var(--rounded);
cursor: pointer;
}
.play__type-radio-group__item.top-half {
border-radius: 0;
border-start-end-radius: var(--rounded);
border-start-start-radius: var(--rounded);
}
/* stylelint-disable */
.play__type-radio-group__item.bottom-half {
border-radius: 0;
border-end-end-radius: var(--rounded);
border-end-start-radius: var(--rounded);
}
/* stylelint-enable */
.play__type-radio-group__item:hover {
background-color: var(--theme-transparent);
}
@@ -75,6 +87,10 @@
margin-inline-start: auto;
}
.play__type-radio-group__label__count.scooted-over {
margin-block-end: -30px;
}
.play__type-radio-group__label__count.checked {
color: var(--button-text-transparent);
}
@@ -83,6 +99,14 @@
width: 1rem;
}
.play__forced-black-number {
color: var(--button-text-transparent);
}
.play__forced-white-number {
color: var(--text-lighter);
}
.play__type-radio-group__image {
width: 2rem;
height: 2rem;