38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { Theme } from "@mancala/core";
|
||
|
|
import AppHeader from "../components/headerbar/AppHeader";
|
||
|
|
import PageContainer from "../components/PageContainer";
|
||
|
|
import RulesView from "../components/rules/RulesView";
|
||
|
|
import { Context } from "../context/context";
|
||
|
|
|
||
|
|
// How to play: every rule with an example (docs/specs/tutorial, R1).
|
||
|
|
const RulesPage: FunctionComponent<{ context: Context, theme: Theme }> = ({ context }) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
return (
|
||
|
|
<PageContainer>
|
||
|
|
<AppHeader context={context} />
|
||
|
|
<main className="wrap rules-page">
|
||
|
|
<h1>{t("HowToPlay")}</h1>
|
||
|
|
<RulesView />
|
||
|
|
</main>
|
||
|
|
<style jsx>{`
|
||
|
|
.rules-page {
|
||
|
|
max-width: 760px;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 30px;
|
||
|
|
letter-spacing: -.02em;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RulesPage;
|