Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3592-Redesign of BSG sample app and port to React. #119

Open
wants to merge 24 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
fde9d86
WIP: React UI for the BSG sample app and contract update to provide h…
pbienek Jul 11, 2024
a7a8801
WIP: Fixes some missing depenencies
pbienek Jul 12, 2024
c74abad
Introduce proper linting and package order etc
pbienek Jul 12, 2024
406564e
WIP: Updates contract to emit game state when the user makes a guess.…
pbienek Jul 12, 2024
3e81662
WIP: Add some extra polish around guess states adding cursor effects …
pbienek Jul 13, 2024
2409efd
WIP: Add Unknown game state to components. Fix layout bug in the HUD …
pbienek Jul 13, 2024
de93b11
WIP: Persist data between page reloads by saving state to local storage.
pbienek Jul 13, 2024
00880d0
WIP: Added unknown state. Added battle store types. Added additional …
pbienek Jul 14, 2024
b361c59
WIP: Vastly improve performance by significantly reducing the number …
pbienek Jul 15, 2024
25cea55
WIP: Fix missing question marks due to last commit.
pbienek Jul 15, 2024
0e79849
WIP: Adds how to play page.
pbienek Jul 15, 2024
f426109
WIP: Add charts to fleet strength and cells remaining components.
pbienek Jul 15, 2024
138d6fa
WIP: move new BSG codebase from work from wip folder to the existing one
pbienek Jul 15, 2024
b29beff
WIP: Fix type errors
pbienek Jul 15, 2024
174b1d8
WIP: Adds hardhat step to build process
pbienek Jul 15, 2024
cbe288f
WIP: prevent page from shifting down when notification window opens
pbienek Jul 16, 2024
ffcbc90
Fix bug where Connect to metamask button doesnt work
pbienek Jul 16, 2024
4933f19
reposition guess notification window
pbienek Jul 16, 2024
7d6dbb9
ensure UI doesnt hang with a blank while waiting for initial wallet c…
pbienek Jul 16, 2024
27d0725
Removes styles applied in light mode.
pbienek Jul 16, 2024
419c13a
some refactoring
pbienek Jul 18, 2024
cdc6792
Adds responsiveness and a number of bug fixes.
Jul 22, 2024
b94cf59
Merge branch 'main' into pete/3591-BSG-react-port
Jul 23, 2024
3335f87
Merge branch 'main' into pete/3591-BSG-react-port
Aug 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
WIP: Added unknown state. Added battle store types. Added additional …
…helper functions.
pbienek committed Jul 14, 2024
commit 00880d044064341941291a45fc293ff893e1604b
8 changes: 6 additions & 2 deletions bs-game-wip/src/components/BattleGrid/BattleGridCanvas.tsx
Original file line number Diff line number Diff line change
@@ -2,13 +2,15 @@ import { useMemo } from 'react';

import { Container, Stage } from '@pixi/react';

import CellHighlight from '@/components/CellHighlight/CellHighlight';
import { HEX_GRID_MARGIN, HEX_HEIGHT, HEX_WIDTH } from '@/lib/constants';

import BattleGridCell from './BattleGridCell';
import BattleGridCursor from './BattleGridCursor';
import BattleGridExplosion from './BattleGridExplosion';
import BattleGridHits from './BattleGridHits';
import BattleGridMisses from './BattleGridMisses';
import BattleGridUnknowns from './BattleGridUnknowns';

export default function BattleGridCanvas({ grid, width, height }) {
const gridCells = useMemo(
@@ -33,14 +35,16 @@ export default function BattleGridCanvas({ grid, width, height }) {
options={{
backgroundAlpha: 0,
antialias: true,
resolution: Math.floor(window.devicePixelRatio),
resolution: 2,
autoDensity: true,
}}
>
<Container>{gridCells}</Container>
<BattleGridUnknowns />
<BattleGridMisses />
<BattleGridHits />
<BattleGridExplosion particleCount={50} duration={1000} />
<CellHighlight particleCount={20} />
<BattleGridExplosion particleCount={40} duration={1000} />
<BattleGridCursor />
</Stage>
);
18 changes: 15 additions & 3 deletions bs-game-wip/src/components/BattleGrid/BattleGridCell.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Graphics } from '@pixi/react';
import { Graphics, Text } from '@pixi/react';

import { hexHitArea } from '@/lib/constants';

const textStyle = {
fill: '#ffffff',
fontSize: 14,
};

export default function BattleGridCell({ col, row, x, y, state }) {
return (
<>
@@ -12,7 +17,6 @@ export default function BattleGridCell({ col, row, x, y, state }) {
g.clear();

if (state === 'UNTOUCHED') {
g.beginFill(0xd9d9d9, 0);
g.lineStyle(1, 0x464646, 1);
}
if (state === 'MISSED') {
@@ -23,11 +27,19 @@ export default function BattleGridCell({ col, row, x, y, state }) {
g.beginFill(0xe16f6f, 1);
g.lineStyle(1, 0xe16f6f, 1);
}
if (state === 'UNKNOWN') {
g.beginFill(0xffffff, 0.05);
g.lineStyle(1, 0xffffff, 0.3);
}

g.drawPolygon(hexHitArea);
g.endFill();
}}
/>
>
{state === 'UNKNOWN' && (
<Text text="?" anchor={0.5} x={0} y={0} style={textStyle} />
)}
</Graphics>
</>
);
}
5 changes: 1 addition & 4 deletions bs-game-wip/src/components/BattleGrid/BattleGridCursor.tsx
Original file line number Diff line number Diff line change
@@ -7,8 +7,6 @@ import { hexHitArea } from '@/lib/constants';
import { useBattleGridStore } from '@/stores/battleGridStore';
import { useContractStore } from '@/stores/contractStore';

import CellHighlight from '../CellHighlight/CellHighlight';

export default function BattleGridCursor() {
const [[x, y], hoveredCell] = useBattleGridStore((state) => [
state.mousePosition,
@@ -48,7 +46,7 @@ export default function BattleGridCursor() {
}

return (
<Container filters={[]}>
<Container>
<Graphics
ref={shapeRef}
draw={(g) => {
@@ -59,7 +57,6 @@ export default function BattleGridCursor() {
g.endFill();
}}
/>
<CellHighlight particleCount={20} duration={1000} />
</Container>
);
}
21 changes: 5 additions & 16 deletions bs-game-wip/src/components/BattleGrid/BattleGridExplosion.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,17 @@
import { useEffect, useState } from 'react';

import { BloomFilter } from '@pixi/filter-bloom';
import { Container } from '@pixi/react';

import { useBattleGridStore } from '../../stores/battleGridStore.ts';
import { useContractStore } from '../../stores/contractStore.ts';
import { useBattleGridStore } from '@/stores/battleGridStore';
import { useContractStore } from '@/stores/contractStore';

import BattleGridExplosionParticle from './BattleGridExplosionParticle';

export default function BattleGridExplosion({ particleCount, duration }) {
const [lastGuessCoords, guessState] = useContractStore((state) => [
state.lastGuessCoords,
state.guessState,
]);
const guessState = useContractStore((state) => state.guessState);
const selectedCell = useBattleGridStore((state) => state.selectedCell);
const [particles, setParticles] = useState([]);
const [isAnimating, setIsAnimating] = useState(true);
const hide = !['HIT'].includes(guessState);
// const hide = !selectedCell
const hide = guessState !== 'HIT';

useEffect(() => {
if (hide) return;
@@ -38,12 +33,6 @@ export default function BattleGridExplosion({ particleCount, duration }) {
});
}
setParticles(newParticles);

const timeout = setTimeout(() => {
setIsAnimating(false);
}, duration);

return () => clearTimeout(timeout);
}, [guessState, selectedCell, particleCount, duration]);

if (hide) return null;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useRef, useState } from 'react';

import { Graphics, Sprite, useTick } from '@pixi/react';
import { Graphics, useTick } from '@pixi/react';

export default function BattleGridExplosionParticle({
x,
@@ -12,9 +12,7 @@ export default function BattleGridExplosionParticle({
duration,
}) {
const graphicRef = useRef();

const [age, setAge] = useState(0);

const startHeight = 0;
const endHeight = 400;

15 changes: 1 addition & 14 deletions bs-game-wip/src/components/BattleGrid/BattleGridMisses.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import { useMemo } from 'react';

import { Container } from '@pixi/react';

@@ -24,18 +24,5 @@ export default function BattleGridMisses() {
[missedCells]
);

// useEffect(() => {
// let interval;
//
// if (isConnected) {
// getAllMisses();
// interval = setInterval(() => {
// getAllMisses();
// }, QUERY_INTERVAL_MS);
// }
//
// return () => clearInterval(interval);
// }, [isConnected]);

return <Container>{revealedGridCells}</Container>;
}
32 changes: 32 additions & 0 deletions bs-game-wip/src/components/BattleGrid/BattleGridUnknowns.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useMemo } from 'react';

import { Container } from '@pixi/react';

import { useBattleGridStore } from '@/stores/battleGridStore';

import BattleGridCell from './BattleGridCell';

export default function BattleGridUnknowns() {
const unknownCells = useBattleGridStore((state) => state.unknownCells);

const revealedGridCells = useMemo(
() =>
unknownCells.map(({ row, col, x, y }) => (
<BattleGridCell
key={`${row}-${col}`}
x={x}
y={y}
row={row}
col={col}
state="UNKNOWN"
/>
)),
[unknownCells]
);

if (unknownCells.length === 0) {
return null;
}

return <Container>{revealedGridCells}</Container>;
}
16 changes: 3 additions & 13 deletions bs-game-wip/src/components/CellHighlight/CellHighlight.tsx
Original file line number Diff line number Diff line change
@@ -13,19 +13,15 @@ import {
MissHighlightState,
} from './CellHighlightStates';

export default function CellHighlight({ duration }) {
const [lastGuessCoords, guessState] = useContractStore((state) => [
state.lastGuessCoords,
state.guessState,
]);
export default function CellHighlight() {
const guessState = useContractStore((state) => state.guessState);
const selectedCell = useBattleGridStore((state) => state.selectedCell);
const [particles, setParticles] = useState([]);
const [isAnimating, setIsAnimating] = useState(true);
const hide = guessState === 'IDLE';
const duration = 1000;

useEffect(() => {
if (hide) return;
let particles = [];

if (guessState === 'STARTED') {
setParticles(DefaultHighlightState(selectedCell.x, selectedCell.y, duration));
@@ -42,12 +38,6 @@ export default function CellHighlight({ duration }) {
if (guessState === 'HIT') {
setParticles(HitHighlightState(selectedCell.x, selectedCell.y, duration));
}

const timeout = setTimeout(() => {
setIsAnimating(false);
}, duration);

return () => clearTimeout(timeout);
}, [selectedCell, guessState, duration]);

if (hide) return null;
Original file line number Diff line number Diff line change
@@ -93,8 +93,8 @@ export function HitHighlightState(x, y, duration) {
const rotationSpeed = 0; // Random rotation speed
const startRadius = 400;
const endRadius = -800;
const startHeight = 100;
const endHeight = 80;
const startHeight = 30;
const endHeight = 10;
newParticles.push({
x,
y,
@@ -105,7 +105,7 @@ export function HitHighlightState(x, y, duration) {
startHeight,
endHeight,
duration,
color: 0xe16f6f,
color: 0xffffff,
age: 50,
ageReset: true,
});
12 changes: 8 additions & 4 deletions bs-game-wip/src/components/CellsRemaining/CellsRemaining.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
import { useShallow } from 'zustand/react/shallow';

import HudWindow from '@/components/HudWindow/HudWindow';
import { COLS, ROWS } from '@/lib/constants';
import { useContractStore } from '@/stores/contractStore';
import { useBattleGridStore } from '@/stores/battleGridStore';
import { useWalletStore } from '@/stores/walletStore';

export default function CellsRemaining() {
const [misses, hits] = useContractStore((state) => [state.misses, state.hits]);
const [misses, hits] = useBattleGridStore(
useShallow((state) => [state.missedCells, state.hitCells])
);
const isConnected = useWalletStore((state) => state.isConnected);
const numberOfRevealedCells = misses.length + hits.length;
const totalCells = ROWS * COLS;
const unknownState = (misses.length + hits.length) === 0
const unknownState = misses.length + hits.length === 0;
const Disconnected = <p className="text-center">System Offline</p>;

const Footer = (
<div className="text-right">
<h3 className="text-2xl whitespace-nowrap">
{unknownState ? "?????" : totalCells - numberOfRevealedCells}/{totalCells}
{unknownState ? '?????' : totalCells - numberOfRevealedCells}/{totalCells}
</h3>
<p className="text-sm whitespace-nowrap">Cells remaining</p>
</div>
5 changes: 3 additions & 2 deletions bs-game-wip/src/components/Graveyard/Graveyard.tsx
Original file line number Diff line number Diff line change
@@ -11,11 +11,12 @@ export default function Graveyard() {
const fleetHealth = (sunkShipTotal / graveyard.length) * 100;
const unknownState = graveyard.length === 0;


const Footer = (
<div className="text-right">
<h3 className="text-sm whitespace-nowrap">Fleet Strength</h3>
<p className="text-xl whitespace-nowrap">{unknownState ? '???' : fleetHealth.toFixed(1)}% PERC</p>
<p className="text-xl whitespace-nowrap">
{unknownState ? '???' : fleetHealth.toFixed(1)}% PERC
</p>
<p className="text-3xl mt-4 whitespace-nowrap">
{unknownState ? '???' : sunkShipTotal}/{unknownState ? '???' : graveyard.length}
</p>
4 changes: 2 additions & 2 deletions bs-game-wip/src/components/HudWindow/HudWindow.tsx
Original file line number Diff line number Diff line change
@@ -51,8 +51,8 @@ export default function HudWindow({
};

const footerAnimation = {
initial: { opacity: 0, width: 0,},
animate: { opacity: 1, width: '100%'},
initial: { opacity: 0, width: 0 },
animate: { opacity: 1, width: '100%' },
exit: { opacity: 0 },
transition: { delay: 1, duration: 1 * speed },
};
2 changes: 1 addition & 1 deletion bs-game-wip/src/components/PrizePool/PrizePool.tsx
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ export default function PrizePool() {
closedContent={<p className="text-center">System Offline</p>}
>
<h3 className="text-3xl text-right my-2">
{unknownState ? "???.????" : prizePool} <span className="text-xl">ETH</span>
{unknownState ? '???.????' : prizePool} <span className="text-xl">ETH</span>
</h3>
</HudWindow>
);
File renamed without changes.
11 changes: 11 additions & 0 deletions bs-game-wip/src/helpers/getCellCoordsFromXY.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { HEX_GRID_MARGIN, HEX_HEIGHT, HEX_WIDTH, VERTICAL_OFFSET } from '@/lib/constants';

import getSnappedMousePosition from './getSnappedMousePosition';

export default function getCellCoordsFromXY(x: number, y: number) {
const [sx, sy] = getSnappedMousePosition(x, y);
const row = (sy - HEX_GRID_MARGIN) / (HEX_HEIGHT - VERTICAL_OFFSET);
const col = (sx - (HEX_GRID_MARGIN + (row % 2) * (HEX_WIDTH / 2))) / HEX_WIDTH;

return [col, row];
}
2 changes: 1 addition & 1 deletion bs-game-wip/src/helpers/getCellXY.ts
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import {
HEX_WIDTH,
HORIZONTAL_OFFSET,
VERTICAL_OFFSET,
} from '../lib/constants';
} from '@/lib/constants';

export default function getCellXY(col: number, row: number) {
const x =
5 changes: 5 additions & 0 deletions bs-game-wip/src/helpers/getIndexFromCoords.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { COLS } from '@/lib/constants';

export default function getIndexFromCoords(x: number, y: number) {
return y * COLS + x;
}
2 changes: 1 addition & 1 deletion bs-game-wip/src/lib/constants.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import createHexagon from '@/helpers/createHexagon';
import formatAddress from '@/helpers/formatAddress';
import createHexagon from '@/utils/createHexagon';

export const MOVE_FEE: string = '0.0443';
export const TOTAL_SHIPS: number = 249;
Loading