git.r.bdr.sh - rbdr/sumo/blob - lib/sumo.js

   1 import Config from './config';
   2
   3 // Systems
   4
   5 import ApplyForceSystem from './systems/apply_force';
   6 import CreateCouplingLineSystem from './systems/create_coupling_line';
   7 import ControlMapperSystem from './systems/control_mapper';
   8 import DashSystem from './systems/dash';
   9 import DetectPointsCollisionSystem from './systems/detect_points_collision';
  10 import DetectWinnerSystem from './systems/detect_winner';
  11 import DrawDashSystem from './systems/draw_dash';
  12 import DrawGrabSystem from './systems/draw_grab';
  13 import ElasticSystem from './systems/elastic';
  14 import GrabSystem from './systems/grab';
  15 import PhysicsWorldControlSystem from './systems/physics_world_control';
  16 import PhysicsToAttributesSystem from './systems/physics_to_attributes';
  17 import RenderPointsSystem from './systems/render_points';
  18 import RenderSystem from './systems/render';
  19 import RenderWinnerSystem from './systems/render_winner';
  20 import AttributesToRenderableSystem from './systems/attributes_to_renderable';
  21
  22 // Factories
  23
  24 import SumoFactory from './factories/sumo';
  25
  26 // External Dependencies
  27
  28 import Serpentity from '@serpentity/serpentity';
  29 import { Application } from 'pixi.js';
  30 import { Engine } from 'matter-js';
  31
  32 const internals = {
  33   kBackgroundColor: 0xd8c590,
  34   kNoElementError: 'No element found. Cannot render.',
  35
  36   // Handler for the window load event. Initializes and runs the app.
  37
  38   onLoad() {
  39
  40     const sumo = new internals.Sumo(Object.assign({
  41       element: document.getElementById('sumo-app-entry-point')
  42     }, Config));
  43
  44     sumo.startLoop();
  45
  46     window.sumo = sumo;
  47   }
  48 };
  49
  50 /**
  51  * Sumo - main entry point. Attached to window->load
  52  *
  53  * @class Sumo
  54  *
  55  * @param {object} config the configuration to extend the object
  56  *
  57  * @property {HTMLElement} [element=null] the element in which to render.
  58  * Required, will throw if not provided
  59  * @property {Number} [fps=60] the fps target to maintain
  60  * @property {Number} [verticalResolution=224] how many pixels to render in the vertical
  61  * axis (gets scaled if the canvas is larger)
  62  * @property {Array<Number>} [aspectRatio=[2.76, 1]] the aspect ratio experssed as
  63  * an array of two numbers, where aspect ratio x:y is [x, y] (eg. [16, 9])
  64  */
  65
  66 internals.Sumo = class Sumo {
  67
  68   constructor(config) {
  69
  70     // These defaults can get overridden by config
  71     this.fps = 60;
  72     this.aspectRatio = [2.76, 1];
  73     this.verticalResolution = 224;
  74
  75     Object.assign(this, config);
  76
  77     if (!this.element) {
  78       throw new Error(internals.kNoElementError);
  79     }
  80
  81     this._engine = new Serpentity();
  82
  83     this._previousTime = 0;
  84     this._looping = false;
  85
  86     // Initialization functions
  87     this._initializeCanvas();
  88     this._initializeMatter();
  89     this._initializePixi();
  90     this._initializeSystems();
  91     this._initializeEntities();
  92   }
  93
  94   /**
  95    * Starts the main loop. Resets the FPS (if you change it it won't go
  96    * live until after you stop and start the loop)
  97    *
  98    * @function startLoop
  99    * @instance
 100    * @memberof Sumo
 101    */
 102   startLoop() {
 103
 104     this._looping = true;
 105     this._frameDuration = 1000 / this.fps;
 106     window.requestAnimationFrame(this._loop.bind(this));
 107   }
 108
 109   /**
 110  * Pauses the loop
 111  *
 112  * @function pauseLoop
 113  * @instance
 114  * @memberof Sumo
 115  */
 116   pauseLoop() {
 117
 118     this._looping = false;
 119   }
 120
 121   // The main loop used above. Runs the serpentity update process and
 122   // attempts to maintain FPS. The rest is handled by the engine.
 123
 124   _loop(currentTime) {
 125
 126     if (!this._looping) {
 127       return;
 128     }
 129
 130     window.requestAnimationFrame(this._loop.bind(this));
 131
 132     const currentFrameDuration = currentTime - this._previousTime;
 133
 134     if (currentFrameDuration > this._frameDuration) {
 135
 136       // We're sending the currentTime since it gives better results for
 137       // this type of renderer, though usually we expect the delta
 138       this._engine.update(currentFrameDuration);
 139       this._previousTime = currentTime;
 140     }
 141   }
 142
 143   // Creates a canvas for rendering
 144
 145   _initializeCanvas() {
 146
 147     this._canvas = document.createElement('canvas');
 148     this.element.appendChild(this._canvas);
 149     this._resizeCanvas();
 150     window.addEventListener('resize', this._resizeCanvas.bind(this));
 151   }
 152
 153   // Initialize MatterJs
 154
 155   _initializeMatter() {
 156
 157     this._matterJs = Engine.create();
 158
 159     this._matterJs.world.gravity.y = 0;
 160   }
 161
 162   // Initialize Pixi
 163
 164   _initializePixi() {
 165
 166     this._pixi = new Application({
 167       backgroundColor: internals.kBackgroundColor,
 168       view: this._canvas,
 169       width: this._canvas.width,
 170       height: this._canvas.height
 171     });
 172   }
 173
 174   // Resizes the canvas to a square the size of the smallest magnitude
 175   // of the window.
 176
 177   _resizeCanvas() {
 178
 179     let width = window.innerWidth;
 180     let height = Math.round(width * this.aspectRatio[1] / this.aspectRatio[0]);
 181
 182     if (window.innerHeight < height) {
 183       height = window.innerHeight;
 184       width = Math.round(height * this.aspectRatio[0] / this.aspectRatio[1]);
 185     }
 186
 187     this._canvas.style.width = `${width}px`;
 188     this._canvas.style.height = `${height}px`;
 189
 190     this._canvas.width = Math.round(this.verticalResolution * this.aspectRatio[0] / this.aspectRatio[1]);
 191     this._canvas.height = this.verticalResolution;
 192   }
 193
 194   // Initializes the serpentity systems
 195
 196   _initializeSystems() {
 197
 198     this._engine.addSystem(new ControlMapperSystem());
 199
 200     this._engine.addSystem(new DashSystem());
 201
 202     this._engine.addSystem(new GrabSystem({
 203       engine: this._matterJs
 204     }));
 205
 206     this._engine.addSystem(new ApplyForceSystem());
 207
 208     this._engine.addSystem(new PhysicsWorldControlSystem({
 209       engine: this._matterJs
 210     }));
 211
 212     this._engine.addSystem(new DetectPointsCollisionSystem());
 213
 214     this._engine.addSystem(new DetectWinnerSystem());
 215
 216     this._engine.addSystem(new RenderPointsSystem({
 217       application: this._pixi
 218     }));
 219
 220     this._engine.addSystem(new RenderWinnerSystem({
 221       application: this._pixi
 222     }));
 223
 224     this._engine.addSystem(new ElasticSystem());
 225
 226     this._engine.addSystem(new PhysicsToAttributesSystem());
 227
 228     this._engine.addSystem(new AttributesToRenderableSystem());
 229
 230     this._engine.addSystem(new CreateCouplingLineSystem());
 231
 232     this._engine.addSystem(new DrawDashSystem());
 233
 234     this._engine.addSystem(new DrawGrabSystem());
 235
 236     this._engine.addSystem(new RenderSystem({
 237       application: this._pixi
 238     }));
 239   }
 240
 241   // Initializes the serpentity entities
 242
 243   _initializeEntities() {
 244
 245     SumoFactory.createArena(this._engine, {
 246       position: {
 247         x: this.horizontalResolution / 2,
 248         y: this.verticalResolution / 2
 249       }
 250     });
 251
 252     const sumoA = SumoFactory.createPlayer1Sumo(null, {
 253       position: {
 254         x: this.horizontalResolution / 2 - 100,
 255         y: this.verticalResolution / 2
 256       }
 257     });
 258
 259     const sumoB = SumoFactory.createPlayer2Sumo(null, {
 260       position: {
 261         x: this.horizontalResolution / 2 + 100,
 262         y: this.verticalResolution / 2
 263       }
 264     });
 265
 266     const harness = SumoFactory.createHarness(null, {
 267       position: {
 268         x: this.horizontalResolution / 2,
 269         y: this.verticalResolution / 2
 270       }
 271     });
 272
 273     SumoFactory.createRubberBand(this._engine, {
 274       entityA: sumoA,
 275       entityB: harness
 276     });
 277
 278     SumoFactory.createRubberBand(this._engine, {
 279       entityA: sumoB,
 280       entityB: harness
 281     });
 282
 283     // Walls
 284
 285     SumoFactory.createInvisibleBlock(this._engine, {
 286       width: this.horizontalResolution * 2,
 287       height: this.verticalResolution * 0.1,
 288       position: {
 289         x: this.horizontalResolution / 2,
 290         y: -this.verticalResolution * 0.1
 291       }
 292     });
 293
 294     SumoFactory.createInvisibleBlock(this._engine, {
 295       width: this.horizontalResolution * 2,
 296       height: this.verticalResolution * 0.1,
 297       position: {
 298         x: this.horizontalResolution / 2,
 299         y: this.verticalResolution + this.verticalResolution * 0.1
 300       }
 301     });
 302
 303     // Points Detector
 304
 305     SumoFactory.createPointsCollider(this._engine, {
 306       collisionTarget: sumoA,
 307       pointsTarget: 'red',
 308       height: this.verticalResolution,
 309       width: this.horizontalResolution,
 310       position: {
 311         x: this.horizontalResolution + this.horizontalResolution / 2,
 312         y: this.verticalResolution / 2
 313       }
 314     });
 315
 316     SumoFactory.createPointsCollider(this._engine, {
 317       collisionTarget: sumoB,
 318       pointsTarget: 'blue',
 319       height: this.verticalResolution,
 320       width: this.horizontalResolution,
 321       position: {
 322         x: -this.horizontalResolution / 2,
 323         y: this.verticalResolution / 2
 324       }
 325     });
 326
 327     // The game state
 328     SumoFactory.createGameState(this._engine);
 329
 330     // To keep the coupling behind, we'll manually add the sumos later
 331
 332     this._engine.addEntity(sumoA);
 333     this._engine.addEntity(sumoB);
 334     this._engine.addEntity(harness);
 335   }
 336 };
 337
 338 export default internals.exports = {};
 339
 340 // autorun.bat
 341 window.addEventListener('load', internals.onLoad);