Ported to TypeScript!

package.json

@@ -24,24 +24,17 @@
   },
   "homepage": "https://github.com/fairy-rockets/the-gear-of-seasons#readme",
   "devDependencies": {
-    "@babel/cli": "^7.10.4",
-    "@babel/core": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/register": "^7.10.4",
     "@types/fancy-log": "^1.3.1",
     "@types/gulp": "^4.0.6",
     "@types/twemoji": "^12.1.1",
     "@types/webpack": "^4.41.21",
     "@types/webpack-stream": "^3.2.11",
     "@types/write-file-webpack-plugin": "^4.5.0",
     "ansi-colors": "^4.1.1",
-    "babel-loader": "^8.1.0",
     "child_process": "^1.0.2",
     "del": "^5.1.0",
     "fancy-log": "^1.3.3",
     "gulp": "^4.0.2",
-    "gulp-babel": "^8.0.0",
     "gulp-typescript": "^6.0.0-alpha.1",
     "npm-check-updates": "^7.0.1",
     "ts-loader": "^8.0.1",
@@ -53,7 +46,6 @@
     "write-file-webpack-plugin": "^4.5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.4",
     "gl-matrix": "^3.3.0",
     "twemoji": "^13.0.0"
   }

web/omote/Layer.ts

@@ -3,7 +3,7 @@ import { mat4 } from "gl-matrix";
 import Gear from "./actors/Gear";
 
 export default abstract class Layer {
-  private readonly world_: World;
+  protected readonly world_: World;
   private readonly path_: string;
   protected readonly element_: HTMLDivElement;
   constructor(world: World, path: string) {

web/omote/World.ts

@@ -283,7 +283,7 @@ export default class World {
     }
   }
 
-  linkShaders(vs: WebGLShader, fs: WebGLShader): WebGLProgram {
+  linkShaders(vs: WebGLShader, fs: WebGLShader): Program {
     const gl = this.gl_;
     const program = gl.createProgram()!;
     gl.attachShader(program, vs);
@@ -302,7 +302,7 @@ export default class World {
 
   createIndexBuffer(mode: number, data: Uint16Array|number[]): IndexBuffer {
     const gl = this.gl_;
-    const buff = gl.createBuffer();
+    const buff = gl.createBuffer()!;
     if(data instanceof Array) {
       data = new Uint16Array(data);
     }
@@ -314,7 +314,7 @@ export default class World {
 
   createArrayBuffer(data: Float32Array|number[], elemSize: number): ArrayBuffer {
     const gl = this.gl_;
-    const buff = gl.createBuffer();
+    const buff = gl.createBuffer()!;
     if(data instanceof Array) {
       data = new Float32Array(data);
     }

web/omote/actors/Background.ts

@@ -4,7 +4,7 @@ import Program from "../gl/Program";
 import ArrayBuffer from "../gl/ArrayBuffer";
 import IndexBuffer from "../gl/IndexBuffer";
 import { mat4, vec4, ReadonlyMat4 } from "gl-matrix";
-import { Winter, Spring, Summer, Autumn } from './Seasons.js';
+import { Winter, Spring, Summer, Autumn } from './Seasons';
 
 export default class Background {
   private readonly world_: World;

web/omote/actors/Gear.ts

@@ -4,7 +4,7 @@ import ArrayBuffer from "../gl/ArrayBuffer";
 import IndexBuffer from "../gl/IndexBuffer";
 import { mat4, vec4, ReadonlyMat4 } from "gl-matrix";
 
-import { Winter, Spring, Summer, Autumn } from './Seasons.js';
+import { Winter, Spring, Summer, Autumn } from './Seasons';
 
 function calcTodaysAngle(): number {
   const now = new Date();
@@ -29,10 +29,10 @@ export default class Gear {
   private readonly summerLightPos_: vec4;
   private readonly autumnLightPos_: vec4;
 
-  private vertexes_: ArrayBuffer;
-  private norms_: ArrayBuffer;
-  private indecies_: IndexBuffer;
-constructor(world: World) {
+  private vertexes_: ArrayBuffer | null = null;
+  private norms_: ArrayBuffer | null = null;
+  private indecies_: IndexBuffer | null = null;
+  constructor(world: World) {
     this.world_ = world;
     this.gl_ = world.gl;
     const vs = world.compileVertexShader(vsSrc);
@@ -127,8 +127,8 @@ constructor(world: World) {
       gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
       this.program_.bind();
-      this.vertexes_.bindShader(this.program_, 'position');
-      this.norms_.bindShader(this.program_, 'norm');
+      this.vertexes_!.bindShader(this.program_, 'position');
+      this.norms_!.bindShader(this.program_, 'norm');
 
       gl.uniformMatrix4fv(this.program_.uniformLoc('matLocModel'), false, matLocModel);
       gl.uniformMatrix4fv(this.program_.uniformLoc('matrix'), false, matTmp);
@@ -143,14 +143,14 @@ constructor(world: World) {
       gl.uniform4fv(this.program_.uniformLoc('summerPosition'), this.summerLightPos_);
       gl.uniform4fv(this.program_.uniformLoc('autumnPosition'), this.autumnLightPos_);
 
-      this.indecies_.bind();
-      this.indecies_.render();
+      this.indecies_!.bind();
+      this.indecies_!.render();
     } finally {
       gl.disable(gl.DEPTH_TEST);
       gl.disable(gl.BLEND);
-      this.vertexes_.unbind();
-      this.norms_.unbind();
-      this.indecies_.unbind();
+      this.vertexes_!.unbind();
+      this.norms_!.unbind();
+      this.indecies_!.unbind();
       this.program_.unbind();
     }
   }
@@ -277,9 +277,9 @@ constructor(world: World) {
     this.indecies_ = world.createIndexBuffer(gl.TRIANGLES, indecies)!;
   }
   destroy() {
-    this.vertexes_.destroy();
-    this.norms_.destroy();
-    this.indecies_.destroy();
+    this.vertexes_?.destroy();
+    this.norms_?.destroy();
+    this.indecies_?.destroy();
     this.program_.destoy();
   }
 }

web/omote/actors/Moment.ts

@@ -23,11 +23,11 @@ export default class Moment {
   private screenTopY_: number;
   private screenBottomX_: number;
   private screenBottomY_: number;
-  constructor(world: World, angle: string, date: string, title: string, path: string, imageURL: string, bodyURL: string) {
+  constructor(world: World, angle: number, date: string, title: string, path: string, imageURL: string, bodyURL: string) {
     this.world_ = world;
     this.gl_ = world.gl;
     // params
-    this.angle_ = parseFloat(angle);
+    this.angle_ = angle;
     this.date_ = date;
     this.title_ = title;
     this.path_ = path;
@@ -96,8 +96,8 @@ export default class Moment {
     this.y_ = s * radius;
   }
   destroy() {
-    this.tex_.destroy();
-    this.tex_=null;
+    this.tex_?.destroy();
+    this.tex_ = null;
   }
   get x(): number {
     return this.x_;

web/omote/actors/Moments.ts

@@ -1,9 +1,9 @@
-import World from "../World.js";
-import Moment from "./Moment.js";
+import World from "../World";
+import Moment from "./Moment";
 import Program from "../gl/Program";
 import ArrayBuffer from "../gl/ArrayBuffer";
 import IndexBuffer from "../gl/IndexBuffer";
-import { mat4, vec4 } from "gl-matrix";
+import { mat4, vec4, ReadonlyVec4, ReadonlyMat4 } from "gl-matrix";
 
 const Scale = Moment.DiscRadius;
 
@@ -19,7 +19,7 @@ export default class Moments {
   private readonly mouseTmpMat_: mat4;
   private readonly mouseTmpVec_: vec4;
   private readonly momentPosTmpVec_: vec4;
-  private readonly models_: Moment[] | null;
+  private models_: Moment[] | null;
   constructor(world: World) {
     this.world_ = world;
     this.gl_ = world.gl;
@@ -68,7 +68,7 @@ export default class Moments {
     this.models_ = ms;
   }
 
-  render(time: number, matWorld: mat4, mouseX: number, mouseY: number) {
+  render(time: number, matWorld: mat4, mouseX: number, mouseY: number): Moment | null {
     const gl = this.gl_;
     const world = this.world_;
     const gear = world.gear;
@@ -80,7 +80,7 @@ export default class Moments {
     const matModel = this.matModel_;
 
     if(!this.models_) {
-      return;
+      return null;
     }
 
     let selected: Moment | null = null;
@@ -140,14 +140,7 @@ export default class Moments {
     }
     return selected;
   }
-  /**
-   * 
-   * @param {mat4} mat 
-   * @param {number} x 
-   * @param {number} y 
-   * @returns {number[]}
-   */
-  calcMousePos_(mat, x, y) {
+  calcMousePos_(mat: ReadonlyMat4, x: number, y: number): [number, number] {
     const tmpMat = this.mouseTmpMat_;
     const tmpVec = this.mouseTmpVec_;
     mat4.set(tmpMat,
@@ -163,8 +156,10 @@ export default class Moments {
   }
 
   destroy() {
-    for(let m of this.models_) {
-      m.destroy();
+    if(this.models_) {
+      for(let m of this.models_) {
+        m.destroy();
+      }
     }
     this.vertexes_.destroy();
     this.texCoords_.destroy();

web/omote/gl/ArrayBuffer.js → web/omote/gl/ArrayBuffer.ts

@@ -1,13 +1,11 @@
 import Program from "./Program";
 
 export default class ArrayBuffer{
-  /**
-   * @param {WebGLRenderingContext} gl 
-   * @param {WebGLBuffer} buff
-   * @param {number} elemSize
-   * @param {number} length
-   */
-  constructor(gl, buff, elemSize, length) {
+  private readonly gl_: WebGLRenderingContext;
+  private buff_: WebGLBuffer | null;
+  public readonly elemSize: number;
+  public readonly length: number;
+  constructor(gl: WebGLRenderingContext, buff: WebGLBuffer, elemSize: number, length: number) {
     this.gl_ = gl;
     this.buff_ = buff;
     this.elemSize = elemSize;
@@ -17,12 +15,7 @@ export default class ArrayBuffer{
     const gl = this.gl_;
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buff_);
   }
-  /**
-   * 
-   * @param {Program} prog 
-   * @param {string} attrName
-   */
-  bindShader(prog, attrName) {
+  bindShader(prog: Program, attrName: string) {
     const gl = this.gl_;
     const pos = prog.attributeLoc(attrName);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buff_);

web/omote/gl/IndexBuffer.js → web/omote/gl/IndexBuffer.ts

@@ -1,11 +1,9 @@
 export default class IndexBuffer{
-  /**
-   * @param {WebGLRenderingContext} gl 
-   * @param {number} mode 
-   * @param {WebGLBuffer} buff
-   * @param {number} length
-   */
-  constructor(gl, mode, buff, length) {
+  private readonly gl_: WebGLRenderingContext;
+  private readonly mode_: number;
+  private buff_: WebGLBuffer | null;
+  public readonly length: number;
+  constructor(gl: WebGLRenderingContext, mode: number, buff: WebGLBuffer, length: number) {
     this.gl_ = gl;
     this.mode_ = mode;
     this.buff_ = buff;