Visual modifications and fixes

package.json

@@ -31,19 +31,19 @@
     "viewsContainers": {
       "panel": [
         {
-          "id": "myCustomPanel",
-          "title": "My Custom Panel",
-          "icon": "$(file-code)"
+          "id": "speedCodeResultPanel",
+          "title": "Speed Code",
+          "icon": "./timer.svg"
         }
       ]
     },
     "views": {
-      "myCustomPanel": [
+      "speedCodeResultPanel": [
         {
           "type": "tree",
-          "id": "myCustomTab",
-          "name": "My Tab",
-          "icon": "$(file-code)"
+          "id": "speedCodeResultTab",
+          "name": "Speed Code",
+          "icon": "./timer.svg"
         }
       ]
     }

src/extension.ts

@@ -28,6 +28,12 @@ function isPalindrome(s) {
 }
 `;
 
+const treeDataProvider = new MyTreeDataProvider();
+
+const treeView = vscode.window.createTreeView("speedCodeResultTab", {
+  treeDataProvider,
+});
+
 export function activate(context: vscode.ExtensionContext) {
   const statusBarItem = vscode.window.createStatusBarItem(
     vscode.StatusBarAlignment.Left,
@@ -45,10 +51,6 @@ export function activate(context: vscode.ExtensionContext) {
         timer: NodeJS.Timeout;
       };
 
-  const treeDataProvider = new MyTreeDataProvider();
-
-  vscode.window.registerTreeDataProvider("myCustomTab", treeDataProvider);
-
   resetTimer = () => {
     if (run) {
       clearInterval(run.timer);
@@ -58,6 +60,7 @@ export function activate(context: vscode.ExtensionContext) {
   };
 
   resetTimer();
+  updateTreeMessage();
 
   context.subscriptions.push(
     vscode.commands.registerCommand("speed-code.submitSpeedRun", () => {
@@ -84,6 +87,7 @@ export function activate(context: vscode.ExtensionContext) {
           }
 
           treeDataProvider.refresh();
+          updateTreeMessage();
         } catch (e) {
           treeDataProvider.blunders.push([run.elapsed, String(e)]);
         }
@@ -96,6 +100,7 @@ export function activate(context: vscode.ExtensionContext) {
       treeDataProvider.testSummary = undefined;
       treeDataProvider.testResults = [];
       treeDataProvider.blunders = [];
+      updateTreeMessage();
       const runFilePath = path.join(speedCodePath, "isPalindrome.js");
       fs.writeFileSync(runFilePath, "");
       openAndFocusFile(runFilePath);
@@ -119,7 +124,13 @@ export function activate(context: vscode.ExtensionContext) {
   );
 
   context.subscriptions.push(
-    vscode.commands.registerCommand("speed-code.cancelSpeedRun", resetTimer),
+    vscode.commands.registerCommand("speed-code.cancelSpeedRun", () => {
+      resetTimer();
+      treeDataProvider.testSummary = undefined;
+      treeDataProvider.testResults = [];
+      treeDataProvider.blunders = [];
+      treeDataProvider.refresh();
+    }),
     statusBarItem
   );
 }
@@ -127,3 +138,15 @@ export function activate(context: vscode.ExtensionContext) {
 export function deactivate() {
   resetTimer();
 }
+
+function updateTreeMessage() {
+  if (
+    !treeDataProvider.testResults.length &&
+    !treeDataProvider.blunders.length &&
+    !treeDataProvider.testSummary
+  ) {
+    treeView.message = "No results yet. Start a speedrun!";
+  } else {
+    treeView.message = "";
+  }
+}

src/tester.ts

@@ -1,10 +1,19 @@
-import vm from 'vm';
-import assert from 'assert';
+import vm from "vm";
+import assert from "assert";
 
-export interface TestCase { input: any[], expected: any };
-export interface TestResult extends TestCase { result: any, valid: boolean };
+export interface TestCase {
+  input: any[];
+  expected: any;
+}
+export interface TestResult extends TestCase {
+  result: any;
+  valid: boolean;
+}
 
-export default function testCode(code: string, testCases: TestCase[]): [boolean, TestResult[]] {
+export default function testCode(
+  code: string,
+  testCases: TestCase[]
+): [boolean, TestResult[]] {
   const context: Record<string, any> = {};
   vm.createContext(context);
 
@@ -14,12 +23,12 @@ export default function testCode(code: string, testCases: TestCase[]): [boolean,
   script.runInContext(context);
 
   const afterKeys = Object.keys(context);
-    const newKeys = afterKeys.filter(k => !beforeKeys.has(k));
+  const newKeys = afterKeys.filter((k) => !beforeKeys.has(k));
 
   // Find the last function defined
   const funcs = newKeys
-        .map(k => context[k])
-        .filter(v => typeof v === 'function');
+    .map((k) => context[k])
+    .filter((v) => typeof v === "function");
 
   if (funcs.length === 0) {
     throw new Error("No function was defined in the code.");
@@ -38,5 +47,5 @@ export default function testCode(code: string, testCases: TestCase[]): [boolean,
     }
   });
 
-    return [tests.every(t => t.valid), tests];
+  return [tests.every((t) => t.valid), tests];
 }

src/utils.ts

@@ -3,14 +3,20 @@ export function format(timeSeconds: number): string {
     const days = Math.floor(timeSeconds / 86400);
     const hours = Math.floor(timeSeconds / 3600);
     const minutes = Math.floor(timeSeconds / 60);
-        return `${days}:${hours - (days * 24)}:${minutes - (hours * 60)}:${(timeSeconds - (minutes * 60)).toFixed(3)}`;
+    return `${days}:${hours - days * 24}:${minutes - hours * 60}:${(
+      timeSeconds -
+      minutes * 60
+    ).toFixed(3)}`;
   } else if (timeSeconds >= 3600) {
     const hours = Math.floor(timeSeconds / 3600);
     const minutes = Math.floor(timeSeconds / 60);
-        return `${hours}:${minutes - (hours * 60)}:${(timeSeconds - (minutes * 60)).toFixed(3)}`;
+    return `${hours}:${minutes - hours * 60}:${(
+      timeSeconds -
+      minutes * 60
+    ).toFixed(3)}`;
   } else if (timeSeconds >= 60) {
     const minutes = Math.floor(timeSeconds / 60);
-        return `${minutes}:${(timeSeconds - (minutes * 60)).toFixed(3)}`;
+    return `${minutes}:${(timeSeconds - minutes * 60).toFixed(3)}`;
   } else {
     return `${timeSeconds}`;
   }

timer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-timer-icon lucide-timer"><line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/></svg>