Mirrors/cloud-game
1
0
Fork 0
mirror of https://github.com/giongto35/cloud-game.git synced 2026-01-23 10:35:44 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix ui scaling for Chrome (#169)

Browse source 
* Fix ui scaling for Chrome

* Bump the versions for cache
This commit is contained in:
sergystepanov 2020-04-24 23:01:48 +03:00 • committed by GitHub
parent b3cb95849d
commit 23c2f5b4ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web/css/main.css vendored
View file

@ -8,15 +8,17 @@ body {
display: block;
width: 556px;
height: 278px;
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
/*-webkit-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);*/
/*-moz-box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);*/
/*box-shadow: inset 0px 0px 2px 2px rgba(219, 222, 222, 1);*/
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-image: url('/static/img/ui/bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
@ -385,8 +387,8 @@ body {
#game-screen {
overflow: hidden;
width: 100%;
height: 100%;
width: 100%;
height: 100%;
display: none;
background-color: #222222;
}
@ -399,7 +401,7 @@ body {
overflow: hidden;
width: 256px;
height: 240px;
/* background-color: gray; */
background-image: url('/static/img/screen_background5.png');
background-size: cover;
@ -426,7 +428,6 @@ body {
position: absolute;
/* background-color: red; */
width: 100%;
top: 102px; /* 240px - 36 / 2 */
@ -522,7 +523,7 @@ body {
border: 5px #000;
border-radius: 30px;
left: 50%;
transform: translateX(-50%);
bottom: 35px;

4
web/game.html vendored
View file

@ -15,7 +15,7 @@
<meta property="og:author" content="giongto35 trichimtrich" />
<link href="/static/css/font-awesome.css?2" rel="stylesheet">
<link href="/static/css/main.css?2" rel="stylesheet">
<link href="/static/css/main.css?3" rel="stylesheet">
</head>
<body>
@ -87,7 +87,7 @@
<script src="/static/js/lib/jquery-3.4.1.min.js"></script>
<script src="/static/js/log.js?v=3"></script>
<script src="/static/js/env.js?v=3"></script>
<script src="/static/js/env.js?v=4"></script>
<script src="/static/js/event/event.js?v=4"></script>
<script src="/static/js/input/keys.js?v=3"></script>
<script src="/static/js/input/input.js?v=3"></script>

67
web/js/env.js vendored
View file

@ -1,14 +1,15 @@
const env = (() => {
const win = $(window);
// UI
const doc = $(document);
const gameBoy = $('#gamebody');
const ghRibbon = $('#ribbon');
// Screen state
let isLayoutSwitched = false;
// Window rerender / rotate screen if needed
const fixScreenLayout = () => {
let targetWidth = doc.width() * 0.9;
let targetHeight = doc.height() * 0.9;
let targetWidth = Math.round(doc.width() * 0.9 / 2) * 2,
targetHeight = Math.round(doc.height() * 0.9 / 2) * 2;
// mobile == full screen
if (env.getOs() === 'android') {
@ -19,44 +20,39 @@ const env = (() => {
// Should have maximum box for desktop?
// targetWidth = 800; targetHeight = 600; // test on desktop
fixElementLayout($('#gamebody'), targetWidth, targetHeight);
rescaleGameBoy(targetWidth, targetHeight);
const elem = $('#ribbon');
let st = '';
if (isLayoutSwitched) {
st = 'rotate(90deg)';
elem.css('bottom', 0);
elem.css('top', '');
} else {
elem.css('bottom', '');
elem.css('top', 0);
}
elem.css('transform', st);
elem.css('-webkit-transform', st);
elem.css('-moz-transform', st);
let st = isLayoutSwitched ? 'rotate(90deg)' : '';
ghRibbon.css({
'bottom': isLayoutSwitched ? 0 : '',
'top': isLayoutSwitched ? '' : 0,
'transform': st,
'-webkit-transform': st,
'-moz-transform': st
})
};
const fixElementLayout = (elem, targetWidth, targetHeight) => {
let st = 'translate(-50%, -50%) ';
const rescaleGameBoy = (targetWidth, targetHeight) => {
const transformations = ['translate(-50%, -50%)'];
// rotate portrait layout
if (isPortrait()) {
st += `rotate(90deg) `;
let tmp = targetHeight;
targetHeight = targetWidth;
targetWidth = tmp;
isLayoutSwitched = true;
} else {
isLayoutSwitched = false;
isLayoutSwitched = isPortrait();
if (isLayoutSwitched) {
transformations.push('rotate(90deg)');
[targetWidth, targetHeight] = [targetHeight, targetWidth]
}
// scale, fit to target size
st += `scale(${Math.min(targetWidth / elem.width(), targetHeight / elem.height())}) `;
const scale = Math.min(targetWidth / gameBoy.width(), targetHeight / gameBoy.height());
transformations.push(`scale(${scale})`);
elem.css('transform', st);
elem.css('-webkit-transform', st);
elem.css('-moz-transform', st);
};
const transform = transformations.join(' ');
gameBoy.css({
'transform': transform,
'-webkit-transform': transform,
'-moz-transform': transform
});
}
const getOS = () => {
// linux? ios?
@ -118,9 +114,8 @@ const env = (() => {
}
};
// bindings
win.on('resize', fixScreenLayout);
win.on('orientationchange', fixScreenLayout);
window.addEventListener('resize', fixScreenLayout);
window.addEventListener('orientationchange', fixScreenLayout);
return {
getOs: getOS,