add conditional color

src/pages/drawing/v2.astro

@@ -0,0 +1,53 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div></div>
+    </main>
+</Layout>
+<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+<script is:inline>
+    const isMobile = window.innerWidth <= 768;
+    let customWidth = window.innerWidth;
+    let customHeight = window.innerHeight;
+    var assetsList = {}
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const data =       fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
+    .then(response => response.json())
+    .then(({data}) => {
+        console.log(data)
+    const {image} = data;
+    assetsList.image = "https://management.beanstalkedu.com/assets/" + image; // + "?width=450";
+    const config = {
+        type: Phaser.AUTO,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: '#ffffff',
+        scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+        },
+        scene: {
+            preload: preload,
+            create: create,
+            update: update,
+        },
+    };
+      const game = new Phaser.Game(config);    
+    })
+    .catch(error => {
+      console.error('Error fetching initial data:', error);
+    });
+    
+    function preload(){
+        this.load.image('image', assetsList.image);
+    }
+    function create(){
+        this.add.image(customWidth / 2, customHeight / 2, 'image');
+    }
+    function update(){
+
+    }
+</script>