1371 lines
47 KiB
HTML
1371 lines
47 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
|
/>
|
|
<title data-i18n="diceMatch.pageTitle">Dice Match</title>
|
|
<link rel="stylesheet" href="../../common/theme.css" />
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--dice-frame-width: 375px;
|
|
--dice-frame-height: 812px;
|
|
--dice-scale: 1;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #030623;
|
|
font-family:
|
|
'Source Han Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: geometricprecision;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
border: 0;
|
|
color: inherit;
|
|
font: inherit;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.dice-stage {
|
|
position: relative;
|
|
width: calc(var(--dice-frame-width) * var(--dice-scale));
|
|
height: calc(var(--dice-frame-height) * var(--dice-scale));
|
|
overflow: hidden;
|
|
background: #030623;
|
|
}
|
|
|
|
.dice-frame {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: var(--dice-frame-width);
|
|
height: var(--dice-frame-height);
|
|
overflow: hidden;
|
|
background: #030623;
|
|
transform: scale(var(--dice-scale));
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.dice-frame.is-matching {
|
|
animation: screen-impact-shake 520ms ease-out 420ms both;
|
|
}
|
|
|
|
.game-content {
|
|
position: absolute;
|
|
inset: 0;
|
|
transform: translateY(-44px);
|
|
}
|
|
|
|
.layer {
|
|
position: absolute;
|
|
}
|
|
|
|
.vs-badge {
|
|
transform-origin: 50% 50%;
|
|
will-change: transform, filter;
|
|
}
|
|
|
|
.vs-badge::after {
|
|
position: absolute;
|
|
inset: 14px 10px;
|
|
content: '';
|
|
border: 2px solid rgba(255, 213, 87, 0.68);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: scale(0.62);
|
|
filter: drop-shadow(0 0 10px rgba(255, 96, 243, 0.68));
|
|
}
|
|
|
|
.dice-frame.is-matching .vs-badge {
|
|
animation: vs-drop-impact 900ms
|
|
cubic-bezier(0.13, 0.92, 0.18, 1) both;
|
|
}
|
|
|
|
.dice-frame.is-matching .vs-badge::after {
|
|
animation: vs-impact-ring 580ms ease-out 430ms both;
|
|
}
|
|
|
|
.layer-img {
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: none;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.cover {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.fill {
|
|
object-fit: fill;
|
|
}
|
|
|
|
.status-time {
|
|
position: absolute;
|
|
top: 13px;
|
|
left: 33.87px;
|
|
width: 54px;
|
|
height: 15px;
|
|
color: #ffffff;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.player-name {
|
|
position: absolute;
|
|
top: 247px;
|
|
left: 37px;
|
|
width: 81px;
|
|
height: 32px;
|
|
overflow: hidden;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.opponent-mark {
|
|
position: absolute;
|
|
top: 247px;
|
|
left: 258px;
|
|
width: 81px;
|
|
height: 16px;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.matching-label {
|
|
position: absolute;
|
|
top: 270px;
|
|
left: 282px;
|
|
width: 54px;
|
|
height: 16px;
|
|
overflow: hidden;
|
|
color: #b9defb;
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.winner-label {
|
|
position: absolute;
|
|
top: 608px;
|
|
left: 123px;
|
|
width: 130px;
|
|
height: 14px;
|
|
color: transparent;
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
background-image: url('assets/figma/winner-text-fill.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
}
|
|
|
|
.stake {
|
|
position: absolute;
|
|
top: 634px;
|
|
width: 77px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
overflow: hidden;
|
|
padding-left: 8px;
|
|
color: #ffe293;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 16px;
|
|
text-shadow: 0 0 1px #d5942b;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.stake:active {
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
.stake[data-selected='true'] {
|
|
filter: drop-shadow(0 0 5px rgba(255, 197, 47, 0.4));
|
|
}
|
|
|
|
.stake-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 77px;
|
|
height: 28px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.stake[data-selected='true'] .stake-bg {
|
|
display: none;
|
|
}
|
|
|
|
.stake-selected-slice {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 0;
|
|
display: none;
|
|
width: 45px;
|
|
height: 28px;
|
|
pointer-events: none;
|
|
background-image: url('assets/figma/stake-fill.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 105px 28px;
|
|
}
|
|
|
|
.stake[data-selected='true'] .stake-selected-slice {
|
|
display: block;
|
|
}
|
|
|
|
.stake-selected-left {
|
|
left: 0;
|
|
background-position: left top;
|
|
}
|
|
|
|
.stake-selected-right {
|
|
right: 0;
|
|
background-position: right top;
|
|
}
|
|
|
|
.stake-coin {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 16px;
|
|
}
|
|
|
|
.stake-value {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.match-button {
|
|
position: absolute;
|
|
top: 690px;
|
|
left: 74px;
|
|
width: 227px;
|
|
height: 50px;
|
|
}
|
|
|
|
.match-button img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.match-button span {
|
|
position: absolute;
|
|
top: 13px;
|
|
left: 0;
|
|
width: 227px;
|
|
color: #3e1f04;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.match-button:active {
|
|
transform: translateY(1px);
|
|
filter: brightness(0.96);
|
|
}
|
|
|
|
.victory-button {
|
|
position: absolute;
|
|
}
|
|
|
|
.victory-button img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.victory-button:active {
|
|
filter: brightness(1.12);
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.fee-note {
|
|
position: absolute;
|
|
top: 752px;
|
|
left: 62px;
|
|
width: 252px;
|
|
height: 12px;
|
|
overflow: hidden;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.waiting-only {
|
|
opacity: 1;
|
|
transition:
|
|
opacity 260ms ease,
|
|
visibility 0s linear 0s;
|
|
will-change: opacity;
|
|
}
|
|
|
|
.dice-frame.is-matching .waiting-only {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 260ms ease 560ms,
|
|
visibility 0s linear 830ms;
|
|
}
|
|
|
|
.matching-card-only {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 180ms ease,
|
|
visibility 0s linear 180ms;
|
|
}
|
|
|
|
.dice-frame.is-matching .matching-card-only {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition:
|
|
opacity 220ms ease 560ms,
|
|
visibility 0s linear 560ms;
|
|
}
|
|
|
|
.matching-action {
|
|
position: absolute;
|
|
top: 676px;
|
|
left: 74px;
|
|
width: 264px;
|
|
height: 24px;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 260ms ease 180ms,
|
|
visibility 0s linear 440ms;
|
|
will-change: opacity;
|
|
}
|
|
|
|
.dice-frame.is-matching .matching-action {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition:
|
|
opacity 260ms ease 680ms,
|
|
visibility 0s linear 680ms;
|
|
}
|
|
|
|
.matching-action img {
|
|
position: absolute;
|
|
top: 7px;
|
|
width: 36px;
|
|
height: 7px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 180ms ease 260ms,
|
|
transform 260ms ease 240ms;
|
|
}
|
|
|
|
.matching-action-left {
|
|
left: 0;
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
.matching-action-right {
|
|
left: 228px;
|
|
transform: translateX(-18px);
|
|
}
|
|
|
|
.dice-frame.is-matching .matching-action img {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
transition:
|
|
opacity 180ms ease 760ms,
|
|
transform 260ms ease 740ms;
|
|
}
|
|
|
|
.matching-action-text {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 44px;
|
|
width: 140px;
|
|
opacity: 0;
|
|
color: transparent;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
background: linear-gradient(180deg, #fef8ca 27.76%, #ffb36c);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
text-shadow: 0 0 3px #bc0003;
|
|
transition: opacity 220ms ease 260ms;
|
|
}
|
|
|
|
.dice-frame.is-matching .matching-action-text {
|
|
opacity: 1;
|
|
transition: opacity 220ms ease 740ms;
|
|
}
|
|
|
|
.battle-only {
|
|
opacity: 1;
|
|
transition:
|
|
opacity 240ms ease,
|
|
visibility 0s linear 0s;
|
|
}
|
|
|
|
.dice-frame.is-victory .battle-only,
|
|
.dice-frame.is-victory .waiting-only,
|
|
.dice-frame.is-victory .matching-card-only,
|
|
.dice-frame.is-victory .matching-action {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 240ms ease,
|
|
visibility 0s linear 260ms;
|
|
}
|
|
|
|
.victory-only {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transform: translateY(18px) scale(0.98);
|
|
transition:
|
|
opacity 320ms ease 120ms,
|
|
transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
|
|
visibility 0s linear 440ms;
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
.dice-frame.is-victory .victory-only {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
transition:
|
|
opacity 320ms ease 120ms,
|
|
transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
|
|
visibility 0s linear 120ms;
|
|
}
|
|
|
|
.victory-name {
|
|
position: absolute;
|
|
top: 392px;
|
|
left: 121px;
|
|
width: 133px;
|
|
height: 52px;
|
|
overflow: hidden;
|
|
color: #ffffff;
|
|
font-size: 24px;
|
|
line-height: 26px;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.victory-panel-label,
|
|
.victory-panel-amount,
|
|
.victory-panel-currency {
|
|
position: absolute;
|
|
left: 201px;
|
|
width: 65px;
|
|
color: #f7cf58;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.victory-panel-label {
|
|
top: 540px;
|
|
height: 20px;
|
|
font-size: 18px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.victory-panel-amount {
|
|
top: 566px;
|
|
height: 24px;
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.victory-panel-currency {
|
|
top: 597px;
|
|
height: 20px;
|
|
font-size: 18px;
|
|
line-height: 20px;
|
|
text-transform: uppercase;
|
|
background: linear-gradient(180deg, #f9d76f 0%, #f1bb3c 95%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.waiting-only,
|
|
.matching-action,
|
|
.matching-action img,
|
|
.matching-action-text,
|
|
.battle-only,
|
|
.victory-only {
|
|
transition: none;
|
|
}
|
|
|
|
.dice-frame.is-matching .vs-badge,
|
|
.dice-frame.is-matching .vs-badge::after,
|
|
.dice-frame.is-matching {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@keyframes screen-impact-shake {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(var(--dice-scale));
|
|
}
|
|
12% {
|
|
transform: translate3d(0, 9px, 0) scale(var(--dice-scale));
|
|
}
|
|
24% {
|
|
transform: translate3d(-7px, -5px, 0)
|
|
scale(var(--dice-scale));
|
|
}
|
|
36% {
|
|
transform: translate3d(6px, 4px, 0) scale(var(--dice-scale));
|
|
}
|
|
50% {
|
|
transform: translate3d(-4px, 2px, 0)
|
|
scale(var(--dice-scale));
|
|
}
|
|
66% {
|
|
transform: translate3d(3px, -2px, 0)
|
|
scale(var(--dice-scale));
|
|
}
|
|
82% {
|
|
transform: translate3d(-1px, 1px, 0)
|
|
scale(var(--dice-scale));
|
|
}
|
|
}
|
|
|
|
@keyframes vs-drop-impact {
|
|
0% {
|
|
opacity: 0;
|
|
filter: brightness(1.9) drop-shadow(0 0 34px #ff79ff);
|
|
transform: translateY(-640px) scale(4.8) rotate(-12deg);
|
|
}
|
|
34% {
|
|
opacity: 1;
|
|
filter: brightness(1.75) drop-shadow(0 0 32px #4cc9ff);
|
|
transform: translateY(-120px) scale(2.35) rotate(5deg);
|
|
}
|
|
58% {
|
|
opacity: 1;
|
|
filter: brightness(1.62) drop-shadow(0 0 28px #ffd557);
|
|
transform: translateY(22px) scale(0.78) rotate(2deg);
|
|
}
|
|
72% {
|
|
filter: brightness(1.48) drop-shadow(0 0 24px #ff79ff);
|
|
transform: translateY(-12px) scale(1.18) rotate(-1deg);
|
|
}
|
|
86% {
|
|
filter: brightness(1.18) drop-shadow(0 0 14px #4cc9ff);
|
|
transform: translateY(4px) scale(0.96) rotate(0.5deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
filter: brightness(1);
|
|
transform: translateY(0) scale(1) rotate(0);
|
|
}
|
|
}
|
|
|
|
@keyframes vs-impact-ring {
|
|
0% {
|
|
opacity: 0.95;
|
|
transform: scale(0.36);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.92);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
class="dice-stage"
|
|
role="application"
|
|
aria-label="Dice match lobby"
|
|
data-i18n-aria="diceMatch.pageLabel"
|
|
>
|
|
<main class="dice-frame" data-node-id="466:61" data-name="dice">
|
|
<div
|
|
class="layer"
|
|
style="left: -47px; top: 0; width: 470px; height: 834px"
|
|
data-node-id="466:64"
|
|
data-name="arena background"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/bg-arena.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div class="game-content">
|
|
<button
|
|
class="layer"
|
|
type="button"
|
|
aria-label="Back"
|
|
style="left: 16px; top: 60px; width: 46px; height: 36px"
|
|
data-node-id="466:68"
|
|
data-action="back"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/back-button.png"
|
|
alt=""
|
|
/>
|
|
</button>
|
|
|
|
<div
|
|
class="layer"
|
|
style="
|
|
left: 170px;
|
|
top: 60px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
"
|
|
data-node-id="466:87"
|
|
data-name="game icon"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/game-icon.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="layer battle-only"
|
|
style="
|
|
left: 41px;
|
|
top: 163px;
|
|
width: 73px;
|
|
height: 73px;
|
|
"
|
|
data-node-id="466:89"
|
|
>
|
|
<img
|
|
class="layer-img fill"
|
|
src="assets/figma/player-avatar-glow.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer battle-only"
|
|
style="
|
|
left: 21px;
|
|
top: 146px;
|
|
width: 113px;
|
|
height: 158px;
|
|
"
|
|
data-node-id="466:90"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/player-card.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="player-name battle-only" data-node-id="466:91">
|
|
<div>NameName</div>
|
|
<div>Name...</div>
|
|
</div>
|
|
|
|
<div
|
|
class="layer vs-badge battle-only"
|
|
style="
|
|
left: 120px;
|
|
top: 159px;
|
|
width: 133px;
|
|
height: 128px;
|
|
"
|
|
data-node-id="466:122"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/vs.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: -51px;
|
|
top: 311px;
|
|
width: 258px;
|
|
height: 258px;
|
|
"
|
|
data-node-id="466:124"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/red-ring.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: 32px;
|
|
top: 400px;
|
|
width: 84px;
|
|
height: 89px;
|
|
"
|
|
data-node-id="466:125"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/red-dice.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: -44px;
|
|
top: 288px;
|
|
width: 244px;
|
|
height: 236px;
|
|
"
|
|
data-node-id="466:126"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/red-flare.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: 170px;
|
|
top: 311px;
|
|
width: 258px;
|
|
height: 258px;
|
|
"
|
|
data-node-id="466:128"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/blue-ring.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: 254px;
|
|
top: 400px;
|
|
width: 83px;
|
|
height: 87px;
|
|
"
|
|
data-node-id="466:129"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/blue-dice.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: 177px;
|
|
top: 288px;
|
|
width: 244px;
|
|
height: 236px;
|
|
"
|
|
data-node-id="466:130"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/blue-flare.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="layer battle-only"
|
|
style="
|
|
left: 262px;
|
|
top: 163px;
|
|
width: 73px;
|
|
height: 73px;
|
|
"
|
|
data-node-id="466:132"
|
|
>
|
|
<img
|
|
class="layer-img fill"
|
|
src="assets/figma/opponent-avatar-glow.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer battle-only"
|
|
style="
|
|
left: 262px;
|
|
top: 163px;
|
|
width: 73px;
|
|
height: 73px;
|
|
"
|
|
data-node-id="466:133"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/opponent-question.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer battle-only"
|
|
style="
|
|
left: 242px;
|
|
top: 146px;
|
|
width: 113px;
|
|
height: 158px;
|
|
"
|
|
data-node-id="466:134"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/opponent-card.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="opponent-mark matching-card-only"
|
|
data-node-id="466:135"
|
|
data-i18n="diceMatch.unknownOpponent"
|
|
>
|
|
?
|
|
</div>
|
|
<div
|
|
class="layer matching-card-only"
|
|
style="
|
|
left: 262px;
|
|
top: 269px;
|
|
width: 18px;
|
|
height: 18px;
|
|
"
|
|
data-node-id="466:137"
|
|
>
|
|
<img
|
|
class="layer-img fill"
|
|
src="assets/figma/search-icon.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="matching-label matching-card-only"
|
|
data-node-id="466:136"
|
|
data-i18n="diceMatch.matching"
|
|
>
|
|
Matching...
|
|
</div>
|
|
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: 13px;
|
|
top: 596px;
|
|
width: 350px;
|
|
height: 78px;
|
|
"
|
|
data-node-id="466:94"
|
|
>
|
|
<img
|
|
class="layer-img fill"
|
|
src="assets/figma/prize-panel.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="winner-label waiting-only"
|
|
data-node-id="466:95"
|
|
data-i18n="diceMatch.winnerReceives"
|
|
>
|
|
The winner receives
|
|
</div>
|
|
<button
|
|
class="stake waiting-only"
|
|
type="button"
|
|
style="left: 21px"
|
|
data-node-id="466:96"
|
|
data-action="stake"
|
|
data-stake="8000"
|
|
aria-label="8,000"
|
|
aria-pressed="false"
|
|
>
|
|
<img
|
|
class="stake-bg"
|
|
src="assets/figma/stake-outline.svg"
|
|
alt=""
|
|
/>
|
|
<span
|
|
class="stake-selected-slice stake-selected-left"
|
|
></span>
|
|
<span
|
|
class="stake-selected-slice stake-selected-right"
|
|
></span>
|
|
<img
|
|
class="stake-coin"
|
|
src="assets/figma/coin.png"
|
|
alt=""
|
|
/>
|
|
<span class="stake-value">8,000</span>
|
|
</button>
|
|
<button
|
|
class="stake waiting-only"
|
|
type="button"
|
|
style="left: 107px"
|
|
data-node-id="466:99"
|
|
data-action="stake"
|
|
data-stake="8000"
|
|
data-selected="true"
|
|
aria-label="8,000"
|
|
aria-pressed="true"
|
|
>
|
|
<img
|
|
class="stake-bg"
|
|
src="assets/figma/stake-fill.png"
|
|
alt=""
|
|
/>
|
|
<span
|
|
class="stake-selected-slice stake-selected-left"
|
|
></span>
|
|
<span
|
|
class="stake-selected-slice stake-selected-right"
|
|
></span>
|
|
<img
|
|
class="stake-coin"
|
|
src="assets/figma/coin.png"
|
|
alt=""
|
|
/>
|
|
<span class="stake-value">8,000</span>
|
|
</button>
|
|
<button
|
|
class="stake waiting-only"
|
|
type="button"
|
|
style="left: 192px"
|
|
data-node-id="466:97"
|
|
data-action="stake"
|
|
data-stake="8000"
|
|
aria-label="8,000"
|
|
aria-pressed="false"
|
|
>
|
|
<img
|
|
class="stake-bg"
|
|
src="assets/figma/stake-outline.svg"
|
|
alt=""
|
|
/>
|
|
<span
|
|
class="stake-selected-slice stake-selected-left"
|
|
></span>
|
|
<span
|
|
class="stake-selected-slice stake-selected-right"
|
|
></span>
|
|
<img
|
|
class="stake-coin"
|
|
src="assets/figma/coin.png"
|
|
alt=""
|
|
/>
|
|
<span class="stake-value">8,000</span>
|
|
</button>
|
|
<button
|
|
class="stake waiting-only"
|
|
type="button"
|
|
style="left: 278px"
|
|
data-node-id="466:98"
|
|
data-action="stake"
|
|
data-stake="8000"
|
|
aria-label="8,000"
|
|
aria-pressed="false"
|
|
>
|
|
<img
|
|
class="stake-bg"
|
|
src="assets/figma/stake-outline.svg"
|
|
alt=""
|
|
/>
|
|
<span
|
|
class="stake-selected-slice stake-selected-left"
|
|
></span>
|
|
<span
|
|
class="stake-selected-slice stake-selected-right"
|
|
></span>
|
|
<img
|
|
class="stake-coin"
|
|
src="assets/figma/coin.png"
|
|
alt=""
|
|
/>
|
|
<span class="stake-value">8,000</span>
|
|
</button>
|
|
<div
|
|
class="layer waiting-only"
|
|
style="
|
|
left: 335px;
|
|
top: 602px;
|
|
width: 20px;
|
|
height: 20px;
|
|
"
|
|
data-node-id="466:118"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/badge-help.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
class="match-button waiting-only"
|
|
type="button"
|
|
data-node-id="466:119"
|
|
data-action="match"
|
|
aria-label="Match"
|
|
data-i18n-aria="diceMatch.match"
|
|
>
|
|
<img src="assets/figma/match-button.png" alt="" />
|
|
<span data-node-id="466:121" data-i18n="diceMatch.match"
|
|
>Match</span
|
|
>
|
|
</button>
|
|
|
|
<div
|
|
class="fee-note waiting-only"
|
|
data-node-id="466:92"
|
|
data-i18n="diceMatch.feeNote"
|
|
>
|
|
The winning player pays a 5% transaction fee
|
|
</div>
|
|
|
|
<div
|
|
class="matching-action"
|
|
data-node-id="466:255"
|
|
aria-live="polite"
|
|
>
|
|
<img
|
|
class="matching-action-left"
|
|
src="assets/figma/matching-left.svg"
|
|
alt=""
|
|
/>
|
|
<span
|
|
class="matching-action-text"
|
|
data-node-id="466:262"
|
|
data-i18n="diceMatch.matching"
|
|
>Matching...</span
|
|
>
|
|
<img
|
|
class="matching-action-right"
|
|
src="assets/figma/matching-right.svg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="layer victory-only"
|
|
style="
|
|
left: 29px;
|
|
top: 90px;
|
|
width: 316px;
|
|
height: 124px;
|
|
"
|
|
data-node-id="466:297"
|
|
data-name="victory light"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/win-victory-light.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer victory-only"
|
|
style="
|
|
left: 134px;
|
|
top: 268px;
|
|
width: 108px;
|
|
height: 108px;
|
|
"
|
|
data-node-id="466:292"
|
|
>
|
|
<img
|
|
class="layer-img fill"
|
|
src="assets/figma/win-avatar-glow.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="layer victory-only"
|
|
style="
|
|
left: 104px;
|
|
top: 243px;
|
|
width: 167px;
|
|
height: 233px;
|
|
"
|
|
data-node-id="466:293"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/win-player-card.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="victory-name victory-only"
|
|
data-node-id="466:294"
|
|
>
|
|
<div>NameName</div>
|
|
<div>Name...</div>
|
|
</div>
|
|
<div
|
|
class="layer victory-only"
|
|
style="
|
|
left: 38px;
|
|
top: 528px;
|
|
width: 300px;
|
|
height: 103px;
|
|
"
|
|
data-node-id="466:299"
|
|
>
|
|
<img
|
|
class="layer-img cover"
|
|
src="assets/figma/win-reward-panel.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div
|
|
class="victory-panel-label victory-only"
|
|
data-node-id="466:301"
|
|
data-i18n="diceMatch.win"
|
|
>
|
|
Win
|
|
</div>
|
|
<div
|
|
class="victory-panel-amount victory-only"
|
|
data-node-id="466:300"
|
|
>
|
|
1,900
|
|
</div>
|
|
<div
|
|
class="victory-panel-currency victory-only"
|
|
data-node-id="466:302"
|
|
data-i18n="diceMatch.coins"
|
|
>
|
|
Coins
|
|
</div>
|
|
<button
|
|
class="victory-button victory-only"
|
|
type="button"
|
|
style="
|
|
left: 12px;
|
|
top: 692px;
|
|
width: 168px;
|
|
height: 38px;
|
|
"
|
|
data-node-id="466:295"
|
|
data-action="rematch"
|
|
aria-label="Re-match"
|
|
>
|
|
<img src="assets/figma/win-rematch-button.png" alt="" />
|
|
</button>
|
|
<button
|
|
class="victory-button victory-only"
|
|
type="button"
|
|
style="
|
|
left: 193px;
|
|
top: 692px;
|
|
width: 170px;
|
|
height: 38px;
|
|
"
|
|
data-node-id="466:296"
|
|
data-action="play-again"
|
|
aria-label="Play again"
|
|
>
|
|
<img
|
|
src="assets/figma/win-play-again-button.png"
|
|
alt=""
|
|
/>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="../../common/api.js"></script>
|
|
<script src="../../common/params.js"></script>
|
|
<script src="../../common/jsbridge.js"></script>
|
|
<script src="../../common/i18n.js"></script>
|
|
<script>
|
|
(function () {
|
|
var DESIGN_WIDTH = 375;
|
|
var DESIGN_HEIGHT = 812;
|
|
var root = document.documentElement;
|
|
var victoryTimer = 0;
|
|
|
|
function updateScale() {
|
|
var scale = Math.min(
|
|
window.innerWidth / DESIGN_WIDTH,
|
|
window.innerHeight / DESIGN_HEIGHT
|
|
);
|
|
root.style.setProperty(
|
|
'--dice-scale',
|
|
String(Math.max(scale, 0.1))
|
|
);
|
|
}
|
|
|
|
function postBridge(action, payload) {
|
|
if (window.HyAppBridge && window.HyAppBridge.post) {
|
|
window.HyAppBridge.post(action, payload || {});
|
|
}
|
|
}
|
|
|
|
function initActions() {
|
|
document.addEventListener('click', function (event) {
|
|
var target = event.target.closest('[data-action]');
|
|
if (!target) return;
|
|
var action = target.getAttribute('data-action');
|
|
if (action === 'back') {
|
|
postBridge('back');
|
|
return;
|
|
}
|
|
if (action === 'stake') {
|
|
if (
|
|
document
|
|
.querySelector('.dice-frame')
|
|
.classList.contains('is-matching')
|
|
) {
|
|
return;
|
|
}
|
|
document
|
|
.querySelectorAll('.stake')
|
|
.forEach(function (stake) {
|
|
var selected = stake === target;
|
|
var img = stake.querySelector('img');
|
|
if (selected) {
|
|
stake.setAttribute(
|
|
'data-selected',
|
|
'true'
|
|
);
|
|
} else {
|
|
stake.removeAttribute('data-selected');
|
|
}
|
|
stake.setAttribute(
|
|
'aria-pressed',
|
|
selected ? 'true' : 'false'
|
|
);
|
|
if (img) {
|
|
img.src = selected
|
|
? 'assets/figma/stake-fill.png'
|
|
: 'assets/figma/stake-outline.svg';
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
if (action === 'match') {
|
|
var frame = document.querySelector('.dice-frame');
|
|
window.clearTimeout(victoryTimer);
|
|
frame.classList.remove('is-victory');
|
|
frame.classList.add('is-matching');
|
|
var selectedStake = document.querySelector(
|
|
'.stake[data-selected="true"]'
|
|
);
|
|
postBridge('gameMatchRequested', {
|
|
game_code: 'touzi',
|
|
stake: selectedStake
|
|
? selectedStake.getAttribute('data-stake')
|
|
: '',
|
|
});
|
|
victoryTimer = window.setTimeout(function () {
|
|
frame.classList.remove('is-matching');
|
|
frame.classList.add('is-victory');
|
|
}, 3000);
|
|
return;
|
|
}
|
|
if (action === 'rematch' || action === 'play-again') {
|
|
window.clearTimeout(victoryTimer);
|
|
document
|
|
.querySelector('.dice-frame')
|
|
.classList.remove('is-matching', 'is-victory');
|
|
postBridge(
|
|
action === 'rematch'
|
|
? 'gameRematch'
|
|
: 'gamePlayAgain',
|
|
{
|
|
game_code: 'touzi',
|
|
}
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
updateScale();
|
|
initActions();
|
|
window.addEventListener('resize', updateScale);
|
|
window.addEventListener('orientationchange', updateScale);
|
|
if (window.HyAppBridge && window.HyAppBridge.ready) {
|
|
window.HyAppBridge.ready({
|
|
page: 'game/touzi',
|
|
figma_node_id: '466:61',
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|