Skip to content

Design tutorial page #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tknkaa merged 2 commits into from
Jan 4, 2026
Merged

Design tutorial page #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f2a21c
style: make tutorial page look good
tknkaa Jan 4, 2026
18aedff
chore: install biome as dev dependency
tknkaa Jan 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions app/lib/components/BasicRule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
export default function BasicRule() {
return (
<>
<div className="text-2xl font-bold mb-6">
麻雀の基本的なルールについて
</div>
<div className="text-2xl font-bold mb-6">基本ルール</div>

<div className="mb-6">
<img
Expand All @@ -14,7 +12,7 @@ export default function BasicRule() {
/>
</div>

<ul className="list-disc ml-6 mb-8 space-y-2">
<ul className="list-disc ml-6 mb-8 space-y-2 text-sm">
<li>手持ちの牌は13枚</li>
<li>山から1枚引き、1枚捨てる</li>
<li>これを繰り返し最初にアガった人に得点が入る</li>
Expand All @@ -24,7 +22,7 @@ export default function BasicRule() {
</ul>

<div className="text-xl font-bold my-6">面子（メンツ）とは？</div>
<p className="mb-4">
<p className="mb-4 text-sm">
同じ牌3枚（刻子、コーツ）または同じ種類の連続した数字の牌3枚（順子、シュンツ）
</p>
<div className="flex gap-5 mb-8">
Expand All @@ -33,13 +31,13 @@ export default function BasicRule() {
</div>

<div className="text-xl font-bold my-6">雀頭（ジャントウ）とは？</div>
<p className="mb-4">同じ牌2枚</p>
<p className="mb-4 text-sm">同じ牌2枚</p>
<div className="mb-8">
<img src="/tutorial/Jantou.png" alt="雀頭" width="110" height="70" />
</div>

<div className="text-xl font-bold my-6">聴牌（テンパイ）とは？</div>
<p className="mb-4 leading-relaxed">
<p className="mb-4 leading-relaxed text-sm">
特定の牌を山から持ってくる（<strong>ツモ</strong>
る）か他家が捨てた牌を持ってきたら（<strong>ロン</strong>
したら）4面子1雀頭揃う状況のことを<strong>テンパイ</strong>
Expand All @@ -53,13 +51,13 @@ export default function BasicRule() {
height="90"
/>
</div>
<p className="mb-8 leading-relaxed">
<p className="mb-8 leading-relaxed text-sm">
※実戦では4面子1雀頭揃えてもアガリにはならないことがあります。ポンやチーなどをせずにテンパイしているときに
<strong>立直（リーチ）</strong>
することで、立直という役がつき、その牌を持ってきたときにアガリになります。また、立直以外にも役はありますが、初心者のうちはポンやチーなどはせず、立直に向かうことが大切です。
</p>
<div className="text-xl font-bold my-6">シャンテン数とは？</div>
<p className="mb-4 leading-relaxed">
<p className="mb-4 leading-relaxed text-sm">
テンパイまで最短であと何巡必要か、という値のことをシャンテン数と言います。例えば、以下の手牌では、次巡に索子（ソーズ）の3（竹が3つ描かれている牌）か筒子（ピンズ）の3（丸が3つ描かれている牌）を持ってきて、字牌の中（チュン）を捨てればテンパイできるので、1シャンテン（イーシャンテン）であると言えます。
</p>
<div className="mb-8">
Expand All @@ -71,7 +69,7 @@ export default function BasicRule() {
/>
</div>
<div className="text-xl font-bold my-6">七対子（チートイツ）とは？</div>
<p className="mb-6 leading-relaxed">
<p className="mb-6 leading-relaxed text-sm">
麻雀は役がないとアガることができないという話を先ほどしましたが、立直以外にも役はあって、その一つが七対子です。七対子とは読んで字の如く、対子を7個揃えると成立します。覚えるのがとても簡単で、実戦でも高打点を作りたいときに狙います。また一般的には、対子が4つ（七対子の2シャンテン）から、4面子1雀頭揃える手順と七対子に向かう手順のバランスを取るとよいとされています。七対子と区別するために、4面子1雀頭揃えた手のことをメンツ手と言うことがあります。
</p>
</>
Expand Down
14 changes: 6 additions & 8 deletions app/lib/components/LocalRule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
export default function LocalRule() {
return (
<>
<div className="text-2xl font-bold mb-6">
一人麻雀のローカルルールについて
</div>
<div className="text-2xl font-bold mb-6">ローカルルール</div>

<ul className="list-disc ml-6 mb-8 space-y-4">
<li className="leading-relaxed">
<li className="leading-relaxed text-sm">
牌を18巡ツモって、流局までにアガれたら+8000点、アガれなくても流局時にテンパイしていたら+1000点、イーシャンテンでも+500点となっています。実戦では流局時にイーシャンテンでも点数はもらえないのですが、
<u>一人麻雀はパズルとして楽しんでほしい</u>
ので、シャンテン数を進めたということで、点数がもらえます。
</li>
<li className="leading-relaxed">
<li className="leading-relaxed text-sm">
手牌の画像をクリックしたら、その牌が捨てられ、新しい牌をツモることができます。
</li>
<li className="leading-relaxed">
<li className="leading-relaxed text-sm">
鳴きやオリといった要素がないので、字牌は牌山に含まれていません。
</li>
<li className="leading-relaxed">
<li className="leading-relaxed text-sm">
東風戦になります。東4局でアガるか流局すれば、終局となります。
</li>
<li className="leading-relaxed">
<li className="leading-relaxed text-sm">
プレイ画面の有効牌表示では、シャンテン数が進む打牌を最大10個ずつ表示しています。シャンテン数を進めることが必ずしもアガリに近づくわけではないですが、一つの指標にしてください。
</li>
</ul>
Expand Down
21 changes: 11 additions & 10 deletions app/routes/learn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ export default function Page() {
const currentHash = location.hash;
const contents = ["basic", "local"];
return (
<div className="drawer drawer-open">
<div className="drawer drawer-open bg-[#1A472A] font-serif">
<input id="my-drawer-4" type="checkbox" className="drawer-toggle" />
<div className="drawer-content ml-4 mt-4">
<Link to="/" className="btn btn-outline mb-4">
Back to Home
<div className="drawer-content ml-4 mr-4 mt-4">
<Link
to="/"
className="mb-4 bg-yellow-600 rounded text-xs w-1/2 max-w-30 h-7 flex items-center justify-center transition-transform duration-150 hover:scale-105"
>
ホームに戻る
</Link>
<div id="basic">
<BasicRule />
Expand All @@ -27,16 +30,15 @@ export default function Page() {
aria-label="close sidebar"
className="drawer-overlay"
></label>
<div className="is-drawer-close:w-14 is-drawer-open:w-48 bg-base-200 flex flex-col items-start min-h-full">
<div className="is-drawer-close:w-14 is-drawer-open:w-48 bg-[#0F2918] flex flex-col items-start min-h-full">
<ul className="menu w-full grow">
{contents.map((content) => {
if (currentHash === `#${content}`) {
return (
<li key={content}>
<span className="is-drawer-close:hidden text-green-500 bg-base-300">
<span className="is-drawer-close:hidden text-yellow-400">
<Link to={`#${content}`}>
{content.charAt(0).toUpperCase() + content.slice(1)}{" "}
Rules
{content === "basic" ? "基本ルール" : "ローカルルール"}
</Link>
</span>
</li>
Expand All @@ -46,8 +48,7 @@ export default function Page() {
<li key={content}>
<span className="is-drawer-close:hidden">
<Link to={`#${content}`}>
{content.charAt(0).toUpperCase() + content.slice(1)}{" "}
Rules
{content === "basic" ? "基本ルール" : "ローカルルール"}
</Link>
</span>
</li>
Expand Down
Loading