Das Ein-Feature Framework

git clone <<Repository-Url>> <<Projekt-Pfad>>

yarn install

yarn run start

yarn run tsc

yarn run release

• Models, die die Logik des Programms modelieren
• Views, die den Programmzustand visualisieren
• Controller, die die Interaktionen zwischen Models und Views kontrollieren

export interface ModelCollection extends ModelCollectionBase {
    game: GameModel,
    stars: ModelTable<ModelCollection, StarModel>,
}

export function create_models(): ModelCollection {
    const collection: ModelCollection = {} as ModelCollection;
    return Object.assign(collection, {
        game: new GameModel(collection),
        stars: new ModelTable(collection, StarModel),
    });
}

export class StarModel extends Model<ModelCollection> {
    public position: Vector2 = new Vector2(0, 0);
    public z: number = 0;
    public color: RgbColor = new RgbColor(255, 255, 255);
    public size: number = 0;

    public update(delta_seconds: number) {
        ...
    }
}

export class GameModel extends Model<ModelCollection> {
    public update(delta_seconds: number) {
        this.models.stars.for_each((star) => {
            star.z += delta_seconds;
            if (star.z > 100) star.z = 0;
        });
    }
}

const small_stars = this.models.stars.where('size', 1);

export interface PhysicsAdaptable {
    position: Vector2;
    z: number;
    size: number;
}

export class PhysicsModelAdapter {
    protected constructor(public target: PhysicsAdaptable) {
    }

    public update(delta_seconds: number) {
        this.target.z += delta_seconds * this.target.size;
        if (this.target.z > 100) this.target.z = 0;
    }

    /**
     * Static Functions
     */
    private static instance?: PhysicsModelAdapter;

    public static for(target: PhysicsAdaptable): PhysicsModelAdapter {
        if (!PhysicsModelAdapter.instance) {
            PhysicsModelAdapter.instance = new PhysicsModelAdapter(target);
        } else {
            PhysicsModelAdapter.instance.target = target;
        }
        return PhysicsModelAdapter.instance;
    }
}

this.models.stars.for_each((star) => {
    PhysicsModelAdapter.for(star).update(delta_seconds);
});

interface ViewStarAttr {
    position: Vector2I;
    z: number;
    size: number;
    color: RgbColor;
}

this.views.main.stars.set(this.models.stars.all());

export class MainView extends CanvasView<ViewCollection> {
    public bg_color = new ChainProperty<this, RgbColor>(this, tools.commons.Colors.BLACK);
    public fg_color = new ChainProperty<this, RgbColor>(this, tools.commons.Colors.WHITE);
    public stars = new ChainProperty<this, Array<ViewStarAttr>>(this, []);

    public draw(): void {
        this.reset_canvas_state();
        this.stars.get().forEach((star) => {
            const real_position = new Vector2(star.position).mul(33 / (star.z )).add({x: 400, y: 300});
            const size = star.size * 100 / star.z;
            this.context.strokeStyle = star.color.to_hex();
            this.context.fillStyle = star.color.to_hex();
            this.context.fillRect(real_position.x - size / 2, real_position.y - size / 2, size, size);
        });
    }

    protected reset_canvas_state() {
        super.reset_canvas_state();
        this.context.fillStyle = this.bg_color.get().to_hex();
        this.context.fillRect(0, 0, 800, 600);
        this.context.imageSmoothingEnabled = false;
    }
}

export class GameController extends BaseController {

    public new_game(): ControllerRouteResponse {
        for (let i = 0; i < 50; ++i) {
            let star = this.models.stars.insert_new();
            const intensity = Math.random() * 100 + 155;
            star.color = new RgbColor(
                Math.max(intensity + 50 * Math.random(), 255),
                Math.max(intensity + 50 * Math.random(), 255),
                Math.max(intensity + 50 * Math.random(), 255),
            );
            star.z = Math.random() * 100;
            star.position.set({
                x: Math.random() * 400 * 2 - 400,
                y: Math.random() * 300 * 2 - 300,
            });
        }
        const response: ControllerRouteResponseType = {
            view: this.views.main,
            controller: this.controllers.for_event.game_controller,
        };
        return response;
    }
}

export class GameEventController extends BaseController implements EventControllerInterface {

    public update(delta_seconds: number): ControllerRouteResponse {
        this.models.game.update(delta_seconds);
        this.views.main.stars.set(this.models.stars.all());
        return null;
    }

}