ui
This commit is contained in:
parent
3f95e6b697
commit
d4e41b1423
@ -37,7 +37,7 @@
|
|||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-start;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@ -54,6 +54,12 @@
|
|||||||
--game-screen-scale: var(--game-scale);
|
--game-screen-scale: var(--game-scale);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.game-stage {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 768px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
.rps-bg {
|
.rps-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -145px;
|
top: -145px;
|
||||||
@ -1593,6 +1599,7 @@
|
|||||||
(function () {
|
(function () {
|
||||||
var DESIGN_WIDTH = 375;
|
var DESIGN_WIDTH = 375;
|
||||||
var DESIGN_HEIGHT = 812;
|
var DESIGN_HEIGHT = 812;
|
||||||
|
var MAX_STAGE_WIDTH = 768;
|
||||||
var GAME_ID = 'rock';
|
var GAME_ID = 'rock';
|
||||||
var GAME_CODE = 'game_rock';
|
var GAME_CODE = 'game_rock';
|
||||||
var root = document.documentElement;
|
var root = document.documentElement;
|
||||||
@ -1657,10 +1664,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateScale() {
|
function updateScale() {
|
||||||
var scale = Math.min(
|
// 游戏区域宽度始终吃满可用宽度,但最多放大到 768px;缩放只跟最终宽度走,避免大屏时被高度压窄后露出右侧空条。
|
||||||
window.innerWidth / DESIGN_WIDTH,
|
var viewportWidth = Math.min(
|
||||||
window.innerHeight / DESIGN_HEIGHT
|
window.innerWidth,
|
||||||
|
MAX_STAGE_WIDTH
|
||||||
);
|
);
|
||||||
|
var scale = viewportWidth / DESIGN_WIDTH;
|
||||||
root.style.setProperty(
|
root.style.setProperty(
|
||||||
'--game-scale',
|
'--game-scale',
|
||||||
String(Math.max(scale, 0.1))
|
String(Math.max(scale, 0.1))
|
||||||
|
|||||||
@ -41,7 +41,7 @@
|
|||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: flex-start;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@ -56,8 +56,10 @@
|
|||||||
|
|
||||||
.dice-stage {
|
.dice-stage {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: calc(var(--dice-frame-width) * var(--dice-scale));
|
width: 100%;
|
||||||
|
max-width: 768px;
|
||||||
height: calc(var(--dice-frame-height) * var(--dice-scale));
|
height: calc(var(--dice-frame-height) * var(--dice-scale));
|
||||||
|
margin: 0 auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #030623;
|
background: #030623;
|
||||||
}
|
}
|
||||||
@ -2503,6 +2505,7 @@
|
|||||||
(function () {
|
(function () {
|
||||||
var DESIGN_WIDTH = 375;
|
var DESIGN_WIDTH = 375;
|
||||||
var DESIGN_HEIGHT = 812;
|
var DESIGN_HEIGHT = 812;
|
||||||
|
var MAX_STAGE_WIDTH = 768;
|
||||||
var SETTLEMENT_AUTO_CLOSE_MS = 30000;
|
var SETTLEMENT_AUTO_CLOSE_MS = 30000;
|
||||||
var DICE_ROLL_EFFECT_URL = 'assets/figma/dice-roll.svga';
|
var DICE_ROLL_EFFECT_URL = 'assets/figma/dice-roll.svga';
|
||||||
var root = document.documentElement;
|
var root = document.documentElement;
|
||||||
@ -2552,10 +2555,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateScale() {
|
function updateScale() {
|
||||||
var scale = Math.min(
|
// 游戏区域宽度始终吃满可用宽度,但最多放大到 768px;缩放只跟最终宽度走,避免大屏时被高度压窄后露出右侧空条。
|
||||||
window.innerWidth / DESIGN_WIDTH,
|
var viewportWidth = Math.min(
|
||||||
window.innerHeight / DESIGN_HEIGHT
|
window.innerWidth,
|
||||||
|
MAX_STAGE_WIDTH
|
||||||
);
|
);
|
||||||
|
var scale = viewportWidth / DESIGN_WIDTH;
|
||||||
root.style.setProperty(
|
root.style.setProperty(
|
||||||
'--dice-scale',
|
'--dice-scale',
|
||||||
String(Math.max(scale, 0.1))
|
String(Math.max(scale, 0.1))
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user