autotable/about.html at master · riichinomics/autotable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<html>
<head>
    <meta charset="utf-8">
    <title>Autotable - an online mahjong table</title>
    <meta name="viewport" content="width=device-width">
    <link href="img/icon-96.auto.png" rel="shortcut icon" sizes="96x96">
    <link href="img/icon-32.auto.png" rel="shortcut icon" sizes="32x32">
    <link href="img/icon-16.auto.png" rel="shortcut icon" sizes="16x16">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <style>
        body {
            display: flex;
            background: #000;
            color: #ccc;
        }

        .main {
            max-width: 720px;
            background: rgb(7, 46, 66);
            box-shadow: 0 0 20px 20px rgb(7, 46, 66);
        }

        .pic {
            text-align: center;
            margin-bottom: 1em;
        }

        h1, h2, h3 {
            color: #fff;
            margin-top: 1em;
        }
        h3 { font-size: 1.3rem; }

        a { color: #59a8fd; }
        a:hover { color: #b1d7ff; }

        video { max-width: 100%; }
        img { max-width: 100%; }

        #fork-me {
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <a id="fork-me" href="https://github.com/riichinomics/autotable">
        <img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149"
        class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
    </a>
    <div class="container-md main ">
        <h1 class="mt-4">
            Autotable
        </h1>
        <div class="pic mt-4">
            <video controls autoplay loop src="img/about/game.mp4"></video>
        </div>
        <p class="text-center">
            <a class="btn btn-warning text-dark" href="https://pwmarcz.pl/autotable/">Play now</a>
        </p>
        <p>
            <b>Autotable</b> is an online platform for playing
            <a href="https://en.wikipedia.org/wiki/Japanese_Mahjong">Riichi Mahjong</a>.
        </p>
        <p>
            Unlike other mahjong programs, it's not really a game, but rather a tabletop simulator. The computer does not enforce the rules or make any moves for you. You are expected to do almost everything yourself: draw the tiles from the wall, sort them, call, make payments, and so on.
        </p>
        <p>This is all to make the experience feel more like real-life Mahjong. Think about it as an <a href="https://www.youtube.com/watch?v=N1fY2xH062w">automatic mahjong table</a>, but on the Internet.</p>
        <p>
            Autotable should be played with other people over a <b>voice call</b>, such as Jitsi, Google Meet or Discord.
        </p>

        <h2>FAQ</h2>

        <h3>How to play online?</h3>

        <p>There is no matchmaking, you need to arrange the game with other players yourself.</p>

        <p>You should also connect with the other players over a video/audio call. Because the game is intentionally free-form and not automated, voice is really important: not only calls (pon/chi/kan/ron), but also payments, deciding who's next, clearing up mistakes, and so on.</p>

        <p>To start an online game, click "Connect". Then, copy the page address (containing the game ID) and send it to other people.</p>

        <h3>Who's the dealer?</h3>
        <p>The first dealer is indicated by the round marker. You can move it around, or flip it to South side when needed.</p>

        <div class="pic">
            <img src="./img/about/round.png">
        </div>


        <p>The current dealer is shown on the center display, as an orange bar. The repeat count (honba) is also displayed there.</p>

        <div class="pic">
            <img src="./img/about/dealer.png">
        </div>

        <p>This information is updated automatically when somebody presses Deal, but you can also change it manually using the "Dealer" and "Honba" buttons.</p>

        <h3>How do I pay?</h3>
        <p>Use Space or Q to look down, to your tenbo sticks drawer.</p>
        <p>You can put down the sticks on the table, next to the discards. Then the other person will be able to take them:</p>

        <div class="pic">
            <img src="./img/about/pay.png">
        </div>

        <h3>How do I decide seats?</h3>
        <p>
            You can deal random wind tiles to do that. Select "Wind tiles" from the dropdown, press "Deal", and grab tiles to determine your seats:
        </p>

        <div class="pic">
            <img src="./img/about/winds.png">
        </div>

        <p>
            The player that took East stays in their seat. You can move the round marker to that player's side. The other players can switch seats around the table using the "Leave seat" button.
        </p>

        <h3>What are the different modes?</h3>

        <ul>
            <li><b>Four-player</b> game
            <li><b>Three-player</b> (sanma) - see <a href="http://riichi.wiki/wiki/Sanma">Sanma</a> on Arcturus wiki, or <a href="https://en.wikipedia.org/wiki/Three_player_mahjong">Three-player mahjong</a> on Wikipedia. Main differences: no 2-8 Man, no chii, North is a special meld.
            <li><b>Minefield</b> - a two-player game from <a href="https://en.wikipedia.org/wiki/Kaiji_(manga)">Kaiji</a> manga, see this <a href="https://pwmarcz.pl/minefield/">Minefield game</a> made by the same developer (the page also contains a summary of rules).
            <li><b>Bamboo</b> - an adaptation of the two-player <a href="https://www.gamedesign.jp/flash/bamboo/bamboo.html">Bamboo game</a> from gamedesign.jp. This is mostly a wait-reading exercise: only bamboo tiles, no melds except closed kan.
            <li><b>Washizu</b> - a game from the <a href="https://en.wikipedia.org/wiki/Akagi_(manga)">Agagi</a> manga, only 1 of each 4 tiles is opaque, the rest are translucent. Draw cards by clicking on the center of the table. The number in the center counts how many are left in the bag (for dead wall).
        </ul>

        <h2>Attribution</h2>

        <p>This is a fork of <a href="https://pwmarcz.pl/autotable/about.html">the original autotable</a>. The main goal was to add washizu mode and the ability to discard tiles face down for yami mahjong, but it also includes a few bug fixes and a juiced up spectator mode.</p>

        <p>To make the game, These freely available images and sounds were used:</p>

        <ul>
            <li>
                The tile images were originally posted at <a href="https://web.archive.org/web/20160717012415/http://blog.kanojo.de/2011/07/01/more-shirt-stuff-t-shirt-logo-ideas/">Kanojo.de blog</a>. They're licensed as CC BY-NC-SA.
            </li>
            <li>
                The table texture is from <a href="https://cc0textures.com/view?id=Fabric030">CC0 Textures</a>. It's licensed as CC0.
            </li>
            <li>
                The sounds come from <a href="https://opengameart.org/">OpenGameArt</a> (<a href="https://opengameart.org/content/thwack-sounds">Thwack Sounds</a>, <a href="https://opengameart.org/content/54-casino-sound-effects-cards-dice-chips">Casino sound effects</a>) and are licensed as CC0.
            </li>
        </ul>

        <p>The project was made using the following excellent pieces of software:</p>
        <ul>
            <li><a href="https://threejs.org/">three.js</a></li>
            <li><a href="https://parceljs.org/">Parcel</a></li>
            <li><a href="https://inkscape.org/">Inkscape</a></li>
            <li><a href="https://blender.org/">Blender</a></li>
            <li><a href="https://getbootstrap.com/">Bootstrap</a></li>
            <li><a href="https://www.typescriptlang.org/">TypeScript</a></li>
            <li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
        </ul>

        <h2>Contact me</h2>

        <p>This version is maintained by <a href="https://github.com/riichinomics">riichinomics</a>, you can contact me at <a href="mailto:riichinomics@gmail.com">riichinomics@gmail.com</a> or open an issue on <a href="https://github.com/riichinomics/autotable/issues">github</a>.</p>

        <h2>Links</h2>

        <ul>
            <li><a href="https://autotable.riichi.moe/">Play the game</a></li>
            <li><a href="https://github.com/riichinomics/autotable">Source code</a></li>
            <li><a href="https://pwmarcz.pl/blog/autotable/">Blog post about making the game</a></li>
            <li><a href="https://mahjong.guide/a-beginners-guide-to-riichi-mahjong/">A Beginner’s Guide to Riichi Mahjong</a></li>
            <li><a href="https://pwmarcz.pl">Original developer's site</a>, including a <a href="https://pwmarcz.pl/mahjong">mahjong section</a></li>
            <li><a href="https://pwmarcz.pl/minefield">Minefield Mahjong</a>, a game based on Kaiji comics</li>
        </ul>

    </div>
</body>