cubing / AnimCubeJS

▶️ Play around with a Rubik's Cube simulator.
https://animcubejs.cubing.net/animcubejs.html
MIT License
25 stars 8 forks source link

understanding resize #27

Closed raquelhortab closed 1 year ago

raquelhortab commented 1 year ago

Hi, I am trying to find where the resize functionality conflicts with our code. Even with the simplest example, when the window is resized I get this weird behaviour:

screencast-0.0.0.0_3000-2023.06.12-10_01_11.webm

I thought maybe someone who developed this can hint me on what could be the problem

Thanks!

raquelhortab commented 1 year ago

Also, I see the canvas is not painted inside the div and this results in a blank space (the div) and then the canvas

raquelhortab commented 1 year ago

update: I see the canvas gets added to parNode = document.currentScript.parentNode; not the div. I fixed it by setting an id to the div and passing the id as param to AnimCube3. Not sure if this is a bug or I did something wrong with my initial setup... Just in case, I'm leaving here my initial code:

<script src="/rubik/js/AnimCube3.js"></script>
<div class="cube" style="width:300px; height:323px;max-width: 300px; max-height:323px;">
</div>
<script>
    AnimCube3("");
</script>

and the working code:

<script src="/rubik/js/AnimCube3.js"></script>
<div id="cube-container" class="cube" style="width:300px; height:323px;max-width: 300px; max-height:323px;">
</div>
<script>
    AnimCube3("id=cube-container");
</script>
mfeather1 commented 1 year ago

For anonymous div the script goes inside the div:

<script src="/rubik/js/AnimCube3.js"></script>
<div class="cube" style="width:300px; height:323px;max-width: 300px; max-height:323px;">
<script>
    AnimCube3("");
</script>
</div>

Although the fixed width & height were not resizing in my test, I used this:

<div style="height:90vw; width:90vw">
 <script>AnimCube3("");</script>
</div>

And as you have said, using a div id also works.

raquelhortab commented 1 year ago

I see! that was my error then, I moved the script! Thanks!