mirror of
https://github.com/pmret/website.git
synced 2024-11-08 12:12:27 +01:00
add github/discord links, default to latest commit
This commit is contained in:
Alex Bates
parent
a59e59458e
commit
83d7b83268
@ -77,12 +77,14 @@ function DataView({ data, captionPortal, nonce }) {
|
||||
const latest = data[data.length - 1]
|
||||
const oldest = data[0]
|
||||
|
||||
const [selectedEntry, setSelectedEntry] = useState(null)
|
||||
const [selectedEntry, setSelectedEntry] = useState(latest)
|
||||
|
||||
function renderTooltip(tip) {
|
||||
const entry = data.find(row => row.timestamp === tip.label)
|
||||
|
||||
setSelectedEntry(entry)
|
||||
if (entry) {
|
||||
setSelectedEntry(entry)
|
||||
}
|
||||
|
||||
return <span/>
|
||||
}
|
||||
@ -90,21 +92,21 @@ function DataView({ data, captionPortal, nonce }) {
|
||||
const maxPercent = Math.ceil(latest.percentBytes / 25) * 25
|
||||
|
||||
return <>
|
||||
<table width="250" className="outline-invert">
|
||||
{/*<table width="250" className="outline-invert">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Matched</td>
|
||||
<td className="thin align-right">{Math.round((latest.matchingBytes / latest.totalBytes) * 10000) / 100}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>*/}
|
||||
|
||||
<div className="shadow-box flex-grow">
|
||||
<div className="shadow-box-inner" style={{ paddingRight: ".7em", paddingTop: ".7em", "--text-outline": "transparent" }}>
|
||||
<div className="progress-chart">
|
||||
<ResponsiveContainer>
|
||||
<AreaChart data={data}>
|
||||
<XAxis dataKey="timestamp" type="number" scale={scale} domain={["dataMin", "dataMax"]} ticks={monthDates} tickFormatter={formatTimestampMonth} interval={0}/>
|
||||
<XAxis dataKey="timestamp" type="number" scale={scale} domain={["dataMin", Date.now()/1000]} ticks={monthDates} tickFormatter={formatTimestampMonth} interval={0}/>
|
||||
<YAxis type="number" unit="%" domain={[0, maxPercent]} tickCount={maxPercent / 5 + 1}/>
|
||||
|
||||
<CartesianGrid stroke="#eee"/>
|
||||
@ -133,7 +135,7 @@ function DataView({ data, captionPortal, nonce }) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry}/>, captionPortal.current)}
|
||||
{selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry} isLatest={selectedEntry.commit === latest.commit}/>, captionPortal.current)}
|
||||
</>
|
||||
}
|
||||
|
||||
@ -156,7 +158,7 @@ function formatTimestampMonth(timestamp) {
|
||||
return month
|
||||
}
|
||||
|
||||
function EntryInfo({ entry }) {
|
||||
function EntryInfo({ entry, isLatest }) {
|
||||
/*const [commitMessage, setCommitMessage] = useState(null)
|
||||
|
||||
useEffect(async () => {
|
||||
@ -171,6 +173,7 @@ function EntryInfo({ entry }) {
|
||||
<a href={`https://github.com/ethteck/papermario/commit/${entry.commit}`}>
|
||||
{entry.commit.substr(0, 8)}
|
||||
</a>
|
||||
{isLatest && " (latest)"}
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
|
||||
@ -37,20 +37,51 @@ button {
|
||||
all: unset;
|
||||
|
||||
border-radius: 100em;
|
||||
padding: 0 .3em .2em .3em;
|
||||
padding: 0 .4em .2em .4em;
|
||||
cursor: pointer;
|
||||
|
||||
filter: brightness(1.0);
|
||||
will-change: filter;
|
||||
transition: filter 200ms;
|
||||
will-change: filter, box-shadow;
|
||||
transition: filter 100ms ease-out, box-shadow 100ms ease-out;
|
||||
|
||||
border-top: 4px solid;
|
||||
border-left: 2px solid;
|
||||
border-bottom: 4px solid;
|
||||
border-right: 2px solid;
|
||||
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
button.red {
|
||||
background: linear-gradient(#f04e54, #f04e54 10%, #b4313e 25%, #b4313e 90%, #7f1729 95%);
|
||||
border-top-color: #f04e54;
|
||||
border-left-color: #f04e54;
|
||||
background: #b4313e;
|
||||
border-bottom-color: #7f1729;
|
||||
border-right-color: #7f1729;
|
||||
}
|
||||
|
||||
button.yellow {
|
||||
background: linear-gradient(#f0c74e, #f0c74e 10%, #b48b31 25%, #b48b31 90%, #7f5617 95%);
|
||||
border-top-color: #f0c74e;
|
||||
border-left-color: #f0c74e;
|
||||
background: #b48b31;
|
||||
border-bottom-color: #7f5617;
|
||||
border-right-color: #7f5617;
|
||||
}
|
||||
|
||||
button.blurple {
|
||||
border-top-color: #98a9e2;
|
||||
border-left-color: #98a9e2;
|
||||
background: #7289da;
|
||||
border-bottom-color: #4E5D94;
|
||||
border-right-color: #4E5D94;
|
||||
}
|
||||
|
||||
button.github {
|
||||
border-top-color: #554e4e;
|
||||
border-left-color: #554e4e;
|
||||
background: #322f2f;
|
||||
border-bottom-color: #171515;
|
||||
border-right-color: #171515;
|
||||
}
|
||||
|
||||
button.inactive {
|
||||
@ -59,6 +90,7 @@ button.inactive {
|
||||
|
||||
button:hover {
|
||||
filter: brightness(1.0);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.tab {
|
||||
@ -86,6 +118,7 @@ button:hover {
|
||||
nav {
|
||||
margin-bottom: -.6em;
|
||||
z-index: 1;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -95,6 +128,10 @@ main {
|
||||
background-repeat: repeat;
|
||||
background-size: 32px;
|
||||
background-position: center;
|
||||
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: optimizespeed;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
|
||||
border-radius: 1rem;
|
||||
@ -107,6 +144,8 @@ main {
|
||||
flex-direction: column;
|
||||
|
||||
transition: 600ms transform ease-in-out;
|
||||
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
main.red {
|
||||
@ -130,7 +169,7 @@ main > * {
|
||||
margin-bottom: 1em;
|
||||
|
||||
border-radius: 16px;
|
||||
box-shadow: .5em .5em 3px -.2em #00000044;
|
||||
box-shadow: .3em .5em 16px -.2em rgba(0, 0, 0, 0.4);
|
||||
|
||||
border-top: 4px solid #ffffff33;
|
||||
padding-top: calc(1em - 2px);
|
||||
@ -169,6 +208,8 @@ button.shadow-box-title {
|
||||
|
||||
padding-top: .2em;
|
||||
height: 1.2em;
|
||||
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.caption {
|
||||
@ -185,6 +226,8 @@ button.shadow-box-title {
|
||||
padding: 8px 16px;
|
||||
margin-top: -14px;
|
||||
z-index: 1;
|
||||
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.progress-chart {
|
||||
|
||||
13
src/main.jsx
13
src/main.jsx
@ -9,7 +9,11 @@ const tabs = [
|
||||
slug: "/",
|
||||
name: "Info",
|
||||
color: "red",
|
||||
pane: () => <div>I am the info page</div>,
|
||||
pane: () => <div>
|
||||
<p className="outline-invert">
|
||||
Welcome to the Paper Mario Reverse-Engineering website!
|
||||
</p>
|
||||
</div>,
|
||||
},
|
||||
{
|
||||
slug: "/progress",
|
||||
@ -69,6 +73,12 @@ function App() {
|
||||
{tab.name}
|
||||
</button>
|
||||
})}
|
||||
<button className="tab blurple inactive" onClick={() => window.open("https://discord.gg/urUm3VG")}>
|
||||
Discord
|
||||
</button>
|
||||
<button className="tab github inactive" onClick={() => window.open("https://github.com/pmret/papermario")}>
|
||||
GitHub
|
||||
</button>
|
||||
</nav>
|
||||
<main id="main" ref={pane} className={clsx(tabs[paneIndex].color)} style={{
|
||||
transform: `perspective(4000px) rotateX(${rotation}deg)`,
|
||||
@ -77,7 +87,6 @@ function App() {
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
transform: `rotateX(${flip ? '180deg' : '0deg'})`,
|
||||
overflow: "hidden",
|
||||
}}>
|
||||
{tabs[paneIndex].pane({ captionPortal, nonce: rotation })}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user