readme

README.MD

@@ -1,5 +1,34 @@
-##tut
+# MILADYSTATION FIRST RELEASE: POWER PACKS ONCHAINED
 
-go to javascript console on the webpage and enter "boot()"
-that starts it from the beginning and not just wherever I am while I'm working on it
+This dApp web game is a simple coinflip happening onchain using chainlink vrf, and a smashbros skin, with pokemon exp leveling.
+
+Players pay to play to fund the vrf subscription on the arbitrum blockchain. If they win, they received experience points linked to their Power Pack NFT to get on the leaderboard and unlock new fighting locations, animations and game modes.
+
+The website uses javascript and html to animate the characters and web assets. The game interactions are intermediated with web3js. There is offline play without setting up the onchain activity.
+
+For testing, there is a separate repo that contains a foundry project that you can run on anvil to simulate the web3 version.
+
+## setup
+
+The website is a static page sight. You can run the game simply by opening the index.html located in the public folder.
+
+In order to run the site on a local web server you must install the node packages.
+
+```
+npm i
+```
+
+To run the server use the command
+
+```
+npm start
+```
+
+If you make changes to the code, end the server using control+c on mac. Then npm start again to reset it.
+
+## onchained
+
+The Onchained foundry repo and startup instructions can be found here:
+
+https://github.com/jfkwebdev/PPO
 

public/js/core.js

@@ -40,7 +40,7 @@ function frame(idO, clastO, idI, clastI, bod) {
                     create("button","vol","","soundSwitch()",`${volume()}`)
                     +
                     create("div","balance","","",
-                        create("h3","wallet","","",`WINS:${streak}`)
+                        create("h3","wallet","","",`WINS:${streak} EXP:${userXP}`)
                     )
                     +
                     create("button","cash-out","","settings()","Menu")
@@ -70,6 +70,9 @@ function frame(idO, clastO, idI, clastI, bod) {
             )
         )
     }
+    if(phase == "battle"){
+        get('back').disabled = true;
+    } 
 
 }
 
@@ -97,9 +100,15 @@ function hideSettings() {
 }
 
 
-function updateBar() {
-    if(!isMobileDevice()){
-        get('wallet').innerHTML = `WINS:${streak}`;
+updateBar = async() => {
+    let xp = userXP;
+    if(onChained && phase != "battle"){
+        xp = parseInt(await getUserExp());
+    }
+    console.log('xp in update bar',xp);
+    if(true){
+    //if(!isMobileDevice()){
+        get('wallet').innerHTML = `WINS:${streak} EXP: ${xp}`;
         get('vol').innerHTML = `${volume()}`;
     } else {
         get('wallet').innerHTML = `WINS:${streak}`;
@@ -169,7 +178,7 @@ function boot(){
     phase = "boot";
     frame(
         "boot","","logo","",
-        `<img src="./bwlogosmol.png" alt="miladystation">`
+        `<img src="./assets/bwlogosmol.png" alt="miladystation">`
     )
     get('bar').style.display = "none";
     welcome();
@@ -188,7 +197,7 @@ function start(loud){
             "button","start","float centered-button","auth()","START"
         )
         +
-        `<img src="dogpile.png" id="dogpile" />`
+        `<img src="./assets/dogpile.png" id="dogpile" />`
     )
     get('bar').style.display = "none";
     panUp(1.3)

public/js/index.js

@@ -22,6 +22,7 @@
     var curInt;
     var walletPacks = [];
     var onChained = false;
+    var userXP;
     //betting
     var multiMax = 9;
     var odds = .5;
@@ -161,6 +162,7 @@ function stageMenu() {
 }
 
 function tote() {
+    phase = "tote";
     frame("","","option","",
         create("div","summary","float sheet","",
             `${summary()}`
@@ -173,6 +175,7 @@ function tote() {
 }
 
 function battle() {
+    phase = "battle";
     // if(hear){
     //     menu.stop()
     //     sound.play()
@@ -228,12 +231,12 @@ function action() {
 function getStocks() {
     let p1s = `<div class="stocks stock0">`
     let p2s = `<div class="stocks stock1">`
-    for(let i = 0; i < stocks; i++){
-        if(game.p1.stock > i){
-            p1s += `<img src="./char/${character}.png" alt="stock0" id="0stock${i+1}" class="stock0"/>`;
+    for(let i = 1; i < stocks + 1; i++){
+        if(game.p1.stock + 1 > i){
+            p1s += `<img src="./char/${character}.png" alt="stock0" id="0stock${i}" class="stock0"/>`;
         }
-        if(game.p2.stock > i){
-            p2s += `<img src="./char/${character1}.png" alt="stock1" id="1stock1${i+1}" class="stock1"/>`;
+        if(game.p2.stock + 1 > i){
+            p2s += `<img src="./char/${character1}.png" alt="stock1" id="1stock1${i}" class="stock1"/>`;
         }
     }
     p1s += "</div>"
@@ -242,6 +245,7 @@ function getStocks() {
 }
 
 function wait() {
+    phase = "wait";
     frame("","","wait","",
         create("div","","","",
             `<img src="assets/loading.gif"/>`
@@ -250,6 +254,7 @@ function wait() {
 }
 
 function result() {
+    phase = "result";
     // if(hear){
     //     sound.stop()
     //     menu.play()
@@ -267,6 +272,9 @@ function result() {
 function resetField() {
     game.p1.stock = stocks;
     game.p2.stock = stocks;
+    score = [];
+    a = false;
+    found = false;
 }
 
 function gloat() {
@@ -410,7 +418,9 @@ risk = (w) => {
 }
 
 stats = async (charSelId) => {
-        await checkChain("stats",charSelId);
+        //await checkChain("stats",charSelId);
+        xp = await checkExp(accounts[0],charSelId);
+        get('exp').innerHTML = `exp: ${xp}`;
 }
 
 function summary() {
@@ -422,9 +432,9 @@ function summary() {
 }
 
 //full spread
-//boot();
+boot();
 //start()
-auth()
+//auth()
 //mainMenu();
 //charMenu();
 //banner();

public/js/web3.js

@@ -14,6 +14,7 @@ const web3 = new Web3(Web3.givenProvider);
 var accounts = [];
 var team;
 var playerXP;
+var found;
 //var friend;
 //var totalSup;
 //var connected = true;
@@ -57,6 +58,7 @@ connectWallet = async() => {
 checkWallet = async() => {
     walletPacks = await exp.methods.readRegistrar(accounts[0]).call()
     console.log('team: ',walletPacks);
+    await getUserExp();
     mainMenu();
 }
 
@@ -96,7 +98,7 @@ arm2 = async() => {
         const uint256Value = web3.utils.toBN(uint256Hex);
         var reqId = web3.utils.toBN(uint256Value); // Convert the data to a BigNumber
         reqId = reqId.toString();
-        console.log('reqId:', reqId.toString());
+        console.log('reqId:', reqId);
     } else {
         console.log('Event not found or no result.');
     }
@@ -105,22 +107,29 @@ arm2 = async() => {
 
 go = async(id) => {
     console.log('goin');
-    let a = false;
     let count = 0;
     wait();
     let checkInterval = setInterval(()=>{
-        console.log('when this has values we are gonna play the game');
-        if(checkGame(id)){
-            console.log('we got a live one');
+        console.log('check',count);
+        watch(id);
+        if(found) {
             clearInterval(checkInterval);
+            found = false;
             battle();
-        };
-        if(count > 10){
+        }
+        if(count > 20){
             clearInterval(checkInterval);
             mainMenu();
         }
         count++
-    },60000);
+    },5000);
+}
+
+watch = async(id) => {
+    if(await checkGame(id)){
+        console.log('we got a live one');
+        found = true;
+    };
 }
 
 checkGame = async(id) => {
@@ -130,12 +139,15 @@ checkGame = async(id) => {
     const idBN = web3.utils.toBN(id);
     try {
         game = (await master.methods.readSchedule(idBN).call());
-        console.log('game',game);
-        loadScore(game[5]);
         a = game[3];
     } catch (err) {
         console.log('checkGame error ',err);
     }
+    if(a) {
+        console.log('game in check game',game);
+        loadScore(game[5]);
+    }
+    console.log('a',a);
     return a;
 }
 
@@ -144,51 +156,58 @@ function loadScore(res) {
     for(let i = 0; i < score.length; i++){
         score[i] = res[i];
     }
+    console.log('score',score);
+}
+
+getUserExp = async() => {
+    let xp = 0;
+    for(let i = 0; i < 6; i++){
+        // console.log('wallet packs',walletPacks[i])
+        xp += parseInt(await checkExp(accounts[0],walletPacks[i]));
+    }
+    console.log('user exp', xp);
+    userXP = xp;
+    return xp;
 }
 
+checkExp = async(address,id) => {
+    let xp = 0;
+    try {
+        xp = await exp.methods.readExp(address,id).call();
+        // console.log('xp in checkExp',xp);
+    } catch (err) {
+        console.log(err);
+    }
+    return xp;
+}
 
+defeat = async() => {
+    //table = table - parseFloat(getBet());
+    win = -1;
+    await updateBar();
+}
+
+victory = async() => {
+    streak++;
+    win = 1;
+    await updateBar()
+}
 
 //function insertCoin() {}
 
 //function getProps() {}
 
 //function checkBack() {}
 
-////EVM method stuff
-
-mine = async() => {
-    helpers.mine();
-}
-
 ////JAVASCRIPT FAKE WEB3
 
-function fund(amt) {
+fund = async(amt) =>  {
     fakeTransaction(`pls pay ${amt} ETH to play`);
     //amt = parseFloat(amt);
     // playerWallet = playerWallet - amt;
     // purse = purse + amt;
     // table = table + amt;
-    updateBar();
-}
-
-function defeat() {
-    //table = table - parseFloat(getBet());
-    win = -1;
-    updateBar();
-}
-
-function victory() {
-    //bet = parseFloat(bet);
-    //table = table + bet;
-    streak++;
-    win = 1;
-    addExp(character);
-    // if(onChained){
-    //     try {
-    //         exp.methods.addValue()
-    //     }
-    // }
-    updateBar()
+    await updateBar();
 }
 
 fakeConnectWallet = async () => {
@@ -256,15 +275,6 @@ checkChain = async(w,i) => {
     }
 }
 
-checkExp = async(address,id) => {
-    let xp = 0;
-    try {
-        xp = await exp.methods.readExp(address,id).call();
-    } catch (err) {
-        console.log(err);
-    }
-}
-
 function vrf(num) {
     //console.log(score,'inside vrf');
     let ran = [];

public/style.css

@@ -176,7 +176,7 @@ html, body {
         width: 200px;
     }
     #player1, #player2 {
-        top: 50%;
+        top: 45%;
     }
     #chosen {
         left: 5%;