-
+
{entry.commit.substr(0, 8)}
{isLatest && " (latest)"}
@@ -179,8 +176,8 @@ function EntryInfo({ entry, isLatest }) {
Matched |
- {Math.round((entry.matchingBytes / entry.totalBytes) * 10000) / 100}% bytes
- ({entry.matchingFuncs}/{entry.totalFuncs} split functions)
+ {Math.round(entry.percentBytes * 100) / 100}% bytes
+ ({entry.matchingFuncs}/{entry.totalFuncs} functions)
|
diff --git a/src/bg/green-checker.png b/src/bg/green-checker.png
new file mode 100644
index 0000000..f4b1796
Binary files /dev/null and b/src/bg/green-checker.png differ
diff --git a/src/bg/mrn-clouds.png b/src/bg/mrn-clouds.png
new file mode 100644
index 0000000..e69ab69
Binary files /dev/null and b/src/bg/mrn-clouds.png differ
diff --git a/src/bg/mrn-toad-town.png b/src/bg/mrn-toad-town.png
new file mode 100644
index 0000000..de0d0b5
Binary files /dev/null and b/src/bg/mrn-toad-town.png differ
diff --git a/src/bg/teal-checker.png b/src/bg/teal-checker.png
new file mode 100644
index 0000000..7cf9f02
Binary files /dev/null and b/src/bg/teal-checker.png differ
diff --git a/src/cdown.svg b/src/cdown.svg
new file mode 100644
index 0000000..ec5d117
--- /dev/null
+++ b/src/cdown.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/src/index.css b/src/index.css
index 503eb06..5d98dea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,7 +7,7 @@ html {
--dark: #313131;
--light: #d6d6ce;
- font-size: 28px;
+ font-size: 32px;
font-family: "Paper Mario Dialog Redesigned", sans-serif;
font-weight: 700;
line-height: 1.2;
@@ -15,11 +15,35 @@ html {
color: var(--light);
--text-outline: var(--dark);
- background: #090942; /* TODO: dynamic star bg */
+ background-color: #002c02;
+ background-image: url(bg/mrn-toad-town.png);
+ background-size: cover;
+ background-repeat: no-repeat;
overflow: hidden;
}
+body {
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+
+ background-image: url(bg/mrn-clouds.png);
+ background-repeat: repeat-x;
+ background-size: contain;
+ animation: clouds linear 30s infinite normal;
+}
+
+@keyframes clouds {
+ from {
+ background-position: 0 0;
+ }
+
+ to {
+ background-position: 100vw 0;
+ }
+}
+
* {
box-sizing: border-box;
@@ -27,6 +51,10 @@ html {
text-shadow: var(--text-outline) 3px 0px 0px, var(--text-outline) 2.83487px 0.981584px 0px, var(--text-outline) 2.35766px 1.85511px 0px, var(--text-outline) 1.62091px 2.52441px 0px, var(--text-outline) 0.705713px 2.91581px 0px, var(--text-outline) -0.287171px 2.98622px 0px, var(--text-outline) -1.24844px 2.72789px 0px, var(--text-outline) -2.07227px 2.16926px 0px, var(--text-outline) -2.66798px 1.37182px 0px, var(--text-outline) -2.96998px 0.42336px 0px, var(--text-outline) -2.94502px -0.571704px 0px, var(--text-outline) -2.59586px -1.50383px 0px, var(--text-outline) -1.96093px -2.27041px 0px, var(--text-outline) -1.11013px -2.78704px 0px, var(--text-outline) -0.137119px -2.99686px 0px, var(--text-outline) 0.850987px -2.87677px 0px, var(--text-outline) 1.74541px -2.43999px 0px, var(--text-outline) 2.44769px -1.73459px 0px, var(--text-outline) 2.88051px -0.838247px 0px;
}
+p {
+ margin: 0;
+}
+
a:any-link {
color: #3796ff;
--text-outline: #d3e5f9;
@@ -38,7 +66,6 @@ button {
border-radius: 100em;
padding: 0 .4em .2em .4em;
- cursor: pointer;
filter: brightness(1.0);
will-change: filter, box-shadow;
@@ -50,6 +77,9 @@ button {
border-right: 2px solid;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+
+ user-select: none;
+ text-align: center;
}
button.red {
@@ -84,6 +114,22 @@ button.github {
border-right-color: #171515;
}
+button.teal {
+ border-top-color: #22eec9;
+ border-left-color: #22eec9;
+ background: #14a98e;
+ border-bottom-color: #076d5a;
+ border-right-color: #076d5a;
+}
+
+button.green {
+ border-top-color: #68ff51;
+ border-left-color: #68ff51;
+ background: #47b836;
+ border-bottom-color: #2a791e;
+ border-right-color: #2a791e;
+}
+
button.inactive {
filter: brightness(0.6);
}
@@ -95,6 +141,7 @@ button:hover {
.tab {
margin-right: .25em;
+ cursor: pointer;
}
#container {
@@ -108,11 +155,10 @@ button:hover {
flex-direction: column;
align-items: center;
- width: 1400px;
- max-width: calc(100vw - 10vh);
-
- height: 1200px;
- max-height: calc(100vh - 10vw);
+ width: 80%;
+ max-width: 95%;
+ height: 80%;
+ max-height: 950%;
}
nav {
@@ -137,6 +183,7 @@ main {
border-radius: 1rem;
padding: 1em;
+ /*padding-bottom: 2.5em;*/
overflow-y: auto;
@@ -148,6 +195,10 @@ main {
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}
+main > :last-child {
+ padding-bottom: 1.5em;
+}
+
main.red {
background-color: #e2b6b3;
background-image: url(bg/red-checker.png);
@@ -158,6 +209,16 @@ main.yellow {
background-image: url(bg/yellow-checker.png);
}
+main.teal {
+ background-color: #cad9d6;
+ background-image: url(bg/teal-checker.png);
+}
+
+main.green {
+ background-color: #68ff51;
+ background-image: url(bg/green-checker.png);
+}
+
main > * {
image-rendering: initial;
}
@@ -231,14 +292,18 @@ button.shadow-box-title {
background-repeat: repeat;
background-size: 48px;
background-position: center;
+
+ -ms-interpolation-mode: nearest-neighbor;
+ image-rendering: optimizespeed;
+ image-rendering: crisp-edges;
image-rendering: pixelated;
border-radius: 1rem;
width: 85%;
- height: 3rem;
+ height: 4rem;
- padding: 8px 16px;
- margin-top: -14px;
+ padding: .5em 1em;
+ margin-top: -2em;
z-index: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -247,7 +312,7 @@ button.shadow-box-title {
.progress-chart {
flex: 1;
- font-size: 12px;
+ font-size: 18px;
overflow: hidden;
user-select: none;
@@ -269,3 +334,34 @@ button.shadow-box-title {
.flex-spacer { width: 1em; height: 1em }
.align-right { text-align: right }
+
+.avatars {
+ position: relative;
+
+ width: 400px;
+ height: 400px;
+
+ margin-bottom: 2em;
+}
+
+.avatar {
+ border-radius: 100em;
+
+ position: absolute;
+ will-change: filter, top, left;
+ transition: 200ms filter, 200ms top, 200ms left;
+
+ cursor: pointer;
+
+ width: 5em;
+ height: 5em;
+ transform: translate(-50%, -50%);
+}
+
+.avatar.inactive {
+ filter: brightness(0.7) saturate(0.7);
+}
+
+.avatar:hover {
+ filter: brightness(1.0);
+}
diff --git a/src/index.html b/src/index.html
index 911f452..8387bf9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
-
Paper Mario Reverse Engineering
+
Paper Mario Decompilation
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 9a062a7..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import moment from "moment"
-
-import("./progress.js").then(async ({ fetchData, functionsChart }) => {
- const data = await fetchData()
-
- functionsChart(data, document.getElementById("progress-chart"))
-
- const first = data[0]
- const latest = data[data.length - 1]
-
- document.getElementById("matched-rom-percent").innerText = Math.round((latest.matchingBytes / latest.totalBytes) * 10000) / 100 + "% matched" // TODO: include data
- document.getElementById("functions-ratio").innerText = latest.matchingFuncs + "/" + latest.totalFuncs
- document.getElementById("play-time").innerText = moment(latest.timestamp).from(first.timestamp, true)
-}).catch(console.error)
diff --git a/src/main.jsx b/src/main.jsx
index 6bc92ad..9542478 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom"
import clsx from "clsx"
import ProgressPane from "./ProgressPane"
+import Contributors from "./Contributors"
const tabs = [
{
@@ -11,16 +12,28 @@ const tabs = [
color: "red",
pane: () =>
- Welcome to the Paper Mario Reverse-Engineering website!
+ Welcome to the Paper Mario decompilation site!
,
},
{
- slug: "/progress",
- name: "Progress",
+ slug: "/progress-us",
+ name: "Progress (US)",
color: "yellow",
- pane: (props) =>
+ pane: (props) =>
},
+ {
+ slug: "/progress-jp",
+ name: "Progress (JP)",
+ color: "green",
+ pane: (props) =>
+ },
+ /*{
+ slug: "/contributors",
+ name: "Contributors",
+ color: "teal",
+ pane: (props) =>
+ },*/
]
let routedTabIndex = tabs.findIndex(tab => tab.slug === document.location.pathname)
@@ -33,7 +46,7 @@ function App() {
const [flip, setFlip] = useState(false)
const pane = useRef()
- function switchToTab(index) {
+ function switchToTab(index, pushState) {
if (index === paneIndex || index === tabIndex) return
console.info("switching to tab", index)
@@ -41,7 +54,8 @@ function App() {
setRotation(rotation - 180)
setTabIndex(index)
- history.pushState(null, tabs[index].name, tabs[index].slug)
+ if (pushState)
+ history.pushState(null, tabs[index].name, tabs[index].slug)
setTimeout(() => {
setPaneIndex(index)
@@ -51,7 +65,7 @@ function App() {
useEffect(() => {
function listener() {
- switchToTab(tabs.findIndex(tab => tab.slug === document.location.pathname))
+ switchToTab(tabs.findIndex(tab => tab.slug === window.location.pathname), false)
}
window.addEventListener("popstate", listener)
@@ -67,7 +81,7 @@ function App() {
key={tab.name}
className={clsx("tab", tab.color, { "inactive": index !== tabIndex })}
onClick={() => {
- switchToTab(index)
+ switchToTab(index, true)
}}
>
{tab.name}