New Replays: Support Download button

I nearly missed this feature from Old Replays, but I was comparing the two side by side and noticed it.
smogon · Oct 29, 2023 · 357a1d6 · 357a1d6
1 parent 40ef9a2
commit 357a1d6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/src/battle-log.ts b/src/battle-log.ts
@@ -1139,23 +1139,26 @@ export class BattleLog {
 	// This allows pretty much anything about the replay viewer to be
 	// updated as desired.
 
-	static createReplayFile(room: any) {
+	static createReplayFile(room: {battle: Battle, id?: string, fragment?: string}) {
 		let battle = room.battle;
 		let replayid = room.id;
 		if (replayid) {
 			// battle room
 			replayid = replayid.slice(7);
-			if (Config.server.id !== 'showdown') {
-				if (!Config.server.registered) {
+			if (window.Config?.server.id !== 'showdown') {
+				if (!window.Config?.server.registered) {
 					replayid = 'unregisteredserver-' + replayid;
 				} else {
 					replayid = Config.server.id + '-' + replayid;
 				}
 			}
-		} else {
+		} else if (room.fragment) {
 			// replay panel
 			replayid = room.fragment;
+		} else {
+			replayid = battle.id;
 		}
+		// TODO: do this synchronously so large battles aren't cut off
 		battle.seekTurn(Infinity);
 		let buf = '<!DOCTYPE html>\n';
 		buf += '<meta charset="utf-8" />\n';
@@ -1175,7 +1178,7 @@ export class BattleLog {
 		return buf;
 	}
 
-	static createReplayFileHref(room: any) {
+	static createReplayFileHref(room: {battle: Battle, id?: string, fragment?: string}) {
 		// unescape(encodeURIComponent()) is necessary because btoa doesn't support Unicode
 		// @ts-ignore
 		return 'data:text/plain;base64,' + encodeURIComponent(btoa(unescape(encodeURIComponent(BattleLog.createReplayFile(room)))));

diff --git a/website/replays/src/replays-battle.tsx b/website/replays/src/replays-battle.tsx
@@ -4,7 +4,9 @@ import $ from 'jquery';
 import {Net} from './utils';
 import {PSRouter} from './replays';
 import {Battle} from '../../../src/battle';
+import {BattleLog} from '../../../src/battle-log';
 import {BattleSound} from '../../../src/battle-sound';
+declare function toID(input: string): string;
 
 function showAd(id: string) {
   // @ts-expect-error
@@ -157,6 +159,30 @@ export class BattlePanel extends preact.Component<{id: string}> {
       PSRouter.replace(this.stripQuery(this.props.id));
     }
   };
+	clickDownload = (e: MouseEvent) => {
+    if (!this.battle) {
+      // should never happen
+      alert("Wait for the battle to finish loading before downloading.");
+      return;
+    }
+		let filename = (this.battle.tier || 'Battle').replace(/[^A-Za-z0-9]/g, '');
+
+		// ladies and gentlemen, JavaScript dates
+		const timestamp = (this.result?.uploadtime || 0) * 1000;
+		const date = new Date(timestamp);
+		filename += '-' + date.getFullYear();
+		filename += (date.getMonth() >= 9 ? '-' : '-0') + (date.getMonth() + 1);
+		filename += (date.getDate() >= 10 ? '-' : '-0') + date.getDate();
+
+		filename += '-' + toID(this.battle.p1.name);
+		filename += '-' + toID(this.battle.p2.name);
+
+    const a = e.currentTarget as HTMLAnchorElement;
+		a.href = BattleLog.createReplayFileHref({battle: this.battle});
+		a.download = filename + '.html';
+
+		e.stopPropagation();
+	};
   changeSpeed = (e: Event) => {
     this.speed = (e.target as HTMLSelectElement).value;
     const fadeTable = {
@@ -298,8 +324,11 @@ export class BattlePanel extends preact.Component<{id: string}> {
           <em>Loading...</em>
         </h1>}
         {this.result ? <p>
+          <a class="button" href="#" onClick={this.clickDownload} style={{float: 'right'}}>
+            <i class="fa fa-download" aria-hidden></i> Download
+          </a>
           {this.result.uploadtime ? new Date(this.result.uploadtime * 1000).toDateString() : "Unknown upload date"}
-          {this.result.rating ? ` | Rating: ${this.result.rating}` : ''}
+          {this.result.rating ? [` | `, <em>Rating:</em>, ` ${this.result.rating}`] : ''}
         </p> : <p>&nbsp;</p>}
         {!PSRouter.showingLeft() && <p>
           <a href="." class="button"><i class="fa fa-caret-left"></i> More replays</a>