座席の描画

今回の主役は座席です。これが持っているものとしては

座標
大きさ
文字列（名前）

しかし、いきなり実装するのではなくて画面に描画するオブジェクトに対するインターフェースを考えました。

これを用意しておけば、画面に描画する必要があるものは一気に描画することができます。

interface Draw{
    /**
     * どのような物を、どのように描画するのかは、実装クラスに任せる
     */
    draw(): void;
}

Layerクラスで描画対象となるオブジェクトを登録できるようにします。

/**
     * Canvasに描画するオブジェクトを登録します。
     * 
     * @param child 描画オブジェクト
     */
    public addChild(...child: Array<Draw>) : void{
        child.forEach(c => {
            // タッチ判定できるものcanTouchsに格納する
            if(c instanceof ViewRect){
                this.canTouhcs.push(c);
            }
            this.nodes.push(c);
        });
    }

あとはそれぞれの実装クラスに従って描画処理を走らせるだけです。

/**
     * Canvasをクリアしてから、登録されている描画オブジェクトを全て描画します。<br />
     * 何も登録されていない場合は処理をしません。
     * 
     * @returns 
     */
    public drawNode(): void{
        if(this.nodes.length === 0){
            // TODO message = array is empty
            console.log("empty");
            return;
        }
        Canvas.getInstance().clear();
        this.nodes.forEach(n => n.draw());
    }

描画処理は座標とサイズに合わせて描画を行います。

draw(): void {
        // 利用するパラメータはスタック変数に置いておく
        const point = this.getPoint();
        const size = this.rect.getSize();

        this.canvas.context.fillRect(point.getX(), point.getY(), size.getWidth(), size.getHeight());
    }

タッチイベント

タッチイベントは関数を登録する必要があります。canvasに対してmousedownなどのイベントを登録するのですが、関数を登録する関数を用意しておけば扱いやすいです

/**
     * 
     * 発火イベントに対する関数を登録します
     * 
     * @param func 実行する関数 
     */
    public addDownEvent(func: (prm: MouseEvent | TouchEvent) => void ): void{
        const canvas = Canvas.getInstance().canvas;

        canvas.addEventListener("mousedown", e => func(e), true);
        canvas.addEventListener("touchstart", e => func(e), true);
    }

登録する

controller.addDownEvent(Logic.moveDownRect);
controller.addUpEvent(Logic.moveUpRect);
controller.addMoveEvent(Logic.drawMoveObject);

TypeScriptの型

今回はanyを使わないようにしました。TypeScriptではnullチェックなどが簡単にできないようになっています。

nullの場合があるものはエラーになるからです。

となるとMaybeとかOptionalのようなものが欲しいのですが、その辺はわからなかったので以下のようなものを使いました。

export type MaybeRect = ViewRect | undefined;

もっと良い方法でT型とかできるのでしょうが、ここは要勉強なところですね。

instanceofを使うことで上位クラスまで型を絞ることができるので頼ってしまいました。多分良くないですねこれ。

これも要勉強な箇所です

const viewRect = layer.getRect(point);

if(viewRect instanceof Seat){
   layer.removeChild(viewRect);
}

座標

座席を画面中の好きな位置に配置できると問題が起きます。

座席表作成ソフトとして有名なExcelでは、文字通りセルを利用するため綺麗に並びます。言ったらばGridのようなものですね。

好きな場所に配置できると(234,653)のような場所に配置もできるので、座席を綺麗に並べるのが大変です。

なのでゲーム開発の知見を活かして画面は10pxのグリッド状であるかのように、座席移動できるようにしました。

/**
     * Grid移動変換させます。
     */
    public static toGrid(point : Point) : Point{
        /**
         * (1,1)(2,1)(3,1)
         * (1,2)(2,2)(3,2)
         * (1,3)(2,3)(3,3)
         * 
         * mouseのポジションから座標を取得して
         * 座標に1マス分の長さをかけてあげれば良い。
         * 
         * 例：１マス１６ｐｘの座標で考える場合
         * 
         * マウス座標(340,560) → グリッド座標 割り算して余りを切り捨て
         * １マスぶんでかける
         * 
         * 大きめにとって見た目より操作性を重視します
         * 
         */
        const x = Math.floor(point.getX() / 10);
        const y = Math.floor(point.getY() / 10);

        return new Point(x * 10, y * 10);

    }

カクカクと動きますが綺麗に並べることができます。

const point = Converter.toPoint(e);
const vecPoint = Converter.toGrid(point);

こんな感じでTypeScriptで超絶お洒落な渋谷系ブラウザ座席表が作れました。

TypeScriptでブラウザ版の座席表を作成した