navigate('/new-game')}
+ className='w-fit self-center'
>
NEW GAME
@@ -134,10 +106,7 @@ function Home() {
{' '}
{/* Adding px-4 back here to maintain padding for the bottom button */}
-
+
Past Games
diff --git a/src/pages/NewGame/_01_NewGame.tsx b/src/pages/NewGame/_01_NewGame.tsx
index 5e917f3..91cb722 100644
--- a/src/pages/NewGame/_01_NewGame.tsx
+++ b/src/pages/NewGame/_01_NewGame.tsx
@@ -1,11 +1,10 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import Nav from '../../components/Nav';
-import PageHeader from '../../components/PageHeader';
-import Button from '../../components/Button';
import { proposeGameInputsAtom, proposeGameStepAtom } from './index';
import { useAtom } from 'jotai';
import { aleoAddressRegex } from '../../state/game_states';
import { useAccount } from '@puzzlehq/sdk';
+import { Banner } from '../../components/Banner';
+import { useNavigate } from 'react-router-dom';
function NewGame() {
const [inputs, setInputs] = useAtom(proposeGameInputsAtom);
@@ -14,29 +13,43 @@ function NewGame() {
const opponent = inputs.opponent;
+ const navigate = useNavigate();
+
return (
-
-
-
-
{
- setInputs({ ...inputs, opponent: e.target.value })
+
+
+ Choose yer
+
+
+ }
+ onClickLeft={() => {
+ navigate('/');
}}
+ onClickRight={() => setStep('2_HideTreasure')}
+ rightDisabled={
+ !aleoAddressRegex.test(inputs.opponent ?? '') ||
+ inputs.opponent === account.address
+ }
+ step={0}
+ totalSteps={5}
/>
-
- setStep('2_HideAlex')}
- color='green'
- disabled={!aleoAddressRegex.test(inputs.opponent ?? '') || inputs.opponent === account.address}
- >
- NEXT
-
);
}
diff --git a/src/pages/NewGame/_02_HideAlex.tsx b/src/pages/NewGame/_02_HideAlex.tsx
deleted file mode 100644
index 51a82c5..0000000
--- a/src/pages/NewGame/_02_HideAlex.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import Nav from '../../components/Nav';
-import ChooseAlexLocation from '../../components/ChooseAlexLocation';
-import PageHeader from '../../components/PageHeader';
-import Button from '../../components/Button';
-import { useAtom } from 'jotai';
-import { proposeGameInputsAtom, proposeGameStepAtom } from './index';
-import { Answer } from '../../state/game_states';
-
-function HideAlex() {
- const [inputs, setInputs] = useAtom(proposeGameInputsAtom);
- const [_, setStep] = useAtom(proposeGameStepAtom);
-
- return (
-
-
-
-
-
setInputs({...inputs, answer})}
- answer={inputs.answer as Answer}
- hiding={true}
- />
-
- setStep('3_StartWager')}
- disabled={!inputs.answer}
- color='green'
- >
- NEXT
-
-
- );
-}
-
-export default HideAlex;
diff --git a/src/pages/NewGame/_02_HideTreasure.tsx b/src/pages/NewGame/_02_HideTreasure.tsx
new file mode 100644
index 0000000..10f51e8
--- /dev/null
+++ b/src/pages/NewGame/_02_HideTreasure.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ChooseTreasureLocation from '../../components/ChooseTreasureLocation';
+import { useAtom } from 'jotai';
+import { proposeGameInputsAtom, proposeGameStepAtom } from './index';
+import { Answer } from '../../state/game_states';
+import { Banner } from '../../components/Banner';
+
+function HideTreasure() {
+ const [inputs, setInputs] = useAtom(proposeGameInputsAtom);
+ const [_, setStep] = useAtom(proposeGameStepAtom);
+
+ return (
+
+
+ Hide the
+
+ setInputs({
+ ...inputs,
+ player_one_answer_readable: answer,
+ player_one_answer: answer === Answer.left ? '0field' : '1field',
+ })
+ }
+ answer={inputs.player_one_answer_readable as Answer}
+ hiding={true}
+ />
+ }
+ step={1}
+ totalSteps={5}
+ onClickLeft={() => {
+ setStep('1_NewGame');
+ setInputs({});
+ }}
+ onClickRight={() => {
+ setStep('3_StartWager');
+ }}
+ rightDisabled={
+ !inputs.player_one_answer || !inputs.player_one_answer_readable
+ }
+ />
+
+ );
+}
+
+export default HideTreasure;
diff --git a/src/pages/NewGame/_03_StartWager.tsx b/src/pages/NewGame/_03_StartWager.tsx
index a329376..6f9df9a 100644
--- a/src/pages/NewGame/_03_StartWager.tsx
+++ b/src/pages/NewGame/_03_StartWager.tsx
@@ -1,11 +1,9 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import Nav from '../../components/Nav';
-import PageHeader from '../../components/PageHeader';
-import Button from '../../components/Button';
import { proposeGameInputsAtom, proposeGameStepAtom } from './index';
import { usePieces } from '../../state/usePieces';
import { useMemo, useState } from 'react';
import { useAtom } from 'jotai';
+import { Banner } from '../../components/Banner';
function StartWager() {
const { availableBalance, largestPiece } = usePieces();
@@ -23,44 +21,69 @@ function StartWager() {
setError('You do not have enough Pieces');
} else {
setError(undefined);
- setInputs({ ...inputs, amount: input.toString(), wager_record: largestPiece });
+ setInputs({
+ ...inputs,
+ wager_amount: input.toString(),
+ wager_record: largestPiece,
+ });
}
setWager(input);
};
const { inputTextColor, inputOpacity } = useMemo(() => {
return {
- inputTextColor: wager !== 0 ? 'text-primary-green' : '',
- inputOpacity: wager === 0 ? 'opacity-40' : ''
+ inputTextColor: wager !== 0 ? 'text-primary' : '',
+ inputOpacity: wager === 0 ? 'opacity-40' : '',
};
}, [wager]);
- const isDisabled = wager === undefined || wager <= 0 || wager > availableBalance || !largestPiece || !wagerRecord;
+ const isDisabled =
+ wager === undefined ||
+ wager <= 0 ||
+ wager > availableBalance ||
+ !largestPiece ||
+ !wagerRecord;
return (
-
-
+ Set the
+
+ {'Available balance: ' + availableBalance} Pieces
+
+ {error && {error}
}
+
+ }
+ step={2}
+ totalSteps={5}
+ onClickLeft={() => {
+ setStep('2_HideTreasure');
+ setInputs({
+ ...inputs,
+ wager_record: undefined,
+ wager_amount: undefined,
+ });
+ }}
+ onClickRight={() => setStep('4_ConfirmStartGame')}
+ rightDisabled={isDisabled || !!error}
/>
- {'Available balance: ' + availableBalance} Pieces
- {error && {error}
}
-
- setStep('4_ConfirmStartGame')}
- disabled={isDisabled || !!error}
- color='green'
- >
- NEXT
-
-
+
);
}
diff --git a/src/pages/NewGame/_04_ConfirmStartGame.tsx b/src/pages/NewGame/_04_ConfirmStartGame.tsx
index f172b9c..d77b53e 100644
--- a/src/pages/NewGame/_04_ConfirmStartGame.tsx
+++ b/src/pages/NewGame/_04_ConfirmStartGame.tsx
@@ -1,23 +1,36 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import Opponent from '../../components/Opponent';
-import PageHeader from '../../components/PageHeader';
import Wager from '../../components/Wager';
-import SelectedAlexLocation from '../../components/SelectedAlexLocation';
-import Button from '../../components/Button';
+import SelectedTreasureLocation from '../../components/SelectedTreasureLocation';
import { useAtom } from 'jotai';
-import { eventIdAtom, proposeGameInputsAtom, proposeGameStepAtom } from "./index"
-import { GAME_FUNCTIONS, GAME_PROGRAM_ID, ProposeGameInputs, stepFees } from '../../state/manager';
-import { createSharedState, requestCreateEvent, requestSignature, useAccount } from '@puzzlehq/sdk';
+import {
+ eventIdAtom,
+ proposeGameInputsAtom,
+ proposeGameStepAtom,
+} from './index';
+import {
+ GAME_FUNCTIONS,
+ GAME_PROGRAM_ID,
+ ProposeGameInputs,
+ stepFees,
+} from '../../state/manager';
+import {
+ createSharedState,
+ requestCreateEvent,
+ requestSignature,
+ useAccount,
+} from '@puzzlehq/sdk';
import { EventType } from '@puzzlehq/types';
import { useState } from 'react';
-import jsyaml from 'js-yaml';
+import jsyaml from 'js-yaml';
import { Answer } from '../../state/game_states';
+import { Banner } from '../../components/Banner';
const messageToSign = '1234567field';
enum ConfirmStep {
Signing,
- RequestingEvent
+ RequestingEvent,
}
function ConfirmStartGame() {
@@ -26,8 +39,8 @@ function ConfirmStartGame() {
const [confirmStep, setConfirmStep] = useState(ConfirmStep.Signing);
const opponent = inputs.opponent ?? '';
- const answer = inputs.answer;
- const amount = inputs.amount ?? 0;
+ const answer = inputs.player_one_answer_readable;
+ const amount = inputs.wager_amount ?? 0;
const { account } = useAccount();
@@ -47,16 +60,27 @@ function ConfirmStartGame() {
const address = sharedStateResponse.data.address;
const signature = await requestSignature({ message: messageToSign });
-
+
setInputs({ ...inputs, seed, game_multisig: address });
- if (inputs.opponent && inputs.wager_record && inputs.amount && inputs.answer && signature && signature.messageFields && signature.signature) {
+ if (
+ inputs.opponent &&
+ inputs.wager_record &&
+ inputs.wager_amount &&
+ inputs.player_one_answer &&
+ signature &&
+ signature.messageFields &&
+ signature.signature
+ ) {
setConfirmStep(ConfirmStep.RequestingEvent);
-
+
const fields = Object(jsyaml.load(signature.messageFields));
- const proposalInputs: ProposeGameInputs = {
+ const proposalInputs: Omit<
+ ProposeGameInputs,
+ 'player_one_answer_readable'
+ > = {
wager_record: inputs.wager_record,
- amount: inputs.amount + 'u64',
+ wager_amount: inputs.wager_amount + 'u64',
sender_address: account.address,
challenger: account.address,
opponent: inputs.opponent,
@@ -68,7 +92,7 @@ function ConfirmStartGame() {
message_5: fields.field_5,
signature: signature.signature,
nonce: messageToSign, /// todo - make this random
- answer: inputs.answer === Answer.InTheWeeds ? '0field' : '1field',
+ player_one_answer: inputs.player_one_answer,
seed,
};
const createEventResponse = await requestCreateEvent({
@@ -76,7 +100,7 @@ function ConfirmStartGame() {
programId: GAME_PROGRAM_ID,
functionId: GAME_FUNCTIONS.propose_game,
fee: stepFees.propose_game,
- inputs: Object.values(proposalInputs)
+ inputs: Object.values(proposalInputs),
});
if (createEventResponse.error) {
setError(createEventResponse.error);
@@ -91,38 +115,54 @@ function ConfirmStartGame() {
setConfirmStep(ConfirmStep.Signing);
};
- const disabled = [inputs.opponent, inputs.wager_record, inputs.amount, inputs.answer].includes(undefined);
+ const disabled = [
+ inputs.opponent,
+ inputs.wager_record,
+ inputs.wager_amount,
+ inputs.player_one_answer_readable,
+ ].includes(undefined);
return (
-
-
-
-
- You chose to hide Alex {answer}!
+
+
+ Review
+
+
+
+ {answer && (
+
+
+
+ You chose to hide the Treasure {answer}!
+
+
+ )}
+ {!loading ? (
+ ''
+ ) : confirmStep === ConfirmStep.Signing ? (
+
SIGN MESSAGE
+ ) : (
+
CREATE EVENT
+ )}
- }
-
-
-
- {!loading ? 'PROPOSE GAME' : confirmStep === ConfirmStep.Signing ? 'SIGN MESSAGE' : 'CREATE EVENT'}
-
- setStep('5_GameStarted')}
- color='gray'
- >
- BACK
-
-
-
+ }
+ step={3}
+ totalSteps={5}
+ onClickLeft={() => setStep('3_StartWager')}
+ onClickRight={createProposeGameEvent}
+ rightDisabled={disabled || loading}
+ />
+
);
}
diff --git a/src/pages/NewGame/_05_GameStarted.tsx b/src/pages/NewGame/_05_GameStarted.tsx
index e9ebf07..9ff31fb 100644
--- a/src/pages/NewGame/_05_GameStarted.tsx
+++ b/src/pages/NewGame/_05_GameStarted.tsx
@@ -2,29 +2,58 @@
import GameInfo from '../../components/GameInfo';
import Button from '../../components/Button';
import { useAtom } from 'jotai';
-import { eventIdAtom, proposeGameInputsAtom } from './index';
+import {
+ eventIdAtom,
+ proposeGameInputsAtom,
+ proposeGameStepAtom,
+} from './index';
+import { NakedBanner } from '../../components/Banner';
+import { useNavigate } from 'react-router-dom';
-function GameStarted(props: { done: () => void }) {
- const [inputs] = useAtom(proposeGameInputsAtom);
+function GameStarted() {
+ const [inputs, setInput] = useAtom(proposeGameInputsAtom);
+ const [step, setStep] = useAtom(proposeGameStepAtom);
+ const navigate = useNavigate();
const game_multisig = inputs.game_multisig;
const [eventId] = useAtom(eventIdAtom);
return (
-
-
- {game_multisig && eventId &&
}
-
-
-
- GO HOME
-
-
-
+
+
+ Game
+
+
+ {
+ setInput({});
+ setStep('1_NewGame');
+ navigate('/');
+ }}
+ >
+ Go home
+
+
+
+ }
+ />
+
);
}
diff --git a/src/pages/NewGame/index.tsx b/src/pages/NewGame/index.tsx
index f7fe008..382fd84 100644
--- a/src/pages/NewGame/index.tsx
+++ b/src/pages/NewGame/index.tsx
@@ -1,37 +1,35 @@
import NewGamePage from './_01_NewGame';
-import HideAlex from "./_02_HideAlex";
-import StartWager from "./_03_StartWager";
-import ConfirmStartGame from "./_04_ConfirmStartGame";
-import GameStarted from "./_05_GameStarted";
-import { ProposeGameInputs } from "../../state/manager";
+import HideTreasure from './_02_HideTreasure';
+import StartWager from './_03_StartWager';
+import ConfirmStartGame from './_04_ConfirmStartGame';
+import GameStarted from './_05_GameStarted';
+import { ProposeGameInputs } from '../../state/manager';
import { atom, useAtom } from 'jotai';
-import { useNavigate } from 'react-router-dom';
-export type Step = '1_NewGame' | '2_HideAlex' | '3_StartWager' | '4_ConfirmStartGame' | '5_GameStarted';
-export const proposeGameInputsAtom = atom
>({opponent: ''});
+export type Step =
+ | '1_NewGame'
+ | '2_HideTreasure'
+ | '3_StartWager'
+ | '4_ConfirmStartGame'
+ | '5_GameStarted';
+export const proposeGameInputsAtom = atom>({
+ opponent: '',
+});
export const proposeGameStepAtom = atom('1_NewGame');
export const eventIdAtom = atom(undefined);
const NewGame = () => {
- const navigate = useNavigate();
- const [_, setInput] = useAtom(proposeGameInputsAtom);
- const [step, setStep] = useAtom(proposeGameStepAtom);
-
- const done = () => {
- setInput({});
- setStep('1_NewGame');
- navigate('/');
- }
+ const [step] = useAtom(proposeGameStepAtom);
return (
-
+
{step === '1_NewGame' &&
- )
-}
+ );
+};
-export default NewGame
\ No newline at end of file
+export default NewGame;
diff --git a/src/pages/Renege/_01_Renege.tsx b/src/pages/Renege/_01_Renege.tsx
index 955e656..b349248 100644
--- a/src/pages/Renege/_01_Renege.tsx
+++ b/src/pages/Renege/_01_Renege.tsx
@@ -8,17 +8,22 @@ import { useRenegeStore } from './store';
const RenegeGame = () => {
const navigate = useNavigate();
- const [opponent, wager, renege, close] = useRenegeStore((state) => [state.opponent, state.wager, state.renege, state.close]);
+ const [opponent, wager, renege, close] = useRenegeStore((state) => [
+ state.opponent,
+ state.wager,
+ state.renege,
+ state.close,
+ ]);
return (
-
+
{
await renege();
navigate('/');
diff --git a/src/pages/Renege/store.tsx b/src/pages/Renege/store.tsx
index 33f8a4f..46d193b 100644
--- a/src/pages/Renege/store.tsx
+++ b/src/pages/Renege/store.tsx
@@ -1,5 +1,5 @@
import { create } from 'zustand';
-import { persist } from 'zustand/middleware'
+import { persist } from 'zustand/middleware';
export enum Step {
_01_Claim,
@@ -15,24 +15,23 @@ type RenegeStore = {
};
export const useRenegeStore = create()(
- persist((set) => ({
- opponent: undefined,
- wager: undefined,
- initialize: (opponent: string, wager: number) => {
- set({ opponent, wager });
- },
- renege: async () => {
-
- },
- close: () => {
- set({
- opponent: '',
- wager: 0,
- });
- },
- }),
+ persist(
+ (set) => ({
+ opponent: undefined,
+ wager: undefined,
+ initialize: (opponent: string, wager: number) => {
+ set({ opponent, wager });
+ },
+ renege: async () => {},
+ close: () => {
+ set({
+ opponent: '',
+ wager: 0,
+ });
+ },
+ }),
{
- name: 'renege'
+ name: 'renege',
}
)
);
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 13e7667..b5d90db 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -1,56 +1,49 @@
-import { useConnect, useAccount } from '@puzzlehq/sdk';
-import rightImageSrc from '../assets/alex_mic_left_tilt.png';
-import leftImageSrc from '../assets/alex_mic_right_tilt.png';
-import bottomImageSrc from '../assets/alexbottom.png';
-import { useNavigate } from 'react-router-dom';
-import { useEffect, } from 'react';
+import { useAccount, useConnect } from '@puzzlehq/sdk';
+import swaggers from '../assets/swaggers.png';
import Button from '../components/Button.js';
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
export const Welcome = () => {
const navigate = useNavigate();
- const { account } = useAccount();
- const { loading, connect } = useConnect();
+ const { loading: accountLoading, account } = useAccount();
+ const { loading: connectLoading, connect } = useConnect();
useEffect(() => {
if (account) {
- navigate('/');
+ navigate("/home");
}
- }, [account, navigate]);
+ }, [account]);
return (
-
-
-
+
+
-
- WHERE'S
+
+
+ TREASURE
+
-
- A thrilling game showcasing the power of Aleo and the Puzzle
- multiparty privacy stack through a wager between friends!
+
+ Arhhh! Pirate Leo the Lion hid his Puzzle Piece treasure on Aleo! Use
+ your Puzzle Pieces to try to find the correct chests where he hid his
+ treasure!
- {loading ? 'Loading...' : loading ? 'Connecting...' : 'Play!'}
+ {accountLoading ? 'Loading...' : connectLoading ? 'Connecting...' : 'Connect Wallet'}
-
);
-};
\ No newline at end of file
+};
diff --git a/src/state/game_states.ts b/src/state/game_states.ts
index 7a64404..f7fb21d 100644
--- a/src/state/game_states.ts
+++ b/src/state/game_states.ts
@@ -46,8 +46,8 @@ type GameState =
export default GameState;
export enum Answer {
- InTheWeeds = 'In the Weeds',
- BehindTheBuilding = 'Behind the Building'
+ left = 'on the left',
+ right = 'on the right',
}
-export const aleoAddressRegex = /^aleo1.{58}$/i;
\ No newline at end of file
+export const aleoAddressRegex = /^aleo1.{58}$/i;
diff --git a/src/state/manager.ts b/src/state/manager.ts
index 8d3bb73..f69c770 100644
--- a/src/state/manager.ts
+++ b/src/state/manager.ts
@@ -1,6 +1,6 @@
-import { Record } from '@puzzlehq/sdk';
+import { RecordWithPlaintext } from '@puzzlehq/sdk';
import { Answer } from './game_states';
-import _ from 'lodash'
+import _ from 'lodash';
export const GAME_PROGRAM_ID = 'wheres_alex_v001.aleo';
@@ -10,7 +10,7 @@ export const GAME_FUNCTIONS = {
set_wager: 'set_wager',
reveal_answer: 'reveal_answer',
finish_game: 'finish_game',
-}
+};
/// todo - update these
export const stepFees = {
@@ -24,8 +24,8 @@ export const stepFees = {
export type LoadingStatus = 'idle' | 'loading' | 'success' | 'error';
/// note: def more to come here
-export type GameStep =
- 'proposed'
+export type GameStep =
+ | 'proposed'
| 'waitingAccept'
| 'accepted'
| 'waitingReveal'
@@ -40,11 +40,11 @@ export type Game = {
wager: number;
eventIds?: string[];
-}
+};
export type ProposeGameInputs = {
- wager_record: Record;
- amount: string;
+ wager_record: RecordWithPlaintext;
+ wager_amount: string;
sender_address: string;
challenger: string;
opponent: string;
@@ -53,37 +53,38 @@ export type ProposeGameInputs = {
message_2: string;
message_3: string;
message_4: string;
- message_5: string;
+ message_5: string;
signature: string;
nonce: string;
- answer: string;
+ player_one_answer: '0field' | '1field';
+ player_one_answer_readable: Answer;
seed: string;
-}
+};
// used for submit wager and accept game
export type AcceptGameInputs = {
eventIdWager: string;
eventIdAccept: string;
- gameRecord: Record;
- playerOneClaimRecord: Record;
- playerTwoClaimRecord: Record;
- puzz_piece_stake_one: Record;
- puzz_piece_stake_two: Record;
+ gameRecord: RecordWithPlaintext;
+ playerOneClaimRecord: RecordWithPlaintext;
+ playerTwoClaimRecord: RecordWithPlaintext;
+ puzz_piece_stake_one: RecordWithPlaintext;
+ puzz_piece_stake_two: RecordWithPlaintext;
player_two_answer: '0field' | '1field';
player_two_answer_readable: Answer;
game_address: string;
opponent: string;
- wagerAmount: string;
- wagerRecord: string;
-}
+ wager_amount: string;
+ wager_record: string;
+};
export type RevealAnswerInputs = {
- AnswerRecord: Record;
+ AnswerRecord: RecordWithPlaintext;
PieceStakeOutcome: string;
-}
+};
export type FinishGameInputs = {
GameStateRevealedFinish: string;
GameStateAwaitFinish: string;
- PieceJointStake: Record;
- PieceTimeClaim: Record;
-}
\ No newline at end of file
+ PieceJointStake: RecordWithPlaintext;
+ PieceTimeClaim: RecordWithPlaintext;
+};
diff --git a/src/state/store.ts b/src/state/store.ts
index 85498a7..b2df745 100644
--- a/src/state/store.ts
+++ b/src/state/store.ts
@@ -1,5 +1,5 @@
import { create } from 'zustand';
-import { persist } from 'zustand/middleware'
+import { persist } from 'zustand/middleware';
import { Game } from './manager';
import { Record } from '@puzzlehq/sdk';
import _ from 'lodash';
@@ -11,29 +11,35 @@ type GameStore = {
puzzleRecords: Record[];
utilRecords: Record[];
puzzleBalance: number;
- setRecords: (records: { gameRecords: Record[], utilRecords: Record[], puzzleRecords: Record[] }) => void;
+ setRecords: (records: {
+ gameRecords: Record[];
+ utilRecords: Record[];
+ puzzleRecords: Record[];
+ }) => void;
close: () => void;
};
export const useGameStore = create
()(
- persist((set, get) => ({
- currentGame: undefined,
- games: [],
- gameRecords: [],
- puzzleRecords: [],
- utilRecords: [],
- puzzleBalance: 0,
- setRecords: (records) => {
- const gameRecords = records.gameRecords;
- const utilRecords = records.utilRecords;
- const puzzleRecords = records.puzzleRecords;
- const groupedRecords = _.keyBy(records, 'game_address');
-
- },
- close: () => {
- set({ currentGame: undefined });
+ persist(
+ (set, get) => ({
+ currentGame: undefined,
+ games: [],
+ gameRecords: [],
+ puzzleRecords: [],
+ utilRecords: [],
+ puzzleBalance: 0,
+ setRecords: (records) => {
+ const gameRecords = records.gameRecords;
+ const utilRecords = records.utilRecords;
+ const puzzleRecords = records.puzzleRecords;
+ const groupedRecords = _.keyBy(records, 'game_address');
+ },
+ close: () => {
+ set({ currentGame: undefined });
+ },
+ }),
+ {
+ name: 'game-manager',
}
- }), {
- name: 'game-manager'
- })
+ )
);
diff --git a/src/state/usePieces.ts b/src/state/usePieces.ts
index d10993a..49caa0b 100644
--- a/src/state/usePieces.ts
+++ b/src/state/usePieces.ts
@@ -1,9 +1,9 @@
-import { getRecords, Record, useAccount } from "@puzzlehq/sdk";
-import { useEffect, useMemo, useState } from "react";
+import { getRecords, RecordWithPlaintext } from '@puzzlehq/sdk';
+import { useEffect, useMemo, useState } from 'react';
export const usePieces = () => {
const [loading, setLoading] = useState(true);
- const [records, setRecords] = useState([]);
+ const [records, setRecords] = useState([]);
const [error, setError] = useState();
useEffect(() => {
@@ -14,7 +14,7 @@ export const usePieces = () => {
const response = await getRecords({
filter: {
programId: 'puzzle_pieces_v007.aleo',
- type: 'unspent'
+ type: 'unspent',
},
});
if (response.error) {
@@ -30,8 +30,8 @@ export const usePieces = () => {
let availableBalance = 0;
let largestPiece = records[0];
const totalBalance = records
- .filter(record => !record.spent)
- .map(record => {
+ .filter((record) => !record.spent)
+ .map((record) => {
const amount = record.plaintext.match(/amount:(\d+)u64/);
if (amount) {
/// find largestPiece (and thus availableBalance)
@@ -47,7 +47,7 @@ export const usePieces = () => {
.reduce((total, amount) => {
/// sum up
return total + amount;
- })
+ });
return { totalBalance, availableBalance, largestPiece };
}
return { totalBalance: 0, availableBalance: 0, largestPiece: undefined };
@@ -60,6 +60,6 @@ export const usePieces = () => {
largestPiece,
loading,
error,
- refetch: fetch
+ refetch: fetch,
};
-};
\ No newline at end of file
+};
diff --git a/src/theme.ts b/src/theme.ts
index 18c54a6..dea3f27 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -15,7 +15,7 @@ export const theme = {
'700': '#334155',
'800': '#1e293b',
'900': '#0f172a',
- '950': '#020617'
+ '950': '#020617',
},
gray: {
'50': '#f9fafb',
@@ -28,7 +28,7 @@ export const theme = {
'700': '#374151',
'800': '#1f2937',
'900': '#111827',
- '950': '#030712'
+ '950': '#030712',
},
zinc: {
'50': '#fafafa',
@@ -41,7 +41,7 @@ export const theme = {
'700': '#3f3f46',
'800': '#27272a',
'900': '#18181b',
- '950': '#09090b'
+ '950': '#09090b',
},
neutral: {
'50': '#fafafa',
@@ -54,7 +54,7 @@ export const theme = {
'700': '#404040',
'800': '#262626',
'900': '#171717',
- '950': '#0a0a0a'
+ '950': '#0a0a0a',
},
stone: {
'50': '#fafaf9',
@@ -67,7 +67,7 @@ export const theme = {
'700': '#44403c',
'800': '#292524',
'900': '#1c1917',
- '950': '#0c0a09'
+ '950': '#0c0a09',
},
red: {
'50': '#fef2f2',
@@ -80,7 +80,7 @@ export const theme = {
'700': '#b91c1c',
'800': '#991b1b',
'900': '#7f1d1d',
- '950': '#450a0a'
+ '950': '#450a0a',
},
orange: {
'50': '#fff7ed',
@@ -93,7 +93,7 @@ export const theme = {
'700': '#c2410c',
'800': '#9a3412',
'900': '#7c2d12',
- '950': '#431407'
+ '950': '#431407',
},
amber: {
'50': '#fffbeb',
@@ -106,7 +106,7 @@ export const theme = {
'700': '#b45309',
'800': '#92400e',
'900': '#78350f',
- '950': '#451a03'
+ '950': '#451a03',
},
yellow: {
'50': '#fefce8',
@@ -119,7 +119,7 @@ export const theme = {
'700': '#a16207',
'800': '#854d0e',
'900': '#713f12',
- '950': '#422006'
+ '950': '#422006',
},
lime: {
'50': '#f7fee7',
@@ -132,7 +132,7 @@ export const theme = {
'700': '#4d7c0f',
'800': '#3f6212',
'900': '#365314',
- '950': '#1a2e05'
+ '950': '#1a2e05',
},
green: {
'50': '#f0fdf4',
@@ -145,7 +145,7 @@ export const theme = {
'700': '#15803d',
'800': '#166534',
'900': '#14532d',
- '950': '#052e16'
+ '950': '#052e16',
},
emerald: {
'50': '#ecfdf5',
@@ -158,7 +158,7 @@ export const theme = {
'700': '#047857',
'800': '#065f46',
'900': '#064e3b',
- '950': '#022c22'
+ '950': '#022c22',
},
teal: {
'50': '#f0fdfa',
@@ -171,7 +171,7 @@ export const theme = {
'700': '#0f766e',
'800': '#115e59',
'900': '#134e4a',
- '950': '#042f2e'
+ '950': '#042f2e',
},
cyan: {
'50': '#ecfeff',
@@ -184,7 +184,7 @@ export const theme = {
'700': '#0e7490',
'800': '#155e75',
'900': '#164e63',
- '950': '#083344'
+ '950': '#083344',
},
sky: {
'50': '#f0f9ff',
@@ -197,7 +197,7 @@ export const theme = {
'700': '#0369a1',
'800': '#075985',
'900': '#0c4a6e',
- '950': '#082f49'
+ '950': '#082f49',
},
blue: {
'50': '#eff6ff',
@@ -210,7 +210,7 @@ export const theme = {
'700': '#1d4ed8',
'800': '#1e40af',
'900': '#1e3a8a',
- '950': '#172554'
+ '950': '#172554',
},
indigo: {
'50': '#eef2ff',
@@ -223,7 +223,7 @@ export const theme = {
'700': '#4338ca',
'800': '#3730a3',
'900': '#312e81',
- '950': '#1e1b4b'
+ '950': '#1e1b4b',
},
violet: {
'50': '#f5f3ff',
@@ -236,7 +236,7 @@ export const theme = {
'700': '#6d28d9',
'800': '#5b21b6',
'900': '#4c1d95',
- '950': '#2e1065'
+ '950': '#2e1065',
},
purple: {
'50': '#faf5ff',
@@ -249,7 +249,7 @@ export const theme = {
'700': '#7e22ce',
'800': '#6b21a8',
'900': '#581c87',
- '950': '#3b0764'
+ '950': '#3b0764',
},
fuchsia: {
'50': '#fdf4ff',
@@ -262,7 +262,7 @@ export const theme = {
'700': '#a21caf',
'800': '#86198f',
'900': '#701a75',
- '950': '#4a044e'
+ '950': '#4a044e',
},
pink: {
'50': '#fdf2f8',
@@ -275,7 +275,7 @@ export const theme = {
'700': '#be185d',
'800': '#9d174d',
'900': '#831843',
- '950': '#500724'
+ '950': '#500724',
},
rose: {
'50': '#fff1f2',
@@ -288,7 +288,7 @@ export const theme = {
'700': '#be123c',
'800': '#9f1239',
'900': '#881337',
- '950': '#4c0519'
+ '950': '#4c0519',
},
'primary-green': '#4EC330',
'primary-pink': '#FFAED5',
@@ -298,5 +298,5 @@ export const theme = {
'primary-blue': '#45B1ED',
'primary-red': '#F63B3B',
'primary-gray': '#868686',
- 'primary-transparent': 'rgba(0,0,0,0)'
-}
\ No newline at end of file
+ 'primary-transparent': 'rgba(0,0,0,0)',
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8dc8600..1f57fb2 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,16 +4,16 @@ module.exports = {
theme: {
extend: {
colors: {
- 'primary-green': '#4EC330',
- 'primary-pink': '#FFAED5',
- 'primary-black': '#141010',
- 'primary-white': '#FCFCFC',
- 'primary-yellow': '#F8FC3E',
- 'primary-blue': '#45B1ED',
- 'primary-red': '#F63B3B',
- 'primary-gray': '#868686',
- 'primary-transparent': 'rgba(0,0,0,0)'
+ 'bg1': '#706231',
+ 'bg2': '#312808',
+ 'primary': '#FFD600',
+ 'primary-green': '#0FBE0C',
+ 'primary-red': '#F63B3B'
},
+ fontFamily: {
+ header: ["Pirata One"],
+ body: ["Kadwa"]
+ }
},
},
plugins: [],
- 
+ );
+};
+
+export default MapImage;
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 4b97488..6e2931c 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,29 +1,19 @@
type NavProps = {
step: number;
+ totalSteps: number;
};
-function Nav({ step }: NavProps) {
+function Nav({ step, totalSteps }: NavProps) {
return (
- 
{
+ navigate('/');
+ setMapStep(false);
+ setAcceptGameStep('1_AcceptGame');
+ setProposeGameStep('1_NewGame');
+ setAcceptGameInputs({});
+ setProposeGameInputs({});
+ }}
/>
- ) : (
-
)}