Fix the codepens

[mikebolt]

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

[molarmanful]

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

[0frasure]

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

[molarmanful]

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

[mikebolt]

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]

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

[mikebolt]

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]

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

[mikebolt]

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]

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

[mikebolt]

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.