silver-dev-org · marcosnils · Nov 27, 2024 · Nov 30, 2024 · Dec 5, 2024 · Dec 5, 2024
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+## Contributing to WPM
+add new challenges
+locate **CodeBlocks.json** in data folder and add the block with the following format example considering spaces and line breaks **\n**
+
+<pre>"id": 1,
+"title": "Hello World",
+"language": "js",
+"blocks": [
+  "console.log(\"Hello, World!\");\n"
+] </pre>
+
+update build
+open command console in game folder and type npm run build
+this will be located in the dist\assets inside game folder, rename to game and replace the existing version inside website\public\game
diff --git a/game/index.html b/game/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
     <head>
-        <title>mygame</title>
+        <title>WPM</title>
         <link rel="stylesheet" href="/style.css" />
     </head>
 

diff --git a/game/package-lock.json b/game/package-lock.json
diff --git a/game/package.json b/game/package.json
@@ -9,10 +9,11 @@
     "fmt": "prettier --write ."
   },
   "dependencies": {
-    "kaplay": "^3001.0.2"
+    "kaplay": "^4000.0.0-alpha.17"
   },
   "devDependencies": {
     "prettier": "^3.4.1",
     "vite": "^5.4.11"
-  }
+  },
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }
diff --git a/game/public/fonts/jetbrains.ttf b/game/public/fonts/jetbrains.ttf
diff --git a/game/public/fonts/thaleahFat.ttf b/game/public/fonts/thaleahFat.ttf
diff --git a/game/public/sounds/code_sound.mp3 b/game/public/sounds/code_sound.mp3
diff --git a/game/public/sounds/endgame.mp3 b/game/public/sounds/endgame.mp3
diff --git a/game/public/sounds/videogame.mp3 b/game/public/sounds/videogame.mp3
diff --git a/game/public/sounds/wrong typing.mp3 b/game/public/sounds/wrong typing.mp3
diff --git a/game/public/sprites/BG_AWPM_IN_GAME.png b/game/public/sprites/BG_AWPM_IN_GAME.png
diff --git a/game/public/sprites/BG_TIME_IN_GAME.png b/game/public/sprites/BG_TIME_IN_GAME.png
diff --git a/game/public/sprites/BG_WPM_IN_GAME.png b/game/public/sprites/BG_WPM_IN_GAME.png
diff --git a/game/public/sprites/SilverDev_logo.png b/game/public/sprites/SilverDev_logo.png
diff --git a/game/public/sprites/WPM.png b/game/public/sprites/WPM.png
diff --git a/game/public/sprites/arrow_yellow.png b/game/public/sprites/arrow_yellow.png
diff --git a/game/public/sprites/bg.png b/game/public/sprites/bg.png
diff --git a/game/public/sprites/bg2.png b/game/public/sprites/bg2.png
diff --git a/game/public/sprites/bg4.png b/game/public/sprites/bg4.png
diff --git a/game/public/sprites/icon_01.png b/game/public/sprites/icon_01.png
diff --git a/game/public/sprites/icon_02.png b/game/public/sprites/icon_02.png
diff --git a/game/public/sprites/icon_03.png b/game/public/sprites/icon_03.png
diff --git a/game/public/sprites/icon_04.png b/game/public/sprites/icon_04.png
diff --git a/game/public/sprites/icon_05.png b/game/public/sprites/icon_05.png
diff --git a/game/public/sprites/muteOFF.png b/game/public/sprites/muteOFF.png
diff --git a/game/public/sprites/muteON.png b/game/public/sprites/muteON.png
diff --git a/game/public/style.css b/game/public/style.css
@@ -1,40 +1,32 @@
-canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 10;
-}
-
 :root {
-    --bg: #0a0a1b;
-}
-
-body {
+    --bg: hsl(0, 3.60%, 11.00%);
+    --gray1: #0a080a;
+    --gray2: #110b11;
+  }
+
+  body {
     margin: 0;
-    background: var(--bg);
-    background-image: linear-gradient(
-            90deg,
-            rgba(35, 9, 30, 0.8) 2px,
-            transparent 1px
-        ),
-        linear-gradient(0deg, rgba(9, 35, 50, 0.8) 2px, transparent 1px);
-    background-size: 30px 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
     overflow: hidden;
-}
-
-.editor {
-    background: rgba(10, 10, 27, 0.8);
-    width: 1280px;
-    height: 640px;
-    border: 4px solid var(--neon2);
-    box-shadow: 0 0 10px var(--neon2);
-    display: flex;
-    flex-direction: column;
+    background: var(--bg);
     position: relative;
-}
+  }
+
+  body::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:
+      linear-gradient(45deg, var(--gray1) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--gray1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--gray1) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--gray1) 75%),
+      rgba(0, 0, 0, 0.81);
+    background-size: 15px 15px, 15px 15px, 15px 15px, 15px 15px, cover;
+    background-position: 0 0, 0 7.5px, 7.5px -7.5px, -7.5px 0, center;
+    background-blend-mode: multiply;
+    backdrop-filter: blur(10px);
+    z-index: -1;
+  }
diff --git a/game/src/assets.js b/game/src/assets.js
@@ -1,11 +1,15 @@
 // @ts-check
-
 import { k } from "./kaplay.js";
-
-k.loadFont("monogram", "/fonts/monogram.ttf", {
-    outline: 4,
-    filter: "linear",
+k.loadFont("jetbrains", "/fonts/jetbrains.ttf", {
+    outline: {
+        width: 6,
+        color: k.rgb(8, 8, 8)
+    },
 });
-
-k.loadSprite("bgpng", "/sprites/bgpng.png");
-k.loadSprite("bg2", "/sprites/bg2.png");
+k.loadSprite("bg4", "/sprites/bg4.png");
+k.loadSprite("bg2", "/sprites/bg2.png");
+k.loadSound("code_sound", "/sounds/code_sound.mp3");
+k.loadSound("wrong_typing", "/sounds/wrong typing.mp3");
+k.loadSprite("muteON", "/sprites/muteON.png");
+k.loadSprite("muteOff", "/sprites/muteOFF.png");
+k.loadSprite("WPM", "/sprites/WPM.png");
diff --git a/game/src/components/resizablePos.js b/game/src/components/resizablePos.js
@@ -0,0 +1,32 @@
+/**
+ * @typedef {import("kaplay").Vec2} Vec2
+ * @typedef {import("kaplay").GameObj} GameObj
+ * @typedef {import("kaplay").PosComp} PosComp
+ */
+
+import { gameState } from "../constants.js";
+
+/**
+ * Set the position on resize
+ *
+ * @param {() => Vec2} sizeFunc
+ */
+export const resizablePos = (sizeFunc) => ({
+    id: "resizablePos",
+    sizeFunc,
+    add() {
+        gameState.resizableObjects.push(this);
+        this.pos = this.sizeFunc();
+    },
+    /**
+     * @type { GameObj<PosComp> } this
+     */
+    updatePos() {
+        // this.pos = this.sizeFunc();
+    },
+    destroy() {
+        gameState.resizableObjects = gameState.resizableObjects.filter(
+            (obj) => obj !== this,
+        );
+    },
+});
diff --git a/game/src/components/resizableRect.js b/game/src/components/resizableRect.js
@@ -0,0 +1,29 @@
+/**
+ * @typedef {import("kaplay").Vec2} Vec2
+ * @typedef {import("kaplay").GameObj} GameObj
+ * @typedef {import("kaplay").RectComp} RectComp
+ */
+
+import { gameState } from "../constants.js";
+import { k } from "../kaplay.js";
+
+/**
+ * Set the rect on resize
+ *
+ * @param {() => Vec2} resizeFunc
+ */
+export const resizableRect = (resizeFunc) => ({
+    id: "resizableRect",
+    resizeFunc,
+    add() {
+        // this.use(k.rect(this.resizeFunc().x, this.resizeFunc().y));
+    },
+    updateRectSize() {
+        // this.use(k.rect(this.resizeFunc().x, this.resizeFunc().y));
+    },
+    destroy() {
+        gameState.resizableObjects = gameState.resizableObjects.filter(
+            (obj) => obj !== this,
+        );
+    },
+});
diff --git a/game/src/constants.js b/game/src/constants.js
@@ -1,12 +1,37 @@
 // @ts-check
 
-import dialogs from "./data/dialog.json";
-
-export const goalBlocks = 2;
-export const maxtime = 500;
-export const maxMistakes = 2;
-export const lineHeight = 24;
-export const charSpacing = 10;
-export const startmoveline = 1;
+import dialogs from "./data/CodeBlocks.json";
+export const EASY_RIVAL_SPEED = 0.35;
+export const HARD_RIVAL_SPEED = 0.18;
+export const MAX_TIME = 60;
+export const goalBlocks = 5;
+export const maxMistakes = 1;
+export const lineHeight = 28;
+export const startmoveline = 3;
 export const marginvisiblebox = 1;
-export const jsonData = dialogs;
+export const dialogsData = dialogs;
+export const ICON_START_Y = 0.15;
+export const TEXT_START_Y = 0.15;
+export const SPACING = 0.05;
+export const MAX_BLOCKS = 5;
+/**
+ * @type {number}
+ */
+// reduce for a jump line after x lines
+export const JUMP_AFTER = 40;
+
+/**
+ * Object for manage different states and configurations in the game
+ */
+export const gameState = {
+    /**
+     * Allocated resizable objects for update on resize
+     *
+     * @type {import("kaplay").GameObj[]}
+     */
+    resizableObjects: [],
+    /**
+     * Time left
+     */
+    timeLeft: 0,
+};