-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (138 loc) · 7.22 KB
/
index.html
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
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="3d.css">
<link rel="stylesheet" href="river.css">
<style>
@keyframes 麻雀卓回転 {
0% {
transform:
rotateX(50deg) translate(var(--河-center-x), var(--河-center-y)) rotateZ(0turn) translate(calc(-1 * var(--河-center-x)), calc(-1 * var(--河-center-y)));
}
25% {
transform:
rotateX(50deg) translate(var(--河-center-x), var(--河-center-y)) rotateZ(0.25turn) translate(calc(-1 * var(--河-center-x)), calc(-1 * var(--河-center-y)));
}
50% {
transform:
rotateX(50deg) translate(var(--河-center-x), var(--河-center-y)) rotateZ(0.5turn) translate(calc(-1 * var(--河-center-x)), calc(-1 * var(--河-center-y)));
}
75% {
transform:
rotateX(50deg) translate(var(--河-center-x), var(--河-center-y)) rotateZ(0.75turn) translate(calc(-1 * var(--河-center-x)), calc(-1 * var(--河-center-y)));
}
100% {
transform:
rotateX(50deg) translate(var(--河-center-x), var(--河-center-y)) rotateZ(1turn) translate(calc(-1 * var(--河-center-x)), calc(-1 * var(--河-center-y)));
}
}
</style>
</head>
<body style="background-color: #3f7528;">
<template id="piece-template">
<div class="three-d piece-obj">
<div class="face face1"><img src="./assets/5筒.png" height="80"></div>
<div class="face face2"></div>
<div class="face side-faceA"></div>
<div class="face side-faceB"></div>
<div class="face side-faceC"></div>
<div class="face side-faceD"></div>
</div>
</template>
<div id="root" style="perspective: 3200px; position: relative;">
<div id="麻雀卓" class="three-d"
style="animation-name: 麻雀卓回転;
animation-duration: 8s;
animation-iteration-count: infinite;">
<div id="自家-河" class="three-d" style="transform: translate(var(--自家-left), var(--自家-top));">
</div>
<div id="下家-河" class="three-d"
style="transform: translate(var(--下家-left), var(--下家-bottom)) rotateZ(-90deg);">
</div>
<div id="対面-河" class="three-d"
style="transform: translate(var(--対面-right), var(--対面-bottom)) rotateZ(-180deg);">
</div>
<div id="上家-河" class="three-d"
style="transform: translate(var(--上家-right), var(--上家-top)) rotateZ(-270deg);">
</div>
<div id="自家-手牌" class="three-d" style="transform:
translate(
calc(var(--自家-left) - var(--piece-horizontal-stride) * (13 - 6) / 2),
calc(var(--自家-top) + var(--piece-vertical-stride) * 4)
) translateZ(calc(var(--piece-height))) rotateX(-90deg) ">
</div>
<div id="上家-手牌" class="three-d" style="transform:
translate(
calc(var(--上家-right) - var(--piece-vertical-stride) * 4),
calc(var(--上家-top) - var(--piece-horizontal-stride) * (13 - 6) / 2)
) rotateZ(90deg) translateZ(calc(var(--piece-height))) rotateX(-90deg) ">
</div>
<div id="対面-手牌" class="three-d" style="transform:
translate(
calc(var(--対面-right) + var(--piece-horizontal-stride) * (13 - 6) / 2),
calc(var(--対面-bottom) - var(--piece-vertical-stride) * 4)
) rotateZ(180deg) translateZ(calc(var(--piece-height))) rotateX(-90deg)">
</div>
<div id="下家-手牌" class="three-d" style="transform:
translate(
calc(var(--下家-left) + var(--piece-vertical-stride) * 4),
calc(var(--下家-bottom) + var(--piece-horizontal-stride) * (13 - 6) / 2)
) rotateZ(270deg) translateZ(calc(var(--piece-height))) rotateX(-90deg)">
</div>
</div>
</div>
<script>
const pieceTemplate = document.getElementById('piece-template');
const 自家河 = document.getElementById('自家-河');
const 下家河 = document.getElementById('下家-河');
const 対面河 = document.getElementById('対面-河');
const 上家河 = document.getElementById('上家-河');
const rivers = [
{
dom: 自家河,
pieces: ["9萬", "3萬", "1萬", "5萬", "1索", "2索", "4索", "6索", "1萬", "7索", "7索", "7萬"],
},
{
dom: 下家河,
pieces: ["3萬", "5萬", "7萬", "2萬", "4索", "2索", "2索", "7索", "8索", "3索", "4萬"],
},
{
dom: 対面河,
pieces: ["3萬", "1萬", "5萬", "9索", "4索", "1索", "7萬", "6索", "6索", "9索", "6索", "1索"],
},
{
dom: 上家河,
pieces: ["4筒", "9索", "1索", "5索", "5索", "3萬", "1萬", "9索", "7索", "7萬", "4索", "5索", "4筒", "5索"],
},
];
rivers.forEach(({ dom, pieces }) => {
pieces.forEach((identity, index) => {
const column = index % 6;
const row = Math.floor(index / 6);
const piece = pieceTemplate.content.cloneNode(true).children[0];
piece.style.transform = `translateX(calc(var(--piece-horizontal-stride) * ${column})) translateY(calc(var(--piece-vertical-stride) * ${row}))`;
piece.querySelector('img').src = `./assets/${identity}.png`;
dom.appendChild(piece);
});
});
</script>
<script>
const 自家手牌 = document.getElementById('自家-手牌');
const 上家手牌 = document.getElementById('上家-手牌');
const 対面手牌 = document.getElementById('対面-手牌');
const 下家手牌 = document.getElementById('下家-手牌');
const 手牌s = [
{ dom: 自家手牌, pieces: ["1筒", "1筒", "1筒", "3筒", "3筒", "6筒", "6筒", "7筒", "9筒", "9筒", "9筒", "中", "中"] },
{ dom: 上家手牌, pieces: ["2萬", "2萬", "2萬", "4萬", "4萬", "4萬", "6萬", "8萬", "8萬", "8萬", "9萬", "9萬", "9萬"] },
{ dom: 対面手牌, pieces: ["1筒", "2筒", "2筒", "2筒", "2筒", "3筒", "8筒", "8筒", "8筒", "8筒", "9筒", "8索", "中"] },
{ dom: 下家手牌, pieces: ["3筒", "4筒", "5筒", "5筒", "5筒", "6筒", "6筒", "7筒", "7筒", "2索", "3索", "3索", "中"] },
];
手牌s.forEach(({ dom, pieces }) => {
pieces.forEach((identity, x) => {
const piece = pieceTemplate.content.cloneNode(true).children[0];
piece.style.transform = `translateX(calc(var(--piece-horizontal-stride) * ${x}))`;
piece.querySelector('img').src = `./assets/${identity}.png`;
dom.appendChild(piece);
});
});
</script>
</body>