wdjones/h2h-prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed rewards page.

Browse Source
This commit is contained in:
William D. Jones
2026-01-10 13:14:43 -06:00
parent 708e51f2bd
commit 88c01676b8
5 changed files with 56 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/components/gamification/WhaleTracker.tsx
View File

@ -48,40 +48,43 @@ export default function WhaleTracker() {
<p className="text-gray-500 text-center py-4">No big bets yet... Be the first whale!</p>
) : (
<div className="space-y-3">
{whales.map((whale: WhaleBet) => (
<div
key={whale.id}
className="bg-gradient-to-r from-green-50 to-transparent rounded-lg p-3 border-l-4 border-green-500"
>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<span className="text-xl">{getWhaleEmoji(whale.amount)}</span>
<div className="min-w-0">
<p className="text-gray-900 font-medium text-sm truncate">
{whale.display_name || whale.username}
{whales.map((whale: WhaleBet, index: number) => {
const amount = whale.amount ?? 0
return (
<div
key={whale.id ?? `whale-${index}`}
className="bg-gradient-to-r from-green-50 to-transparent rounded-lg p-3 border-l-4 border-green-500"
>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<span className="text-xl">{getWhaleEmoji(amount)}</span>
<div className="min-w-0">
<p className="text-gray-900 font-medium text-sm truncate">
{whale.display_name || whale.username || 'Unknown'}
</p>
<p className={`text-xs ${TIER_COLORS[whale.tier_name] || 'text-gray-500'}`}>
{whale.tier_name || 'Unranked'}
</p>
</div>
</div>
<div className="text-right">
<p className="text-green-600 font-bold">
${amount.toLocaleString()}
</p>
<p className={`text-xs ${TIER_COLORS[whale.tier_name] || 'text-gray-500'}`}>
{whale.tier_name}
<p className="text-gray-500 text-xs">
{whale.created_at ? formatDistanceToNow(new Date(whale.created_at), { addSuffix: true }) : 'Recently'}
</p>
</div>
</div>
<div className="text-right">
<p className="text-green-600 font-bold">
${whale.amount.toLocaleString()}
</p>
<p className="text-gray-500 text-xs">
{formatDistanceToNow(new Date(whale.created_at), { addSuffix: true })}
</p>
<div className="mt-2 text-xs text-gray-600 truncate">
<span className="text-gray-400">on</span> {whale.event_title || 'Unknown event'}
<span className="ml-2 px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">
{whale.side || '-'}
</span>
</div>
</div>
<div className="mt-2 text-xs text-gray-600 truncate">
<span className="text-gray-400">on</span> {whale.event_title}
<span className="ml-2 px-1.5 py-0.5 bg-gray-100 rounded text-gray-600">
{whale.side}
</span>
</div>
</div>
))}
)
})}
</div>
)}
</div>

4
frontend/src/pages/EventDetail.tsx
View File

@ -95,14 +95,14 @@ export const EventDetail = () => {
</div>
{/* Spread Grid - Visual betting grid */}
<div className="bg-white rounded-xl shadow-sm border p-6">
{/* <div className="bg-white rounded-xl shadow-sm border p-6">
<h2 className="text-xl font-bold text-gray-900 mb-4">Spread Grid</h2>
<SpreadGrid
event={event}
onBetCreated={handleBetCreated}
onBetTaken={handleBetTaken}
/>
</div>
</div> */}
</div>
</div>
)

BIN
frontend/test-results/event-detail.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 247 KiB

BIN
frontend/test-results/rewards-page.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 359 KiB

61
frontend/tests/debug-trading-panel.spec.ts
View File

@ -1,46 +1,31 @@
import { test } from '@playwright/test';
test('capture trading panel screenshot', async ({ page }) => {
// Navigate to event detail
await page.goto('/events/1', { waitUntil: 'networkidle' });
test('debug rewards page crash', async ({ page }) => {
const errors: string[] = [];
page.on('console', msg => {
if (msg.type() === 'error') {
console.log('[error]', msg.text());
errors.push(msg.text());
}
});
page.on('pageerror', error => {
console.log('Page error:', error.message);
errors.push(error.message);
});
// Navigate to rewards page
console.log('Navigating to /rewards...');
await page.goto('/rewards', { waitUntil: 'domcontentloaded' });
await page.waitForTimeout(3000);
// Take screenshot
await page.screenshot({ path: 'test-results/event-detail.png', fullPage: true });
await page.screenshot({ path: 'test-results/rewards-page.png', fullPage: true });
// Check the spread values being used
const spreadInfo = await page.evaluate(() => {
// Look for the spread grid to understand the range
const spreadGridCells = document.querySelectorAll('.grid button');
const spreads: string[] = [];
spreadGridCells.forEach(cell => {
const text = cell.textContent;
if (text && (text.includes('+') || text.includes('-') || text.match(/^\\d/))) {
spreads.push(text.substring(0, 10));
}
});
// Check for content
const bodyText = await page.locator('body').innerText();
console.log('Body text (first 500 chars):', bodyText.substring(0, 500));
// Check order book sections
const orderBookContainer = document.querySelector('.col-span-3');
const aboveSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[0];
const belowSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[1];
// Count rows in each section
const aboveRows = aboveSection?.querySelectorAll('button').length || 0;
const belowRows = belowSection?.querySelectorAll('button').length || 0;
// Get the official spread from the header
const officialSpreadElement = document.querySelector('.text-3xl.font-bold');
const officialSpread = officialSpreadElement?.textContent;
return {
officialSpread,
aboveRowCount: aboveRows,
belowRowCount: belowRows,
aboveSectionHTML: aboveSection?.innerHTML?.substring(0, 500) || 'not found',
belowSectionHTML: belowSection?.innerHTML?.substring(0, 500) || 'not found',
};
});
console.log('Spread info:', JSON.stringify(spreadInfo, null, 2));
console.log('All errors:', errors);
});