Skip to content

Commit

Permalink
Hybrid new user rank chooser design
Browse files Browse the repository at this point in the history
  • Loading branch information
@GreenAsJade
GreenAsJade committed Feb 10, 2024
1 parent 71bfb78 commit 0535b54
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 47 deletions.
52 changes: 42 additions & 10 deletions src/components/NewUserRankChooser/NewUserRankChooser.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,29 +36,61 @@
display: flex;
flex-direction: row;
justify-content: center;
gap: 1rem;


button {
font-size: 1.1rem;
font-weight: bold;
.rank-chooser-button {
flex-grow: 1;
flex-basis: 13rem;
max-width: 13rem;
height: 4rem;
margin: 0.5rem;
white-space: nowrap;

themed background-color shade5
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;

display: flex;
flex-direction: column;
align-items: center;
align-content: center;
justify-content: center;

.rank-chooser-heading {
width: 100%
display: flex;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
justify-content: center;
themed background-color shade4
align-items: center;
font-size: large;
font-weight: bold;
min-height: 2rem;
}

button {
height: auto;
padding: 1rem;

font-size: large;
font-weight: bold;
margin: 0.5rem;
white-space: nowrap;
}

.explainer-text {
font-size: small;
font-weight: normal;
margin-top: 0.5rem;
}
}

.fa {
margin: 0.3rem;
}
}

.skip-button {
display: flex;
flex-direction: row;
justify-content: center;
padding: 2rem;
padding: 1.5rem;
}
}
}
Expand Down
113 changes: 76 additions & 37 deletions src/components/NewUserRankChooser/NewUserRankChooser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,63 +17,102 @@

import * as React from "react";

import { pgettext } from "translate";
import { _, pgettext } from "translate";
import { put } from "requests";
import { errorAlerter, ignore } from "misc";

export function NewUserRankChooser(): JSX.Element {
const sendRankChoice = (choice: string): void => {
put(`me/starting_rank`, { choice: choice }).then(ignore).catch(errorAlerter);
};
const chooseBeginner = () => {
sendRankChoice("beginner");
};
const chooseIntermediate = () => {
sendRankChoice("intermediate");
};
const chooseAdvanced = () => {
sendRankChoice("advanced");
};
const chooseToSkip = () => {
sendRankChoice("skip");
};
const sendRankChoice = (choice: string): void => {
put(`me/starting_rank`, { choice: choice }).then(ignore).catch(errorAlerter);
};

interface NewUserRankChooserProps {
show_skip?: boolean;
}

export function NewUserRankChooser({ show_skip = true }: NewUserRankChooserProps): JSX.Element {
/* render */
return (
<div className="NewUserRankChooser">
<div className="centered-content">
<div className="instructions">
{pgettext(
"Instructions for rank chooser buttons",
"Welcome! To help us find you the best games, please select the option below that best describes your skill at Go.",
"Welcome! To help us find you suitable opponents, please select the option below that best describes your skill at Go.",
)}
</div>
<div className="rank-chooser-buttons">
<button className="primary" onClick={chooseBeginner}>
{pgettext("Label for the button used to say I'm a beginner", "Beginner")}
</button>
<button className="primary" onClick={chooseIntermediate}>
{pgettext(
"Label for the button used to say I'm an intermediate player",
<NewRankChooserButton
label={pgettext(
"Label for the button used to say I'm a beginner",
"Beginner",
)}
choice={"beginner"}
/>
<NewRankChooserButton
label={pgettext(
"Label for the button used to say I'm an intermediate plater",
"Intermediate",
)}
</button>
<button className="primary" onClick={chooseAdvanced}>
{pgettext(
"Label for the button used to say I'm an advanced player",
choice={"intermediate"}
explainer={_("Your go rank is 16k-1k")}
/>
<NewRankChooserButton
label={pgettext(
"Label for the button used to say I'm an advanced plater",
"Advanced",
)}
</button>
</div>
<div className="skip-button">
<button className="primary" onClick={chooseToSkip}>
{pgettext(
"Label for the button used to say skip choosing an initial rank",
"Skip",
)}
</button>
choice={"advanced"}
explainer={_("You're a Dan level player")}
/>
</div>
{show_skip && (
<div className="skip-button">
<button className="primary" onClick={() => sendRankChoice("skip")}>
{pgettext(
"Label for the button used to say 'skip choosing an initial rank'",
"Skip",
)}
</button>
</div>
)}
</div>
</div>
);
}

interface NewRankChooserButtonProps {
label: string;
choice: string;
explainer?: string;
}

function NewRankChooserButton({
label,
choice,
explainer,
}: NewRankChooserButtonProps): JSX.Element {
const [explainer_open, setExplainerOpen] = React.useState(false);

const toggleExplainer = () => {
setExplainerOpen(!explainer_open);
};

return (
<div className="rank-chooser-button">
<div className="rank-chooser-heading">
{label}
{explainer && <i className="fa fa-question-circle-o" onClick={toggleExplainer} />}
</div>

<div
className="explainer-text"
style={{ visibility: explainer_open ? "visible" : "hidden" }}
>
{explainer || "(invisible filler)"}
</div>
<button className={"primary"} onClick={() => sendRankChoice(choice)}>
{pgettext("label on a button to select a choice", "Select")}
</button>
</div>
);
}

0 comments on commit 0535b54

Please sign in to comment.