Some quick fixes

README.md

@@ -16,6 +16,12 @@ Syntax highlighting, snippets and autocompletion for the Portal 2 TAS files, usi
 
 ## Release Notes
 
+### 1.4.4
+
+- Improve sidebar UI
+- Fix some tools complaining about things that should be valid
+- Automatically sync *Playback rate*, *Skip to tick* and *Pause at tick* with the game when it connects
+
 ### 1.4.3
 
 - Add support for version 8

client/src/TASServer.ts

@@ -30,6 +30,11 @@ export class TASServer {
     currentTick = 0; // Only valid when active
     debugTick = -1;
 
+    // These values aren't set by default, but the values will be updated whenever changes are committed in the sidebar
+    skipToTick = undefined;
+    pauseAtTick = undefined;
+    skipPauseTickLinked = undefined;
+
     webView: TASSidebarProvider | undefined;
 
     constructor() {
@@ -42,6 +47,11 @@ export class TASServer {
         this.socket.connect(TASServer.port, TASServer.host, () => {
             vscode.window.showInformationMessage("Successfully connected to SAR!");
             this.connected = true;
+
+            // Sync options with game
+            this.requestRatePlayback(this.playbackRate);
+            this.requestFastForward(this.skipToTick, this.skipPauseTickLinked);
+            if (!this.skipPauseTickLinked) this.requestNextPauseTick(this.pauseAtTick); // Only run this if skipto tick and pauseat tick are unlinked, otherwise we will break a perfectly good value by reassigning a possibly incorrect value to it
         });
         this.socket.on('error', () => vscode.window.showInformationMessage("Failed to connect to SAR."));
         this.socket.on('close', () => {
@@ -154,7 +164,7 @@ export class TASServer {
             return;
         this.socket.write(Buffer.alloc(1, 4));
     }
-    requestFastForward(tick: number, pause_after: boolean) {
+    requestFastForward(tick: number, pause_after: boolean) { // Skip to tick
         if (!this.checkSocket())
             return;
         var buf = Buffer.alloc(6, 5);
@@ -164,13 +174,16 @@ export class TASServer {
         else
             buf.writeUInt8(0, 5);
         this.socket.write(buf);
+        this.skipToTick = tick;
+        this.skipPauseTickLinked = pause_after;
     }
-    requestNextPauseTick(tick: number) {
+    requestNextPauseTick(tick: number) { // Pause at tick
         if (!this.checkSocket())
             return;
         var buf = Buffer.alloc(5, 6);
         buf.writeUInt32BE(tick, 1);
         this.socket.write(buf);
+        this.pauseAtTick = tick;
     }
     requestTickAdvance() {
         if (!this.checkSocket())

client/src/sidebar.ts

@@ -88,19 +88,27 @@ export class TASSidebarProvider implements vscode.WebviewViewProvider {
         );
 
         const playUri = webview.asWebviewUri(
-            vscode.Uri.joinPath(this._extensionUri, "images", "play.svg")
+            vscode.Uri.joinPath(this._extensionUri, "images", "player/play.svg")
+        );
+
+        const playRawUri = webview.asWebviewUri(
+            vscode.Uri.joinPath(this._extensionUri, "images", "player/raw.svg")
         );
 
         const pauseUri = webview.asWebviewUri(
-            vscode.Uri.joinPath(this._extensionUri, "images", "pause.svg")
+            vscode.Uri.joinPath(this._extensionUri, "images", "player/pause.svg")
         );
 
         const stopUri = webview.asWebviewUri(
-            vscode.Uri.joinPath(this._extensionUri, "images", "stop.svg")
+            vscode.Uri.joinPath(this._extensionUri, "images", "player/stop.svg")
         );
 
         const replayUri = webview.asWebviewUri(
-            vscode.Uri.joinPath(this._extensionUri, "images", "replay.svg")
+            vscode.Uri.joinPath(this._extensionUri, "images", "player/restart.svg")
+        );
+
+        const nextTickUri = webview.asWebviewUri(
+            vscode.Uri.joinPath(this._extensionUri, "images", "player/step_over.svg")
         );
 
         const applyUri = webview.asWebviewUri(
@@ -134,7 +142,6 @@ export class TASSidebarProvider implements vscode.WebviewViewProvider {
             <div id="connection">
                 <div id="server-data">
                     <p>Status: <span id="data-status">Inactive</span></p>
-                    <p>Playback rate: <span id="data-rate">1.0</span></p>
                     <p>Current tick: <span id="data-tick">0</span></p>
                 </div>
                 <img id="connect-button" class="heavy-button disconnected" src="${connectUri}" alt="Connect">
@@ -143,19 +150,13 @@ export class TASSidebarProvider implements vscode.WebviewViewProvider {
             <div id="buttons">
                 <div id="play-buttons">
                     <img id="stop-button" src="${stopUri}" alt="Stop">
-                    <!-- data-src-play and data-src-pause are used in the script to chanage the src of the image to the appropriate uri -->
+                    <img id="raw-button" src="${playRawUri}" alt="Play raw">
+                    <!-- data-src-play and data-src-pause are used in the script to change the src of the image to the appropriate uri -->
                     <img id="start-button" class="heavy-button" src="${playUri}" alt="Play" data-src-play="${playUri}" data-src-pause="${pauseUri}">
                     <img id="replay-button" src="${replayUri}" alt="Replay">
+                    <img id="tick-advance-button" src="${nextTickUri}" alt="Advance tick">
                 </div>
 
-                <div id="mode-select">
-                    <div class="highlight"></div> <!-- A separate block element used to show the active option -->
-                    <span id="normal-playback">Normal</span>
-                    <span id="raw-playback">Raw</span>
-                </div>
-
-                <button id="tick-advance-button">Tick advance</button>
-
                 <div>
                     <label for="rate-input-slider">Playback rate</label>
                     <div class="input">
@@ -178,7 +179,7 @@ export class TASSidebarProvider implements vscode.WebviewViewProvider {
                 </div>
 
                 <div id="tick-control">
-                    <label for="skip-input">Skip to tick</label>
+                    <label for="skip-input">Skip to</label>
                     <div class="input">
                         <input type="text" id="skip-input" placeholder="0">
                         <img id="skip-button" class="unchanged checkmark" tabindex="-1" src="${applyUri}" alt="Apply">
@@ -189,7 +190,7 @@ export class TASSidebarProvider implements vscode.WebviewViewProvider {
                         <div id="link-disabled" class="invisible"></div>
                     </div>
 
-                    <label for="pauseat-input">Pause at tick</label>
+                    <label for="pauseat-input">Pause at</label>
                     <div class="input">
                         <input type="text" id="pauseat-input" placeholder="0" disabled>
                         <img id="pauseat-button" class="unchanged checkmark" tabindex="-1" src="${applyUri}" alt="Apply">

client/src/sidebarScript.js

@@ -4,22 +4,18 @@
 const vscode = acquireVsCodeApi();
 
 const dataStatusText = document.querySelector("#data-status");
-const dataRateText = document.querySelector("#data-rate");
 const dataTickText = document.querySelector("#data-tick");
 
 const connectButton = document.querySelector("#connect-button");
 
 const buttonsDiv = document.querySelector("#buttons");
 
-const playButton = document.querySelector("#start-button");
 const stopButton = document.querySelector("#stop-button");
+const playRawButton = document.querySelector("#raw-button");
+const playButton = document.querySelector("#start-button");
 const replayButton = document.querySelector("#replay-button");
-
-const playbackHighlight = document.querySelector("#mode-select .highlight");
-const normalPlaybackButton = document.querySelector("#normal-playback");
-const rawPlaybackButton = document.querySelector("#raw-playback");
-
 const tickAdvanceButton = document.querySelector("#tick-advance-button");
+
 const rateButton = document.querySelector("#rate-button");
 const rateSlider = document.querySelector("#rate-input-slider");
 const rateBox = document.querySelector("#rate-input-text");
@@ -35,7 +31,6 @@ var confirmFieldChanges = true;
 
 // Runtime data
 let connected = false;
-let rawPlayback = false;
 let pauseatSkipLink = true;
 
 let playbackRate = rateBox.value;
@@ -53,9 +48,7 @@ connectButton.addEventListener('click', () => {
 playButton.addEventListener('click', () => {
     if (dataStatusText.innerText === "Inactive") {
         // Not playing, start a new playback
-        // Check whether to start a normal or raw playback
-        if (rawPlayback) vscode.postMessage({ type: 'playRawTAS' });
-        else vscode.postMessage({ type: 'playToolsTAS' });
+        vscode.postMessage({ type: 'playToolsTAS' });
     } else if (dataStatusText.innerText === "Playing") {
         // Playing, pause the playback
         vscode.postMessage({ type: 'pauseTAS' });
@@ -79,17 +72,13 @@ replayButton.addEventListener('click', () => {
     }
 });
 
-normalPlaybackButton.addEventListener('click', () => {
-    rawPlayback = false;
-    playbackHighlight.style.left = "";
-});
-
-rawPlaybackButton.addEventListener('click', () => {
-    rawPlayback = true;
-    playbackHighlight.style.left = "50%";
+playRawButton.addEventListener('click', () => {
+    if (playRawButton.getAttribute("disabled") === "true") return;
+    vscode.postMessage({ type: 'playRawTAS' });
 });
 
 tickAdvanceButton.addEventListener('click', () => {
+    if (tickAdvanceButton.getAttribute("disabled") === "true") return;
     vscode.postMessage({ type: 'tickAdvance' });
 });
 
@@ -250,54 +239,53 @@ function handleMessage(message) {
 
     // Display server status
     dataStatusText.innerText = message.state;
-    dataRateText.innerText = message.rate;
     dataTickText.innerText = message.currentTick;
 
     // Check message state
     switch (message.state) {
         case "Inactive":
             setPlayImage(false);
 
-            tickAdvanceButton.disabled = true;
-            tickAdvanceButton.style.disabled = true;
+            stopButton.setAttribute("disabled", true);
+            playRawButton.setAttribute("disabled", false);
+            tickAdvanceButton.setAttribute("disabled", true);
 
             dataTickText.innerText = "N/A";
 
             dataStatusText.style.color = "var(--vscode-charts-lines)";
-            dataRateText.style.color = "";
             dataTickText.style.color = "var(--vscode-charts-lines)";
             break;
 
         case "Playing":
             setPlayImage(true);
 
-            tickAdvanceButton.disabled = true;
-            tickAdvanceButton.style.disabled = true;
+            stopButton.setAttribute("disabled", false);
+            playRawButton.setAttribute("disabled", true);
+            tickAdvanceButton.setAttribute("disabled", true);
 
             dataStatusText.style.color = "var(--vscode-charts-green)";
-            dataRateText.style.color = "";
             dataTickText.style.color = "";
             break;
 
         case "Paused":
             setPlayImage(false);
 
-            tickAdvanceButton.disabled = false;
-            tickAdvanceButton.style.disabled = false;
+            stopButton.setAttribute("disabled", false);
+            playRawButton.setAttribute("disabled", true);
+            tickAdvanceButton.setAttribute("disabled", false);
 
             dataStatusText.style.color = "var(--vscode-charts-yellow)";
-            dataRateText.style.color = "";
             dataTickText.style.color = "";
             break;
 
         case "Skipping":
             setPlayImage(true);
 
-            tickAdvanceButton.disabled = true;
-            tickAdvanceButton.style.disabled = true;
+            stopButton.setAttribute("disabled", false);
+            playRawButton.setAttribute("disabled", true);
+            tickAdvanceButton.setAttribute("disabled", true);
 
             dataStatusText.style.color = "var(--vscode-charts-blue)";
-            dataRateText.style.color = "";
             dataTickText.style.color = "";
             break;
     }
@@ -306,12 +294,10 @@ function handleMessage(message) {
     if (!message.connected) {
         // Display server status
         dataStatusText.innerText = "Disconnected";
-        dataRateText.innerText = "N/A";
         dataTickText.innerText = "N/A";
 
         // Set status styling
         dataStatusText.style.color = "var(--vscode-charts-red)";
-        dataRateText.style.color = "var(--vscode-charts-lines)";
         dataTickText.style.color = "var(--vscode-charts-lines)";
     }