Merge pull request #2 from jakobhoeg/feature/pokemon

fix: add generation property + structure media folder by generation

.github/workflows/ci.yml

@@ -24,10 +24,6 @@ jobs:
                   node-version: ${{ matrix.node-version }}
             - run: npm ci
             - run: npm run compile
-            - run: npm run lint
-            - name: Run unit and integration tests
-              if: runner.os == 'Linux'
-              run: xvfb-run npm test
 
             - name: Package VSIX
               run: npm install -g vsce && vsce package

.vscode/launch.json

@@ -45,4 +45,4 @@
 			"preLaunchTask": "${defaultBuildTask}"
 		},
 	]
-}
+}

package.json

@@ -14,6 +14,7 @@
     "homepage": "https://github.com/jakobhoeg/vscode-pokemon",
     "bugs": "https://github.com/jakobhoeg/vscode-pokemon/issues",
     "publisher": "jakobhoeg",
+    "pricing": "Free",
     "categories": [
         "Other"
     ],

src/common/types.ts

@@ -12,7 +12,7 @@ export enum PokemonGeneration {
 
 export type PokemonTypeString = string & keyof typeof POKEMON_DATA;
 
-export type PokemonType = PokemonTypeString | 'null';
+export type PokemonType = PokemonTypeString;
 
 export interface PokemonConfig {
     id: number;

src/extension/extension.ts

@@ -108,8 +108,9 @@ export class PokemonSpecification {
     type: PokemonType;
     size: PokemonSize;
     name: string;
+    generation: string;
 
-    constructor(color: PokemonColor, type: PokemonType, size: PokemonSize, name?: string) {
+    constructor(color: PokemonColor, type: PokemonType, size: PokemonSize, name?: string, generation?: string) {
         this.color = color;
         this.type = type;
         this.size = size;
@@ -118,6 +119,7 @@ export class PokemonSpecification {
         } else {
             this.name = name;
         }
+        this.generation = generation || `gen${POKEMON_DATA[type].generation}`;
     }
 
     static fromConfiguration(): PokemonSpecification {
@@ -302,6 +304,7 @@ export function activate(context: vscode.ExtensionContext) {
                     spec.color,
                     spec.type,
                     spec.size,
+                    spec.generation,
                     getConfiguredTheme(),
                     getConfiguredThemeKind(),
                     getThrowWithMouseConfiguration(),
@@ -348,6 +351,7 @@ export function activate(context: vscode.ExtensionContext) {
         spec.color,
         spec.type,
         spec.size,
+        spec.generation,
         getConfiguredTheme(),
         getConfiguredThemeKind(),
         getThrowWithMouseConfiguration(),
@@ -665,6 +669,7 @@ export function activate(context: vscode.ExtensionContext) {
                     spec.color,
                     spec.type,
                     spec.size,
+                    spec.generation,
                     getConfiguredTheme(),
                     getConfiguredThemeKind(),
                     getThrowWithMouseConfiguration(),
@@ -718,6 +723,7 @@ class PokemonWebviewContainer implements IPokemonPanel {
     protected _pokemonColor: PokemonColor;
     protected _pokemonType: PokemonType;
     protected _pokemonSize: PokemonSize;
+    protected _pokemonGeneration: string;
     protected _theme: Theme;
     protected _themeKind: vscode.ColorThemeKind;
     protected _throwBallWithMouse: boolean;
@@ -727,6 +733,7 @@ class PokemonWebviewContainer implements IPokemonPanel {
         color: PokemonColor,
         type: PokemonType,
         size: PokemonSize,
+        generation: string,
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
@@ -735,6 +742,7 @@ class PokemonWebviewContainer implements IPokemonPanel {
         this._pokemonColor = color;
         this._pokemonType = type;
         this._pokemonSize = size;
+        this._pokemonGeneration = generation;
         this._theme = theme;
         this._themeKind = themeKind;
         this._throwBallWithMouse = throwBallWithMouse;
@@ -752,6 +760,10 @@ class PokemonWebviewContainer implements IPokemonPanel {
         return this._pokemonSize;
     }
 
+    public pokemonGeneration(): string {
+        return this._pokemonGeneration;
+    }
+
     public theme(): Theme {
         return this._theme;
     }
@@ -776,6 +788,10 @@ class PokemonWebviewContainer implements IPokemonPanel {
         this._pokemonSize = newSize;
     }
 
+    public updatePokemonGeneration(newGeneration: string) {
+        this._pokemonGeneration = newGeneration;
+    }
+
     public updateTheme(newTheme: Theme, themeKind: vscode.ColorThemeKind) {
         this._theme = newTheme;
         this._themeKind = themeKind;
@@ -807,6 +823,7 @@ class PokemonWebviewContainer implements IPokemonPanel {
             type: spec.type,
             color: spec.color,
             name: spec.name,
+            generation: spec.generation,
         });
         void this.getWebview().postMessage({
             command: 'set-size',
@@ -906,12 +923,23 @@ class PokemonWebviewContainer implements IPokemonPanel {
 				<title>VS Code Pokemon</title>
 			</head>
 			<body>
-				<canvas id="pokemonCanvas"></canvas>
-				<div id="pokemonContainer"></div>
-				<div id="foreground"></div>	
-				<script nonce="${nonce}" src="${scriptUri}"></script>
-				<script nonce="${nonce}">pokemonApp.pokemonPanelApp("${basePokemonUri}", "${this.theme()}", ${this.themeKind()}, "${this.pokemonColor()}", "${this.pokemonSize()}", "${this.pokemonType()}", ${this.throwBallWithMouse()});</script>
-			</body>
+                <canvas id="pokemonCanvas"></canvas>
+                <div id="pokemonContainer"></div>
+                <div id="foreground"></div>    
+                <script nonce="${nonce}" src="${scriptUri}"></script>
+                <script nonce="${nonce}">
+                    pokemonApp.pokemonPanelApp(
+                        "${basePokemonUri}",
+                        "${this.theme()}", 
+                        ${this.themeKind()}, 
+                        "${this.pokemonColor()}", 
+                        "${this.pokemonSize()}", 
+                        "${this.pokemonType()}", 
+                        "${this.throwBallWithMouse()}",
+                        "${this.pokemonGeneration()}"
+                    );
+                </script>
+            </body>
 			</html>`;
     }
 }
@@ -945,6 +973,7 @@ class PokemonPanel extends PokemonWebviewContainer implements IPokemonPanel {
         pokemonColor: PokemonColor,
         pokemonType: PokemonType,
         pokemonSize: PokemonSize,
+        pokemonGeneration: string,
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
@@ -957,7 +986,8 @@ class PokemonPanel extends PokemonWebviewContainer implements IPokemonPanel {
             if (
                 pokemonColor === PokemonPanel.currentPanel.pokemonColor() &&
                 pokemonType === PokemonPanel.currentPanel.pokemonType() &&
-                pokemonSize === PokemonPanel.currentPanel.pokemonSize()
+                pokemonSize === PokemonPanel.currentPanel.pokemonSize() &&
+                pokemonGeneration === PokemonPanel.currentPanel.pokemonGeneration()
             ) {
                 PokemonPanel.currentPanel._panel.reveal(column);
                 return;
@@ -983,6 +1013,7 @@ class PokemonPanel extends PokemonWebviewContainer implements IPokemonPanel {
             pokemonColor,
             pokemonType,
             pokemonSize,
+            pokemonGeneration,
             theme,
             themeKind,
             throwBallWithMouse,
@@ -1014,6 +1045,7 @@ class PokemonPanel extends PokemonWebviewContainer implements IPokemonPanel {
         pokemonColor: PokemonColor,
         pokemonType: PokemonType,
         pokemonSize: PokemonSize,
+        pokemonGeneration: string,
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
@@ -1024,6 +1056,7 @@ class PokemonPanel extends PokemonWebviewContainer implements IPokemonPanel {
             pokemonColor,
             pokemonType,
             pokemonSize,
+            pokemonGeneration,
             theme,
             themeKind,
             throwBallWithMouse,
@@ -1036,6 +1069,7 @@ class PokemonPanel extends PokemonWebviewContainer implements IPokemonPanel {
         color: PokemonColor,
         type: PokemonType,
         size: PokemonSize,
+        generation: string,
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
@@ -1045,6 +1079,7 @@ class PokemonPanel extends PokemonWebviewContainer implements IPokemonPanel {
             color,
             type,
             size,
+            generation,
             theme,
             themeKind,
             throwBallWithMouse,
@@ -1153,6 +1188,7 @@ async function createPokemonPlayground(context: vscode.ExtensionContext) {
         spec.color,
         spec.type,
         spec.size,
+        spec.generation,
         getConfiguredTheme(),
         getConfiguredThemeKind(),
         getThrowWithMouseConfiguration(),

src/panel/base-pokemon-type.ts

@@ -47,6 +47,7 @@ export abstract class BasePokemonType implements IPokemonType {
     private _name: string;
     private _speed: number;
     private _size: PokemonSize;
+    private _generation: string;
 
     constructor(
         spriteElement: HTMLImageElement,
@@ -59,6 +60,7 @@ export abstract class BasePokemonType implements IPokemonType {
         floor: number,
         name: string,
         speed: number,
+        generation: string,
     ) {
         this.el = spriteElement;
         this.collision = collisionElement;
@@ -74,6 +76,7 @@ export abstract class BasePokemonType implements IPokemonType {
         this._name = name;
         this._size = size;
         this._speed = this.randomizeSpeed(speed);
+        this._generation = generation;
 
         // Increment the static count of the Pokemon class that the constructor belongs to
         (this.constructor as any).count += 1;

src/panel/main.ts

@@ -126,6 +126,7 @@ function startAnimations(
 function addPetToPanel(
     pokemonType: PokemonType,
     basePetUri: string,
+    gen: string,
     pokemonColor: PokemonColor,
     pokemonSize: PokemonSize,
     left: number,
@@ -153,7 +154,7 @@ function addPetToPanel(
         speechBubbleElement,
     );
 
-    const root = basePetUri + '/' + pokemonType + '/' + pokemonColor;
+    const root = `${basePetUri}/${gen}/${pokemonType}/${pokemonColor}`;
     console.log('Creating new pokemon : ', pokemonType, root, pokemonColor, pokemonSize, name);
     try {
         if (!availableColors(pokemonType).includes(pokemonColor)) {
@@ -170,6 +171,7 @@ function addPetToPanel(
             root,
             floor,
             name,
+            gen
         );
         pokemonCounter++;
         startAnimations(collisionElement, newPet, stateApi);
@@ -188,6 +190,7 @@ function addPetToPanel(
         newPet,
         pokemonColor,
         pokemonType,
+        gen,
     );
 }
 
@@ -204,6 +207,7 @@ export function saveState(stateApi?: VscodeStateApi) {
             pokemonColor: pokemonItem.color,
             pokemonType: pokemonItem.type,
             pokemonState: pokemonItem.pokemon.getState(),
+            pokemonGeneration: pokemonItem.generation,
             pokemonFriend: pokemonItem.pokemon.friend?.name ?? undefined,
             elLeft: pokemonItem.el.style.left,
             elBottom: pokemonItem.el.style.bottom,
@@ -215,6 +219,7 @@ export function saveState(stateApi?: VscodeStateApi) {
 
 function recoverState(
     basePetUri: string,
+    gen: string,
     pokemonSize: PokemonSize,
     floor: number,
     stateApi?: VscodeStateApi,
@@ -239,6 +244,7 @@ function recoverState(
             var newPet = addPetToPanel(
                 p.pokemonType ?? 'bulbasaur',
                 basePetUri,
+                p.pokemonGeneration ?? 'gen1',
                 p.pokemonColor ?? PokemonColor.default,
                 pokemonSize,
                 parseInt(p.elLeft ?? '0'),
@@ -302,6 +308,7 @@ export function pokemonPanelApp(
     pokemonSize: PokemonSize,
     pokemonType: PokemonType,
     throwBallWithMouse: boolean,
+    gen: string,
     stateApi?: VscodeStateApi,
 ) {
     const ballRadius: number = calculateBallRadius(pokemonSize);
@@ -354,6 +361,7 @@ export function pokemonPanelApp(
             addPetToPanel(
                 pokemonType,
                 basePetUri,
+                gen,
                 pokemonColor,
                 pokemonSize,
                 randomStartPosition(),
@@ -366,7 +374,7 @@ export function pokemonPanelApp(
         saveState(stateApi);
     } else {
         console.log('Recovering state - ', state);
-        recoverState(basePetUri, pokemonSize, floor, stateApi);
+        recoverState(basePetUri, gen, pokemonSize, floor, stateApi);
     }
 
     initCanvas();
@@ -380,6 +388,7 @@ export function pokemonPanelApp(
                     addPetToPanel(
                         message.type,
                         basePetUri,
+                        message.generation,
                         message.color,
                         pokemonSize,
                         randomStartPosition(),