Merge branch 'main' into task/xsebek/lodestone-watch

swarm-game · Sep 15, 2024 · 413ef06 · 413ef06
2 parents ba8dae3 + 746be8f
commit 413ef06
Show file tree

Hide file tree

Showing 4 changed files with 44,124 additions and 11 deletions.
diff --git a/web/play.html b/web/play.html
@@ -2,20 +2,20 @@
 <html>
   <head>
     <title>Web frontend</title>
-    <script src="https://pixijs.download/release/pixi.js"></script>
+    <script src="script/pixi.js"></script>
 
     <script src="script/display.js"></script>
     <script src="script/fetch.js"></script>
 
-    <script>
+    <script type="module">
 
-      function startLoop() {
+      async function startLoop() {
         const button = document.getElementById('restart-button');
         button.style.display = 'none';
 
         let displayWidth = 600;
         let displayHeight = 300;
-        let out = setupGraphics(button, displayWidth, displayHeight);
+        let out = await setupGraphics(button, displayWidth, displayHeight);
         let appView = out[0];
         let graphics = out[1];
         doFetch(button, appView, graphics, displayWidth, displayHeight);

diff --git a/web/script/display.js b/web/script/display.js
@@ -1,15 +1,16 @@
-function setupGraphics(button, displayWidth, displayHeight) {
+async function setupGraphics(button, displayWidth, displayHeight) {
 
+    const app = new PIXI.Application();
     // Create the application helper and add its render target to the page
-    let app = new PIXI.Application({
+    await app.init({
         width: displayWidth,
         height: displayHeight,
         backgroundColor: 0xFFFFFF
         });
 
-    document.body.insertBefore(app.view, button);
+    document.body.insertBefore(app.canvas, button);
 
     const graphics = new PIXI.Graphics();
     app.stage.addChild(graphics);
-    return [app.view, graphics];
+    return [app.canvas, graphics];
 }
diff --git a/web/script/fetch.js b/web/script/fetch.js
@@ -14,11 +14,10 @@ function drawGraphics(graphics, colorMap, grid) {
             let colorIdx = row[colIdx];
             let color = colorMap[colorIdx];
 
-            graphics.beginFill(color);
             let xPos = colIdx * cellSize;
             let yPos = rowIdx * cellSize;
-            graphics.drawRect(xPos, yPos, xPos + cellSize, yPos + cellSize);
-            graphics.endFill();
+            graphics.rect(xPos, yPos, xPos + cellSize, yPos + cellSize);
+            graphics.fill(color);
         }
     }
 }