Open-Match3 breaks if position on the left side
svox

Hi,

 

I try to have the game halfesized in my page with my given size.

But this doesnt works right now.

 

I change:

 

wade.setWindowMode('container');
wade.setMinScreenSize(542, 820); //996
wade.setMaxScreenSize(542, 820); //996
wade.setFullScreen(false);

 

in my app.js

 

<div id="container" style="border:0; width:602px; height:900px;">
<div id="wade_main_div" width="602" height="900" tabindex="1">

 

in index.html

 

With this css:

#wade_main_div {
position: absolute;
padding: 0;
top: 0;
bottom:0;
right: 0;
left: 0;
border: none;
outline: none;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
background-color: #000000;

}

canvas {
position: absolute;
padding: 0;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: none;
outline: none;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
}

 

 

Everything is fine. The game works.

 

But I wanna have the game on the left side.

So i remove the right:0 from #wade_main_div

After this the game is on the left side (fine!) but I cant click any button!

 

Any idea what is wrong with it?

 

Regards

All 4 Comments
Gio

Hi svox and welcome to the forums

 

If you set the windowMode to container, then the wade app will work within its container div (wade_main_div).

 

If you do what you described above, you need to change the width of wade_main_div too (presumably to 542px), or its width will be 0. However I think that Open Match 3 was designed with full-screen in mind, so I expect that you will run into some other problems with it. If you want to just use that code with no code changes, I recommend putting it into an iframe, otherwise there will probably be more work to do.

svox

Hi,

 

thanks for the very quick response!

 

I can change some code but it looks a little bit that changes with coords or sizes are bigger modifications because

all sizes and positions are hard coded. So my hope was that I can change some CSS and position it on the left side. ;)

 

Currently it looks that this position changes works quickly, but unfortunately the buttons didnt work after the change. 

 

But maybe I can try the iframe. Thank you.

Gio

I've tried it here, and setting the CSS width of the div to 542px made the buttons work. However, things are a bit all over the place - as you say, some positions were hardcoded. Iframe should work though, let us know how it goes.

svox

Thanks for your help!

 

This also works for me. But if I remove the:

right:0; 

from #wade_main_div

and set

wade.setWindowMode('container');

 

It is on the left position but I cant click the buttons.

 

Without setWindowMode it works.

 

Strange thing.

Post a reply
Add Attachment
Submit Reply
Login to Reply