demo pixi.js

swarm-game · Nov 22, 2023 · f1feeae · f1feeae
1 parent 724650d
commit f1feeae
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 0 deletions.
diff --git a/src/Swarm/Web.hs b/src/Swarm/Web.hs
@@ -81,6 +81,7 @@ import Swarm.TUI.Model
 import Swarm.TUI.Model.Goal
 import Swarm.TUI.Model.UI
 import Swarm.Util.RingBuffer
+import Swarm.Web.Worldview
 import System.Timeout (timeout)
 import Text.Read (readEither)
 import WaiAppStatic.Types (unsafeToPiece)
@@ -106,6 +107,7 @@ type SwarmAPI =
     :<|> "code" :> "run" :> ReqBody '[PlainText] T.Text :> Post '[PlainText] T.Text
     :<|> "paths" :> "log" :> Get '[JSON] (RingBuffer CacheLogEntry)
     :<|> "repl" :> "history" :> "full" :> Get '[JSON] [REPLHistItem]
+    :<|> "hello" :> Get '[JSON] CellGrid
 
 swarmApi :: Proxy SwarmAPI
 swarmApi = Proxy
@@ -160,6 +162,7 @@ mkApp state events =
     :<|> codeRunHandler events
     :<|> pathsLogHandler state
     :<|> replHandler state
+    :<|> helloHandler state
 
 robotsHandler :: ReadableIORef AppState -> Handler [Robot]
 robotsHandler appStateRef = do
@@ -242,6 +245,12 @@ replHandler appStateRef = do
       items = toList replHistorySeq
   pure items
 
+helloHandler :: ReadableIORef AppState -> Handler CellGrid
+helloHandler _ =
+  pure $
+    CellGrid [[1, 2, 3, 4], [1, 1, 2, 2]] $
+      M.fromList [(1, "#ff0000"), (2, "#00ff00"), (3, "#0000ff"), (4, "#ff00ff")]
+
 -- ------------------------------------------------------------------
 -- Main app (used by service and for development)
 -- ------------------------------------------------------------------

diff --git a/src/Swarm/Web/Worldview.hs b/src/Swarm/Web/Worldview.hs
@@ -0,0 +1,18 @@
+-- |
+-- SPDX-License-Identifier: BSD-3-Clause
+module Swarm.Web.Worldview where
+
+import Data.Aeson (ToJSON)
+import Data.Map (Map)
+import Data.Text (Text)
+import GHC.Generics (Generic)
+import Servant.Docs qualified as SD
+
+data CellGrid = CellGrid
+  { coords :: [[Int]]
+  , colors :: Map Int Text
+  }
+  deriving (Generic, ToJSON)
+
+instance SD.ToSample CellGrid where
+  toSamples _ = SD.noSamples
diff --git a/swarm.cabal b/swarm.cabal
@@ -255,6 +255,7 @@ library
                       Swarm.Util.Yaml
                       Swarm.Version
                       Swarm.Web
+                      Swarm.Web.Worldview
     other-modules:    Paths_swarm
     autogen-modules:  Paths_swarm
 

diff --git a/web/handwritten-logo.png b/web/handwritten-logo.png
diff --git a/web/index.html b/web/index.html
@@ -4,7 +4,9 @@
     <title>Swarm server</title>
   </head>
   <body>
+    <img src="handwritten-logo.png"/>
     <h1>Hello Swarm player!</h1>
     <p>Looking for the <a href="api">Web API docs</a>?</p>
+    <p>Or an <a href="play.html">experimental web frontend</a> for the game?</p>
   </body>
 </html>
diff --git a/web/play.html b/web/play.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Web frontend</title>
+    <script src="https://pixijs.download/release/pixi.js"></script>
+
+    <script src="script/display.js"></script>
+    <script src="script/fetch.js"></script>
+
+    <script>
+      window.onload=()=>{
+
+        setupGraphics();
+
+        const myList = document.querySelector("ul");
+        doFetch(myList);
+      }
+    </script>
+  </head>
+  <body>
+    <ul>
+      <li>apple</li>
+      <li>banana</li>
+    </ul>
+  </body>
+</html>
diff --git a/web/script/display.js b/web/script/display.js
@@ -0,0 +1,21 @@
+function setupGraphics() {
+
+    // Create the application helper and add its render target to the page
+    let app = new PIXI.Application({
+        width: 640,
+        height: 360,
+        backgroundColor: 0xFFFFFF
+        });
+    document.body.appendChild(app.view);
+
+    // Create the sprite and add it to the stage
+    let sprite = PIXI.Sprite.from('handwritten-logo.png');
+    app.stage.addChild(sprite);
+
+    // Add a ticker callback to move the sprite back and forth
+    let elapsed = 0.0;
+    app.ticker.add((delta) => {
+    elapsed += delta;
+    sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
+    });
+}
diff --git a/web/script/fetch.js b/web/script/fetch.js
@@ -0,0 +1,29 @@
+function doFetch(myList) {
+
+    fetch("hello")
+    .then((response) => {
+    if (!response.ok) {
+        throw new Error(`HTTP error, status = ${response.status}`);
+    }
+    return response.json();
+    })
+    .then((data) => {
+    for (const [key, color] of Object.entries(data.colors)) {
+        const listItem = document.createElement("li");
+
+        const priceElement = document.createElement("strong");
+        priceElement.textContent = color;
+
+        listItem.append(
+            key + ": ",
+            priceElement,
+        );
+        myList.appendChild(listItem);
+    }
+    })
+    .catch((error) => {
+    const p = document.createElement("p");
+    p.appendChild(document.createTextNode(`Error: ${error.message}`));
+    document.body.insertBefore(p, myList);
+    });
+}