Rich card data
This commit is contained in:
+7
-3
@@ -2,6 +2,8 @@ import { ArrowUpRight, BookOpen, Globe2, Shield, Sparkles, Swords } from 'lucide
|
||||
import { rarity, stats, type Article } from '../shared/protocol.ts';
|
||||
import type { TestnetBlock } from '../shared/testnet.ts';
|
||||
import { STARTER_ARTICLES } from '../shared/catalog.ts';
|
||||
import { useEnrichment } from './useEnrichment.ts';
|
||||
import { CardInsights, EnrichmentScores } from './CardInsights.tsx';
|
||||
|
||||
// hash is the RandomX proof hash for game stats; block.tokenId is NFT identity.
|
||||
export type CardData = { article: Article; hash: string; block?: TestnetBlock };
|
||||
@@ -19,15 +21,17 @@ export function Card({ card, onClick }: { card: CardData; onClick?: () => void }
|
||||
const { article, hash } = card;
|
||||
const tier = rarity(hash);
|
||||
const s = stats(hash);
|
||||
return <button className={`wiki-card ${tier.toLowerCase()}`} onClick={onClick} tabIndex={onClick ? 0 : -1} aria-label={`View ${article.title} ${tier} card`}>
|
||||
const {data:enrichment,error}=useEnrichment(article.pageId);
|
||||
return <><button className={`wiki-card ${tier.toLowerCase()}`} onClick={onClick} tabIndex={onClick ? 0 : -1} aria-label={`View ${article.title} ${tier} card`}>
|
||||
<div className="card-top"><span><Sparkles size={11} /> {tier}</span><span>W / {String(article.pageId).slice(-4)}</span></div>
|
||||
<div className={`card-art art-${article.category.toLowerCase()}`}>
|
||||
{article.image ? <img src={article.image} alt={article.title} loading="lazy" referrerPolicy="no-referrer" onError={e => { e.currentTarget.style.display = 'none'; }} /> : <Globe2 size={64} />}
|
||||
<span className="card-category">{article.category}</span>
|
||||
</div>
|
||||
<div className="card-content"><div className="card-title"><h3>{article.title}</h3><ArrowUpRight size={16} /></div><p>{article.extract}</p>
|
||||
<div className="card-stats"><span><Swords size={12} />{s.power}</span><span><Shield size={12} />{s.defense}</span><span><BookOpen size={12} />{s.knowledge}</span></div>
|
||||
<div className="card-stats" aria-label="Immutable proof-derived game stats"><span title="Power · proof-derived"><Swords size={12} />{s.power}</span><span title="Defense · proof-derived"><Shield size={12} />{s.defense}</span><span title="Knowledge · proof-derived"><BookOpen size={12} />{s.knowledge}</span></div>
|
||||
<div className="card-enrichment">{enrichment?<><div className="card-readership"><span>LIVE WIKIPEDIA</span><span>{enrichment.pageviews.status==='available'?`${new Intl.NumberFormat('en',{notation:'compact',maximumFractionDigits:1}).format(enrichment.pageviews.months.at(-1)!.views)} views / month`:'Views unavailable'}</span></div><EnrichmentScores data={enrichment}/></>:<span className="card-enrichment-status">{error?'Live metadata unavailable':'Loading article insights…'}</span>}</div>
|
||||
</div>
|
||||
<div className="card-bottom"><span>WIKIPEDIA · #{article.pageId}</span><span>{card.block ? `BLOCK ${card.block.height}` : 'PREVIEW'}</span></div>
|
||||
</button>;
|
||||
</button>{!onClick&&<CardInsights pageId={article.pageId}/>}</>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { BookOpen, Eye, Globe2, Tags, TrendingUp } from 'lucide-react';
|
||||
import { useEnrichment } from './useEnrichment.ts';
|
||||
import type { PageEnrichment } from '../shared/enrichment.ts';
|
||||
import './enrichment.css';
|
||||
|
||||
const compact=new Intl.NumberFormat('en',{notation:'compact',maximumFractionDigits:1});
|
||||
const full=new Intl.NumberFormat('en',{maximumFractionDigits:0});
|
||||
const month=(value:string)=>new Date(`${value}-01T00:00:00Z`).toLocaleDateString('en',{month:'short',year:'numeric',timeZone:'UTC'});
|
||||
const score=(value:number|null)=>value===null?'—':`${value}`;
|
||||
export function EnrichmentScores({data}: {data:PageEnrichment}){
|
||||
return <div className="enrichment-scores" aria-label="Live Wikipedia-derived scores out of 100">
|
||||
<span title="Attention: logarithmic score from the latest complete month's human page views"><Eye size={12}/><b>{score(data.stats.attention)}</b><small>Attention</small></span>
|
||||
<span title="Depth: logarithmic score from article bytes, not a quality judgment"><BookOpen size={12}/><b>{score(data.stats.depth)}</b><small>Depth</small></span>
|
||||
<span title="Reach: logarithmic score from interlanguage links"><Globe2 size={12}/><b>{score(data.stats.reach)}</b><small>Reach</small></span>
|
||||
</div>;
|
||||
}
|
||||
export function CardInsights({pageId}:{pageId:number}){
|
||||
const {data,error,retry}=useEnrichment(pageId);
|
||||
if(!data)return <section className="article-insights" aria-label="Wikipedia insights"><h3>Wikipedia insights</h3><p role="status">{error?'Live metadata is unavailable. The NFT and its original game stats are unchanged.':'Loading Wikipedia metadata and monthly readership…'}</p>{error&&<button className="text-button" onClick={retry}>Retry live metadata</button>}</section>;
|
||||
const views=data.pageviews;
|
||||
const latest=views.months.at(-1);
|
||||
const maximum=Math.max(1,...views.months.map(m=>m.views));
|
||||
const trend=views.trendPercent;
|
||||
return <section className="article-insights" aria-label="Wikipedia insights">
|
||||
<div className="insights-heading"><h3>Wikipedia insights</h3><span>LIVE · OFF-CHAIN</span></div>
|
||||
{data.description&&<p>{data.description}</p>}
|
||||
<EnrichmentScores data={data}/>
|
||||
<dl className="article-fields">
|
||||
<div><dt><Eye size={12}/> Monthly views</dt><dd>{latest?full.format(latest.views):'Unavailable'}<small>{month(views.latestMonth)} · human traffic</small></dd></div>
|
||||
<div><dt><TrendingUp size={12}/> Monthly change</dt><dd>{trend===null?'Unavailable':`${trend>=0?'+':''}${trend.toFixed(1)}%`}<small>vs. preceding month</small></dd></div>
|
||||
<div><dt>6-month views</dt><dd>{views.total===null?'Unavailable':full.format(views.total)}</dd></div>
|
||||
<div><dt>Daily average</dt><dd>{views.dailyAverage===null?'Unavailable':full.format(views.dailyAverage)}<small>latest complete month</small></dd></div>
|
||||
<div><dt>Article size</dt><dd>{full.format(data.pageBytes)} bytes</dd></div>
|
||||
<div><dt>Languages</dt><dd>{data.languagesTruncated?'≥ ':''}{full.format(data.languageCount)}<small>other-language links</small></dd></div>
|
||||
<div><dt>Live revision</dt><dd><a href={`https://en.wikipedia.org/w/index.php?oldid=${data.revisionId}`} target="_blank" rel="noreferrer">{data.revisionId}</a></dd></div>
|
||||
<div><dt>Wikidata</dt><dd>{data.wikidataId?<a href={`https://www.wikidata.org/wiki/${data.wikidataId}`} target="_blank" rel="noreferrer">{data.wikidataId}</a>:'Not linked'}</dd></div>
|
||||
</dl>
|
||||
{views.status==='available'?<figure className="pageview-history"><figcaption>Monthly readership · six complete UTC months</figcaption><div className="pageview-bars">{views.months.map(item=><div key={item.month} title={`${month(item.month)}: ${full.format(item.views)} views`}><span>{compact.format(item.views)}</span><div className="pageview-track"><i style={{height:`${Math.max(1,item.views/maximum*100)}%`}}/></div><small>{month(item.month)}</small></div>)}</div><table className="visually-hidden"><caption>Monthly human page views</caption><tbody>{views.months.map(item=><tr key={item.month}><th>{month(item.month)}</th><td>{item.views}</td></tr>)}</tbody></table></figure>:<p className="insights-unavailable">Page views are unavailable or incomplete. Unknown counts are not treated as zero.</p>}
|
||||
<h4 className="insights-category-heading"><Tags size={13}/> Wikipedia categories{data.categoriesTruncated?' · first 50':''}</h4>
|
||||
<div className="article-categories">{data.categories.length?data.categories.map(category=><a key={category} href={`https://en.wikipedia.org/wiki/${encodeURIComponent(`Category:${category.replace(/ /g,'_')}`)}`} target="_blank" rel="noreferrer">{category}</a>):<span>No visible categories returned</span>}</div>
|
||||
<details className="insights-method"><summary>How are these scores calculated?</summary><p>Scores range from 0–100, capped and rounded: Attention = log₁₀(monthly views + 1) ÷ 6 × 100; Depth = log₁₀(article bytes + 1) ÷ 6 × 100; Reach = log₁₀(language links + 1) ÷ 3 × 100. Depth measures size, not accuracy or quality. Scores can change and do not affect proof-derived rarity, NFT ownership, or consensus.</p></details>
|
||||
<p className="insights-attribution">Retrieved {new Date(data.fetchedAt).toLocaleString()}. Live revision may differ from the minted snapshot. Sources: <a href={`https://en.wikipedia.org/?curid=${pageId}`} target="_blank" rel="noreferrer">Wikipedia contributors</a> (CC BY-SA 4.0) and Wikimedia Analytics (CC0). Views use all-access, user traffic and exclude classified bots. Article moves may affect title-based view history.</p>
|
||||
</section>;
|
||||
}
|
||||
+1
-1
@@ -122,4 +122,4 @@ export function WalletPanel({ wallet, onRestore, onNotice }: Props) {
|
||||
</section>;
|
||||
}
|
||||
|
||||
export default WalletPanel;
|
||||
export default WalletPanel;
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
.card-modal{grid-template-areas:"card detail" "insights insights"}.card-modal .detail-card{display:contents}.card-modal .detail-card>.wiki-card{grid-area:card;align-self:start}.card-modal .detail-copy{grid-area:detail;min-width:0}.card-modal .article-insights{grid-area:insights;margin-top:0}.card-modal .article-fields{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:560px){.card-modal .detail-card>.wiki-card{margin-bottom:24px}.card-modal .article-insights{margin:24px 0}.card-modal .article-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||||
.card-enrichment{border-top:1px solid var(--theme-border);margin-top:12px;padding-top:10px;min-height:68px}.card-readership{display:flex;justify-content:space-between;gap:6px;font-size:8px;color:var(--ctp-subtext0)}.card-readership>span:first-child{font-size:7px;letter-spacing:.7px;color:var(--ctp-teal)}.enrichment-scores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.enrichment-scores>span{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:3px 5px;font-size:11px;color:var(--ctp-lavender)}.enrichment-scores b{font-weight:600;color:var(--ctp-text)}.enrichment-scores small{grid-column:1/-1;text-align:center;font-size:8px;color:var(--ctp-subtext0)}.card-enrichment-status{color:var(--ctp-subtext0);font-size:9px}.hero-card .card-enrichment{display:none}.article-insights{margin-top:24px;padding:20px;background:var(--ctp-mantle);border:1px solid var(--ctp-surface1);border-radius:10px;text-align:left;pointer-events:auto}.article-insights h3{font-size:18px;letter-spacing:-.3px;font-weight:550;color:var(--ctp-text)}.article-insights p{font-size:11px;line-height:1.85;color:var(--ctp-subtext0);margin-top:12px}.insights-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px}.insights-heading>span{font-size:8px;letter-spacing:1px;color:var(--ctp-teal)}.article-insights .enrichment-scores{padding:16px 0;border-bottom:1px solid var(--theme-border)}.article-insights .enrichment-scores b{font-size:21px}.article-insights .enrichment-scores small{font-size:10px}.article-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;margin:20px 0}.article-fields dt{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ctp-subtext0)}.article-fields dd{margin:6px 0 0;font-size:14px;color:var(--ctp-text);overflow-wrap:anywhere}.article-fields dd small{display:block;font-size:9px;color:var(--ctp-subtext0);margin-top:4px}.article-insights a{color:var(--ctp-blue);text-decoration:underline;text-underline-offset:3px}.pageview-history{margin:22px 0}.pageview-history figcaption{font-size:10px;color:var(--ctp-subtext1);margin-bottom:14px}.pageview-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.pageview-bars>div{text-align:center;min-width:0}.pageview-bars span{font-size:8px;color:var(--ctp-subtext1)}.pageview-track{height:80px;display:flex;align-items:flex-end;margin-top:5px;background:var(--ctp-base);border-radius:4px;overflow:hidden}.pageview-track i{display:block;width:100%;background:var(--ctp-mauve);border-radius:3px 3px 0 0}.pageview-bars small{display:block;margin-top:7px;font-size:8px;color:var(--ctp-subtext0);line-height:1.6}.insights-category-heading{display:flex;align-items:center;gap:6px;color:var(--ctp-subtext1);font-size:11px;margin:20px 0 12px}.article-categories{display:flex;flex-wrap:wrap;gap:6px;max-height:170px;overflow:auto}.article-categories a,.article-categories>span{font-size:9px;line-height:1.6;border-radius:4px;background:var(--ctp-surface0);padding:4px 7px;text-decoration:none;color:var(--ctp-subtext1);overflow-wrap:anywhere}.article-categories a:hover{color:var(--ctp-mauve)}.insights-method{margin-top:20px;color:var(--ctp-lavender);font-size:10px;line-height:1.8}.insights-method summary{cursor:pointer}.article-insights p.insights-attribution{font-size:9px;overflow-wrap:anywhere}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.card-modal .detail-card{align-self:start}.card-modal .detail-copy{align-self:start}.card-modal .detail-card .wiki-card{pointer-events:none}@media(max-width:560px){.card-readership{flex-direction:column;font-size:8px;gap:4px}.enrichment-scores{gap:4px}.enrichment-scores>span{font-size:10px}.enrichment-scores small{font-size:7px}.article-insights{padding:16px}.card-modal .detail-card{max-width:none}.card-modal .detail-card>.wiki-card{max-width:230px;margin-inline:auto}}
|
||||
+1
-1
@@ -59,4 +59,4 @@
|
||||
.native-mining .miner-footnote { font-size: 11px; }
|
||||
.wallet-recovery fieldset { padding: 14px; }
|
||||
.wallet-recovery h2 { font-size: 20px; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { PageEnrichment } from '../shared/enrichment.ts';
|
||||
|
||||
// One request per article shared by hero, collection and detail views. No wallet data is sent.
|
||||
const cache = new Map<number, { expires: number; job: Promise<PageEnrichment> }>();
|
||||
function load(pageId: number): Promise<PageEnrichment> {
|
||||
const existing=cache.get(pageId);
|
||||
if(existing && existing.expires>Date.now())return existing.job;
|
||||
const job=(async()=>{
|
||||
const response=await fetch(`/api/wikipedia/${pageId}`,{signal:AbortSignal.timeout(15000),cache:'no-store'});
|
||||
if(!response.ok)throw new Error('Live Wikipedia data unavailable');
|
||||
return await response.json() as PageEnrichment;
|
||||
})();
|
||||
cache.set(pageId,{expires:Date.now()+5*60*1000,job});
|
||||
if(cache.size>128)cache.delete(cache.keys().next().value!);
|
||||
return job;
|
||||
}
|
||||
export function useEnrichment(pageId: number) {
|
||||
const [data,setData]=useState<PageEnrichment>();
|
||||
const [error,setError]=useState(false);
|
||||
const [attempt,setAttempt]=useState(0);
|
||||
useEffect(()=>{
|
||||
let active=true;setData(undefined);setError(false);
|
||||
load(pageId).then(value=>{if(active)setData(value);},()=>{if(active)setError(true);});
|
||||
return()=>{active=false;};
|
||||
},[pageId,attempt]);
|
||||
return {data,error,retry:()=>{cache.delete(pageId);setAttempt(n=>n+1);}};
|
||||
}
|
||||
Reference in New Issue
Block a user