convert to type script

Asset.ts

@@ -0,0 +1,27 @@
+class Asset {
+    // 読み込んだ画像
+    public images: {key?: string;} = {}; // 連想配列の定義
+
+    //アセットをimgタグからImageを作成
+    private init() {
+        //全てのimgタグを取ってきてAssetに格納
+        let htmlImgElements = document.getElementsByTagName("img");
+        let assets;
+        htmlImgElements.forEach(img => {
+            let id = img.getAttribute("id");
+            let src= img.getAttribute("src");
+            assets.push( { type: 'image', id: id, src: src});
+        });
+
+        // すべてのアセットを読み込む
+        assets.forEach(asset => {
+            switch (asset.type) {
+                case 'image':
+                    let image = new Image();
+                    image.src = asset.src;
+                    this.images[asset.id] = image;
+                break;
+            }	
+        });
+    }
+}

Player.ts

@@ -0,0 +1,16 @@
+class Player {
+    private id: number;
+    private isAi: boolean;
+    // private color: ENUM_PLAYER_COLORS;
+
+    // public infoSprite: PlayerInfoSprite;
+
+    constructor(id: number, isAi: boolean) {
+        this.id = id;
+        this.isAi = isAi;
+    }
+
+    public init() {
+
+    }
+}

Sprite/BaseSprite.ts

@@ -0,0 +1,53 @@
+export class BaseSprite {
+    // private image: ???
+    protected x: number;
+    protected y: number;
+    protected width: number;
+    protected height: number;
+    protected id: number;
+
+    constructor(x:number, y:number, width:number, height:number, id:number) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.id = id;
+    }
+
+    // TODO isって何？
+    public checkClickCircle(cx:number, cy:number, is:boolean, rate:number) {
+        let radius = (this.height / 2) * rate;
+        let center_x = this.x + this.width  / 2;
+        let center_y = this.y + this.height / 2;
+
+        let dx = center_x - cx;
+        let dy = center_y - cy;
+
+        let distance = Math.sqrt(dx * dx + dy * dy);
+
+        if ( is ) {
+            ctx.beginPath();
+            ctx.arc(center_x, center_y, radius, 0, Math.PI*2, false);
+            ctx.stroke();
+        }
+
+        if ( distance < radius ) {
+            this.onClick();
+        }
+    }
+
+    public checkClickRect(cx:number, cy:number) {
+        if ( this.x < cx && this.x < this.width ) {
+            if ( this.y < cy && this.y < this.height ) {
+                this.onClick();
+            }
+
+        }
+    }
+
+    public draw() {
+        ctx.drawImage( this.image , this.x , this.y , this.width , this.height );
+    }
+
+    public onClick() {}
+}

Sprite/EdgeSprite.ts

@@ -0,0 +1,33 @@
+import {BaseSprite} from './BaseSprite';
+
+class EdgeSprite extends BaseSprite {
+    private owner_id: number;
+    private angle: number; // 0:- 1:/ 2:\ 
+
+    constructor(x:number, y:number, width:number, height:number, id:number, owner_id:number, angle:number) {
+        super(x,y,width,height,id);
+        this.owner_id = owner_id;
+        this.angle =angle;
+    }
+
+    // @override
+    public onClick() {
+        if (_now_init_state == ENUM_INIT_STATE.BUILD) {
+            initBuild(this.id);
+        }
+    }
+
+    // @override
+    public draw2(candidate:boolean) {
+        let image;
+        if (candidate) {
+            image = Asset.images["token7"];
+            ctx.drawImage( image, this.x, this.y, this.width, this.height); 
+        } else {
+            if ( this.owner_id != -1 ) {
+                image = Asset.images["token12"];
+                ctx.drawImage( image, this.x, this.y, this.width, this.height); 
+            }
+        }
+    }
+}

const.js

@@ -1,51 +1,10 @@
-var ENUM_INIT_STATE = {
-	TILE 	: 0,
-	TOKEN 	: 1,
-	HARBOR 	: 2,
-	PLAYER_COLOR 	: 3, //AIか人かと席順も決める
-	PLAYER_ORDER 	: 4, //初期配置の順番を決める
-	BUILD : 5, //初期建設
-	END : 6 //CheckButtonで使用
-};
-
-var IMG_PATH = "./img/"
-
-var ENUM_RESOURCE			= { BRICK:0, LUNBER:1, WOOL:2, GRAIN:3, ORE:4, DESERT:5};
-var RESOURCE_NAMES 		    = ["brick" ,"lumber" ,"wool" ,"grain", "ore" ,"desert"];
 var _resource_panel_remains = [       3,        4,      4,      4,       3,      1];
-
-var HARBOR_NAMES 		    = ["brick" ,"lumber" ,"wool" ,"grain", "ore" ,"3_1"];
 var _harbor_panel_remains   = [		  1,		1,		1,		1,		 1,	  5];
-
-var ENUM_PLAYER_COLORS = { RED:0, BLUE:1, ORANGE:2, WHITE:3};
-var PLAYER_COLORS 	   = ["red" ,"blue" ,"orange" ,"white" ];
-
-var ENUM_ACTIONS = { 
-	KNIGHT		:0, //騎士
-	PLENTY		:1, //収穫
-	ROAD		:2, //がいどう建設
-	MONOPOLY	:3, //独占
-	POINT		:4,	//勝利点
-};
-var ACTION_NAMES   = ["knight","plenty","road","monopoly","point"];
 var ACTION_REMAINS = [      14,       2,     2,         2,      5];
 
 						//   0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12
 var _token_panel_remains = [-1,-1, 1, 2, 2, 2, 2,-1, 2, 2, 2, 2, 1];
 
-var ENUM_CONTROLLER_TAB = {
-	DICE		:0,
-	ACTION 		:1,
-	BUILD		:2,
-	DOMESTIC	:3, //貿易
-	MARITIME	:4, //交渉
-	VICTORY		:5  //勝利宣言	
-};
-var CONTROLLER_TAB_NAMES = ["dice","action","build","domestic_trade","maritime_trade"];
-
-var ENUM_BUILD  = {ROAD:0,SETTLEMENT:1,CITY:2,DEVELOPMENT:3};
-var BUILD_NAMES = ["road","settlement","city","development"];
-
 var MAX_SETTLEMENT = 5;
 var MAX_CITY = 4;
 var MAX_ROAD = 15;

const.ts

@@ -0,0 +1,99 @@
+const IMG_PATH = "./img/"
+
+enum EnumInitState {
+    Tile,
+    Token,
+    Harbor,
+    PlayerColor,
+    PlayerOrder,
+    Build,
+    End,
+}
+
+enum EnumResource {
+    Brick,
+    Lunber,
+    Wool,
+    Grain,
+    Ore,
+    Desert,
+}
+
+const RESOURCE_NAMES: string[] = [
+    "brick",
+    "lumber",
+    "wool",
+    "grain",
+    "ore",
+    "desert",
+];
+
+const HARBOR_NAMES: string[] = [
+    "brick",
+    "lumber",
+    "wool",
+    "grain",
+    "ore",
+    "3_1",
+];
+
+enum EnumPlayerColors {
+    Red,
+    Blue,
+    Orange,
+    White,
+}
+
+const PLAYER_COLORS: string[] = [
+    "red",
+    "blue",
+    "orange",
+    "white,"
+];
+
+enum EnumActions {
+    Knight,
+    Plenty,
+    Road,
+    Monopoly,
+    Point,
+}
+
+const ACTION_NAMES: string[] = [
+    "knight",
+    "plenty",
+    "road",
+    "monopoly",
+    "point",
+];
+
+enum EnumControllerTab {
+    Dice,
+    Action,
+    Build,
+    Domestic,
+    Maritime,
+    Victory,
+}
+
+const CONTROLLER_TAB_NAMES: string[] = [
+    "dice",
+    "action",
+    "build",
+    "domestic_trade",
+    "maritime_trade",
+];
+
+enum EnumBuild {
+    Road,
+    Settlement,
+    City,
+    Development,
+}
+
+const BUILD_NAMES: string[] = [
+    "road",
+    "settlement",
+    "city",
+    "development",
+];