Skip to content

Commit

Permalink
Phase work and upgraded deps (#15)
Browse files Browse the repository at this point in the history
* missing error field

* menu scene images completed

* js changes

* upgraded go and deps

* upgraded to latest version of ethereum

* upgraded deps

---------

Co-authored-by: Ale Kennedy <[email protected]>
  • Loading branch information
ardan-bkennedy and alehacker authored Apr 24, 2024
1 parent 7d7fcf2 commit 53b8cb7
Show file tree
Hide file tree
Showing 535 changed files with 28,092 additions and 66,182 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/go.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Expand Down
Binary file modified app/services/ui/website/.DS_Store
Binary file not shown.
Binary file modified app/services/ui/website/assets/greenbackground.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/services/ui/website/assets/titleimage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion app/services/ui/website/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
21 changes: 0 additions & 21 deletions app/services/ui/website/scripts/backend/backend.js

This file was deleted.

16 changes: 14 additions & 2 deletions app/services/ui/website/scripts/backend/engine.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
$.ajaxSetup({
contentType: 'application/json; charset=utf-8',
});

class Engine {
#url;
#token;
Expand All @@ -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({
Expand Down Expand Up @@ -47,7 +57,7 @@ class Engine {

async Tables() {
try {
if (!this.isConnected) {
if (!this.IsConnected()) {
return [null, 'not connected to game engine'];
}

Expand All @@ -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';
Expand Down
18 changes: 14 additions & 4 deletions app/services/ui/website/scripts/backend/wallet.js
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -16,7 +26,7 @@ class Wallet {
}
}

static async AddEthereumChain(chainId, network) {
async AddEthereumChain(chainId, network) {
try {
const result = await ethereum.request({
method: 'wallet_addEthereumChain',
Expand All @@ -42,7 +52,7 @@ class Wallet {
}
}

static async RequestPermissions() {
async RequestPermissions() {
try {
const result = await ethereum.request({
method: 'wallet_requestPermissions',
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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;
}
Expand All @@ -112,7 +79,7 @@ class App {
}
}

export default App;
export default Backend;

// =============================================================================

Expand Down
38 changes: 37 additions & 1 deletion app/services/ui/website/scripts/frontend/index.js
Original file line number Diff line number Diff line change
@@ -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));
}
25 changes: 22 additions & 3 deletions app/services/ui/website/scripts/frontend/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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
});
}
}

Expand Down
Loading

0 comments on commit 53b8cb7

Please sign in to comment.