diff --git a/web/css/main.css b/web/css/main.css
index a5fa5609..90788603 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -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;
diff --git a/web/game.html b/web/game.html
index 9f7c2313..21aef599 100644
--- a/web/game.html
+++ b/web/game.html
@@ -15,7 +15,7 @@
-
+
@@ -87,7 +87,7 @@
-
+
diff --git a/web/js/env.js b/web/js/env.js
index 99beb618..9acec58a 100644
--- a/web/js/env.js
+++ b/web/js/env.js
@@ -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,