Added fakePlay for simulating play results

gamba-labs · Sep 20, 2023 · 379e494 · 379e494
1 parent 7ae4dda
commit 379e494
Show file tree

Hide file tree

Showing 32 changed files with 312 additions and 189 deletions.
diff --git a/apps/demo/.env.example b/apps/demo/.env.example
@@ -1,2 +1,6 @@
+# Web3 connection
 GAMBA_SOLANA_RPC="http://127.0.0.1:8899"
 GAMBA_SOLANA_RPC_WS=
+
+# The address that should receive fees
+GAMBA_CREATOR_ADDRESS="DwRFGbjKbsEhUMe5at3qWvH7i8dAJyhhwdnFoZMnLVRV"
diff --git a/apps/demo/public/logo-2.svg b/apps/demo/public/logo-2.svg
diff --git a/apps/demo/src/components/Header.module.css b/apps/demo/src/components/Header.module.css
@@ -29,8 +29,10 @@
   align-items: center;
   gap: 1em;
   transition: background .2s;
+  border-radius: 5px;
   white-space: nowrap;
   padding: 5px 10px;
+  filter: drop-shadow(-1px 1px 1px #00000033)
 }
 
 .logo:hover {
@@ -40,10 +42,3 @@
 .logo > img {
   height: 30px;
 }
-
-.title {
-  display: none;
-  @media (min-width: 800px) {
-    display: block;
-  }
-}
diff --git a/apps/demo/src/components/Header.tsx b/apps/demo/src/components/Header.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
-import { NavButton } from './Button'
+import { NavLink } from 'react-router-dom'
 import styles from './Header.module.css'
 
 export const Header: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <div className={styles.wrapper}>
       <div>
         <div style={{ display: 'flex', gap: '10px' }}>
-          <NavButton variant="ghost" className={styles.logo} to="/">
-            <img src="/logo.svg" height="20px" />
-            <span className={styles.title}>Gamba Demo</span>
-          </NavButton>
+          <NavLink className={styles.logo} to="/">
+            <img alt="Gamba logo" src="/logo-2.svg" height="20px" />
+          </NavLink>
         </div>
         <div style={{ display: 'flex', gap: '10px' }}>
           {children}

diff --git a/apps/demo/src/games/Dice/App.tsx b/apps/demo/src/games/Dice/App.tsx
@@ -40,12 +40,12 @@ export default function Dice() {
       setRolling(true)
       sounds.dice.play()
 
-      await gamba.play({
+      const res = await gamba.play({
         bet,
         wager,
       })
 
-      const result = await gamba.nextResult()
+      const result = await res.result()
       setResultIndex(result.resultIndex)
 
       const win = result.payout > 0

diff --git a/apps/demo/src/games/HiLo/Hilo.tsx b/apps/demo/src/games/HiLo/Hilo.tsx
@@ -71,8 +71,7 @@ export default function HiLo() {
       if (claiming) return
       if (gamba.balances.user > 0) {
         setClaiming(true)
-        await gamba.methods.withdraw(gamba.balances.user)
-        await gamba.anticipate((state, prev) => state.user.balance < prev.user.balance)
+        await gamba.withdraw(gamba.balances.user)
       }
       sounds.finish.play({ playbackRate: .8 })
       setTimeout(() => {

diff --git a/apps/demo/src/games/Mines/Mines.tsx b/apps/demo/src/games/Mines/Mines.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import { GRID_SIZE, MINE_SELECT, PITCH_INCREASE_FACTOR, SOUND_FINISH, SOUND_LOSE, SOUND_TICK, SOUND_WIN, WAGER_OPTIONS } from './constants'
 import { GameConfig } from './types'
 import { generateGrid, revealAllMines, revealGold } from './utils'
-import { CellButton, Container, Grid, Levels, ResetButton, StatusBar } from './styles'
+import { CellButton, Container, Grid, Levels, StatusBar } from './styles'
 
 function Mines() {
   const gamba = useGamba()
@@ -55,8 +55,7 @@ function Mines() {
       setClaiming(true)
       const amountToWithdraw = Math.min(totalGain, gamba.user.balance)
       if (amountToWithdraw > 0) {
-        await gamba.methods.withdraw(amountToWithdraw)
-        await gamba.anticipate((state, prev) => state.user.balance < prev.user.balance)
+        await gamba.withdraw(amountToWithdraw)
         sounds.finish.play()
       }
       reset()
@@ -77,14 +76,14 @@ function Mines() {
     setLoading(true)
     setSelected(cellIndex)
     try {
-      await gamba.play({
+      const res = await gamba.play({
         bet,
         wager: totalGain || config.wager,
       })
 
       sounds.tick.play({ playbackRate: 1.5 })
 
-      const result = await gamba.nextResult()
+      const result = await res.result()
 
       sounds.tick.player.stop()
 
@@ -157,14 +156,14 @@ function Mines() {
       <Container>
         <StatusBar>
           <div>
+            <span>
+              Mines: {config.mines}
+            </span>
             {totalGain > 0 && (
               <span>
                 {formatLamports(totalGain)} +{Math.round(totalGain / config.wager * 100 - 100)}%
               </span>
             )}
-            <span>
-              Mines: {config.mines}
-            </span>
           </div>
         </StatusBar>
         <Levels>
@@ -174,7 +173,8 @@ function Mines() {
               if (level >= GRID_SIZE - config.mines) {
                 return (
                   <div key={i}>
-                    -
+                    <div>-</div>
+                    <div>-</div>
                   </div>
                 )
               }

diff --git a/apps/demo/src/games/Roulette/App.tsx b/apps/demo/src/games/Roulette/App.tsx
@@ -52,7 +52,10 @@ export default function Roulette() {
   const play = async () => {
     try {
       setSpinning(true)
-      const res = await gamba.play({ bet, wager })
+      const res = await gamba.play({
+        bet,
+        wager,
+      })
       sounds.play.play()
       const result = await res.result()
       addResult(result.resultIndex)
@@ -87,7 +90,7 @@ export default function Roulette() {
           >
             Clear
           </GameUi.Button>
-          <GameUi.Button variant="primary" onClick={play}>
+          <GameUi.Button variant="primary" disabled={!wager} onClick={play}>
             Spin
           </GameUi.Button>
         </GameUi.Group>

diff --git a/apps/demo/src/games/Roulette/Results.module.css b/apps/demo/src/games/Roulette/Results.module.css
@@ -1,7 +1,8 @@
-@keyframes identifier {
+@keyframes result-flash {
   from { background-color: white;}
   to { background-color: #292a307d;}
 }
+
 .wrapper {
   border-radius: 10px;
   background: #191c2fa1;
@@ -35,5 +36,5 @@
   width: 60px;
   justify-content: center;
   background: #FFFFFF11;
-  animation: identifier 1s;
+  animation: result-flash 1s;
 }
diff --git a/apps/demo/src/games/Roulette/Results.tsx b/apps/demo/src/games/Roulette/Results.tsx
@@ -14,7 +14,7 @@ export function Results() {
       <div className={styles.result} data-color={firstResultColor}>
         {spinning ? '..' : typeof firstResult === 'number' ? firstResult + 1 : '-'}
       </div>
-      {results.slice(spinning ? 0 : 1, spinning ? 9 : 10).map((index, i) => {
+      {results.slice(spinning ? 0 : 1, spinning ? 8 : 9).map((index, i) => {
         return (
           <div
             key={i}

diff --git a/apps/demo/src/games/Slots/index.tsx b/apps/demo/src/games/Slots/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
+import image from './logo.png'
 
 export default {
   name: 'Slots',
   short_name: 'slots',
   description: `
     Play and pray. At the top of the slot machine you can see your potential rewards. Always fair.
   `,
-  image: new URL('./logo.png', import.meta.url).href,
+  image,
   theme_color: '#d185ff',
   app: React.lazy(() => import('./App')),
 }
diff --git a/apps/demo/src/index.tsx b/apps/demo/src/index.tsx
@@ -29,7 +29,7 @@ function Root() {
       >
         <WalletProvider autoConnect wallets={wallets}>
           <WalletModalProvider>
-            <Gamba creator="DwRFGbjKbsEhUMe5at3qWvH7i8dAJyhhwdnFoZMnLVRV">
+            <Gamba creator={import.meta.env.GAMBA_CREATOR_ADDRESS}>
               <App />
             </Gamba>
           </WalletModalProvider>

diff --git a/apps/demo/src/ui/ErrorHandlers.tsx b/apps/demo/src/ui/ErrorHandlers.tsx
@@ -22,8 +22,7 @@ function InitUserModal({ onClose }: {onClose: () => void}) {
   const create = async () => {
     try {
       setCreating(true)
-      await gamba.methods.initializeAccount()
-      await gamba.anticipate((state) => state.user.created)
+      await gamba.initializeAccount()
       setInitUser(true)
     } catch {
       onClose()
@@ -113,13 +112,15 @@ export function ErrorHandlers() {
           <p>
             {genericError.message}
           </p>
-          <div style={{ width: '100%', padding: '30px', fontSize: '12px', fontFamily: 'monospace' }}>
-            {genericError.logs?.map((x, i) => (
-              <Fragment key={i}>
-                {x}<br />
-              </Fragment>
-            ))}
-          </div>
+          {genericError.logs && (
+            <div style={{ width: '100%', padding: '30px', fontSize: '12px', fontFamily: 'monospace' }}>
+              {genericError.logs.map((x, i) => (
+                <Fragment key={i}>
+                  {x}<br />
+                </Fragment>
+              ))}
+            </div>
+          )}
         </Modal>
       )}
       {lowBalanceModal && (

diff --git a/apps/demo/src/ui/Game.tsx b/apps/demo/src/ui/Game.tsx
@@ -10,7 +10,6 @@ import { Home } from './Home'
 function Splash() {
   const game = GameUi.useCurrentGame()
 
-  return null
   return (
     <div className={styles.splash}>
       <img src={game.image} />
@@ -39,7 +38,7 @@ function Controls() {
   return (
     <>
       {showInfo && (
-        <Modal onClose={() => setShowInfo(false)}>
+        <Modal>
           <h1 style={{ textAlign: 'center' }}>
             <img height="100px" src={game.image} alt={game.name} />
           </h1>

diff --git a/apps/demo/src/ui/Home.module.css b/apps/demo/src/ui/Home.module.css
@@ -8,7 +8,7 @@
 }
 
 .banner {
-  background-image: linear-gradient(0deg, var(--bg-color) 0%, #04051700 100%), url(/banner.png);
+  background-image: linear-gradient(0deg, var(--bg-color) 0%, #04051700 150%), url(/banner.png);
   background-size: cover;
   background-position: center;
   padding-top: 60px;

diff --git a/apps/demo/src/ui/RecentPlays.module.css b/apps/demo/src/ui/RecentPlays.module.css
@@ -30,6 +30,9 @@
 
 .who {
   color: #a079ff;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .amount.win {

diff --git a/apps/demo/src/ui/RecentPlays.tsx b/apps/demo/src/ui/RecentPlays.tsx
@@ -46,7 +46,8 @@ function RecentPlay({ time, signature, result, isSelf }: RecentPlayProps) {
     <a className={styles.play} href={`${VERIFY_URL}/${signature}`} target="_blank" rel="noreferrer">
       <div>
         <span className={styles.who}>
-          {isSelf ? 'You ' : 'Someone '}
+          {isSelf ? 'You' : 'Someone'}
+          {/* {result.player.toBase58()} */}
         </span>
         made
         <span>
@@ -74,13 +75,13 @@ export function RecentPlays() {
   return (
     <Section title="Recent Plays">
       <div className={styles.container}>
-        {events.map((transaction) => (
+        {events.map(({ signature, event, time }) => (
           <RecentPlay
-            key={transaction.signature}
-            time={transaction.time}
-            signature={transaction.signature}
-            result={transaction.event.gameResult}
-            isSelf={transaction.event.gameResult.player.equals(gamba.wallet.publicKey)}
+            key={signature}
+            time={time}
+            signature={signature}
+            result={event.gameResult}
+            isSelf={event.gameResult.player.equals(gamba.wallet.publicKey)}
           />
         ))}
         {!events.length && Array.from({ length: 5 }).map((_, i) => (