59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent } from "react";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { RULES } from "@mancala/core";
|
||
|
|
import RuleBoard from "./RuleBoard";
|
||
|
|
|
||
|
|
// Every rule in order with its text and example (docs/specs/tutorial, R1). `showLessons` adds a link to each lesson;
|
||
|
|
// left out where following it would leave a game.
|
||
|
|
const RulesView: FunctionComponent<{ showLessons?: boolean }> = ({ showLessons }) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<ol className="rules">
|
||
|
|
{RULES.map((rule) => (
|
||
|
|
<li key={rule.id} id={rule.id} className="rule panel">
|
||
|
|
<h2>{t(rule.titleKey)}</h2>
|
||
|
|
{rule.textKeys.map((key) => <p key={key}>{t(key)}</p>)}
|
||
|
|
{rule.example && <RuleBoard example={rule.example} />}
|
||
|
|
{showLessons && rule.lesson && (
|
||
|
|
<Link className="btn ghost try" to={`/learn/${rule.id}`}>{t("TryIt")}</Link>
|
||
|
|
)}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
<style jsx>{`
|
||
|
|
.rules {
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
.rule {
|
||
|
|
padding: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 20px;
|
||
|
|
letter-spacing: -.01em;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
color: var(--muted);
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
.rules :global(.try) {
|
||
|
|
align-self: flex-start;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</ol>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RulesView;
|