From c88f9fa7e21cab73e8817c025ce8bb630390c68e Mon Sep 17 00:00:00 2001
From: Nicholas Ramos <111522637+NicholasRamos5@users.noreply.github.com>
Date: Mon, 10 Jul 2023 14:07:22 -0700
Subject: [PATCH] nw attempt

---
 _notebooks/2023-06-13-Mario.ipynb | 283 ++++++++++++++++--------------
 1 file changed, 148 insertions(+), 135 deletions(-)

diff --git a/_notebooks/2023-06-13-Mario.ipynb b/_notebooks/2023-06-13-Mario.ipynb
index da833c2..c65f896 100644
--- a/_notebooks/2023-06-13-Mario.ipynb
+++ b/_notebooks/2023-06-13-Mario.ipynb
@@ -737,79 +737,80 @@
    ],
    "source": [
     "%%html\n",
-    "<style>\n",
-    "    #canvas2 {\n",
-    "        margin: 0;\n",
-    "        border: 1px solid black;\n",
-    "    }\n",
-    "</style>\n",
-    "<canvas id=\"canvas2\"></canvas>\n",
-    "<script>\n",
-    "    const canvas2 = document.getElementById('canvas2');\n",
-    "    const c2 = canvas2.getContext('2d');\n",
-    "    canvas2.width = 770;\n",
-    "    canvas2.height = 300;\n",
-    "    const gravity2 = 1.5;\n",
-    "\n",
-    "    class Player2 {\n",
-    "        constructor() {\n",
-    "            this.position = {\n",
-    "                x: 100,\n",
-    "                y: 100\n",
-    "            };\n",
-    "            this.velocity = {\n",
-    "                x: 0,\n",
-    "                y: 0\n",
-    "            };\n",
-    "            this.width = 30;\n",
-    "            this.height = 30;\n",
+    "    <style>\n",
+    "        #canvas2 {\n",
+    "            margin: 0;\n",
+    "            border: 1px solid black;\n",
     "        }\n",
-    "        draw() {\n",
-    "            c2.fillStyle = 'red';\n",
-    "            c2.fillRect(this.position.x, this.position.y, this.width, this.height);\n",
-    "        }\n",
-    "        update() {\n",
-    "            this.draw();\n",
-    "            this.position.y += this.velocity.y;\n",
-    "            this.position.x += this.velocity.x;\n",
-    "            if (this.position.y + this.height + this.velocity.y <= canvas2.height)\n",
-    "                this.velocity.y += gravity2;\n",
-    "            else\n",
-    "                this.velocity.y = 0;\n",
-    "        }\n",
-    "    }\n",
+    "    </style>\n",
+    "    <canvas id=\"canvas2\"></canvas>\n",
     "\n",
-    "    class Platform2 {\n",
-    "        constructor(image) {\n",
-    "            this.position = {\n",
-    "                x: 0,\n",
-    "                y: 200\n",
+    "    <script>\n",
+    "        const canvas2 = document.getElementById('canvas2');\n",
+    "        const c2 = canvas2.getContext('2d');\n",
+    "        canvas2.width = 770;\n",
+    "        canvas2.height = 300;\n",
+    "        const gravity2 = 1.5;\n",
+    "\n",
+    "        class Player2 {\n",
+    "            constructor() {\n",
+    "                this.position = {\n",
+    "                    x: 100,\n",
+    "                    y: 100\n",
+    "                };\n",
+    "                this.velocity = {\n",
+    "                    x: 0,\n",
+    "                    y: 0\n",
+    "                };\n",
+    "                this.width = 30;\n",
+    "                this.height = 30;\n",
+    "            }\n",
+    "            draw() {\n",
+    "                c2.fillStyle = 'red';\n",
+    "                c2.fillRect(this.position.x, this.position.y, this.width, this.height);\n",
+    "            }\n",
+    "            update() {\n",
+    "                this.draw();\n",
+    "                this.position.y += this.velocity.y;\n",
+    "                this.position.x += this.velocity.x;\n",
+    "                if (this.position.y + this.height + this.velocity.y <= canvas2.height)\n",
+    "                    this.velocity.y += gravity2;\n",
+    "                else\n",
+    "                    this.velocity.y = 0;\n",
     "            }\n",
-    "            this.image = image;\n",
-    "            this.width = 540;\n",
-    "            this.height = 160;\n",
-    "        }\n",
-    "        draw() {\n",
-    "            c2.drawImage(this.image, this.position.x, this.position.y);\n",
     "        }\n",
-    "    }\n",
-    "    class Tube {\n",
-    "        constructor(image) {\n",
-    "            this.position = {\n",
-    "                x: 10,\n",
-    "                y: 10\n",
+    "\n",
+    "        class Platform2 {\n",
+    "            constructor(image) {\n",
+    "                this.position = {\n",
+    "                    x: 0,\n",
+    "                    y: 200\n",
+    "                }\n",
+    "                this.image = image;\n",
+    "                this.width = 540;\n",
+    "                this.height = 160;\n",
+    "            }\n",
+    "            draw() {\n",
+    "                c2.drawImage(this.image, this.position.x, this.position.y);\n",
     "            }\n",
-    "            this.image = image;\n",
-    "            this.width = 540;\n",
-    "            this.height = 160;\n",
     "        }\n",
-    "        draw() {\n",
-    "            c2.drawImage(this.image, this.position.x, this.position.y);\n",
+    "        class Tube {\n",
+    "            constructor(image) {\n",
+    "                this.position = {\n",
+    "                    x: 10,\n",
+    "                    y: 10\n",
+    "                }\n",
+    "                this.image = image;\n",
+    "                this.width = 540;\n",
+    "                this.height = 160;\n",
+    "            }\n",
+    "            draw() {\n",
+    "                c2.drawImage(this.image, this.position.x, this.position.y);\n",
+    "            }\n",
     "        }\n",
-    "    }\n",
     "\n",
-    "    const image2 = new Image();\n",
-    "    const imageTube = new Image();\n",
+    "        const image2 = new Image();\n",
+    "        const imageTube = new Image();\n",
     "\n",
     "        const player2 = new Player2();\n",
     "        const platform2 = new Platform2(image2);\n",
@@ -822,83 +823,95 @@
     "            }\n",
     "        };\n",
     "\n",
-    "        imageTube.onload = function() {\n",
-    "        const tube = new Tube(imageTube);\n",
-    "        animate2();\n",
+    "        const loadImage = (src) => {\n",
+    "            return new Promise((resolve, reject) => {\n",
+    "                const image = new Image();\n",
+    "                image.onload = () => resolve(image);\n",
+    "                image.onerror = (error) => reject(error);\n",
+    "                image.src = src;\n",
+    "            });\n",
     "        };\n",
     "\n",
-    "        function animate2() {\n",
-    "            requestAnimationFrame(animate2);\n",
-    "            c2.clearRect(0, 0, canvas2.width, canvas2.height);\n",
-    "            player2.update();\n",
-    "            platform2.draw();\n",
-    "            tube.draw();\n",
-    "            if (keys2.right.pressed) {\n",
-    "                player2.velocity.x = 5;\n",
-    "            } else if (keys2.left.pressed) {\n",
-    "                player2.velocity.x = -5;\n",
-    "            } else {\n",
-    "                player2.velocity.x = 0;\n",
-    "            }\n",
-    "            if (\n",
-    "                player2.position.y + player2.height <= platform2.position.y &&\n",
-    "                player2.position.y + player2.height + player2.velocity.y >= platform2.position.y &&\n",
-    "                player2.position.x + player2.width >= platform2.position.x &&\n",
-    "                player2.position.x <= platform2.position.x + platform2.width\n",
-    "            ) {\n",
-    "                player2.velocity.y = 0;\n",
-    "            }\n",
-    "        }\n",
+    "        Promise.all([\n",
+    "            loadImage('https://samayass.github.io/samayaCSA/images/platform.png'),\n",
+    "            loadImage('https://NicholasRamos5.github.io/VSCodings/images/MarioItems/tube.png')\n",
+    "        ])\n",
+    "            .then(([platformImage, tubeImage]) => {\n",
+    "                image2.src = platformImage.src;\n",
+    "                imageTube.src = tubeImage.src;\n",
     "\n",
-    "        animate2();\n",
+    "                const tube = new Tube(imageTube);\n",
     "\n",
-    "        addEventListener('keydown', ({ keyCode }) => {\n",
-    "            switch (keyCode) {\n",
-    "                case 65:\n",
-    "                    console.log('left');\n",
-    "                    keys2.left.pressed = true;\n",
-    "                    break;\n",
-    "                case 83:\n",
-    "                    console.log('down');\n",
-    "                    break;\n",
-    "                case 68:\n",
-    "                    console.log('right');\n",
-    "                    keys2.right.pressed = true;\n",
-    "                    break;\n",
-    "                case 87:\n",
-    "                    console.log('up');\n",
-    "                    player2.velocity.y -= 20;\n",
-    "                    break;\n",
-    "            }\n",
-    "        });\n",
+    "                function animate2() {\n",
+    "                    requestAnimationFrame(animate2);\n",
+    "                    c2.clearRect(0, 0, canvas2.width, canvas2.height);\n",
+    "                    player2.update();\n",
+    "                    platform2.draw();\n",
+    "                    tube.draw();\n",
+    "                    if (keys2.right.pressed) {\n",
+    "                        player2.velocity.x = 5;\n",
+    "                    } else if (keys2.left.pressed) {\n",
+    "                        player2.velocity.x = -5;\n",
+    "                    } else {\n",
+    "                        player2.velocity.x = 0;\n",
+    "                    }\n",
+    "                    if (\n",
+    "                        player2.position.y + player2.height <= platform2.position.y &&\n",
+    "                        player2.position.y + player2.height + player2.velocity.y >= platform2.position.y &&\n",
+    "                        player2.position.x + player2.width >= platform2.position.x &&\n",
+    "                        player2.position.x <= platform2.position.x + platform2.width\n",
+    "                    ) {\n",
+    "                        player2.velocity.y = 0;\n",
+    "                    }\n",
+    "                }\n",
     "\n",
-    "        addEventListener('keyup', ({ keyCode }) => {\n",
-    "            switch (keyCode) {\n",
-    "                case 65:\n",
-    "                    console.log('left');\n",
-    "                    keys2.left.pressed = false;\n",
-    "                    break;\n",
-    "                case 83:\n",
-    "                    console.log('down');\n",
-    "                    break;\n",
-    "                case 68:\n",
-    "                    console.log('right');\n",
-    "                    keys2.right.pressed = false;\n",
-    "                    break;\n",
-    "                case 87:\n",
-    "                    console.log('up');\n",
-    "                    player2.velocity.y -= 20;\n",
-    "                    break;\n",
-    "            }\n",
-    "        });\n",
+    "                animate2();\n",
     "\n",
-    "    \n",
-    "            \n",
-    "    imageTube.src = 'https://NicholasRamos5.github.io/VSCodings/images/MarioItems/tube.png';\n",
+    "                addEventListener('keydown', ({ keyCode }) => {\n",
+    "                    switch (keyCode) {\n",
+    "                        case 65:\n",
+    "                            console.log('left');\n",
+    "                            keys2.left.pressed = true;\n",
+    "                            break;\n",
+    "                        case 83:\n",
+    "                            console.log('down');\n",
+    "                            break;\n",
+    "                        case 68:\n",
+    "                            console.log('right');\n",
+    "                            keys2.right.pressed = true;\n",
+    "                            break;\n",
+    "                        case 87:\n",
+    "                            console.log('up');\n",
+    "                            player2.velocity.y -= 20;\n",
+    "                            break;\n",
+    "                    }\n",
+    "                });\n",
     "\n",
-    "         \n",
-    "    image2.src = 'https://samayass.github.io/samayaCSA/images/platform.png';\n",
-    "</script>\n"
+    "                addEventListener('keyup', ({ keyCode }) => {\n",
+    "                    switch (keyCode) {\n",
+    "                        case 65:\n",
+    "                            console.log('left');\n",
+    "                            keys2.left.pressed = false;\n",
+    "                            break;\n",
+    "                        case 83:\n",
+    "                            console.log('down');\n",
+    "                            break;\n",
+    "                        case 68:\n",
+    "                            console.log('right');\n",
+    "                            keys2.right.pressed = false;\n",
+    "                            break;\n",
+    "                        case 87:\n",
+    "                            console.log('up');\n",
+    "                            player2.velocity.y -= 20;\n",
+    "                            break;\n",
+    "                    }\n",
+    "                });\n",
+    "            })\n",
+    "            .catch((error) => {\n",
+    "                console.error('Error loading images:', error);\n",
+    "            });\n",
+    "    </script>\n",
+    "\n"
    ]
   },
   {