35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { BOT_LEVELS, BotLevel, getBotLevelTextKey, getLastBotLevel, setLastBotLevel } from "@mancala/core";
|
||
|
|
import { Context } from "../context/context";
|
||
|
|
|
||
|
|
// The four bot levels as buttons; the level chosen last is highlighted and remembered on this device.
|
||
|
|
const BotLevelPicker: FunctionComponent<{ context: Context, onChoose: (level: BotLevel) => void }> = ({ context, onChoose }) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const lastLevel = getLastBotLevel(context.storage);
|
||
|
|
const choose = (level: BotLevel) => {
|
||
|
|
setLastBotLevel(context.storage, level);
|
||
|
|
onChoose(level);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className="levels" role="group" aria-label={t("ChooseBotLevel")}>
|
||
|
|
{BOT_LEVELS.map((level) => (
|
||
|
|
<button key={level} className={`btn ${level === lastLevel ? "pri" : "ghost"}`} onClick={() => choose(level)}>
|
||
|
|
{t(getBotLevelTextKey(level))}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
<style jsx>{`
|
||
|
|
.levels {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BotLevelPicker;
|