Move resources into external files

src/code-stats.ts

@@ -3,7 +3,7 @@ import { ExtensionContext } from "vscode";
 import { XpCounter } from "./xp-counter";
 
 export function activate(context: ExtensionContext): void {
-  let controller: XpCounter = new XpCounter();
+  let controller: XpCounter = new XpCounter(context);
   context.subscriptions.push(controller);
 }
 

src/profileHtmlProvider.ts

@@ -3,8 +3,10 @@ import {
   Uri,
   Event,
   CancellationToken,
-  TextDocumentContentProvider
+  TextDocumentContentProvider,
+  ExtensionContext
 } from "vscode";
+import * as path from "path";
 
 import { CodeStatsAPI } from "./code-stats-api";
 
@@ -12,8 +14,10 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
   onDidChange?: Event<Uri>;
 
   api: CodeStatsAPI;
+  context: ExtensionContext;
 
-  constructor(api: CodeStatsAPI) {
+  constructor(context: ExtensionContext, api: CodeStatsAPI) {
+    this.context = context;
     this.api = api;
   }
 
@@ -26,12 +30,12 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
     }
 
     function getNextLevelXp(level: number): number {
-      return Math.pow(Math.ceil((level+1)/LEVEL_FACTOR) ,2);
+      return Math.pow(Math.ceil((level + 1) / LEVEL_FACTOR), 2);
     }
 
     function getLevelProgress(xp: number): number {
       let level = getLevel(xp);
-      let curLevelXp = getNextLevelXp(level-1);
+      let curLevelXp = getNextLevelXp(level - 1);
       let nextLevelXp = getNextLevelXp(level);
 
       let haveXp = xp - curLevelXp;
@@ -43,74 +47,34 @@ export class ProfileHtmlProvider implements TextDocumentContentProvider {
     function getLanguages(languages: any): string {
 
       let ret = '';
-      for( let lang in languages )
-      {
-        ret+=`<div class="language">${lang}<span style="display:block;">${languages[lang]["xps"]}</span></div>`;
+      for (let lang in languages) {
+        ret += `<div class="language">${lang}<span style="display:block;">${languages[lang]["xps"]}</span></div>`;
       }
 
       return ret;
     }
 
     function getHeader(profile: any): string {
-      
-     let userName = profile["user"];
-     let totalXp = profile["total_xp"];
-     let newXp = profile["new_xp"];
-     let currentLevel = getLevel(totalXp);
 
-     return `<h3> ${userName}'s Profile Level ${currentLevel} (${totalXp} XP) ${newXp > 0 ? '<sup>(+' + newXp +')</sup>' :'' }</h3>`;
+      let userName = profile["user"];
+      let totalXp = profile["total_xp"];
+      let newXp = profile["new_xp"];
+      let currentLevel = getLevel(totalXp);
+
+      return `<h3> ${userName}'s Profile Level ${currentLevel} (${totalXp} XP) ${newXp > 0 ? '<sup>(+' + newXp + ')</sup>' : ''}</h3>`;
     }
 
 
-    return this.api.getProfile().then( profile => {
-
-      console.log(profile);
+    return this.api.getProfile().then(profile => {
 
+      //console.log(profile);
       return `
-      <style>
-      .language {
-        float: left;
-        width: 6rem;
-        height: 6rem;
-        padding-top: 2rem;
-        text-align: center;
-        background: rgb(37,37,38);
-        margin: 0.1rem;
-        border-radius: 50%;
-        border-style: solid 2px;
-        border-color: black;
-               
-        font-size: 0.9em;      
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
-    }
-    .language span {
-      font-weight: bold;
-      font-size: 1.1em;
-    }
-
-    .vs-dark .language {
-      color: #ddca7e;
-    }
-
-    .vs .language {
-      color: blue;
-    }
-
-    sup {
-      top: -.5em;
-      font-size: 75%;
-    }
-
-    h3 {
-      text-align: center;
-    }        
-    </style>
+      <link rel="stylesheet" href="file:///${this.context.asAbsolutePath("assets/style.css")}">
+      <img width="64px" height="64px" src="file:///${this.context.asAbsolutePath("assets/r2.svg")}">
       ${getHeader(profile)}
       ${getLanguages(profile["languages"])}      
       `;
 
-    });    
+    });
   }
 }

src/xp-counter.ts

@@ -13,7 +13,8 @@ import {
   StatusBarAlignment,
   TextDocumentChangeEvent,
   Range,
-  WorkspaceConfiguration
+  WorkspaceConfiguration,
+  ExtensionContext
 } from "vscode";
 import { Pulse } from "./pulse";
 import { CodeStatsAPI } from "./code-stats-api";
@@ -32,7 +33,7 @@ export class XpCounter {
   private UPDATE_DELAY = 10000;
 
 
-  constructor() {
+  constructor(context: ExtensionContext) {
     this.pulse = new Pulse();
 
     /* // print out supported language names
@@ -52,7 +53,7 @@ export class XpCounter {
       this.statusBarItem.command = "code-stats.profile";
     }
 
-    let provider = new ProfileHtmlProvider(this.api);
+    let provider = new ProfileHtmlProvider(context, this.api);
 
     let registration = workspace.registerTextDocumentContentProvider('code-stats', provider);