intital phaser set up

ardanlabs · Mar 19, 2024 · 116d23c · 116d23c
1 parent cbaac24
commit 116d23c
Show file tree

Hide file tree

Showing 30 changed files with 94 additions and 4 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/app/services/.DS_Store b/app/services/.DS_Store
diff --git a/app/services/ui/.DS_Store b/app/services/ui/.DS_Store
diff --git a/app/services/ui/website/.DS_Store b/app/services/ui/website/.DS_Store
diff --git a/app/services/ui/website/index.html b/app/services/ui/website/index.html
@@ -2,17 +2,19 @@
 <html>
     <head>
         <title>Testing Metamask Wallet</title>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.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 src="scripts/engine.js"></script>
-        <script src="scripts/wallet.js"></script>
-        <script src="scripts/app.js"></script>
-        <script src="scripts/init.js"></script>
+        <script src="scripts/backend/engine.js"></script>
+        <script src="scripts/backend/wallet.js"></script>
+        <script src="scripts/backend/app.js"></script>
+        <script src="scripts/backend/init.js"></script>
     </head>
     <body>
         <h1>Testing Metamask Wallet</h1>
         <button id="gameConnect">Game Connect</button>
         <button id="gameTables">Game Tables</button>
+        <!-- <script src="scripts/frontend/index.js"></script> -->
         <h2></h2>
         <div>
             <div id="error"></div>

diff --git a/app/services/ui/website/scripts/.DS_Store b/app/services/ui/website/scripts/.DS_Store
diff --git a/app/services/ui/website/scripts/app.js → ...ervices/ui/website/scripts/backend/app.js b/app/services/ui/website/scripts/app.js → ...ervices/ui/website/scripts/backend/app.js
diff --git a/app/services/ui/website/scripts/engine.js → ...ices/ui/website/scripts/backend/engine.js b/app/services/ui/website/scripts/engine.js → ...ices/ui/website/scripts/backend/engine.js
diff --git a/app/services/ui/website/scripts/init.js → ...rvices/ui/website/scripts/backend/init.js b/app/services/ui/website/scripts/init.js → ...rvices/ui/website/scripts/backend/init.js
diff --git a/app/services/ui/website/scripts/wallet.js → ...ices/ui/website/scripts/backend/wallet.js b/app/services/ui/website/scripts/wallet.js → ...ices/ui/website/scripts/backend/wallet.js
diff --git a/app/services/ui/website/scripts/frontend/.DS_Store b/app/services/ui/website/scripts/frontend/.DS_Store
diff --git a/app/services/ui/website/scripts/frontend/assets/.DS_Store b/app/services/ui/website/scripts/frontend/assets/.DS_Store
diff --git a/app/services/ui/website/scripts/frontend/assets/Dice.png b/app/services/ui/website/scripts/frontend/assets/Dice.png
diff --git a/app/services/ui/website/scripts/frontend/assets/betbtn.png b/app/services/ui/website/scripts/frontend/assets/betbtn.png
diff --git a/app/services/ui/website/scripts/frontend/assets/connectbtn.png b/app/services/ui/website/scripts/frontend/assets/connectbtn.png
diff --git a/app/services/ui/website/scripts/frontend/assets/five.png b/app/services/ui/website/scripts/frontend/assets/five.png
diff --git a/app/services/ui/website/scripts/frontend/assets/four.png b/app/services/ui/website/scripts/frontend/assets/four.png
diff --git a/app/services/ui/website/scripts/frontend/assets/greenbackground.png b/app/services/ui/website/scripts/frontend/assets/greenbackground.png
diff --git a/app/services/ui/website/scripts/frontend/assets/joinbtn.png b/app/services/ui/website/scripts/frontend/assets/joinbtn.png
diff --git a/app/services/ui/website/scripts/frontend/assets/liarbtn.png b/app/services/ui/website/scripts/frontend/assets/liarbtn.png
diff --git a/app/services/ui/website/scripts/frontend/assets/newbtn.png b/app/services/ui/website/scripts/frontend/assets/newbtn.png
diff --git a/app/services/ui/website/scripts/frontend/assets/one.png b/app/services/ui/website/scripts/frontend/assets/one.png
diff --git a/app/services/ui/website/scripts/frontend/assets/six.png b/app/services/ui/website/scripts/frontend/assets/six.png
diff --git a/app/services/ui/website/scripts/frontend/assets/three.png b/app/services/ui/website/scripts/frontend/assets/three.png
diff --git a/app/services/ui/website/scripts/frontend/assets/two.png b/app/services/ui/website/scripts/frontend/assets/two.png
diff --git a/app/services/ui/website/scripts/frontend/end.js b/app/services/ui/website/scripts/frontend/end.js
diff --git a/app/services/ui/website/scripts/frontend/game.js b/app/services/ui/website/scripts/frontend/game.js
@@ -0,0 +1,39 @@
+class GameScene extends Phaser.Scene {
+    constructor() {
+        super({ key: 'game' });
+    }
+
+    preload() {
+        // Load UI asset images, fonts, etc. (e.g., button image)
+        this.load.image('background_image', './assets/greenbackground.png');
+        this.load.image('one', './assets/one.png');
+        this.load.image('two', './assets/two.png');
+        this.load.image('three', './assets/three.png');
+        this.load.image('four', './assets/four.png');
+        this.load.image('five', './assets/five.png');
+        this.load.image('six', './assets/six.png');
+    }
+
+    create() {
+        // Create UI elements using Phaser objects
+        const backgroundImage = this.add.image(0, 0, 'background_image');
+        const connectButton = this.add.image(x, y, 'button_image');
+        connectButton.setInteractive();
+        connectButton.on('pointerdown', () => {
+            // Call your connect function to interact with MetaMask
+            connect();
+            // Update UI based on response (e.g., display retrieved accounts)
+        });
+
+        // Add other UI elements here
+    }
+}
+
+const config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    scene: [GameScene],
+};
+
+const game = new Phaser.Game(config);
diff --git a/app/services/ui/website/scripts/frontend/index.js b/app/services/ui/website/scripts/frontend/index.js
@@ -0,0 +1,12 @@
+import MenuScene from './menu.js';
+import GameScene from './game.js';
+// import EndScene from './end.js';
+
+const config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    scene: [MenuScene, GameScene],
+};
+
+const game = new Phaser.Game(config);
diff --git a/app/services/ui/website/scripts/frontend/menu.js b/app/services/ui/website/scripts/frontend/menu.js
@@ -0,0 +1,37 @@
+// This is the first screen of the game. Here the player will connect to wallet
+// Find other games or start a new game
+class MenuScene extends Phaser.Scene {
+    constructor() {
+        super({ key: 'menu' });
+    }
+
+    preload() {
+        // Load assets for your menu UI (images, fonts)
+        this.load.image('background_image', './assets/greenbackground.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');
+        this.load.image('newgame_button', './assets/newbtn.png');
+    }
+
+    create() {
+        // Create and position menu UI elements
+        const backgroundImage = this.add.image(0, 0, 'background_image');
+        backgroundImage.setScale(0.5); // Adjust image scale if needed
+
+        const connectButton = this.add.image(400, 400, 'connect_button');
+        connectButton.setInteractive();
+        const joinButton = this.add.image(400, 400, 'joingame_button');
+        joinButton.setInteractive();
+        const newGameButton = this.add.image(400, 400, 'newgame_button');
+        newGameButton.setInteractive();
+
+
+        // Handle button click to start the game
+        startButton.on('pointerdown', () => {
+            this.scene.start('game'); // Start the game scene
+        });
+    }
+}
+
+export default MenuScene;