From f4acb49dd02651c7f5705aeebe0062aba4b10d49 Mon Sep 17 00:00:00 2001
From: R13 <rbentos@yahoo.com>
Date: Tue, 2 Jan 2024 20:39:28 -0300
Subject: [PATCH] Display duel results at end of animations

---
 .../src/pistols/components/ChallengeModal.tsx | 19 ++++++---------
 .../src/pistols/components/ChallengeTable.tsx |  2 +-
 client/src/pistols/components/Duel.tsx        | 23 ++++++++++++++-----
 client/src/pistols/hooks/useChallenge.tsx     | 22 +++++++++++++++++-
 client/src/pistols/three/game.tsx             |  1 +
 client/styles/index.scss                      |  8 +++++++
 6 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/client/src/pistols/components/ChallengeModal.tsx b/client/src/pistols/components/ChallengeModal.tsx
index db923559..e31ec329 100644
--- a/client/src/pistols/components/ChallengeModal.tsx
+++ b/client/src/pistols/components/ChallengeModal.tsx
@@ -3,12 +3,12 @@ import { useRouter } from 'next/navigation'
 import { Grid, Table, Modal, Divider, Header } from 'semantic-ui-react'
 import { useDojoAccount, useDojoSystemCalls } from '@/dojo/DojoContext'
 import { usePistolsContext } from '@/pistols/hooks/PistolsContext'
-import { useChallenge } from '@/pistols/hooks/useChallenge'
+import { useChallenge, useChallengeDescription } from '@/pistols/hooks/useChallenge'
 import { useDuelist } from '@/pistols/hooks/useDuelist'
 import { ProfileDescription } from '@/pistols/components/account/ProfileDescription'
 import { ProfilePicButton } from '@/pistols/components/account/ProfilePic'
 import { ActionButton } from '@/pistols/components/ui/Buttons'
-import { ChallengeState, ChallengeStateDescriptions, makeDuelUrl } from '@/pistols/utils/pistols'
+import { ChallengeState, makeDuelUrl } from '@/pistols/utils/pistols'
 import { AccountShort } from './ui/Account'
 
 const Row = Grid.Row
@@ -22,17 +22,12 @@ export default function ChallengeModal() {
 
   const { atYourDuels, atLiveDuels, atPastDuels, duelId, dispatchSetDuel, dispatchSetDuelist } = usePistolsContext()
 
-  const { state, message, duelistA, duelistB, winner, lords } = useChallenge(duelId)
+  const { state, message, duelistA, duelistB, lords } = useChallenge(duelId)
 
-  const { name: nameA, profilePic: profilePicA } = useDuelist(duelistA)
-  const { name: nameB, profilePic: profilePicB } = useDuelist(duelistB)
+  const { challengeDescription } = useChallengeDescription(duelId)
 
-  const _state = useMemo(() => {
-    let result = ChallengeStateDescriptions[state]
-    if (winner == duelistA) result += ' in favor of Challenger'
-    if (winner == duelistB) result += ' in favor of Challenged'
-    return result.replace('Challenger', nameA).replace('Challenged', nameB)
-  }, [state, winner, duelistA, duelistB, nameA, nameB])
+  const { profilePic: profilePicA } = useDuelist(duelistA)
+  const { profilePic: profilePicB } = useDuelist(duelistB)
 
   const isChallenger = useMemo(() => (duelistA == BigInt(account.address)), [duelistA, account])
   const isChallenged = useMemo(() => (duelistB == BigInt(account.address)), [duelistB, account])
@@ -98,7 +93,7 @@ export default function ChallengeModal() {
             </Row>
             <Row columns='equal' textAlign='center'>
               <Col>
-                <h3>{_state}</h3>
+                <h3>{challengeDescription}</h3>
               </Col>
             </Row>
           </Grid>
diff --git a/client/src/pistols/components/ChallengeTable.tsx b/client/src/pistols/components/ChallengeTable.tsx
index b2d56beb..d8c49bb1 100644
--- a/client/src/pistols/components/ChallengeTable.tsx
+++ b/client/src/pistols/components/ChallengeTable.tsx
@@ -138,7 +138,7 @@ function DuelItem({
   }
 
   return (
-    <Table.Row warning={isAwaiting} negative={isDraw || isCanceled} positive={isInProgress || winnerIsA || winnerIsB} textAlign='left' verticalAlign='middle' onClick={() => _gotoChallenge()}>
+    <Table.Row warning={isDraw} negative={isCanceled} positive={isInProgress || winnerIsA || winnerIsB} textAlign='left' verticalAlign='middle' onClick={() => _gotoChallenge()}>
       <Cell positive={winnerIsA} negative={winnerIsB}>
         <ProfilePicSquare profilePic={profilePicA} />
       </Cell>
diff --git a/client/src/pistols/components/Duel.tsx b/client/src/pistols/components/Duel.tsx
index 3dc87b6f..203bed3d 100644
--- a/client/src/pistols/components/Duel.tsx
+++ b/client/src/pistols/components/Duel.tsx
@@ -3,7 +3,7 @@ import { Grid, Segment, Icon, Step } from 'semantic-ui-react'
 import { useDojoAccount, useDojoSystemCalls } from '@/dojo/DojoContext'
 import { usePistolsContext, MenuKey } from '@/pistols/hooks/PistolsContext'
 import { useGameplayContext } from '@/pistols/hooks/GameplayContext'
-import { useChallenge } from '@/pistols/hooks/useChallenge'
+import { useChallenge, useChallengeDescription } from '@/pistols/hooks/useChallenge'
 import { useDuelist } from '@/pistols/hooks/useDuelist'
 import { useDuel } from '@/pistols/hooks/useDuel'
 import { useCommitMove } from '@/pistols/hooks/useCommitReveal'
@@ -21,10 +21,12 @@ const Col = Grid.Column
 export default function Duel({
   duelId
 }) {
-  const { dispatchSetDuel } = usePistolsContext()
-  const { state, isLive, message, duelistA, duelistB, winner, lords } = useChallenge(duelId)
   const { account } = useDojoAccount()
-  const { gameImpl } = useGameplayContext()
+  const { gameImpl, animated } = useGameplayContext()
+  const { dispatchSetDuel } = usePistolsContext()
+
+  const { isLive, isFinished, message, duelistA, duelistB } = useChallenge(duelId)
+  const { challengeDescription } = useChallengeDescription(duelId)
 
   useEffectOnce(() => {
     gameImpl?.resetScene()
@@ -36,6 +38,11 @@ export default function Duel({
     <>
       <div className='TavernTitle' style={{ maxWidth: '250px' }}>
         <h1 className='Quote'>{`“${message}”`}</h1>
+        {(isFinished && animated == AnimationState.Finished) &&
+          <Segment>
+            {challengeDescription}
+          </Segment>
+        }
       </div>
 
       <div className='DuelSideA'>
@@ -112,7 +119,7 @@ function DuelProgress({
   // console.log(`Round 1:`, round1)
   // console.log(`Round 2:`, round2)
 
-  const { gameImpl, animated, hasLoadedAudioAssets } = useGameplayContext()
+  const { gameImpl, animated, hasLoadedAudioAssets, dispatchAnimated } = useGameplayContext()
 
   //-------------------------
   // Duel progression
@@ -131,7 +138,11 @@ function DuelProgress({
 
   const isAnimatingPistols = useMemo(() => (currentStage == DuelStage.PistolsShootout), [currentStage])
   const isAnimatingBlades = useMemo(() => (currentStage == DuelStage.BladesClash), [currentStage])
-  // if (isA) console.log(`stage, animated`, currentStage, animated, isAnimatingPistols, isAnimatingBlades)
+  useEffect(() => {
+    if (currentStage == DuelStage.Finished) {
+      dispatchAnimated(AnimationState.Finished)
+    }
+  }, [currentStage])
 
   useEffect(() => {
     if (isA && gameImpl && isAnimatingPistols && hasLoadedAudioAssets) {
diff --git a/client/src/pistols/hooks/useChallenge.tsx b/client/src/pistols/hooks/useChallenge.tsx
index 0c315f8f..7c267b7c 100644
--- a/client/src/pistols/hooks/useChallenge.tsx
+++ b/client/src/pistols/hooks/useChallenge.tsx
@@ -3,8 +3,9 @@ import { Entity, HasValue, Has, getComponentValue, Component } from '@dojoengine
 import { useComponentValue, useEntityQuery } from "@dojoengine/react"
 import { useDojoComponents } from '@/dojo/DojoContext'
 import { bigintToEntity, bigintToHex, feltToString } from "../utils/utils"
-import { ChallengeState } from "@/pistols/utils/pistols"
+import { ChallengeState, ChallengeStateDescriptions } from "@/pistols/utils/pistols"
 import { useEntityKeys, useEntityKeysQuery } from '@/pistols/hooks/useEntityKeysQuery'
+import { useDuelist } from "./useDuelist"
 
 
 //-----------------------------
@@ -87,6 +88,7 @@ export const useChallenge = (duelId: bigint | string) => {
     challengeExists: (challenge != null),
     state,
     isLive: (state == ChallengeState.Awaiting || state == ChallengeState.InProgress),
+    isFinished: (state == ChallengeState.Resolved || state == ChallengeState.Draw),
     duelistA,
     duelistB,
     challenger: duelistA,
@@ -105,6 +107,24 @@ export const useChallenge = (duelId: bigint | string) => {
   }
 }
 
+export const useChallengeDescription = (duelId: bigint) => {
+  const { state, duelistA, duelistB, winner } = useChallenge(duelId)
+  const { name: nameA } = useDuelist(duelistA)
+  const { name: nameB } = useDuelist(duelistB)
+
+  const challengeDescription = useMemo(() => {
+    let result = ChallengeStateDescriptions[state]
+    if (winner == duelistA) result += ' in favor of Challenger'
+    if (winner == duelistB) result += ' in favor of Challenged'
+    return result.replace('Challenger', nameA).replace('Challenged', nameB)
+  }, [state, winner, duelistA, duelistB, nameA, nameB])
+
+  return {
+    challengeDescription,
+  }
+}
+
+
 
 //-----------------------------
 // Challenges by Duelist
diff --git a/client/src/pistols/three/game.tsx b/client/src/pistols/three/game.tsx
index 7d9e5055..2841b9c0 100644
--- a/client/src/pistols/three/game.tsx
+++ b/client/src/pistols/three/game.tsx
@@ -43,6 +43,7 @@ export enum AnimationState {
   None,
   Pistols,
   Blades,
+  Finished,
 }
 
 //-------------------------------------------
diff --git a/client/styles/index.scss b/client/styles/index.scss
index 28fbab2b..3ba2c5e3 100644
--- a/client/styles/index.scss
+++ b/client/styles/index.scss
@@ -491,6 +491,14 @@ $box-h: calc((100vh - $aspect-h) / 2);
   margin-top: 20px;
 }
 
+.DuelResults {
+  position: absolute;
+  top: 25%;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
 // <IconXXX>
 
 .Tooltip {