Random shapes cover the playing area

[TJScalzo]

Random shapes appear at the top of the screen that cover the hexagon. It's pretty annoying and I'm not sure why it's happening. I'm on a 2011 MacBook Pro playing in Safari. Is it just because I have an old computer?

[lengstrom]

No, that's a canvas problem. I'm not sure why we have that problem. @garrettdreyfus and I will look into it.

[lengstrom]

Do you have any steps towards recreating that problem?

[TJScalzo]

I'm using Safari Version 9.0.2 (9537.86.3.9.1). I'm on a MacBook Pro 2011. Hm... what other information are you looking for?

[TJScalzo]

Well I don't know what changed (if anything) but there aren't any shapes covering the game anymore. That's a little strange...

[rechl]

I have the same problem on Safari on iOS 9.3. you can recreate this problem ( on a Mac at least) with the iOS simulator.

[lengstrom]

Do you guys have the problem on https://hextris.io/ still?

[rechl]

Yes it still exists. :(
I investigated further. Seems to depend on actual screen size or ratio.
Set the window height to 720px or 768px and it happens also on Chrome 49 on Mac

[lengstrom]

Thanks for further info! I'll look into it. Also, pull requests are welcome
:)

On Tue, Apr 12, 2016 at 5:20 AM, sgotre notifications@github.com wrote:

Yes it still exists. :(
I investigated further. Seems to depend on actual screen size or ratio.
Set the window height to 720px or 768px and it happens also on Chrome 49
on Mac

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#162 (comment)

[hhiptmair]

adding a font definition (e.g. "px Exo") to the renderText(...) calls in view.js seems to fix the problem:

change
renderText(trueCanvas.width / 2 + gdx + 6 * settings.scale, trueCanvas.height / 2 + gdy - 155 * settings.scale, 150, "#2c3e50", "Hextris");
to
renderText(trueCanvas.width / 2 + gdx + 6 * settings.scale, trueCanvas.height / 2 + gdy - 155 * settings.scale, 150, "#2c3e50", "Hextris", "px Expo");
etc

at least for me, this fixed an issue with huge text-overlays in the canvas.

[rechl]

Thanks for proposal @hhiptmair !
I will try this and create PR if it works!

[hhiptmair]

even better: just remove the "20" in the renderText-definition:
var font = 'px Exo';

[rechl]

@hhiptmair you proposal worked fine regarding the visual elements.
see http://teraone.github.io/hextris/

Unfortunately I still can not play within the iOS Simulator on iPad. We should try on a real device.
Do you have an suggestions for debugging canvas elements in (mobile) safari?

[lengstrom]

Chrome debugger console works well (you can emulate a mobile platform). Sorry I'm not more involved right now because of finals - I'll definitely fix this by the time finals end in late May.

[hhiptmair]

there is a problem with used device-detection when playing on an iPad. that's why the touch-event-bindings never happened on it.
to fix it: in initialization.js replace the line
if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
with
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))

[hhiptmair]

@sgotre for debugging canvas elements, the inspector-tool (switch to canvas in the menu) of firefox is quite powerful. but i assume there are plugins for chrome too