ci: cambio a main y añado public al gitignore

.gitignore

@@ -2,3 +2,4 @@
 .cache
 dist
 node_modules
+public

.gitlab-ci.yml

@@ -0,0 +1,20 @@
+image: node:latest
+
+pages:
+  before_script:
+    # Install yarn as outlined in (https://yarnpkg.com/lang/en/docs/install/#alternatives-stable)
+    - curl -o- -L https://yarnpkg.com/install.sh | bash
+    # Make available in the current terminal
+    - export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
+  script:
+    - yarn install
+    - yarn build
+  artifacts:
+    paths:
+      - public
+  only:
+    - main
+  cache:
+    paths:
+      - .yarn
+      - node_modules/

src/Scene.ts

@@ -1,124 +0,0 @@
-import { AnimatedSprite, Container, Texture } from "pixi.js";
-
-const salmonFrames = ["salmon_f01.png", "salmon_f02.png", "salmon_f03.png"];
-
-export class Scene extends Container {
-  private readonly screenWidth: number;
-  private readonly screenHeight: number;
-  private isGoingUp: boolean = false;
-  private isGoingDown: boolean = false;
-  private isGoingLeft: boolean = false;
-  private isGoingRight: boolean = false;
-
-  // We promoted clampy to a member of the class
-  private salmon: AnimatedSprite;
-  constructor(screenWidth: number, screenHeight: number) {
-    super(); // Mandatory! This calls the superclass constructor.
-
-    // see how members of the class need `this.`?
-    this.screenWidth = screenWidth;
-    this.screenHeight = screenHeight;
-
-    this.salmon = new AnimatedSprite(
-      salmonFrames.map((stringy) => Texture.from(stringy))
-    );
-    this.salmon.animationSpeed = 0.15;
-    this.salmon.scale = { x: 0.4, y: 0.4 };
-    this.salmon.play();
-
-    this.salmon.anchor.set(0.5);
-    this.salmon.x = this.screenWidth / 2;
-    this.salmon.y = this.screenHeight / 2;
-    this.addChild(this.salmon);
-
-    document.addEventListener("keyup", this.onKeyUp.bind(this));
-    document.addEventListener("keydown", this.onKeyDown.bind(this));
-  }
-
-  private onKeyDown(e: KeyboardEvent): void {
-    console.log("KeyUp event fired!", e);
-
-    if (e.key === "ArrowUp") {
-      this.isGoingUp = true;
-    }
-
-    if (e.key === "ArrowDown") {
-      this.isGoingDown = true;
-    }
-
-    if (e.key === "ArrowLeft") {
-      this.isGoingLeft = true;
-    }
-
-    if (e.key === "ArrowRight") {
-      this.isGoingRight = true;
-    }
-
-    if (e.key === " ") {
-      this.jump();
-    }
-  }
-
-  private onKeyUp(e: KeyboardEvent): void {
-    if (e.key === "ArrowUp") {
-      this.isGoingUp = false;
-    }
-
-    if (e.key === "ArrowDown") {
-      this.isGoingDown = false;
-    }
-
-    if (e.key === "ArrowLeft") {
-      this.isGoingLeft = false;
-    }
-
-    if (e.key === "ArrowRight") {
-      this.isGoingRight = false;
-    }
-
-    if (e.key === " ") {
-      this.jump();
-    }
-  }
-
-  update() {
-    if (this.isGoingUp) {
-      this.goUp();
-    }
-
-    if (this.isGoingDown) {
-      this.goDown();
-    }
-
-    if (this.isGoingLeft) {
-      this.goLeft();
-    }
-
-    if (this.isGoingRight) {
-      this.goRight();
-    }
-  }
-
-  private jump() {
-    this.goUp(2);
-    this.goLeft();
-    this.goUp(2);
-    this.goLeft(2);
-  }
-
-  private goUp(factor = 1) {
-    this.salmon.y -= 5 * factor;
-  }
-
-  private goDown(factor = 1) {
-    this.salmon.y += 5 * factor;
-  }
-
-  private goLeft(factor = 1) {
-    this.salmon.x -= 5 * factor;
-  }
-
-  private goRight(factor = 1) {
-    this.salmon.x += 5 * factor;
-  }
-}

src/index.ts

@@ -1,26 +1,19 @@
-import { Application } from "pixi.js";
-import { Scene } from "./Scene";
+import { Application, Sprite } from 'pixi.js'
 
 const app = new Application({
 	view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
 	resolution: window.devicePixelRatio || 1,
 	autoDensity: true,
 	backgroundColor: 0x6495ed,
-  width: 1280,
-  height: 720,
+	width: 640,
+	height: 480
 });
 
-// const clampy: Sprite = Sprite.from("clampy.png");
+const clampy: Sprite = Sprite.from("clampy.png");
 
-// clampy.anchor.set(0.5);
-// clampy.x = app.screen.width / 2;
-// clampy.y = app.screen.height / 2;
-// app.stage.addChild(clampy);
+clampy.anchor.set(0.5);
 
+clampy.x = app.screen.width / 2;
+clampy.y = app.screen.height / 2;
 
-const scene: Scene = new Scene(app.screen.width, app.screen.height);
-app.stage.addChild(scene);
-
-app.ticker.add(() => {
-	scene.update()
-});
+app.stage.addChild(clampy);

webpack.config.js

@@ -11,7 +11,7 @@ module.exports = (env, argv) => {
 
         // Your build destination
         output: {
-            path: path.resolve(__dirname, 'dist'),
+            path: path.resolve(__dirname, 'public'),
             filename: 'bundle.js'
         },