Iteration 3

app/package.json

@@ -15,7 +15,10 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
+    "bootstrap": "^4.5.3",
+    "jquery": "^3.5.1",
     "pouchdb-browser": "^7.2.2",
+    "truffle-contract": "^4.0.31",
     "web3": "^1.2.4"
   }
 }

app/src/gameData.js

@@ -0,0 +1,70 @@
+const PouchDB = require("pouchdb-browser");
+const { gameStatusEnum } = require("./gameUtil");
+const pouchDB = PouchDB.default.defaults();
+let db;
+
+init = () => {
+  db = new pouchDB("rps");
+};
+
+setGameData = (id, playerOne, playerTwo, choice, mask, maskTimestamp, stake, deadline, stakedFromWinnings) => {
+  const game = {
+    _id: id,
+    playerOne,
+    playerTwo,
+    choice,
+    mask,
+    maskTimestamp,
+    stake,
+    deadline,
+    stakedFromWinnings,
+  };
+  return game;
+};
+
+saveGame = async (game) => {
+  return await db.put(game);
+};
+
+getGame = async (gameId) => {
+  return await db.get(gameId);
+};
+
+updateGame = async (gameId, prop, val) => {
+  const game = await db.get(`${gameId}`);
+  game[`${prop}`] = val;
+  return await db.put(game);
+};
+
+deleteGame = async (gameId) => {
+  const game = await db.get(`${gameId}`);
+  return await db.remove(game);
+};
+
+deleteAllGames = async () => {
+  const rps = await fetchData();
+  if (rps !== undefined) {
+    rps.rows.map(async (x) => {
+      await deleteGame(x.id.toString());
+    });
+  }
+};
+
+fetchData = async function () {
+  try {
+    return await db.allDocs({ include_docs: true });
+  } catch (ex) {
+    console.error("fetchData error: ", ex);
+  }
+};
+
+module.exports = {
+  init,
+  setGameData,
+  saveGame,
+  deleteGame,
+  updateGame,
+  getGame,
+  fetchData,
+  deleteAllGames,
+};

app/src/gameState.js

@@ -0,0 +1,145 @@
+const gameData = require("./gameData");
+const gameUtil = require("./gameUtil");
+
+gameListRefresh = async function (activeAddress, blockTimeStamp) {
+  try {
+    $("#gamesTableContainer").show();
+    $("#noGamesBanner").hide().html(``);
+    const docs = await gameData.fetchData();
+
+    document.getElementById("gamesTableData").innerHTML =
+      docs !== undefined && docs.total_rows > 0
+        ? docs.rows
+            .filter((x) => x.doc.playerOne === activeAddress || x.doc.playerTwo === activeAddress)
+            .map((y) => gameUtil.createHtmlGameRow(y.doc, activeAddress, blockTimeStamp))
+            .join("\n")
+        : "";
+
+    if (document.getElementById("gamesTableData").innerHTML === "") {
+      $("#gamesTableContainer").hide();
+      $("#noGamesBanner").show().html(`<h6>You have no games</h6>`);
+    }
+  } catch (ex) {
+    console.error("fetchData error: ", ex);
+  }
+};
+
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip();
+});
+
+$("#playModal").on("show.bs.modal", function (event) {
+  let button = $(event.relatedTarget);
+  const gameId = button.data("gameid");
+  const gameStake = button.data("gamestake");
+  let modal = $(this);
+  modal.find("#play_gameId").val(gameId);
+  modal.find("#play_gamestake").val(`${gameStake}`);
+  modal.find(".modal-title").text("Play - Game = " + `${gameId.substring(0, 8)} ...`);
+});
+
+$("#revealModal").on("show.bs.modal", async function (event) {
+  let button = $(event.relatedTarget);
+  const gameId = button.data("gameid");
+  const revealer = button.data("revealer");
+
+  let modal = $(this);
+  modal.find("#reveal_gameId").val(gameId);
+  modal.find("#reveal_revealer").val(revealer);
+  modal.find(".modal-title").text("Reveal Game " + `${gameId.substring(0, 8)} ...`);
+
+  await displayRevealState(gameId, revealer);
+});
+
+$("#settleModal").on("show.bs.modal", async function (event) {
+  let button = $(event.relatedTarget);
+  const gameId = button.data("gameid");
+  let modal = $(this);
+  modal.find("#settle_gameId").val(button.data("gameid"));
+  modal.find(".modal-title").text("Settle Game " + `${gameId.substring(0, 8)} ...`);
+});
+
+$("#payoutModal").on("show.bs.modal", async function (event) {
+  const winnings = $("#winningsAmount").html();
+  $(this).find("#payout_balance").html(`You get : <strong> ${winnings} </strpng>`);
+});
+
+displayRevealState = async (gameId, revealer) => {
+  const game = await gameData.getGame(gameId);
+
+  document.getElementById(
+    "reveal_yourchoice_html"
+  ).innerHTML = `<button type="button" class="btn btn-lg btn-secondary rpsChoice"  value="${game.choiceOne}"">
+  ${getChoiceIcon(game.choiceOne)} </button>`;
+
+  document.getElementById(
+    "reveal_theirchoice_html"
+  ).innerHTML = `<button type="button" class="btn btn-lg btn-secondary rpsChoice"  value="${game.choiceTwo}"">
+    ${getChoiceIcon(game.choiceTwo)} </button>`;
+
+  document.getElementById("reveal_outcome_html").innerHTML = solveGame(game.choiceOne, game.choiceTwo);
+};
+
+solveGame = (revealer_choice, opponent_choice) => {
+  switch ((revealer_choice + 3 - opponent_choice) % 3) {
+    case 0:
+      return `<button type="button" class="btn btn-lg btn-secondary rpsChoice"><i class="fas fa-3x fa-equals"></i>Tie</button>`;
+    case 1:
+      return `<button type="button" class="btn btn-lg btn-success rpsChoice"><i class="fas fa-3x fa-check"></i>Win</button>`;
+    case 2:
+      return `<button type="button" class="btn btn-lg btn-danger rpsChoice"><i class="fas fa-3x fa-times"></i>Lose</button>`;
+    default:
+      return `<button type="button" class="btn btn-lg btn-secondary rpsChoice"></button>`;
+  }
+};
+
+getChoiceIcon = (choice) => {
+  switch (choice) {
+    case "0":
+      return `<i class="fas fa-question"></i>`;
+    case "1":
+      return `<i class="fas fa-3x fa-hand-rock" ></i>`;
+    case "2":
+      return `<i class="fas fa-3x fa-hand-paper"></i>`;
+    case "3":
+      return `<i class="fas fa-3x fa-hand-scissors"></i>`;
+    default:
+      return `<i class="fas fa-question"></i>`;
+  }
+};
+
+gamesCount = async function () {
+  try {
+    const docs = await gameData.fetchData();
+    const games = docs.rows.filter((x) => x.status !== gameUtil.gameStatusEnum.finished);
+    console.log("ALL games|", games);
+
+    // const games = (await gameData.fetchData()).rows;
+
+    const allGames = games.length;
+    const activeGames = games.filter((x) => x.doc.status !== gameUtil.gameStatusEnum.finished).length;
+    return [allGames, activeGames];
+    // return [1, 2];
+  } catch (ex) {
+    console.error("gamesCount error: ", ex);
+  }
+};
+
+accountGamesCount = async function (_account) {
+  try {
+    const docs = await gameData.fetchData();
+    const games = docs.rows.filter((x) => x.doc.playerOne === _account || x.doc.playerTwo === _account);
+    console.log("games|", games);
+    const allGames = games.length;
+    const activeGames = games.filter((x) => x.doc.status !== gameUtil.gameStatusEnum.finished).length;
+    return [allGames, activeGames];
+  } catch (ex) {
+    console.error("accountGamesCount error: ", ex);
+  }
+};
+
+module.exports = {
+  gameListRefresh,
+  gamesCount,
+  accountGamesCount,
+};

app/src/gameUtil.js

@@ -0,0 +1,130 @@
+const gameStatusEnum = { created: 1, played: 2, revealed: 3, playexpired: 4, revealexpired: 5, finished: 6 };
+
+getEvent = (minedTxRecepit, eventIndex) => minedTxRecepit.logs[eventIndex].topics;
+
+getGameLifeTimeSeconds = (days, hours, minutes) => {
+  return 3600 * 24 * days + 3600 * hours + 60 * minutes;
+};
+
+setTxProgress = async (progress, delay) => {
+  const percentVal = `${progress}%`;
+  setTimeout(
+    () => {
+      $(".progress-bar").css("width", percentVal);
+      $(".progress-bar").html(percentVal);
+    },
+    delay ? delay : 500
+  );
+
+  if (progress == "0") {
+    $(".progress").css("display", "none");
+  }
+};
+
+updateUI = async (txObj, txName, $txStatus) => {
+  if (!txObj.receipt.status) {
+    console.error("Wrong status");
+    console.error(txObj.receipt);
+    await $txStatus.html(`There was an error in the ${txName} transaction execution, status not 1`, `error`);
+  } else if (txObj.receipt.logs.length == 0) {
+    console.log("Empty logs");
+    console.log(txObj.receipt);
+    await $txStatus.html(`There was an error in the ${txName} transaction, missing expected event`, `error`);
+  } else {
+    await $txStatus.html(`${txName} transaction executed`, ``);
+  }
+};
+
+secondsToDisplayString = (seconds) => {
+  let days = Math.floor(seconds / (24 * 60 * 60));
+  seconds -= days * (24 * 60 * 60);
+  let hours = Math.floor(seconds / (60 * 60));
+  seconds -= hours * (60 * 60);
+  let minutes = Math.floor(seconds / 60);
+  seconds -= minutes * 60;
+
+  let dayStr = days === 0 ? `` : days === 1 ? `1d` : `${days}d`;
+  let hourStr = hours === 0 ? `` : hours === 1 ? `1h` : `${hours}h`;
+  let minStr = minutes === 0 ? `` : minutes === 1 ? `1m` : `${minutes}m`;
+  return `${dayStr} ${hourStr} ${minStr}`;
+};
+
+createHtmlGameRow = (game, activeAddress, blockTimeStamp) => {
+  return `<td>${activeAddress == game.playerOne ? game.playerTwoLabel : game.playerOneLabel}</td>
+    <td>${game.stakeInEther}</td>
+    <td>${makeExpiryButton(game.playDeadline, game.status, blockTimeStamp)}</td>
+    <td>${makeExpiryButton(game.revealDeadline, game.status, blockTimeStamp)}</td>
+    <td>${makeActionButton(game, activeAddress, blockTimeStamp)}</td>    
+  </tr>`;
+};
+
+makeExpiryButton = (deadline, status, blockTimeStamp) => {
+  const expiredStateElem = `<button class="btn btn-sm btn-warning" disabled><i class="fas fa-hourglass-end"></i>&nbsp Expired</button>`;
+  return status === gameStatusEnum.finished || deadline < blockTimeStamp
+    ? expiredStateElem
+    : `${secondsToDisplayString(deadline - blockTimeStamp)}`;
+};
+
+makeActionButton = (game, activeAddress, blockTimeStamp) => {
+  const settleActionButton = `<button class="btn btn-sm btn-warning" data-toggle="modal" data-target="#settleModal" 
+  data-gameid="${game._id}" data-settler="${activeAddress}"> 
+  <i class="fas fa-1x fa-gavel"></i>&nbsp Settle</a></button>`;
+  const playActionButton = `<button class="btn btn-sm btn-primary"  data-toggle="modal" data-target="#playModal" 
+  data-deadline="${game.playDeadline}" data-gamestake="${game.stakeInEther}" data-gameid="${game._id}">
+  <i class="fas fa-1x fa-door-open"></i>&nbsp &nbsp Play</a></button>`;
+  const waitActionButton = `<button class="btn btn-sm btn-secondary" disabled>Wait</a></button>`;
+  const expiredActionButton = `<button class="btn btn-sm btn-danger" disabled><i class="fas fa-hourglass-end"></i>&nbsp Expired</a></button>`;
+  const finishedActionButton = `<button class="btn btn-sm btn-danger" disabled><i class="fas fa-1x fa-dizzy"></i>&nbsp Deleted</a></button>`;
+  const revealActionButton = `<button class="btn btn-sm btn-success" data-toggle="modal" data-target="#revealModal" 
+  data-gameid="${game._id}" data-address="${activeAddress}">
+  <i class="fas fa-1x fa-eye"></i>&nbsp Reveal</a></button>`;
+
+  const isPlayerOne = activeAddress === game.playerOne;
+  const playHasExpired = game.playDeadline < blockTimeStamp;
+  const revealHasExpired = game.revealDeadline < blockTimeStamp;
+
+  if (revealHasExpired && game.status != gameStatusEnum.finished) {
+    return settleActionButton;
+  }
+  switch (game.status) {
+    case gameStatusEnum.created:
+      if (isPlayerOne) {
+        return playHasExpired ? (revealHasExpired ? settleActionButton : revealActionButton) : waitActionButton;
+      } else {
+        return playHasExpired ? finishedActionButton : playActionButton;
+      }
+
+    case gameStatusEnum.played:
+      if (isPlayerOne) {
+        return revealHasExpired ? settleActionButton : revealActionButton;
+      } else {
+        return revealHasExpired ? settleActionButton : waitActionButton;
+      }
+
+    case gameStatusEnum.playexpired:
+      return isPlayerOne ? (revealHasExpired ? settleActionButton : revealActionButton) : expiredActionButton;
+
+    case gameStatusEnum.revealexpired:
+      return settleActionButton;
+
+    case gameStatusEnum.finished:
+      return finishedActionButton;
+
+    case gameStatusEnum.expired:
+      return settleActionButton;
+
+    default:
+      return "";
+  }
+};
+
+module.exports = {
+  getEvent,
+  getGameLifeTimeSeconds,
+  setTxProgress,
+  updateUI,
+  secondsToDisplayString,
+  createHtmlGameRow,
+  makeActionButton,
+  gameStatusEnum,
+};