search

molarmanful / gCube

A Rubik's Cube visualizer.
MIT License
20 stars 2 forks source link

Fix the codepens #13

Open mikebolt opened 8 years ago

mikebolt commented 8 years ago

Something I did probably broke all the codepens. Someone should fix that.

molarmanful commented 8 years ago

They seem to work for me. Screenshots and/or browser you're using?

0frasure commented 8 years ago

The stickers on the Florian ones are messed up on the yellow side too.

molarmanful commented 8 years ago

Huh, weird. It's fine for me in Chrome, FF, and Safari. What are you using?

mikebolt commented 8 years ago

I figured out what was wrong, at least for me: the script wasn't loading. It needed to be accessed through https instead of http. This was the error:

Blocked loading mixed active content "http://molarmanful.github.io/gCube/gcube.min.js"

If I visit the URL, it redirects me to the https version. I think the deal is that if you use some https content, you can't use non-https scripts, but I would have to do more research to really figure it out.

I can't see anything wrong with the stickers, except for the flickering problem in Firefox, which is a problem with the underlying Cuber project, and I'll eventually fix it.

I will close the issue once you change the URLs in the codepens to use https, or find another solution.

0frasure commented 8 years ago

Here's what I mean. The bottom yellow corner sticker. img_20160302_085104

mikebolt commented 8 years ago

OK, I fixed that. Check it out here: http://codepen.io/anon/pen/mPJBYj .

It relies on google-cube-code.js now. The cube doesn't resize automatically anymore because I changed something in the google-cube-code.js when I was working on the multiple cubes thing. Also, the gcube.css must be loaded separately from now on.

molarmanful commented 8 years ago

Great! Have you updated gcube.min.js with these updates? (Also, README needs updates too.)

mikebolt commented 8 years ago

Alright, I updated the gcube.min.js. The codepens are definitely broken now, because gcube.css needs to be included in the head. Also the cubes are smaller like I mentioned.

molarmanful commented 8 years ago

Well, we'll have to fix the cube size problem :P

mikebolt commented 8 years ago

Here's what I know: You definitely need to remove the following line from google-cube-code.js:

this.setSize( 400, 200 );

At that point the div with class 'cube' will dynamically adjust its size to its parent element, which is probably the div with class 'cube-bounding-box'. It's up to you to make sure that the 'cube-bounding-box' div gets the appropriate height. My best attempts at getting the cube to resize based on the height of the window (like it used to?) have so far failed. You can add the following css:

html, body {
    height: 100%;
}

and that seems to help. But there's another bug, at least for me, where the transform properties don't get set properly and cause it to show up partially off-screen. I got it working in my ThreeTwist project by just removing the this.setSize( 400, 200 ) line, but I think it's because in that example the cube doesn't have to share a div with anything else. Not sure though.