Add changeset (#76)

escottalexander · web-flow · commit e874c106ebc7 · 2024-12-14T07:17:34.000-05:00
diff --git a/.changeset/gold-ants-hide.md b/.changeset/gold-ants-hide.md
@@ -0,0 +1,5 @@
+---
+"eth-tech-tree": minor
+---
+
+Added leaderboard view
diff --git a/src/actions/submit-challenge.ts b/src/actions/submit-challenge.ts
@@ -21,11 +21,14 @@ export async function submitChallenge(name: string, contractAddress?: string) {
     // Send the contract address to the server
     const response = await submitChallengeToServer(userAddress as string, "sepolia", name, contractAddress as string);
     if (response.result) {
-        const { passed, failingTests } = response.result;
+        const { passed, failingTests, error } = response.result;
         if (passed) {
             console.log("Challenge passed tests! Congratulations!");
-            // TODO: Update user state and reflect in tree
         } else {
+            if (error) {
+                console.log("The testing server encountered an error when running this test:");
+                console.log(chalk.red(error));
+            }
             console.log("Failing tests:", Object.keys(failingTests).length);
             for (const testName in failingTests) {
                 console.log(chalk.blue(testName), chalk.red(failingTests[testName].reason));
diff --git a/src/index.ts b/src/index.ts
@@ -7,7 +7,9 @@ import { getUser } from "./modules/api";
 import { setupChallenge, submitChallenge } from "./actions";
 import select from './utils/global-context-select-list';
 import { ProgressView } from "./utils/progress-view";
-import { calculatePoints } from "./utils/helpers";
+import { calculatePoints, stripAnsi } from "./utils/helpers";
+import { LeaderboardView } from "./utils/leaderboard-view";
+import { fetchLeaderboard } from "./modules/api";
 
 type GlobalChoice = {
     value: string;
@@ -30,6 +32,7 @@ export class TechTree {
             { value: 'quit', key: 'q' },
             { value: 'help', key: 'h' },
             { value: 'progress', key: 'p' },
+            { value: 'leaderboard', key: 'l' },
             { value: 'back', key: 'escape' },
             { value: 'back', key: 'backspace' },
         ];
@@ -73,7 +76,7 @@ export class TechTree {
         };
 
         try {
-            this.nodeLabel = node.label;
+            this.nodeLabel = node.shortname || node.label;
             this.clearView();
             this.printMenu();
             const { answer } = await select(directionsPrompt);
@@ -87,8 +90,11 @@ export class TechTree {
                 await selectedAction();
             }
         } catch (error) {
-            // Do nothing
-            // console.log(error);
+            if (error instanceof Error && error.name === 'ExitPromptError') {
+                // Because canceling the promise can cause the inquirer prompt to throw we need to silence this error
+              } else {
+                throw error;
+              }
         }
     }
 
@@ -101,6 +107,8 @@ export class TechTree {
             return () => this.printHelp();
         } else if (selectedActionLabel === 'progress') {
             return () => this.printProgress();
+        } else if (selectedActionLabel === 'leaderboard') {
+            return () => this.printLeaderboard();
         }
         throw new Error(`Invalid global choice: ${selectedActionLabel}`);
     }
@@ -375,8 +383,8 @@ Open up the challenge in your favorite code editor and follow the instructions i
 
         const width = process.stdout.columns;
         const userInfo = `${chalk.green(user)} ${chalk.yellow(`(${points} points)`)}`;
-        const topMenuText = chalk.bold(`${borderLeft}${currentViewName}${new Array(width - (this.stripAnsi(currentViewName).length + this.stripAnsi(userInfo).length + 4)).fill(border).join('')}${userInfo}${borderRight}`);
-        const bottomMenuText = chalk.bold(`${borderLeft}${chalk.bgBlue(`<q>`)} to quit | ${chalk.bgBlue(`<Esc>`)} to go back | ${chalk.bgBlue(`<p>`)} view progress${new Array(width - 54).fill(border).join('')}${borderRight}`);
+        const topMenuText = chalk.bold(`${borderLeft}${currentViewName}${new Array(width - (stripAnsi(currentViewName).length + stripAnsi(userInfo).length + 4)).fill(border).join('')}${userInfo}${borderRight}`);
+        const bottomMenuText = chalk.bold(`${borderLeft}${chalk.bgBlue(`<q>`)} to quit | ${chalk.bgBlue(`<Esc>`)} to go back | ${chalk.bgBlue(`<p>`)} view progress | ${chalk.bgBlue(`<l>`)} leaderboard${new Array(width - 72).fill(border).join('')}${borderRight}`);
         
         // Save cursor position
         process.stdout.write('\x1B7');
@@ -401,10 +409,6 @@ Open up the challenge in your favorite code editor and follow the instructions i
         process.stdout.write('\x1B[?25h');
     }
 
-    stripAnsi(text: string): string {
-        return text.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
-    }
-
     getMaxViewHeight(): number {
         const maxRows = 20;
         if (process.stdout.rows < maxRows) {
@@ -428,4 +432,11 @@ Open up the challenge in your favorite code editor and follow the instructions i
         const progressTree = progressView.buildProgressTree();
         await this.navigate(progressTree);
     }
+
+    async printLeaderboard(): Promise<void> {
+        const leaderboardData = await fetchLeaderboard();
+        const leaderboardView = new LeaderboardView(leaderboardData, this.userState.address);
+        const leaderboardTree = leaderboardView.buildLeaderboardTree();
+        await this.navigate(leaderboardTree);
+    }
 }
diff --git a/src/modules/api.ts b/src/modules/api.ts
@@ -71,4 +71,18 @@ export const submitChallengeToServer = async (userAddress: string, network: stri
     console.error('Error:', error);
     return {};
   }
+};
+
+/**
+ * Fetch Leaderboard
+ */
+export const fetchLeaderboard = async () => {
+  try {
+    const response = await fetch(`${API_URL}/leaderboard`);
+    const data = await response.json();
+    return data.leaderboard;
+  } catch (error) {
+    console.error('Error:', error);
+    return [];
+  }
 };
diff --git a/src/types.ts b/src/types.ts
@@ -49,6 +49,7 @@ export type Actions = {
 
 export type TreeNode = {
   label: string;
+  shortname?: string;
   name: string;
   children: TreeNode[];
   type: "header" | "challenge" | "quiz" | "capstone-project";
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -41,6 +41,10 @@ export const getDevice = (): string => {
   return `${hostname}(${platform}:${arch})`;
 }
 
+export const stripAnsi = (text: string): string => {
+  return text.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
+}
+
 export const calculatePoints = (completedChallenges: Array<{ challenge: IChallenge | undefined, completion: any }>): number => {
   const pointsPerLevel = [100, 150, 225, 300, 400, 500];
   return completedChallenges
diff --git a/src/utils/leaderboard-view.ts b/src/utils/leaderboard-view.ts
@@ -0,0 +1,113 @@
+import { TreeNode } from "../types";
+import chalk from "chalk";
+import { stripAnsi } from "./helpers";
+
+interface LeaderboardEntry {
+    address: string;
+    ens: string | null;
+    challengesCompleted: number;
+    points: number;
+    totalGasUsed: number;
+    rank: number;
+}
+
+export class LeaderboardView {
+    constructor(private leaderboard: LeaderboardEntry[], private userAddress: string) {
+        this.userAddress = userAddress; 
+    }
+
+    buildLeaderboardTree(): TreeNode {
+        // Create individual entry nodes for each leaderboard position
+        const entryNodes: TreeNode[] = this.leaderboard.map(entry => ({
+            type: "header",
+            label: this.getEntryLabel(entry),
+            shortname: entry.ens || entry.address,
+            name: `rank-${entry.rank}`,
+            children: [],
+            message: this.buildEntryMessage(entry)
+        }));
+
+        // Create main leaderboard node
+        return {
+            type: "header",
+            label: "Leaderboard",
+            name: "leaderboard",
+            children: entryNodes,
+            message: this.buildLeaderboardMessage()
+        };
+    }
+
+    private getEntryLabel(entry: LeaderboardEntry): string {
+        const identifier = entry.ens || entry.address;
+        return chalk.white(`${this.getRankFormatting(entry.rank)}  | ${this.formatSpacing(chalk.yellow(entry.points.toLocaleString()), 8)} | ${chalk.green(identifier)}`);
+    }
+
+    private getRankFormatting(rank: number): string {
+        let rankString = rank.toString();
+        if (rank === 1) rankString = "🥇 " + rankString;
+        if (rank === 2) rankString = "🥈 " + rankString;
+        if (rank === 3) rankString = "🥉 " + rankString;
+        return chalk.bold(this.formatSpacing(rankString, 5, false));
+    }
+
+    private buildEntryMessage(entry: LeaderboardEntry): string {
+        return `${chalk.bold(`Rank ${entry.rank}`)}
+Points: ${chalk.yellow(entry.points.toLocaleString())}
+Challenges Completed: ${chalk.blue(entry.challengesCompleted.toString())}
+Total Gas Used: ${chalk.green(entry.totalGasUsed.toLocaleString())}
+`;
+    }
+
+    private formatSpacing(text: string, width: number, center: boolean = true): string {
+        const strippedText = stripAnsi(text);
+        const textLength = strippedText.length;
+        const totalPadding = width - textLength;
+        
+        if (totalPadding <= 0) return text;
+
+        if (!center) {
+            return " ".repeat(totalPadding) + text;
+        }
+
+        const leftPadding = Math.ceil(totalPadding / 2);
+        const rightPadding = Math.floor(totalPadding / 2);
+        
+        return " ".repeat(leftPadding) + text + " ".repeat(rightPadding);
+    }
+
+    private getUserInfo(): LeaderboardEntry | undefined {
+        return this.leaderboard.find(entry => entry.address === this.userAddress);
+    }
+
+    private buildLeaderboardMessage(): string {
+        const userInfo = this.getUserInfo();
+        let statement = "Complete challenges to score points and climb the leaderboard!";
+        if (userInfo) {
+            switch (userInfo.rank) {
+                case 1:
+                    statement = "You are the TOP DOG!";
+                    break;
+                case 2:
+                    statement = "You are second place!\nKeep challenging yourself and see if you can catch up to the leader!\nTry to improve the gas efficiency of your past solutions.";
+                    break;
+                case 3:
+                    statement = "You are third place!\nKeep challenging yourself and see if you can catch up to the leader!\nTry to improve the gas efficiency of your past solutions.";
+                    break;
+                case 4:
+                case 5:
+                case 6:
+                case 7:
+                case 8:
+                case 9:
+                case 10:
+                    statement = `You are in the top ten!\nKeep challenging yourself and see if you can climb the leaderboard!\nTry to improve the gas efficiency of your past solutions.`;
+                    break;
+                default:
+                    statement = `You are rank ${userInfo.rank}.\nKeep challenging yourself and see if you can climb the leaderboard!`;
+                    break;
+            }
+        }
+
+        return chalk.bold(`${statement}\n\nTop Players\n   Rank  |  Points  |  Player`);
+    }
+} 
diff --git a/src/utils/progress-view.ts b/src/utils/progress-view.ts
@@ -53,18 +53,15 @@ export class ProgressView {
     private buildStatsMessage(points: number, completionRate: string): string {
         const totalChallenges = this.challenges.filter(c => c.enabled).length;
         const completedChallenges = this.userState.challenges.filter(c => c.status === "success").length;
-        return `${chalk.bold("Your Progress")}
-
-Address: ${chalk.green(this.userState.ens || this.userState.address)}
+        return `Address: ${chalk.green(this.userState.ens || this.userState.address)}
 ${chalk.yellow(`Points Earned: ${points.toLocaleString()}`)}
 
 Challenges Completed: ${chalk.blue(`${completedChallenges}/${totalChallenges} (${completionRate}%)`)}
 ${completedChallenges ? "Details:" : ""}`;
     }
 
     private buildChallengeMessage(challenge: IChallenge, completion: any): string {
-        let message = `${chalk.bold(challenge.label)}\n\n`;
-        message += `Description: ${challenge.description}\n\n`;
+        let message = `Description: ${challenge.description}\n\n`;
         message += `Completion Date: ${chalk.blue(new Date(completion.timestamp).toLocaleString())}\n`;
         
         if (completion.contractAddress) {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"eth-tech-tree": minor
 +---
++
 +Added leaderboard view