Skip to content

Commit

Permalink
Update New Replays
Browse files Browse the repository at this point in the history 
The main difference is that the main search screen should look
much nicer now.

https://pokemonshowdown.com/replays/

Putting search/featured/recent in separate sections makes the new
design look much nicer. And dark mode is now fully supported.
  • Loading branch information
@Zarel
Zarel committed Oct 26, 2023
1 parent fd28aca commit 235056b
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 41 deletions.
13 changes: 13 additions & 0 deletions .vscode/tasks.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": "build",
"problemMatcher": [],
"label": "npm: build",
"detail": "node build"
}
]
}
2 changes: 1 addition & 1 deletion build-tools/update
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ function updateURL(a, b, c, d) {
const fstr = fs.readFileSync(filename, {encoding: 'utf8'});
hash = crypto.createHash('md5').update(fstr).digest('hex').substr(0, 8);
} catch (e) {}

return b + '="' + c + '?' + hash + '"';
} else {
// hardcoded to Replays rn; TODO: generalize
Expand Down
10 changes: 9 additions & 1 deletion website/replays/index.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<!-- Venatus Ad Manager - Install in <HEAD> of page -->
<script src="https://hb.vntsm.com/v3/live/ad-manager.min.js" type="text/javascript" data-site-id="642aba63ec9a7b11c3c9c1be" data-mode="scan" async></script>
<!-- / Venatus Ad Manager -->

<style>
@media (max-width:820px) {
.battle {
Expand All @@ -47,6 +47,14 @@
border-bottom-left-radius: 0;
margin-left: -1px;
}
.linklist {
list-style: none;
margin: 0.5em 0;
padding: 0;
}
.linklist li {
padding: 2px 0;
}
</style>

<div>
Expand Down
198 changes: 162 additions & 36 deletions website/replays/src/replays.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,32 @@ import {BattleSound} from '../../../src/battle-sound';
import $ from 'jquery';

function showAd(id: string) {
// @ts-expect-error
window.top.__vm_add = window.top.__vm_add || [];

//this is a x-browser way to make sure content has loaded.

(function (success) {
if (window.document.readyState !== "loading") {
success();
} else {
window.document.addEventListener("DOMContentLoaded", function () {
success();
});
}
if (window.document.readyState !== "loading") {
success();
} else {
window.document.addEventListener("DOMContentLoaded", function () {
success();
});
}
})(function () {
var placement = document.createElement("div");
placement.setAttribute("class", "vm-placement");
if (window.innerWidth > 1000) {
//load desktop placement
placement.setAttribute("data-id", "6452680c0b35755a3f09b59b");
} else {
//load mobile placement
placement.setAttribute("data-id", "645268557bc7b571c2f06f62");
}
document.querySelector("#" + id).appendChild(placement);
window.top.__vm_add.push(placement);
var placement = document.createElement("div");
placement.setAttribute("class", "vm-placement");
if (window.innerWidth > 1000) {
//load desktop placement
placement.setAttribute("data-id", "6452680c0b35755a3f09b59b");
} else {
//load mobile placement
placement.setAttribute("data-id", "645268557bc7b571c2f06f62");
}
document.querySelector("#" + id)!.appendChild(placement);
// @ts-expect-error
window.top.__vm_add.push(placement);
});
}

Expand All @@ -44,46 +46,170 @@ class SearchPanel extends preact.Component {
format = '';
user = '';
sort = 'date';
moreFun = false;
moreCompetitive = false;
override componentDidMount() {
Net('https://replay.pokemonshowdown.com/search.json').get().then(result => {
this.results = JSON.parse(result);
this.forceUpdate();
});
}
submitForm = (e: Event) => {
e.preventDefault();
// @ts-ignore
this.format = document.getElementsByName('format')[0]?.value || '';
// @ts-ignore
this.user = document.getElementsByName('user')[0]?.value || '';
search(format: string, user: string) {
this.format = format;
this.user = user;
this.results = null;
this.moreFun = false;
this.moreCompetitive = false;
this.forceUpdate();
Net('https://replay.pokemonshowdown.com/search.json').get({
query: {user: this.user, format: this.format},
}).then(result => {
this.results = JSON.parse(result);
this.forceUpdate();
});
}
submitForm = (e: Event) => {
e.preventDefault();
// @ts-expect-error
const format = document.getElementsByName('format')[0]?.value || '';
// @ts-expect-error
const user = document.getElementsByName('user')[0]?.value || '';
this.search(format, user);
};
cancelForm = (e: Event) => {
e.preventDefault();
this.search('', '');
};
showMoreFun = (e: Event) => {
e.preventDefault();
this.moreFun = true;
this.forceUpdate();
};
showMoreCompetitive = (e: Event) => {
e.preventDefault();
this.moreCompetitive = true;
this.forceUpdate();
};
override render() {
const searchResults = <ul class="linklist">
{!this.results && <li>
<em>Loading...</em>
</li>}
{this.results?.map(result => <li>
<a href={result.id} class="blocklink">
<small>[{result.format}]<br /></small>
<strong>{result.p1}</strong> vs. <strong>{result.p2}</strong>
</a>
</li>)}
</ul>;
const activelySearching = !!(this.format || this.user);
return <div><section class="section">
<h1>Search replays</h1>
<form onSubmit={this.submitForm}>
<p><label>Username:<br /><input type="text" class="textbox" name="user" /></label></p>
<p><label>Format:<br /><input type="text" class="textbox" name="format" /></label></p>
<p><button type="submit" class="button">Search</button></p>
<p><label>Username:<br /><input type="text" class="textbox" name="user" placeholder="(blank = any user)" size={25} /></label></p>
<p><label>Format:<br /><input type="text" class="textbox" name="format" placeholder="(blank = any format)" size={35} /></label></p>
<p><button type="submit" class="button"><i class="fa fa-search" aria-hidden></i> <strong>Search</strong></button> {activelySearching && <button class="button" onClick={this.cancelForm}>Cancel</button>}</p>
{activelySearching && <h2>Results</h2>}
{activelySearching && searchResults}
</form>
</section>{!activelySearching && <section class="section">
<h1>Featured replays</h1>
<ul class="linklist">
{!this.results && <li>
<em>Loading...</em>
<li><h2>Fun</h2></li>
<li><a href="oumonotype-82345404" class="blocklink">
<small>[oumonotype]<br /></small>
<strong>kdarewolf</strong> vs. <strong>Onox</strong>
<small><br />Protean + prediction</small>
</a></li>
<li><a href="anythinggoes-218380995" class="blocklink">
<small>[anythinggoes]<br /></small>
<strong>Anta2</strong> vs. <strong>dscottnew</strong>
<small><br />Cheek Pouch</small>
</a></li>
<li><a href="uberssuspecttest-147833524" class="blocklink">
<small>[ubers]<br /></small>
<strong>Metal Brellow</strong> vs. <strong>zig100</strong>
<small><br />Topsy-Turvy</small>
</a></li>
{!this.moreFun && <li style={{paddingLeft: '8px'}}>
<button class="button" onClick={this.showMoreFun}>More <i class="fa fa-caret-right" aria-hidden></i></button>
</li>}
{this.results?.map(result => <li>
<a href={result.id} class="blocklink">
<small>[{result.format}]<br /></small>
<strong>{result.p1}</strong> vs. <strong>{result.p2}</strong>
</a>
</li>)}
{this.moreFun && <li><a href="smogondoubles-75588440" class="blocklink">
<small>[smogondoubles]<br /></small>
<strong>jamace6</strong> vs. <strong>DubsWelder</strong>
<small><br />Garchomp sweeps 11 pokemon</small>
</a></li>}
{this.moreFun && <li><a href="ou-20651579" class="blocklink">
<small>[ou]<br /></small>
<strong>RainSeven07</strong> vs. <strong>my body is regi</strong>
<small><br />An entire team based on Assist V-create</small>
</a></li>}
{this.moreFun && <li><a href="balancedhackmons7322360" class="blocklink">
<small>[balancedhackmons]<br /></small>
<strong>a ver</strong> vs. <strong>Shuckie</strong>
<small><br />To a ver's frustration, PP stall is viable in Balanced Hackmons</small>
</a></li>}
<h2>Competitive</h2>
<li><a href="doublesou-232753081" class="blocklink" style="white-space:normal">
<small>[doubles ou]<br /></small>
<strong>Electrolyte</strong> vs. <strong>finally</strong>
<small><br />finally steals Electrolyte's spot in the finals of the Doubles Winter Seasonal by outplaying Toxic Aegislash.</small>
</a></li>
<li><a href="smogtours-gen5ou-59402" class="blocklink" style="white-space:normal">
<small>[bw ou]<br /></small>
<strong>Reymedy</strong> vs. <strong>Leftiez</strong>
<small><br />Reymedy's superior grasp over BW OU lead to his claim of victory over Leftiez in the No Johns Tournament.</small>
</a></li>
<li><a href="smogtours-gen3ou-56583" class="blocklink" style="white-space:normal">
<small>[adv ou]<br /></small>
<strong>pokebasket</strong> vs. <strong>Alf'</strong>
<small><br />pokebasket proved Blissey isn't really one to take a Focus Punch well in his victory match over Alf' in the Fuck Trappers ADV OU tournament.</small>
</a></li>
<li><a href="smogtours-ou-55891" class="blocklink" style="white-space:normal">
<small>[oras ou]<br /></small>
<strong>Marshall.Law</strong> vs. <strong>Malekith</strong>
<small><br />In a "match full of reverses", Marshall.Law takes on Malekith in the finals of It's No Use.</small>
</a></li>
<li><a href="smogtours-ubers-54583" class="blocklink" style="white-space:normal">
<small>[custom]<br /></small>
<strong>hard</strong> vs. <strong>panamaxis</strong>
<small><br />Dark horse panamaxis proves his worth as the rightful winner of The Walkthrough Tournament in this exciting final versus hard.</small>
</a></li>
{!this.moreCompetitive && <li style={{paddingLeft: '8px'}}>
<button class="button" onClick={this.showMoreCompetitive}>More <i class="fa fa-caret-right" aria-hidden></i></button>
</li>}
{this.moreCompetitive && <li><a href="smogtours-ubers-34646" class="blocklink" style="white-space:normal">
<small>[oras ubers]<br /></small>
<strong>steelphoenix</strong> vs. <strong>Jibaku</strong>
<small><br />In this SPL Week 4 battle, Jibaku's clever plays with Mega Sableye keep the momentum mostly in his favor.</small>
</a></li>}
{this.moreCompetitive && <li><a href="smogtours-uu-36860" class="blocklink" style="white-space:normal">
<small>[oras uu]<br /></small>
<strong>IronBullet93</strong> vs. <strong>Laurel</strong>
<small><br />Laurel outplays IronBullet's Substitute Tyrantrum with the sly use of a Shuca Berry Cobalion, but luck was inevitably the deciding factor in this SPL Week 6 match.</small>
</a></li>}
{this.moreCompetitive && <li><a href="smogtours-gen5ou-36900" class="blocklink" style="white-space:normal">
<small>[bw ou]<br /></small>
<strong>Lowgock</strong> vs. <strong>Meridian</strong>
<small><br />This SPL Week 6 match features impressive plays, from Jirachi sacrificing itself to paralysis to avoid a burn to some clever late-game switches.</small>
</a></li>}
{this.moreCompetitive && <li><a href="smogtours-gen4ou-36782" class="blocklink" style="white-space:normal">
<small>[dpp ou]<br /></small>
<strong>Heist</strong> vs. <strong>liberty32</strong>
<small><br />Starting out as an entry hazard-filled stallfest, this close match is eventually decided by liberty32's efficient use of Aerodactyl.</small>
</a></li>}
{this.moreCompetitive && <li><a href="randombattle-213274483" class="blocklink" style="white-space:normal">
<small>[randombattle]<br /></small>
<strong>The Immortal</strong> vs. <strong>Amphinobite</strong>
<small><br />Substitute Lugia and Rotom-Fan take advantage of Slowking's utility and large HP stat, respectively, in this high ladder match.</small>
</a></li>}
</ul>
</section></div>;
</section>}{!activelySearching && <section class="section">
<h1>Recent replays</h1>
<ul class="linklist">
{searchResults}
</ul>
</section>}</div>;
}
}

Expand Down
15 changes: 12 additions & 3 deletions website/style/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ header {
left: 0;
top: 0;
}
.nav a {
.nav a, .dark .nav a {
color: white;
background: #3a4f88;
background: linear-gradient(to bottom, #4c63a3, #273661);
Expand All @@ -63,10 +63,11 @@ header {
margin-left: -1px;
font-size: 11pt;
}
.nav a:hover {
.nav a:hover, .dark .nav a:hover {
background: linear-gradient(to bottom, #5a77c7, #2f447f);
border: 1px solid #222c4a;
}
.nav a:active {
.nav a:active, .dark .nav a:active {
background: linear-gradient(to bottom, #273661, #4c63a3);
box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45), inset 0.5px 1px -1px rgba(255, 255, 255, 0.5);
}
Expand Down Expand Up @@ -176,6 +177,9 @@ h1 {
padding: 0 0 5px;
margin: 0;
}
.dark h1 {
border-bottom-color: #888;
}

.section {
color: black;
Expand All @@ -188,6 +192,11 @@ h1 {

backdrop-filter: blur(4px);
}
.dark .section {
border-color: rgba(255, 255, 255, .4);
background: rgba(50, 50, 50, .5);
color: #DDD;
}

/*********************************************************
* Defaults
Expand Down

0 comments on commit 235056b

Please sign in to comment.