Organize files

README.md

@@ -26,7 +26,7 @@ import { Game } from `youngblood`;
 # Getting Started
 
 - [Read the Wiki](https://github.com/zsombro/youngblood/wiki) on how to get started with Youngblood
-- Look at the quick and dirty examples in [the 'examples' folder of this repositorry](https://github.com/zsombro/youngblood/tree/master/examples)
+- Look at some quick and dirty examples in [the 'examples' folder of this repositorry](https://github.com/zsombro/youngblood/tree/master/examples)
 - [Check out this repository](https://github.com/zsombro/youngblood-example-project) to see a working example with bundling
 
 # Contributing

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youngblood",
-  "version": "0.2.5",
+  "version": "0.3.5",
   "description": "A simple game development framework for web browsers.",
   "repository": "github:zsombro/youngblood",
   "main": "bundle/youngblood.js",

src/entity.test.ts

@@ -2,7 +2,7 @@ import 'mocha';
 import { expect } from 'chai';
 
 import Entity from './entity';
-import Component from './component';
+import Component from './components/component';
 
 class C1 extends Component {}
 class C2 extends Component {}

src/entity.ts

@@ -1,6 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Component, { Position, Velocity, Sprite, AnimatedSprite, InputMapping, Label, Box } from './component';
-import TiledMap from './tiledMap';
+import Component, {
+    Position,
+    Velocity,
+    Sprite,
+    AnimatedSprite,
+    InputMapping,
+    Label,
+    Box,
+} from './components/component';
+import TiledMap from './components/tiledMap';
 
 export default class Entity {
     [x: string]: Component;

src/main.ts

@@ -12,11 +12,11 @@ import {
     InputMapping,
     Label,
     AnimationSheet,
-} from './component';
+} from './components/component';
 
-import TiledMap, { TiledMapData, TiledSheetData } from './tiledMap';
+import TiledMap, { TiledMapData, TiledSheetData } from './components/tiledMap';
 
-import Component from './component';
+import Component from './components/component';
 
 import { InputMappingSystem, System } from './system';
 

src/renderer.test.ts

@@ -0,0 +1,27 @@
+import 'mocha';
+import { expect } from 'chai';
+
+import { getTilesheetCoordinateById } from './renderer';
+import { TiledSheetData } from './components/tiledMap';
+
+describe('Renderer', (): void => {
+    it('should translate tile IDs to coordinates', (): void => {
+        const data: TiledSheetData = {
+            image: null,
+            imageheight: 128,
+            imagewidth: 128,
+            tileheight: 16,
+            tilewidth: 16,
+            tilecount: 64,
+            columns: 8,
+        };
+
+        const position1 = getTilesheetCoordinateById(1, data);
+        const position2 = getTilesheetCoordinateById(2, data);
+        const position3 = getTilesheetCoordinateById(14, data);
+
+        expect(position1).to.deep.equal({ x: 0, y: 0 });
+        expect(position2).to.deep.equal({ x: 16, y: 0 });
+        expect(position3).to.deep.equal({ x: 80, y: 16 });
+    });
+});

src/renderer.ts

@@ -1,6 +1,6 @@
-import { AnimatedSprite, Animation, Box, Position, Label, Sprite } from './component';
+import { AnimatedSprite, Animation, Box, Position, Label, Sprite } from './components/component';
 import { Scene } from './scene';
-import TiledMap, { Layer, TiledSheetData } from './tiledMap';
+import TiledMap, { Layer, TiledSheetData } from './components/tiledMap';
 
 export type Renderer = (entity: Scene) => void;
 
@@ -47,10 +47,10 @@ function renderAnimatedSprite(p: Position, sprite: AnimatedSprite, ctx: CanvasRe
 }
 
 function renderImageLayer(position: Position, layer: Layer, ctx: CanvasRenderingContext2D): void {
-    ctx.drawImage(layer.image, position.x + layer.x, position.y + layer.y, ctx.canvas.width, ctx.canvas.height);
+    ctx.drawImage(layer.image, layer.x, layer.y, ctx.canvas.width, ctx.canvas.height);
 }
 
-function getTileById(id: number, sheet: TiledSheetData): { x: number; y: number } {
+export function getTilesheetCoordinateById(id: number, sheet: TiledSheetData): { x: number; y: number } {
     return {
         x: (id % sheet.columns) * sheet.tilewidth - sheet.tilewidth,
         y: Math.floor(id / sheet.columns) * sheet.tileheight,
@@ -67,7 +67,7 @@ function renderTileLayer(
     for (let i = 0; i < layer.data.length; i++) {
         if (layer.data[i] === 0) continue;
 
-        const { x, y } = getTileById(layer.data[i], sheet);
+        const { x, y } = getTilesheetCoordinateById(layer.data[i], sheet);
         ctx.drawImage(
             sheet.image,
             x,

src/services/assetloader.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { TiledMapData, TiledSheetData } from '../tiledMap';
+import { TiledMapData, TiledSheetData } from '../components/tiledMap';
 
 interface AssetData {
     type: 'image' | 'audio' | 'json' | 'tiled-map' | 'tiled-set';

src/system.ts

@@ -1,7 +1,7 @@
 import Entity from './entity';
 import { Scene, SceneServices } from './scene';
-import { InputMapping } from './component';
-import TiledMap from './tiledMap';
+import { InputMapping } from './components/component';
+import TiledMap from './components/tiledMap';
 
 export interface System {
     systemId: string;