feat: create user selection transaction

client/.prettierignore

@@ -1,6 +1,7 @@
 *.md
 build
 coverage
+dist
 public
 package.json
 package-lock.json

client/src/App.vue

@@ -2,15 +2,18 @@
 import ChannelInitialization from './components/ChannelInitialization.vue';
 import TransactionsList from './components/TransactionsList.vue';
 import Header from './components/Header.vue';
-import RockPaperScissor from './components/RockPaperScissor.vue';
+import RockPaperScissors from './components/RockPaperScissors.vue';
 import PopUp from './components/PopUp.vue';
 import { useChannelStore } from './stores/channel';
+import { useGameStore } from './stores/game';
 import { onBeforeUnmount, onMounted, toRaw } from 'vue';
 import { getSdk, returnCoinsToFaucet } from './sdk/sdkService';
 import { GameChannel } from './sdk/GameChannel';
+import GameManager from './game/GameManager';
 import { AeSdk } from '@aeternity/aepp-sdk';
 
 const channelStore = useChannelStore();
+const gameStore = useGameStore();
 
 async function initChannel() {
   if (!channelStore.channel) {
@@ -21,6 +24,7 @@ async function initChannel() {
 
 onMounted(async () => {
   channelStore.channel = new GameChannel(await getSdk());
+  gameStore.gameManager = new GameManager();
 });
 
 onBeforeUnmount(async () => {
@@ -34,10 +38,12 @@ onBeforeUnmount(async () => {
   <PopUp />
   <Header />
   <ChannelInitialization
-    v-if="!channelStore.channel?.isOpen"
+    v-if="!channelStore.channel?.isOpen || !channelStore.channel?.contract"
     @initializeChannel="initChannel()"
   />
-  <RockPaperScissor v-if="channelStore.channel?.isOpen" />
+  <RockPaperScissors
+    v-if="channelStore.channel?.isOpen && channelStore.channel.contract"
+  />
   <TransactionsList />
 </template>
 

client/src/components/ChannelInitialization.vue

@@ -11,7 +11,9 @@ const emit = defineEmits(['initializeChannel']);
 const title = computed(() =>
   !openChannelInitiated.value
     ? 'Start the game by open state channel'
-    : 'Setting ‘on-chain’ operations...'
+    : !channelStore.channel?.isOpen
+    ? 'Setting ‘on-chain’ operations...'
+    : 'Waiting for contract to be deployed...'
 );
 
 const errorMessage = computed(() =>

client/src/components/RockPaperScissor.vue → client/src/components/RockPaperScissors.vue

@@ -1,22 +1,35 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useGameStore, Selections } from '../stores/game';
-import { usePopUpStore } from '../stores/popup';
+import { useGameStore } from '../stores/game';
+import { Selections } from '../game/GameManager';
 
 const gameStore = useGameStore();
-const popUpStore = usePopUpStore();
 
 const userHasSelected = computed(() => {
-  return gameStore.userSelection != Selections.none ? true : false;
+  return gameStore.gameManager?.getUserSelection() != Selections.none
+    ? true
+    : false;
 });
 const botIsMakingSelection = computed(() => {
-  return gameStore.userSelection != Selections.none
-    ? gameStore.botSelection === Selections.none
+  return gameStore.gameManager?.getUserSelection() != Selections.none
+    ? gameStore.gameManager?.getUserSelection() === Selections.none
       ? true
       : false
     : false;
 });
 
+const userSelection = computed(() =>
+  userHasSelected.value
+    ? Selections[gameStore.gameManager?.getUserSelection() ?? Selections.none]
+    : ''
+);
+
+const botSelection = computed(() =>
+  gameStore.gameManager?.botSelection != Selections.none
+    ? Selections[gameStore.gameManager?.botSelection ?? Selections.none]
+    : ''
+);
+
 const status = computed(() => {
   if (!userHasSelected.value) {
     return 'Choose one';
@@ -27,44 +40,33 @@ const status = computed(() => {
   }
 });
 
-function makeSelection(selection: Selections) {
+async function makeSelection(selection: Selections) {
   if (userHasSelected.value) return;
-  popUpStore.showPopUp({
-    title: Selections[selection].toUpperCase(),
-    text: 'Confirm your selection',
-    mainBtnText: 'Confirm',
-    secBtnText: 'Cancel',
-    mainBtnAction: () => {
-      gameStore.userSelect(selection);
-      popUpStore.resetPopUp();
+  try {
+    await gameStore.gameManager?.setUserSelection(selection);
+  } catch (e) {
+    console.info((e as Error).message);
+    return;
+  }
 
-      // ! temporary placeholder for bot selection
-      setTimeout(() => {
-        gameStore.botSelection = Math.floor(Math.random() * 3);
-      }, 2000);
-    },
-    secBtnAction: () => {
-      popUpStore.resetPopUp();
-    },
-  });
+  // ! temporary placeholder for bot selection
+  setTimeout(() => {
+    if (gameStore.gameManager) {
+      gameStore.gameManager.botSelection = Selections.rock;
+    }
+  }, 2000);
 }
 </script>
 
 <template>
-  <div class="rock-paper-scissor">
+  <div class="rock-paper-scissors">
     <div class="header">
       <div class="finalized-selection" data-testid="userSelection">
-        {{
-          gameStore.userSelection != 3
-            ? Selections[gameStore.userSelection]
-            : ''
-        }}
+        {{ userSelection }}
       </div>
       <h1 class="title">{{ status }}</h1>
       <div class="finalized-selection bot" data-testid="botSelection">
-        {{
-          gameStore.botSelection != 3 ? Selections[gameStore.botSelection] : ''
-        }}
+        {{ botSelection }}
       </div>
     </div>
     <div class="selections">
@@ -94,9 +96,9 @@ function makeSelection(selection: Selections) {
           'bot-selecting': botIsMakingSelection,
           'user-selecting': !userHasSelected,
         }"
-        @click="makeSelection(Selections.scissor)"
+        @click="makeSelection(Selections.scissors)"
       >
-        SCISSOR
+        SCISSORS
       </button>
     </div>
   </div>
@@ -197,7 +199,7 @@ function makeSelection(selection: Selections) {
     cursor: default;
   }
 }
-.rock-paper-scissor {
+.rock-paper-scissors {
   display: flex;
   flex-direction: column;
   justify-content: center;

client/src/game/GameManager.ts

@@ -0,0 +1,44 @@
+import { useChannelStore } from '../stores/channel';
+import { PopUpData } from '../stores/popup';
+import { sha256hash } from '@aeternity/aepp-sdk';
+
+export enum Selections {
+  rock = 'rock',
+  paper = 'paper',
+  scissors = 'scissors',
+  none = 'none',
+}
+
+export default class GameManager {
+  private userSelection: Selections = Selections.none;
+  botSelection: Selections = Selections.none;
+  private hashKey = '';
+
+  async setUserSelection(selection: Selections) {
+    if (selection === Selections.none) {
+      throw new Error('Selection should not be none');
+    }
+    const channelStore = useChannelStore();
+    const popupData: Partial<PopUpData> = {
+      title: Selections[selection].toUpperCase(),
+      text: 'Confirm your selection',
+    };
+
+    const result = await channelStore.channel?.callContract(
+      'provide_hash',
+      [this.hashSelection(selection)],
+      popupData
+    );
+    if (result?.accepted) this.userSelection = selection;
+    else throw new Error('Selection was not accepted');
+  }
+
+  hashSelection(selection: Selections): Buffer {
+    this.hashKey = Math.random().toString(16).substring(2, 8);
+    return sha256hash(selection + this.hashKey);
+  }
+
+  getUserSelection(): Selections {
+    return this.userSelection;
+  }
+}