ardanlabs · ardan-bkennedy · Apr 24, 2024 · Mar 22, 2024 · Mar 22, 2024 · Mar 22, 2024
diff --git a/.github/workflows/go.yml b/.github/workflows/go.yml
@@ -16,7 +16,7 @@ jobs:
     - name: Set up Go
       uses: actions/setup-go@v3
       with:
-        go-version: 1.22.1
+        go-version: 1.22.2
 
     # - name: Staticheck
     #   run: |

diff --git a/app/services/ui/website/.DS_Store b/app/services/ui/website/.DS_Store
diff --git a/app/services/ui/website/assets/greenbackground.png b/app/services/ui/website/assets/greenbackground.png
diff --git a/app/services/ui/website/assets/titleimage.png b/app/services/ui/website/assets/titleimage.png
diff --git a/app/services/ui/website/index.html b/app/services/ui/website/index.html
@@ -5,7 +5,6 @@
         <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
         <script src="https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-        <script type="module" src="scripts/backend/backend.js"></script>
         <script type="module" src="scripts/frontend/index.js"></script>
     </head>
     <body>

diff --git a/app/services/ui/website/scripts/backend/backend.js b/app/services/ui/website/scripts/backend/backend.js
diff --git a/app/services/ui/website/scripts/backend/engine.js b/app/services/ui/website/scripts/backend/engine.js
@@ -1,3 +1,7 @@
+$.ajaxSetup({
+    contentType: 'application/json; charset=utf-8',
+});
+
 class Engine {
     #url;
     #token;
@@ -10,10 +14,16 @@ class Engine {
 
     // -------------------------------------------------------------------------
 
-    async #isConnected() {
+    IsConnected() {
         return this.#token != null ? true : false;
     }
 
+    Token() {
+        return this.#token;
+    }
+
+    // -------------------------------------------------------------------------
+
     async Config() {
         try {
             const result = await $.ajax({
@@ -47,7 +57,7 @@ class Engine {
 
     async Tables() {
         try {
-            if (!this.isConnected) {
+            if (!this.IsConnected()) {
                 return [null, 'not connected to game engine'];
             }
 
@@ -74,6 +84,8 @@ function parseError(e) {
             return e.responseJSON.error;
         case 'responseText' in e:
             return e.responseText;
+        case 'statusText' in e:
+            return 'engine not running';
     }
 
     return 'no error field identified';

diff --git a/app/services/ui/website/scripts/backend/wallet.js b/app/services/ui/website/scripts/backend/wallet.js
@@ -1,5 +1,15 @@
+const sdk = new MetaMaskSDK.MetaMaskSDK({
+    dappMetadata: {
+        name: 'Liars Dice',
+        url: 'http://' + window.location.host,
+    },
+    logging: {
+        sdk: false,
+    },
+});
+
 class Wallet {
-    static async SwitchChain(chainId) {
+    async SwitchChain(chainId) {
         try {
             const result = await ethereum.request({
                 method: 'wallet_switchEthereumChain',
@@ -16,7 +26,7 @@ class Wallet {
         }
     }
 
-    static async AddEthereumChain(chainId, network) {
+    async AddEthereumChain(chainId, network) {
         try {
             const result = await ethereum.request({
                 method: 'wallet_addEthereumChain',
@@ -42,7 +52,7 @@ class Wallet {
         }
     }
 
-    static async RequestPermissions() {
+    async RequestPermissions() {
         try {
             const result = await ethereum.request({
                 method: 'wallet_requestPermissions',
@@ -59,7 +69,7 @@ class Wallet {
         }
     }
 
-    static async PersonalSign(address, chainId, dateTime) {
+    async PersonalSign(address, chainId, dateTime) {
         const data = `{"address":"${address}","chainId":${chainId},"dateTime":"${dateTime}"}`;
 
         try {

diff --git a/...ervices/ui/website/scripts/backend/app.js → ...es/ui/website/scripts/frontend/backend.js b/...ervices/ui/website/scripts/backend/app.js → ...es/ui/website/scripts/frontend/backend.js
@@ -1,82 +1,49 @@
-import Engine from './engine.js';
-import Wallet from './wallet.js';
+import Engine from '../backend/engine.js';
+import Wallet from '../backend/wallet.js';
 
-class App {
-    #engine;
+class Backend {
+    Engine;
+    Wallet;
 
     // -------------------------------------------------------------------------
 
     constructor(url) {
-        this.#engine = new Engine(url);
+        this.Engine = new Engine(url);
+        this.Wallet = new Wallet();
     }
 
     // -------------------------------------------------------------------------
 
-    Init() {
-        // Make sure 'this' is the object and not the html element
-        // when these methods are executed by the event listener.
-        this.handlerGameConnect = this.#handlerGameConnect.bind(this);
-        this.handlerGameTables = this.#handlerGameTables.bind(this);
-
-        $('#gameConnect').click(this.handlerGameConnect);
-        $('#gameTables').click(this.handlerGameTables);
-    }
-
-    // -------------------------------------------------------------------------
-
-    async #handlerGameConnect() {
-        const err = await this.#gameConnect();
-        if (err != null) {
-            $('#error').text(err);
-            return;
-        }
-
-        // For now display the token.
-        $('#error').text(this.#engine.token);
-    }
-
-    async #handlerGameTables() {
-        const [tables, err] = await this.#engine.Tables();
-        if (err != null) {
-            $('#error').text(err);
-            return;
-        }
-
-        $('#error').text(JSON.stringify(tables));
-    }
-
-    // -------------------------------------------------------------------------
-
-    // gameConnect does everything to connect the browser to the wallet and
+    // GameConnect does everything to connect the browser to the wallet and
     // to the game engine.
-    async #gameConnect() {
+    async GameConnect() {
         // Get configuration information from the game engine.
-        var [cfg, err] = await this.#engine.Config();
+        var [cfg, err] = await this.Engine.Config();
         if (err != null) {
             return err;
         }
 
         // Ask the user's wallet if it's talking to the same blockchain as
         // the game engine.
-        var [_, err] = await Wallet.SwitchChain(cfg.chainId);
+        var [_, err] = await this.Wallet.SwitchChain(cfg.chainId);
         if (err != null) {
             // The blockchain does not exist in the user's wallet so
             // let's try to help them.
-            var [_, err] = await Wallet.AddEthereumChain(cfg.chainId, cfg.network);
+            var [_, err] = await this.Wallet.AddEthereumChain(cfg.chainId, cfg.network);
             if (err != null) {
                 return err;
             }
 
             // Try one more time to switch the wallet.
-            var [_, err] = await Wallet.SwitchChain(cfg.chainId);
+            var [_, err] = await this.Wallet.SwitchChain(cfg.chainId);
             if (err != null) {
                 return err;
             }
         }
 
         // Request permission to use the wallet. The user will select an
         // account to use.
-        var [rp, err] = await Wallet.RequestPermissions();
+        var [rp, err] = await this.Wallet.RequestPermissions();
         if (err != null) {
             return err;
         }
@@ -97,13 +64,13 @@ class App {
         const dateTime = currentDateTime();
 
         // Sign the arbitrary data.
-        var [sig, err] = await Wallet.PersonalSign(address, cfg.chainId, dateTime);
+        var [sig, err] = await this.Wallet.PersonalSign(address, cfg.chainId, dateTime);
         if (err != null) {
             return err;
         }
 
         // Connect to the game engine to get a token for game play.
-        var err = await this.#engine.Connect(address, cfg.chainId, dateTime, sig);
+        var err = await this.Engine.Connect(address, cfg.chainId, dateTime, sig);
         if (err != null) {
             return err;
         }
@@ -112,7 +79,7 @@ class App {
     }
 }
 
-export default App;
+export default Backend;
 
 // =============================================================================
 

diff --git a/app/services/ui/website/scripts/frontend/index.js b/app/services/ui/website/scripts/frontend/index.js
@@ -1,12 +1,48 @@
+import Backend from './backend.js';
 import MenuScene from './menu.js';
 import GameScene from './game.js';
 // import EndScene from './end.js';
 
+// Construct the backend to have access to the backend API.
+const backend = new Backend('http://0.0.0.0:3000');
+
+// =============================================================================
+
 const config = {
     type: Phaser.AUTO,
     width: 800,
     height: 600,
     scene: [MenuScene, GameScene],
 };
 
-const game = new Phaser.Game(config);
+const game = new Phaser.Game(config);
+
+// =============================================================================
+
+// Throw Away Code
+
+window.onload = function () {
+    $('#gameConnect').click(handlerGameConnect);
+    $('#gameTables').click(handlerGameTables);
+};
+
+async function handlerGameConnect() {
+    const err = await backend.GameConnect();
+    if (err != null) {
+        $('#error').text(err);
+        return;
+    }
+
+    // For now display the token.
+    $('#error').text(backend.Engine.Token());
+}
+
+async function handlerGameTables() {
+    const [tables, err] = await backend.Engine.Tables();
+    if (err != null) {
+        $('#error').text(err);
+        return;
+    }
+
+    $('#error').text(JSON.stringify(tables));
+}
diff --git a/app/services/ui/website/scripts/frontend/menu.js b/app/services/ui/website/scripts/frontend/menu.js
@@ -8,6 +8,7 @@ class MenuScene extends Phaser.Scene {
     preload() {
         // Load assets for your menu UI (images, fonts)
         this.load.image('background_image', '/assets/greenbackground.png');
+        this.load.image('title_image', '/assets/titleimage.png');
         this.load.image('dice_image', '/assets/Dice.png');
         this.load.image('connect_button', '/assets/connectbtn.png');
         this.load.image('joingame_button', '/assets/joinbtn.png');
@@ -16,20 +17,38 @@ class MenuScene extends Phaser.Scene {
 
     create() {
         // Create and position menu UI elements
-        const backgroundImage = this.add.image(400, 300, 'background_image');
-        backgroundImage.setScale(0.4); // Adjust image scale if needed
+
+        const backgroundImage = this.add.image(450, 300, 'background_image');
+        backgroundImage.setScale(1.5);
+
+        const titleImage = this.add.image(400, 105, 'title_image');
+        titleImage.setScale(1);
+
+        const diceImage = this.add.image(90, 130, 'dice_image');
+        diceImage.setScale(0.5);
 
         const connectButton = this.add.image(400, 300, 'connect_button');
         connectButton.setInteractive();
+
         const joinButton = this.add.image(250, 400, 'joingame_button');
         joinButton.setInteractive();
+
         const newGameButton = this.add.image(550, 400, 'newgame_button');
         newGameButton.setInteractive();
 
-        // Handle button click to start the game
         connectButton.on('pointerdown', () => {
+            // The logic for connectic the wallet should be here
             this.scene.start('game'); // Start the game scene
         });
+
+        joinButton.on('pointerdown', () => {
+            // The logic for finding available tables and/or selecting one
+            // should be here
+        });
+
+        newGameButton.on('pointerdown', () => {
+            // The logic for a new game should be here
+        });
     }
 }