# js_square_ani.py

# js_square_ani.py

import tempfile
import webbrowser
import os

js_data = '''<!DOCTYPE html>
<html>
    <head>
    <title>HTML5 Square Animation</title>
    </head>
    <body>
        <canvas id="myCanvas" width="1000" height="300"
                        style="border:0px">
        </canvas>
        <script>
            const canvas = document.querySelector('canvas');
            const ctx = canvas.getContext('2d');

            canvas.width = 1000;
            canvas.height = 300;

            let cw = canvas.width;
            let ch = canvas.height;

            let canvasX = 0;
            let canvasY = 0;

            let rectX = 0;
            let rectY = ch/2;

            let rectSize = 50;
            let rectSizeLeft = 50;
            let rectSizeRight = 100;
            let rectSpeed = 1;
            let rectSpeedLeft = 1;

            // my change
            let currentColors = randomColors();

            function field(){

                ctx.fillStyle = '#ddd';
                ctx.fillRect(canvasX, canvasY, cw, ch);

                window.requestAnimationFrame(field);

            }

            function randomColors() {

                let r = Math.floor(Math.random()*255);
                let g = Math.floor(Math.random()*255);
                let b = Math.floor(Math.random()*255);

                return 'rgb('+r+','+g+','+b+')';

            }


            function rect(){

                // my change
                if (rectX % 20 === 0) {
                    currentColors = randomColors();
                }

                // my change
                ctx.fillStyle = currentColors;

                ctx.fillRect(rectX,rectY,rectSize,rectSize);

                rectX+=rectSpeed;


                if(rectX+rectSize == 0){
                    rectSize = rectSizeLeft;
                    rectSpeed = rectSpeedLeft;
                } else if(rectX+rectSizeRight == cw+rectSizeRight){
                    rectSize=rectSizeRight;
                    rectSpeed = -rectSpeed;
                } ;

                window.requestAnimationFrame(rect);


                // if(rectX+rectSizeRight == cw){
                //     rectSize=rectSizeRight;
                //     rectSpeed = -rectSpeed
                //   }


                //   if (rectX+rectSize <= 0){
                //       rectSize = rectSize;
                //       rectSpeed = -rectSpeed;
                //   }
                //   if(rectX+rectSizeRight>=cw){
                //       rectSize=rectSizeRight;
                //       rectSpeed = -rectSpeed;
                //   }
                 }


             function animate(){
                // my change
                field();
                rect();
             }

             window.requestAnimationFrame(animate);

        </script>
    </body>
</html>
'''

chrome_path = 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe %s'

tf = tempfile.mktemp(".html", "JSdemo_")
print tf
with open(tf, 'w') as temp:
    temp.write(js_data)
webbrowser.get(chrome_path).open(tf)
os.remove(tf)