Skip to content

Instantly share code, notes, and snippets.

@acid-chicken

acid-chicken/mahjong.html

Last active October 25, 2020 09:32
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save acid-chicken/b5a9ad0df38674587d1081f5f2cc1ebb to your computer and use it in GitHub Desktop.
Save acid-chicken/b5a9ad0df38674587d1081f5f2cc1ebb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mahjong.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>麻雀</title>
<style>
* {
box-sizing: border-box;
transform-style: preserve-3d }
html,
body {
height: 100%;
margin: 0 }
body {
align-items: center;
display: flex;
justify-content: center;
perspective: 1080px }
main,
section {
height: 720px;
width: 960px }
section {
display: grid;
position: absolute }
section:first-of-type {
background: #00722e;
border-radius: 4px;
box-shadow: 0 0 0 64px #7f4200;
grid: 72px 1fr 168px 1fr 72px / 72px 1fr 168px 1fr 72px;
transform: rotate3d(1, 0, 0, .0625turn) translate3d(120px, -120px, -240px);
width: 720px }
section:first-of-type > :nth-child(-n+4),
section:first-of-type > * > *,
section:first-of-type > :nth-child(-n+4) > * > * {
display: flex }
section:first-of-type > :nth-child(-n+4) > article {
flex: 1 0 auto }
section:first-of-type > :nth-child(1) {
grid-column: 2 / -1;
grid-row: -2;
padding-bottom: 36px }
section:first-of-type > :nth-child(1),
section:first-of-type > :nth-child(1) > article,
section:first-of-type > :nth-child(1) > * > *,
section:first-of-type > :nth-child(1) .tiles,
section:first-of-type > :nth-child(5) > * {
flex-flow: row }
section:first-of-type > :nth-child(1) > aside {
flex-flow: row-reverse }
section:first-of-type > :nth-child(1) .tiles.doubled {
flex-flow: column;
margin: -37px 0 }
section:first-of-type > :nth-child(1) > * > * {
margin-left: 16px }
section:first-of-type > :nth-child(1) > aside {
transform: translateY(36px) }
section:first-of-type > :nth-child(2) {
grid-column: -2;
grid-row: 1 / -2;
padding-right: 36px }
section:first-of-type > :nth-child(2),
section:first-of-type > :nth-child(2) > article,
section:first-of-type > :nth-child(2) > * > *,
section:first-of-type > :nth-child(2) .tiles,
section:first-of-type > :nth-child(6) > * {
flex-flow: column-reverse }
section:first-of-type > :nth-child(2) > aside {
flex-flow: column }
section:first-of-type > :nth-child(2) .tiles.doubled {
flex-flow: row-reverse;
margin: 0 -37px;
transform: translateX(-16px) }
section:first-of-type > :nth-child(2) > * > * {
margin-bottom: 16px }
section:first-of-type > :nth-child(2) .tiles.column::before {
transform: translateZ(21px) rotateX(-.25turn);
transform-origin: top }
section:first-of-type > :nth-child(2) .tiles.row::before {
transform: translateZ(21px) rotateY(.25turn);
transform-origin: left }
section:first-of-type > :nth-child(2) .tiles.column::after {
transform: translateZ(21px) rotateX(.25turn);
transform-origin: bottom }
section:first-of-type > :nth-child(2) .tiles.row::after {
transform: translateZ(21px) rotateY(-.25turn);
transform-origin: right }
section:first-of-type > :nth-child(2) > aside {
transform: translateX(36px) }
section:first-of-type > :nth-child(3) {
flex-flow: row-reverse;
grid-column: 1 / -2;
grid-row: 1;
padding-top: 36px }
section:first-of-type > :nth-child(3),
section:first-of-type > :nth-child(3) > article,
section:first-of-type > :nth-child(3) > * > *,
section:first-of-type > :nth-child(3) .tiles,
section:first-of-type > :nth-child(7) > * {
flex-flow: row-reverse }
section:first-of-type > :nth-child(3) > aside {
flex-flow: row }
section:first-of-type > :nth-child(3) .tiles.doubled {
flex-flow: column-reverse;
margin: -37px 0 }
section:first-of-type > :nth-child(3) > * > * {
margin-right: 16px }
section:first-of-type > :nth-child(3) .tiles.row::before {
transform: rotateY(-.25turn);
transform-origin: left }
section:first-of-type > :nth-child(3) .tiles.column::before {
transform: rotateX(.25turn);
transform-origin: top }
section:first-of-type > :nth-child(3) .tiles.row::after {
transform: rotateY(.25turn);
transform-origin: right }
section:first-of-type > :nth-child(3) .tiles.column::after {
transform: rotateX(-.25turn);
transform-origin: bottom }
section:first-of-type > :nth-child(3) > aside {
transform: translateY(-36px) }
section:first-of-type > :nth-child(4) {
grid-column: 1;
grid-row: 2 / -1;
padding-left: 36px }
section:first-of-type > :nth-child(4),
section:first-of-type > :nth-child(4) > article,
section:first-of-type > :nth-child(4) > * > *,
section:first-of-type > :nth-child(4) .tiles,
section:first-of-type > :nth-child(8) > * {
flex-flow: column }
section:first-of-type > :nth-child(4) > aside {
flex-flow: column-reverse }
section:first-of-type > :nth-child(4) .tiles.doubled {
flex-flow: row;
margin: 0 -37px;
transform: translateX(16px) }
section:first-of-type > :nth-child(4) > * > * {
margin-top: 16px }
section:first-of-type > :nth-child(4) > aside {
transform: translateX(-36px) }
section:first-of-type > :nth-last-child(-n+4) {
display: grid }
section:first-of-type > :nth-last-child(-n+4):nth-child(2n+1) {
grid-template: repeat(3, 36px) / auto;
margin: 0 1px }
section:first-of-type > :nth-last-child(-n+4):nth-child(2n+1) .tiles {
flex-flow: row }
section:first-of-type > :nth-last-child(-n+4):nth-child(2n) {
grid-template: auto / repeat(3, 36px);
margin: 1px 0 }
section:first-of-type > :nth-last-child(-n+4):nth-child(2n) .tiles {
flex-flow: column;
transform: scaleY(-1) }
section:first-of-type > :nth-child(5) {
grid-column: 3;
grid-row: 4 }
section:first-of-type > :nth-child(6) {
grid-column: 4;
grid-row: 3 }
section:first-of-type > :nth-child(7) {
grid-column: 3;
grid-row: 2;
transform: scaleY(-1) }
section:first-of-type > :nth-child(8) {
grid-column: 2;
grid-row: 3;
transform: scaleX(-1) }
section:last-of-type {
grid: 1fr 54px / 72px 1fr;
padding: 72px }/**/
section:last-of-type > * {
background: #393939dd;
border-radius: .00835px;
box-shadow: 0 0 0 16px #393939dd;
color: #ffffff }
section:last-of-type > :first-child {
display: grid;
grid: 24px 12px 24px 1fr / 1fr 1fr;
height: 190px;
text-align: center }
section:last-of-type > :first-child > :nth-child(n+2):nth-child(-n+3),
section:last-of-type > :first-child > :nth-child(n+6):nth-child(-n+7) > * {
background: #ffffff;
box-shadow: inset 0 0 0 1px #393939dd }
section:last-of-type > :first-child > :nth-child(n+6):nth-child(-n+7) > * {
height: 26px }
section:last-of-type > :first-child > :nth-child(1) {
font-weight: bold;
grid-column: 1 / 3 }
section:last-of-type > :first-child > :nth-child(2) {
align-items: center;
display: flex;
justify-content: center }
section:last-of-type > :first-child > :nth-child(2)::before {
background: #C30052;
border-radius: 50%;
content: "";
height: 8px;
width: 8px }
section:last-of-type > :first-child > :nth-child(3) {
display: grid;
grid: repeat(2, 3px) / repeat(4, 3px);
grid-gap: 2px;
padding: 2px 9px }
section:last-of-type > :first-child > :nth-child(3) > * {
background: #393939dd;
border-radius: 50% }
section:last-of-type > :last-child {
display: flex;
grid-column: 2;
grid-row: 2;
margin: 0 auto 0 72px }
section:last-of-type > :last-child > * {
background: #ffffff;
box-shadow: inset 0 0 0 1px #393939dd;
height: 54px;
width: 39px }
.tiles {
display: flex;
transition: transform .5s cubic-bezier(.33, 0, .67, .33) }
.tiles.bottom {
transform-origin: bottom }
.tiles.right {
transform-origin: right }
.tiles.top {
transform-origin: top }
.tiles.left {
transform-origin: left }
.tiles.unrevealed.bottom {
transform: rotateX(-.25turn) }
.tiles.unrevealed.right {
transform: rotateY(.25turn) }
.tiles.unrevealed.top {
transform: rotateX(.25turn) }
.tiles.unrevealed.left {
transform: rotateY(-.25turn) }
.tiles::before,
.tiles::after,
.tiles > *,
.tiles > *::before,
.tiles > *::after,
.tiles > * > :only-child {
background: #ffffff;
box-shadow: inset 0 0 0 1px #393939;
position: relative }
.tiles::before,
.tiles::after,
.tiles > *::before,
.tiles > *::after {
content: "";
display: block }
.tiles.row {
margin: 0 -21px }
.tiles.column {
margin: -21px 0 }
.tiles.vertical.row::before {
height: 36px;
transform: translateZ(21px) rotateY(-.25turn);
transform-origin: right;
width: 21px }
.tiles.vertical.row::after {
height: 36px;
transform: translateZ(21px) rotateY(.25turn);
transform-origin: left;
width: 21px }
.tiles.vertical.row > * {
height: 36px;
width: 26px }
.tiles.vertical.row > *::before {
height: 21px;
transform: rotateX(.25turn);
transform-origin: top;
width: 26px }
.tiles.vertical.row > *::after {
height: 21px;
top: -42px;
transform: rotateX(-.25turn);
transform-origin: bottom;
width: 26px }
.tiles.vertical.row > * > :only-child {
height: 36px;
top: -21px;
transform: translateZ(21px) }
.tiles.horizontal.row::before {
height: 26px;
transform: translateZ(21px) rotateY(-.25turn);
transform-origin: right;
width: 21px }
.tiles.horizontal.row::after {
height: 26px;
transform: translateZ(21px) rotateY(.25turn);
transform-origin: left;
width: 21px }
.tiles.horizontal.row > * {
height: 26px;
width: 36px }
.tiles.horizontal.row > *::before {
height: 21px;
transform: rotateX(.25turn);
transform-origin: top;
width: 36px }
.tiles.horizontal.row > *::after {
height: 21px;
top: -42px;
transform: rotateX(-.25turn);
transform-origin: bottom;
width: 36px }
.tiles.horizontal.row > * > :only-child {
height: 26px;
top: -21px;
transform: translateZ(21px) }
.tiles.vertical.column::before {
height: 21px;
transform: rotateX(-.25turn);
transform-origin: bottom;
width: 36px }
.tiles.vertical.column.riichi::before {
transform: rotateX(-.25turn) rotateY(-.25turn);
transform-origin: bottom left }
.tiles.vertical.column::after {
height: 21px;
transform: rotateX(.25turn);
transform-origin: top;
width: 36px }
.tiles.vertical.column.riichi::after {
transform: rotateX(.25turn) rotateY(.25turn) translateZ(-10px);
transform-origin: top right }
.tiles.vertical.column > * {
height: 36px;
width: 26px }
.tiles.vertical.column > *::before {
height: 21px;
transform: rotateX(.25turn);
transform-origin: top;
width: 26px }
.tiles.vertical.column > *::after {
height: 21px;
top: -42px;
transform: rotateX(-.25turn);
transform-origin: bottom;
width: 26px }
.tiles.vertical.column > * > :only-child {
height: 36px;
top: -21px;
transform: translateZ(21px) }
.tiles.horizontal.column::before {
height: 21px;
transform: rotateX(-.25turn);
transform-origin: bottom;
width: 36px }
.tiles.horizontal.column::after {
height: 21px;
transform: rotateX(.25turn);
transform-origin: top;
width: 36px }
.tiles.horizontal.column > * {
height: 26px;
width: 36px }
.tiles.horizontal.column > *::before {
height: 26px;
left: 14px;
transform: rotateY(.25turn);
transform-origin: right;
width: 21px }
.tiles.horizontal.column > *::after {
height: 26px;
top: -52px;
transform: rotateY(-.25turn);
transform-origin: left;
width: 21px }
.tiles.horizontal.column > * > :only-child {
height: 26px;
top: -26px;
transform: translateZ(21px) }
</style>
</head>
<body>
<main>
<section>
<div id="player-hand">
<article>
<div>
<div class="tiles unrevealed vertical bottom row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</article>
<aside>
<div>
<div class="tiles vertical bottom row"><div><div></div></div><div><div></div></div></div>
<div class="tiles horizontal right column doubled"><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles vertical bottom row"><div><div></div></div><div><div></div></div></div>
<div class="tiles horizontal right column doubled"><div><div></div></div><div><div></div></div></div>
</div>
</aside>
</div>
<div id="shimocha-hand">
<article>
<div>
<div class="tiles unrevealed horizontal right column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</article>
<aside>
<div>
<div class="tiles horizontal right column"><div><div></div></div><div><div></div></div></div>
<div class="tiles vertical top row doubled"><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles horizontal right column"><div><div></div></div><div><div></div></div></div>
<div class="tiles vertical top row doubled"><div><div></div></div><div><div></div></div></div>
</div>
</aside>
</div>
<div id="toimen-hand">
<article>
<div>
<div class="tiles unrevealed vertical top row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</article>
<aside>
<div>
<div class="tiles vertical top row"><div><div></div></div><div><div></div></div></div>
<div class="tiles horizontal left column doubled"><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles vertical top row"><div><div></div></div><div><div></div></div></div>
<div class="tiles horizontal left column doubled"><div><div></div></div><div><div></div></div></div>
</div>
</aside>
</div>
<div id="kamicha-hand">
<article>
<div>
<div class="tiles unrevealed horizontal left column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</article>
<aside>
<div>
<div class="tiles horizontal left column"><div><div></div></div><div><div></div></div></div>
<div class="tiles vertical bottom row doubled"><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles horizontal left column"><div><div></div></div><div><div></div></div></div>
<div class="tiles vertical bottom row doubled"><div><div></div></div><div><div></div></div></div>
</div>
</aside>
</div>
<div id="player-discard-pile">
<div>
<div class="tiles vertical bottom row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="tiles horizontal bottom riichi row"><div><div></div></div></div>
<div class="tiles vertical bottom row"><div><div></div></div></div>
</div>
<div>
<div class="tiles vertical bottom row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles vertical bottom row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</div>
<div id="shimocha-discard-pile">
<div>
<div class="tiles horizontal right column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="tiles vertical right riichi column"><div><div></div></div></div>
<div class="tiles horizontal right column"><div><div></div></div></div>
</div>
<div>
<div class="tiles horizontal right column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles horizontal right column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</div>
<div id="toimen-discard-pile">
<div>
<div class="tiles vertical top row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="tiles horizontal top riichi row"><div><div></div></div></div>
<div class="tiles vertical top row"><div><div></div></div></div>
</div>
<div>
<div class="tiles vertical top row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles vertical top row"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</div>
<div id="kamicha-discard-pile">
<div>
<div class="tiles horizontal left column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
<div class="tiles vertical left riichi column"><div><div></div></div></div>
<div class="tiles horizontal left column"><div><div></div></div></div>
</div>
<div>
<div class="tiles horizontal left column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
<div>
<div class="tiles horizontal left column"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div>
</div>
</div>
</section>
<section>
<div>
<div>東一局</div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>4</div>
<div>0</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment