October 28, 2023: Merge with PS part 2

.gitignore

@@ -32,4 +32,8 @@ package-lock.json
 /website/images/
 /website/ads.txt
 
-/DH2/*
+/DH2/*
+/DH2/
+/website/replays/index.html
+/website/replays/js/
+node_modules

.htaccess

@@ -21,7 +21,7 @@ RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$ [NC]
 RewriteCond %{QUERY_STRING} !^insecure [NC]
 RewriteRule ^([A-Za-z0-9-]*)$ https://play.pokemonshowdown.com/$1 [R=307,NE,L]
 
-# basic stuff
+# redirects
 RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$ [NC]
 RewriteRule ^appeals?\/?$ https://play.pokemonshowdown.com/view-help-request--appeal [R=302,L]
 RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$ [NC]
@@ -55,6 +55,8 @@ RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$ [NC]
 RewriteRule ^insecure\/?$ http://play.pokemonshowdown.com/?insecure [R=302,L]
 RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$ [NC]
 RewriteRule ^devdiscord\/?$ https://discord.com/invite/D8QwhsH [R=302,L]
+RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$ [NC]
+RewriteRule ^formatsuggestions/?$ https://pokemonshowdown.com/pages/formatsuggestions [R=302,L]
 
 # rewrite old sprite directories/files
 RewriteRule ^sprites\/xyani(.*)?$ sprites/ani$1 [L,QSA]
@@ -121,16 +123,16 @@ Header set Pragma "no-cache" env=INDEX_PAGE
 Header set Expires "0" env=INDEX_PAGE
 
 # No direct linking to the lobby.
-RewriteCond %{ENV:SCRIPT_URL} ^/(lobby/?)?$
-RewriteCond %{HTTP_REFERER} !^$
-RewriteCond %{HTTP_REFERER} !^https?:\/\/([a-z0-9-]+.)?(pokemonshowdown\.com|appjs)
-RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$
-RewriteCond %{REMOTE_ADDR} !=127.0.0.1
-RewriteCond %{REMOTE_ADDR} !=162.243.13.96
-RewriteCond %{HTTP:CF-Connecting-IP} !=173.252.196.254
-RewriteCond %{HTTP:CF-Connecting-IP} !=198.27.67.31
-RewriteCond %{HTTP:CF-Connecting-IP} !=162.243.13.96
-RewriteRule ^.* https://pokemonshowdown.com/ [R=303,L]
+# RewriteCond %{ENV:SCRIPT_URL} ^/(lobby/?)?$
+# RewriteCond %{HTTP_REFERER} !^$
+# RewriteCond %{HTTP_REFERER} !^https?:\/\/([a-z0-9-]+.)?(pokemonshowdown\.com|# appjs)
+# RewriteCond %{HTTP_HOST} ^play\.pokemonshowdown\.com$
+# RewriteCond %{REMOTE_ADDR} !=127.0.0.1
+# RewriteCond %{REMOTE_ADDR} !=162.243.13.96
+# RewriteCond %{HTTP:CF-Connecting-IP} !=173.252.196.254
+# RewriteCond %{HTTP:CF-Connecting-IP} !=198.27.67.31
+# RewriteCond %{HTTP:CF-Connecting-IP} !=162.243.13.96
+# RewriteRule ^.* https://pokemonshowdown.com/ [R=303,L]
 
 AddType 'text/plain; charset=UTF-8' json5
 

.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "build",
+			"group": "build",
+			"problemMatcher": [],
+			"label": "npm: build",
+			"detail": "node build"
+		}
+	]
+}

build-tools/update

@@ -101,7 +101,7 @@ if (process.argv[2] === 'full') {
 
 compiledFiles += compiler.compileToDir(`src`, `js`, compileOpts);
 
-compiledFiles += compiler.compileToDir(`src`, `js`, compileOpts);
+compiledFiles += compiler.compileToDir(`website/replays/src`, `website/replays/js`, compileOpts);
 
 compiledFiles += compiler.compileToFile(
 	['src/battle-dex.ts', 'src/battle-dex-data.ts', 'src/battle-log.ts', 'src/battle-log-misc.js', 'data/pokemon-showdown/server/chat-formatter.ts', 'data/text.js', 'src/battle-text-parser.ts'],
@@ -128,7 +128,7 @@ console.log(
 
 process.stdout.write("Updating cachebuster and URLs... ");
 
-const URL_REGEX = /(src|href)="\/(.*?)(\?[a-z0-9]*?)?"/g;
+const URL_REGEX = /(src|href)="(.*?)(\?[a-z0-9]*?)?"/g;
 
 function updateURL(a, b, c, d) {
 	c = c.replace('/replay.pokemonshowdown.com/', '/' + routes.replays + '/');
@@ -137,16 +137,27 @@ function updateURL(a, b, c, d) {
 	c = c.replace('/pokemonshowdown.com/', '/' + routes.root + '/');
 
 	if (d) {
-		let hash = Math.random(); // just in case creating the hash fails
-		try {
-			const filename = c.replace('/' + routes.client + '/', '');
-			const fstr = fs.readFileSync(filename, {encoding: 'utf8'});
-			hash = crypto.createHash('md5').update(fstr).digest('hex').substr(0, 8);
-		} catch (e) {}
-
-		return b + '="/' + c + '?' + hash + '"';
+		if (c.startsWith('/')) {
+			let hash = Math.random(); // just in case creating the hash fails
+			try {
+				const filename = c.slice(1).replace('/' + routes.client + '/', '');
+				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
+			let hash;
+			try {
+				const fstr = fs.readFileSync('website/replays/' + c, {encoding: 'utf8'});
+				hash = crypto.createHash('md5').update(fstr).digest('hex').substr(0, 8);
+			} catch (e) {}
+
+			return b + '="' + c + '?' + (hash || 'v1') + '"';
+		}
 	} else {
-		return b + '="/' + c + '"';
+		return b + '="' + c + '"';
 	}
 }
 
@@ -156,6 +167,11 @@ function writeFiles(indexContents, preactIndexContents, crossprotocolContents, r
 	fs.writeFileSync('crossprotocol.html', crossprotocolContents);
 	process.stdout.write("Writing replay-embed.js... ");
 	fs.writeFileSync('js/replay-embed.js', replayEmbedContents);
+
+	let replaysContents = fs.readFileSync('website/replays/index.template.html', {encoding: 'utf8'});
+	replaysContents = replaysContents.replace(URL_REGEX, updateURL);
+	fs.writeFileSync('website/replays/index.html', replaysContents);
+
 	console.log("DONE");
 }
 

js/client-mainmenu.js

@@ -37,7 +37,7 @@
 				} else {
 					buf += '<p class="error"><strong>Pok&eacute;mon Showdown is offline due to technical difficulties!</strong></p>';
 				}
-				buf += '<p><div style="text-align:center"><img width="96" height="96" src="//play.pokemonshowdown.com/sprites/gen5/teddiursa.png" alt="" /></div> Bear with us as we freak out.</p>';
+				buf += '<p><div style="text-align:center"><img width="96" height="96" src="//play.pokemonshowdown.com/sprites/gen5/teddiursa.png" alt="" class="pixelated" /></div> Bear with us as we freak out.</p>';
 				buf += '<p>(We\'ll be back up in a few hours.)</p>';
 				buf += '</div>';
 			} else {
@@ -1224,27 +1224,73 @@
 	});
 
 	var FormatPopup = this.FormatPopup = this.Popup.extend({
+		events: {
+			'keyup input[name=search]': 'updateSearch',
+			'click details': 'updateOpen',
+			'click i.fa': 'updateStar',
+		},
 		initialize: function (data) {
-			var curFormat = data.format;
+			this.data = data;
+			if (!this.open) {
+				// todo: maybe make this configurable? not sure since it will cache what users toggle.
+				// avoiding that decision for now because it requires either an ugly hack
+				// or an overhaul of BattleFormats.
+				this.open = Storage.prefs('openformats') || {
+					"S/V Singles": true, "S/V Doubles": true, "National Dex": true, "OM of the Month": true,
+					"Other Metagames": true, "Randomized Format Spotlight": true, "RoA Spotlight": true,
+				};
+			}
+			if (!this.starred) this.starred = Storage.prefs('starredformats') || {};
+			if (!this.search) this.search = "";
 			this.onselect = data.onselect;
-			var selectType = data.selectType;
-			if (!selectType) selectType = (this.sourceEl.closest('form').data('search') ? 'search' : 'challenge');
+			this.selectType = data.selectType;
+			if (!this.selectType) this.selectType = (this.sourceEl.closest('form').data('search') ? 'search' : 'challenge');
+
+
+			var html = '<p><ul class="popupmenu"><li><input name="search" placeholder="Search formats" value="' + this.search + '"/>';
+			html += '</li></ul></p><span name="formats">';
+			html += this.renderFormats();
+			html += '</span><div style="clear:left"></div><p></p>';
+			this.$el.html(html);
+		},
+		renderFormats: function () {
+			var data = this.data;
+			var curFormat = data.format;
 			var bufs = [];
 			var curBuf = 0;
-			if (selectType === 'watch') {
+			if (this.selectType === 'watch' && !this.search) {
 				bufs[1] = '<li><button name="selectFormat" value=""' + (curFormat === '' ? ' class="sel"' : '') + '>(All formats)</button></li>';
 			}
+
+			for (var i in this.starred) {
+				if (!bufs[1]) bufs[1] = '';
+				var format = BattleFormats[i];
+				if (!format) {
+					delete this.starred[i];
+					continue;
+				}
+				if (!this.shouldDisplayFormat(format)) continue;
+				if (this.search && !i.includes(toID(this.search))) {
+					continue;
+				}
+				// <i class="fa fa-star"></i>
+				var formatName = BattleLog.escapeFormat(BattleFormats[i].id);
+				bufs[1] += (
+					'<li><button name="selectFormat" value="' + i +
+					'"' + (curFormat === i ? ' class="sel"' : '') + '>' + formatName +
+					'<i class="fa fa-star" style="float: right; color: #FFD700; text-shadow: 0 0 1px #000;"></i></button></li>'
+				);
+			}
+
 			var curSection = '';
 			for (var i in BattleFormats) {
 				var format = BattleFormats[i];
-				if (selectType === 'teambuilder') {
-					if (!format.isTeambuilderFormat) continue;
-				} else {
-					if (format.effectType !== 'Format' || format.battleFormat) continue;
-					if (selectType != 'watch' && !format[selectType + 'Show']) continue;
-				}
+				if (!this.shouldDisplayFormat(format)) continue;
+				if (this.search && !format.id.includes(toID(this.search))) continue;
+				if (this.starred[i]) continue; // only show it in the starred section
 
 				if (format.section && format.section !== curSection) {
+					if (curSection) bufs[curBuf] += '</details></p>';
 					curSection = format.section;
 					if (!app.supports['formatColumns']) {
 						curBuf = (curSection === 'Doubles' || curSection === 'Past Generations') ? 2 : 1;
@@ -1254,31 +1300,76 @@
 					if (!bufs[curBuf]) {
 						bufs[curBuf] = '';
 					}
-					bufs[curBuf] += '<li><h3>' + BattleLog.escapeHTML(curSection) + '</li>';
+					var open = (this.open[curSection] || toID(this.search)) ? ' open' : '';
+					bufs[curBuf] += '<p><details' + open + ' section="' + curSection + '">';
+					bufs[curBuf] += '<summary><strong style="color: #579">';
+					bufs[curBuf] += BattleLog.escapeHTML(curSection) + '</strong></summary>';
 				}
 				var formatName = BattleLog.escapeFormat(format.id);
 				if (formatName.charAt(0) !== '[') formatName = '[Gen 6] ' + formatName;
 				formatName = formatName.replace('[Gen 9] ', '');
 				formatName = formatName.replace('[Gen 9 ', '[');
 				formatName = formatName.replace('[Gen 8 ', '[');
 				formatName = formatName.replace('[Gen 7 ', '[');
-				bufs[curBuf] += '<li><button name="selectFormat" value="' + i + '"' + (curFormat === i ? ' class="sel"' : '') + '>' + formatName + '</button></li>';
+				bufs[curBuf] += (
+					'<li><button name="selectFormat" value="' + i +
+					'"' + (curFormat === i ? ' class="sel"' : '') + '>' + formatName +
+					'<i class="fa fa-star subtle" style="float: right;"></i></button></li>'
+				);
 			}
-
 			var html = '';
-			for (var i = 1, l = bufs.length; i < l; i++) {
-				html += '<ul class="popupmenu"';
-				if (l > 1) {
-					html += ' style="float:left';
-					if (i > 0) {
-						html += ';padding-left:5px';
+			if (!bufs.length) {
+				html = '<ul class="popupmenu"><em>No formats found</em></ul>';
+			} else {
+				for (var i = 1, l = bufs.length; i < l; i++) {
+					if (!bufs[i]) continue;
+					html += '<ul class="popupmenu"';
+					if (l > 1) {
+						html += ' style="float:left';
+						if (i > 0) {
+							html += ';padding-left:5px';
+						}
+						html += '"';
 					}
-					html += '"';
+					html += '>' + bufs[i] + '</ul>';
 				}
-				html += '>' + bufs[i] + '</ul>';
 			}
-			html += '<div style="clear:left"></div>';
-			this.$el.html(html);
+			return html;
+		},
+		update: function () {
+			var $formatEl = this.$el.find('span[name=formats]');
+			$formatEl.empty();
+			$formatEl.html(this.renderFormats());
+		},
+		updateStar: function (ev) {
+			ev.preventDefault();
+			ev.stopPropagation();
+			var format = $(ev.target).parent().attr('value');
+			if (this.starred[format]) {
+				delete this.starred[format];
+			} else {
+				this.starred[format] = true;
+			}
+			Storage.prefs('starredformats', this.starred);
+			this.update();
+		},
+		updateOpen: function (ev) {
+			var section = $(ev.currentTarget).attr('section');
+			this.open[section] = !this.open[section];
+			Storage.prefs('openformats', this.open);
+		},
+		updateSearch: function (event) {
+			this.search = $(event.currentTarget).val();
+			this.update();
+		},
+		shouldDisplayFormat: function (format) {
+			if (this.selectType === 'teambuilder') {
+				if (!format.isTeambuilderFormat) return false;
+			} else {
+				if (format.effectType !== 'Format' || format.battleFormat) return false;
+				if (this.selectType != 'watch' && !format[this.selectType + 'Show']) return false;
+			}
+			return true;
 		},
 		selectFormat: function (format) {
 			if (this.onselect) {

js/client.js

@@ -406,6 +406,7 @@ function toId() {
 
 			// down
 			// if (document.location.hostname === 'play.pokemonshowdown.com') this.down = true;
+			// this.down = true;
 
 			this.addRoom('');
 			this.topbar = new Topbar({el: $('#header')});

js/replay-embed.template.js

@@ -82,6 +82,7 @@ var Replays = {
 			log: log.split('\n'),
 			isReplay: true,
 			paused: true,
+			autoresize: true,
 		});
 
 		this.$('.replay-controls-2').html('<div class="chooser leftchooser speedchooser"> <em>Speed:</em> <div><button value="hyperfast">Hyperfast</button><button value="fast">Fast</button><button value="normal" class="sel">Normal</button><button value="slow">Slow</button><button value="reallyslow">Really Slow</button></div> </div> <div class="chooser colorchooser"> <em>Color&nbsp;scheme:</em> <div><button class="sel" value="light">Light</button><button value="dark">Dark</button></div> </div> <div class="chooser soundchooser" style="display:none"> <em>Music:</em> <div><button class="sel" value="on">On</button><button value="off">Off</button></div> </div>');
@@ -210,3 +211,12 @@ var Replays = {
 window.onload = function () {
 	Replays.init();
 };
+
+if (window.matchMedia) {
+	if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+		document.body.className = 'dark';
+	}
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (event) {
+		document.body.className = event.matches ? "dark" : "";
+	});
+}