Css centreing and hit testing with simon

Css centreing and hit testing with simon
0

#1

I’m trying to implement simon using react: https://github.com/nikrb/simon

The game seems to work as it is, but if I centre the game vertically (with height: 100% in html, body css) the hit testing fails. I’m using images and using image data pixel data to check to button hit here

Any general comments on bad practice also appreciated. I intend to factor out some of the code in app.js into a game component, but kinda got distracted by the centreing issue.

thanx for your time


#2

Have you taken a peek at what e is in getTransparencyAtXY() when you click on a pad? You didn’t mention exactly what “hit testing fails” means, but I assume it’s not giving the expected coordinates. I can’t tell exactly what it is that you’re doing or why, though. You’re trying to get positional data by calculating an images dimensions by creating a temporary canvas element?

The rest of your code is nicely organized. All of those calls to .bind(this) are exactly why I’m moving away from ES6 classes in React, though. At least until they get this autobinding to work.


#3

yes the .bind(this) thing is a bit of a bind - haha. I’m pretty sure the class keyword comes under Douglas Crockford’s don’t use list, but it just looks so yummy in the examples/tutorials I’ve worked through.

Sorry about the lack of context, I’ve been looking at it so long it should be obvious to everyone else what I’m doing :wink:

I am indeed creating a temp canvas, then looking at pixel x,y and using the transparency bit to determine whether I am actually over the image.

I pass in the button click event (e) from pad, so current target is the img and the xy are the screen (I think) coords… When I print out the adjusted x,y they look correct, 0,0 to width,height, but the transparency is wrong.

I’m going to have another look tonight, so will recheck my assumptions and post again if my nuubness still gets the better of me.

Thanx for your time.

update: it seems chrome has the hit test issue, works fine in firefox.


#4

just bumped into a video: https://www.youtube.com/watch?v=9FPkN6ETqes he’s using the fat arrow to circumvent bind-arge using babel-plugin-transform-class-properties.

class blah {
  eventHandler = event => {
    // ...
  }
  render(){
    <SomeComp onClick={this.eventHandler} />
  }
}