Use Parcel to bundle source files and NPM Scripts

Interchange/DataStructures.ts

@@ -1,10 +1,10 @@
-const enum Rotation { Down, Top, Right, Left };
+export const enum Rotation { Down, Top, Right, Left };
 
-interface Vector2D { x: number; y: number; }
+export interface Vector2D { x: number; y: number; }
 
-interface MoveData { Rot: Rotation; Pos: Vector2D }
+export interface MoveData { Rot: Rotation; Pos: Vector2D }
 
-interface NewCharacterData {
+export interface NewCharacterData {
     Position: Vector2D;
     Race: string;
     ID: string;
@@ -15,7 +15,7 @@ interface NewCharacterData {
     Level: number;
 }
 
-interface Config {
+export interface Config {
     TileSize: number;
     MapWidth: number;
     MapHeight: number;
@@ -39,12 +39,12 @@ interface Config {
     Collision: number[];
 };
 
-interface SpawnData {
+export interface SpawnData {
     Position: Vector2D;
     Count: number
 }
 
-interface MobData {
+export interface MobData {
     AliveSprites: number[];
     DeadSprites: number[];
     Experience: number;

README.md

@@ -3,16 +3,9 @@
 ### Requirements
 * Node 8+
 
-
 ### How to run
 * `git clone https://github.com/RemoveIt/TibiaJS.git`
 * `cd TibiaJS`
-* `git submodule init`
-* `git submodule update`
 * `npm install`
 * `npm run build`
-* `npm run run` or `cd Out` & `node Server.js`
-
-### How to update cloned repo
-* `git pull origin master`
-* `git submodule foreach git pull origin master`
+* `npm run run` or `cd out/` & `node Server.js`

client/BasicComponents.ts

@@ -1,6 +1,7 @@
 import {IComponent} from "./Game";
 import {config} from "./Init";
 import {GameObj} from "./GameObj";
+import {Vector2D, Rotation} from "../Interchange/DataStructures";
 
 export const enum Componenets {
     Position = 1, Movement = 2, Sprite = 4, CharacterAnimation = 8,

client/Init.ts

@@ -1,7 +1,6 @@
-/// <reference path="../Interchange/DataStructures.ts"/>
-/// <reference path="../resources/3rd/SpriteGL/bin/SpriteGL.d.ts"/>
-
+/// <reference path="../resources/index.d.ts"/>
 
+import {Config} from "../Interchange/DataStructures";
 import {RenderingSystem} from "./Systems/RenderingSystem";
 import {AnimationSystem} from "./Systems/AnimationSystem";
 import {NetworkSystem} from "./Systems/NetworkSystem";
@@ -13,6 +12,7 @@ import {GameObj} from "./GameObj";
 import {PositionComponent, RenderMapComponent} from "./BasicComponents";
 import {World} from "./World";
 import {GetFPS, loadImage} from "./Misc";
+import SpritesURL from "../resources/sprites.png";
 
 export var config: Config;
 
@@ -28,12 +28,12 @@ window.onload = function () {
     var world = new World();
 
 
-    const configPromise = fetch("data.json").then(response => response.json());
-    const spritePromise = loadImage("sprites.png");
+    const configPromise = import("../resources/data.json");
+    const spritePromise = loadImage(SpritesURL);
 
     Promise.all([configPromise, spritePromise])
         .then(([configData, sprites]) => {
-            config = configData;
+            config = configData.default as Config;
             const canvas = <HTMLCanvasElement>document.getElementById("GameCanvas");
             renderingSystem = new RenderingSystem(canvas, sprites);
 

client/Misc.ts

@@ -1,4 +1,6 @@
-export function GET(path: string, fn: (err, res) => void) {
+import {Vector2D} from "../Interchange/DataStructures";
+
+export function GET(path: string, fn: (err, res) => void) {
     var req = new XMLHttpRequest();
     req.open("GET", path, true);
     req.send();

client/SpriteDrawer.ts

@@ -1,8 +1,9 @@
 import {config} from "./Init";
+import {SpriteRenderer} from "SpriteGL";
 
 class SpriteDrawer {
-    renderer: SpriteGL.SpriteRenderer;
-    constructor(renderer: SpriteGL.SpriteRenderer) {
+    renderer: SpriteRenderer;
+    constructor(renderer: SpriteRenderer) {
         this.renderer = renderer;
     }
 

client/Systems/AnimationSystem.ts

@@ -8,6 +8,7 @@ import {
 } from "../BasicComponents";
 import {GameObj} from "../GameObj";
 import {World} from "../World";
+import {Rotation} from "../../Interchange/DataStructures";
 
 export class AnimationSystem implements ISystem {
     private tick = 1;

client/Systems/CameraSystem.ts

@@ -1,6 +1,7 @@
 import {ISystem} from "../Game";
 import {Componenets, PositionComponent} from "../BasicComponents";
 import {World} from "../World";
+import {Vector2D} from "../../Interchange/DataStructures";
 
 export class CameraSystem implements ISystem {
     private cameraPosList = new Array<Vector2D>();

client/Systems/InputSystem.ts

@@ -3,6 +3,7 @@ import {Componenets, HealthComponent, InputComponent, MovementComponent, Positio
 import {GameObj} from "../GameObj";
 import {config} from "../Init";
 import {Events, World} from "../World";
+import {Rotation, Vector2D} from "../../Interchange/DataStructures";
 
 export class InputSystem implements ISystem {
     private keys = new Array<boolean>(200);

client/Systems/NetworkSystem.ts

@@ -11,6 +11,7 @@
 import {config} from "../Init";
 import {GameObj} from "../GameObj";
 import {Events, World} from "../World";
+import {NewCharacterData, Rotation, MoveData} from "../../Interchange/DataStructures";
 
 export class NetworkSystem {
     private socket: SocketIOClient.Socket;

client/Systems/RenderingSystem.ts

@@ -1,4 +1,5 @@
-import {
+import SpriteGL, {SpriteRenderer} from "SpriteGL";
+import {
     CharacterMessageComponent,
     Componenets,
     HealthComponent,
@@ -8,9 +9,10 @@
 import {config} from "../Init";
 import {ISystem} from "../Game";
 import {Events, World} from "../World";
+import {Vector2D} from "../../Interchange/DataStructures";
 
 export class RenderingSystem implements ISystem {
-    private renderer: SpriteGL.SpriteRenderer;
+    private renderer: SpriteRenderer;
     private mapsToRender = new Array<{ position: PositionComponent; map: RenderMapComponent; }>();
     private dmgTxtList = new Array<{ txtObj; position: Vector2D, lifeTime: number }>();
     constructor(canvas: HTMLCanvasElement, textureAtlas: HTMLImageElement) {

client/index.html

@@ -64,8 +64,7 @@
     </div>
     <progress id="ManaBar" class="GameBar" max="100" value="100"></progress>
 </div>
-<script src="/socket.io/socket.io.js"></script>
-<script src="SpriteGL.js"></script>
-<script src="client.js"></script>
+<script src="//localhost:2137/socket.io/socket.io.js"></script>
+<script src="./Init.ts"></script>
 </body>
 </html>

client/tsconfig.json

@@ -1,59 +1,9 @@
 {
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
   "compilerOptions": {
-    /* Basic Options */
     "target": "es2015",
-    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "ESNext",
-    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": [
-      "es2015",
-      "dom"
-    ],
-    /* Specify library files to be included in the compilation. */
-    // "allowJs": true,                       /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,
-    /* Generates corresponding '.d.ts' file. */
-    "sourceMap": true,
-    "outFile": "./client.js"
-    /* Generates corresponding '.map' file. */
-    /* Concatenate and emit output to single file. */
-    /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
-    //    "strict": true,
-    /* Enable all strict type-checking options. */
-    /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-
-    /* Source Map Options */
-    //     "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    //     "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
-    //     "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    //     "inlineSources": true                /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-  },
-  "include": ["**/*.ts"]
-}
+    "lib": [ "es2015", "dom" ],
+    "sourceMap": true
+  }
+}

package.json

@@ -4,31 +4,30 @@
   "description": "TibiaJS",
   "main": "app.js",
   "scripts": {
-    "build": "gulp build",
-    "run": "gulp run"
+    "run": "node ./start.js",
+    "build": "concurrently \"npm run build:client\" \"npm run build:server\"",
+    "build:client": "parcel build client/index.html -d out/static --no-minify",
+    "build:server": "parcel build server/Server.ts -d out --target node --no-minify"
   },
   "author": {
     "name": "Pawel",
     "email": ""
   },
   "dependencies": {
+    "SpriteGL": "https://github.com/krtr/SpriteGL",
     "express": "4.16.3",
     "serve-static": "1.13.2",
     "socket.io": "2.1.1"
   },
   "devDependencies": {
     "@types/express": "^4.16.0",
-    "@types/node": "^10.7.0",
+    "@types/node": "^10.11.6",
     "@types/socket.io": "^1.4.36",
     "@types/socket.io-client": "^1.4.32",
-    "awesome-typescript-loader": "^5.2.0",
-    "gulp": "4.0.0",
-    "gulp-concat": "2.6.1",
-    "gulp-nodemon": "2.2.1",
-    "gulp-typescript": "4.0.1",
+    "concurrently": "^4.0.1",
+    "nodemon": "^1.18.4",
     "open": "0.0.5",
-    "typescript": "2.8.4",
-    "webpack": "^4.16.5",
-    "webpack-stream": "^5.1.1"
+    "parcel-bundler": "^1.10.2",
+    "typescript": "^3.1.2"
   }
 }

resources/index.d.ts

@@ -0,0 +1,9 @@
+declare module "*.png" {
+  const image: string;
+  export default image;
+}
+
+declare module "*.json" {
+  const resources: any;
+  export default resources;
+}