[dapp-high-roller] High Roller MVP Interactive

greenkeeper.json

@@ -4,9 +4,13 @@
       "packages": [
         "package.json",
         "packages/cf.js/package.json",
+        "packages/dapp-high-roller/package.json",
         "packages/contracts/package.json",
-        "packages/iframe-wallet-poc/package.json",
         "packages/machine/package.json",
+        "packages/node/package.json",
+        "packages/node-provider/package.json",
+        "packages/playground/package.json",
+        "packages/playground-poc/package.json",
         "packages/typescript-typings/package.json"
       ]
     }

package.json

@@ -6,9 +6,9 @@
   "scripts": {
     "build": "lerna run build --sort",
     "clean": "lerna run clean --parallel --no-bail",
-    "test": "lerna run test --stream",
+    "test": "lerna run test",
     "ganache": "ganache-cli --networkId ${npm_package_config_ganacheNetworkID} --verbose --gasLimit ${npm_package_config_ganacheGasLimit} --gasPrice ${npm_package_config_ganacheGasPrice} --port ${npm_package_config_ganachePort} --deterministic --account=\"${npm_package_config_unlockedAccount0},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount1},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount2},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount3},${npm_package_config_etherBalance}\" &> /dev/null &",
-    "ganache:ci": "ganache-cli --networkId ${npm_package_config_ganacheNetworkID} --verbose --gasLimit ${npm_package_config_ganacheGasLimit} --gasPrice ${npm_package_config_ganacheGasPrice} --port ${npm_package_config_ganachePort} --deterministic --account=\"${npm_package_config_unlockedAccount0},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount1},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount2},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount3},${npm_package_config_etherBalance}\"",
+    "ganache:ci": "ganache-cli --networkId ${npm_package_config_ganacheNetworkID} --gasLimit ${npm_package_config_ganacheGasLimit} --gasPrice ${npm_package_config_ganacheGasPrice} --port ${npm_package_config_ganachePort} --deterministic --account=\"${npm_package_config_unlockedAccount0},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount1},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount2},${npm_package_config_etherBalance}\" --account=\"${npm_package_config_unlockedAccount3},${npm_package_config_etherBalance}\"",
     "ganache:stop": "ps aux | grep ganache-cli | grep -v grep | awk '{print $2}' | xargs kill -9",
     "lint": "lerna run lint --parallel --no-bail",
     "lint:fix": "lerna run lint:fix --parallel --no-bail"

packages/dapp-high-roller/package.json

@@ -7,11 +7,12 @@
     "lint": "tslint -c tslint.json -p tsconfig.json",
     "lint:fix": "tslint -c tslint.json -p tsconfig.json --fix",
     "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll"
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "test:e2e": "stencil test --e2e"
   },
   "dependencies": {
     "@stencil/core": "~0.15.1",
-    "@stencil/router": "~0.3.0"
+    "@stencil/router": "0.2.6"
   },
   "repository": {
     "type": "git",
@@ -23,6 +24,7 @@
   },
   "homepage": "https://counterfactual.com",
   "devDependencies": {
+    "@stencil/sass": "^0.1.1",
     "@types/puppeteer": "1.10.0",
     "puppeteer": "1.8.0"
   }

packages/dapp-high-roller/src/components/app-game-player/app-game-player.e2e.ts

@@ -0,0 +1,31 @@
+import { newE2EPage } from "@stencil/core/testing";
+
+describe("app-game-player", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<app-game></app-game>");
+
+    const element = await page.find("app-game");
+    expect(element).toHaveClass("hydrated");
+  });
+  /*  it("has dice", async () => {
+    const page = await newE2EPage({ url: "/game" });
+
+    const profileElement = await page.find("app-root >>> app-game-player");
+    const element = profileElement.shadowRoot.querySelector(".player__dice");
+    expect(element).toBeDefined();
+  }); */
+  /*   describe("can receive props", () => {
+    it("can receive props", async () => {
+      const page = await newE2EPage({ url: "/game" });
+
+      const profileElement = await page.find("app-root >>> app-game-player");
+      profileElement.setProperty("myName", "Alon");
+
+      await page.waitForChanges();
+
+      const element = profileElement.shadowRoot.querySelector(".player__dice");
+      expect(element).toBeDefined();
+    });
+  }); */
+});

packages/dapp-high-roller/src/components/app-game-player/app-game-player.scss

@@ -0,0 +1,32 @@
+.player-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2.25rem;
+}
+.player-info__name {
+  font-size: 1.125rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.player-info__status {
+  display: flex;
+  align-items: center;
+}
+.player-info__status__color {
+  display: block;
+  width: 0.93rem;
+  height: 0.93rem;
+  border-radius: 50%;
+  background: #fff;
+}
+.player-info__status__color.black {
+  background: #424242;
+}
+.player-info__status__score {
+  display: block;
+  margin-left: 0.5rem;
+}
+.player__dice {
+  display: flex;
+  justify-content: space-around;
+}

packages/dapp-high-roller/src/components/app-game-player/app-game-player.spec.ts

@@ -0,0 +1,7 @@
+import { AppGamePlayer } from "./app-game-player";
+
+describe("app-game-player", () => {
+  it("should build", () => {
+    expect(new AppGamePlayer()).toBeTruthy();
+  });
+});

packages/dapp-high-roller/src/components/app-game-player/app-game-player.tsx

@@ -0,0 +1,41 @@
+import { Component, Prop } from "@stencil/core";
+
+import { PlayerType } from "../../enums/enums";
+
+const DICE_PATH = "./assets/images/dice/TYPE/Dice-TYPE-0";
+
+@Component({
+  tag: "app-game-player",
+  styleUrl: "app-game-player.scss",
+  shadow: true
+})
+export class AppGamePlayer {
+  @Prop() playerName: string = "";
+  @Prop() playerScore: number = 0;
+  @Prop() playerType: PlayerType = PlayerType.Dark;
+  @Prop() playerRoll: number[] = [1, 1];
+
+  render() {
+    const dicePath = DICE_PATH.replace(/TYPE/gi, this.playerType);
+    const colorClass = this.playerType === PlayerType.Dark ? "black" : "white";
+
+    return (
+      <div class="player">
+        <div class="player-info">
+          <span class={`player-info__name ${this.playerType}`}>
+            {this.playerName}
+          </span>
+          <div class="player-info__status">
+            <span class={`player-info__status__color ${colorClass}`} />
+            <span class="player-info__status__score">{this.playerScore}</span>
+          </div>
+        </div>
+
+        <div class="player__dice">
+          <img src={`${dicePath}${this.playerRoll[0]}.svg`} alt="" />
+          <img src={`${dicePath}${this.playerRoll[1]}.svg`} alt="" />
+        </div>
+      </div>
+    );
+  }
+}

packages/dapp-high-roller/src/components/app-game-status/app-game-status.e2e.ts

@@ -0,0 +1,18 @@
+import { newE2EPage } from "@stencil/core/testing";
+
+describe("app-game-status", () => {
+  it("renders", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<app-game-status></app-game-status>");
+
+    const element = await page.find("app-game-status");
+    expect(element).toHaveClass("hydrated");
+  });
+  /*   it("has divider", async () => {
+    const page = await newE2EPage({ url: "/game" });
+
+    const profileElement = await page.find("app-root >>> app-game-status");
+    const element = profileElement.shadowRoot.querySelector(".divider__status");
+    expect(element).toBeDefined();
+  }); */
+});