@tdurtschi/bug/dist/src/dev-ui/components/App.js

Bug is a simulation that models a weevil walking around in an HTML canvas.

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var stats_1 = require("../../core/util/stats");
var Debugger_1 = require("./Debugger");
var BugForm_1 = require("./forms/BugForm");
var bug_1 = __importDefault(require("../../core/entities/bug/bug"));
var react_1 = require("react");
var PlantForm_1 = require("./forms/PlantForm");
var canvas_helpers_1 = require("../../core/canvas-ui/canvas-helpers");
var entity_updater_1 = require("../../core/entity-updater");
var CurrentForm;
(function (CurrentForm) {
    CurrentForm[CurrentForm["NONE"] = 0] = "NONE";
    CurrentForm[CurrentForm["BUG"] = 1] = "BUG";
    CurrentForm[CurrentForm["PLANT"] = 2] = "PLANT";
})(CurrentForm || (CurrentForm = {}));
var App = function (props) {
    var _a = react_1.useState(CurrentForm.NONE), currentForm = _a[0], setCurrentForm = _a[1];
    var _b = react_1.useState(false), isPaused = _b[0], setIsPaused = _b[1];
    var _c = react_1.useState(100), gameSpeed = _c[0], setGameSpeed = _c[1];
    var bugUiRef = React.createRef();
    react_1.useEffect(function () {
        props.game.start();
        document.addEventListener("keydown", handleKeyDown);
    }, []);
    react_1.useEffect(function () {
        props.game.setSpeed(gameSpeed);
    }, [gameSpeed]);
    var handleKeyDown = function (e) {
        switch (e.key) {
            case "p":
                pause();
                console.log(gameSpeed);
                break;
            case "b":
                addBug();
                break;
            case "t":
                addPlant();
                break;
        }
    };
    var pause = function () {
        props.game.togglePause();
        setIsPaused(!isPaused);
    };
    var addPlant = function (initialState) {
        var game = props.game;
        game.addPlant(initialState);
    };
    var addBug = function (initialState) {
        var game = props.game;
        var size = stats_1.randInt(3, 5);
        var speed = Math.ceil(10 / size) / 2;
        game.addBug(initialState !== null && initialState !== void 0 ? initialState : { size: size, speed: speed });
    };
    var targetEntity = function (clientX, clientY) {
        var game = props.game;
        var canvasElement = bugUiRef.current;
        var localX = clientX - canvasElement.offsetLeft;
        var localY = canvas_helpers_1.fixY(canvasElement.clientHeight, clientY - canvasElement.offsetTop);
        var clickedEntities = [];
        game.getEntities().forEach(function (e) {
            if (e instanceof bug_1.default) {
                if (entity_updater_1.isPointInsideEntity(e, localX, localY)) {
                    console.log("you clicked on: ", e);
                    clickedEntities.push(e);
                }
            }
        });
        return clickedEntities.length > 0 ? clickedEntities[0] : undefined;
    };
    return (React.createElement("div", null,
        React.createElement("div", { id: "bug-background" }),
        React.createElement("div", { id: "ground" }),
        React.createElement("div", { ref: bugUiRef, id: "bug-ui", style: { height: props.height, width: props.width }, onClick: function (event) {
                targetEntity(event.clientX, event.clientY);
            } }),
        React.createElement("div", { id: "bug-controls" },
            React.createElement("ul", { id: "bug-tabs" },
                React.createElement("li", { id: "add-bug", onClick: function () { return setCurrentForm(CurrentForm.BUG); } }, "Add Bug"),
                React.createElement("li", { id: "add-plant", onClick: function () { return setCurrentForm(CurrentForm.PLANT); } }, "Add Plant"),
                React.createElement("li", { id: "pause-button", className: props.game.isPaused ? "paused" : "", onClick: pause }, "PAUSE"),
                React.createElement("li", null,
                    React.createElement("label", { htmlFor: "gameSpeed" },
                        "Speed (%): ",
                        gameSpeed)),
                React.createElement("li", null,
                    React.createElement("button", { type: "button", onClick: function () { setGameSpeed(gameSpeed + 5); } }, "+"),
                    React.createElement("button", { type: "button", onClick: function () { gameSpeed > 5 && setGameSpeed(gameSpeed - 5); } }, "-"))),
            currentForm == CurrentForm.BUG && React.createElement(BugForm_1.BugForm, { addBug: addBug }),
            currentForm == CurrentForm.PLANT && React.createElement(PlantForm_1.PlantForm, { addPlant: addPlant })),
        React.createElement(Debugger_1.Debugger, { game: props.game })));
};
exports.default = App;
//# sourceMappingURL=App.js.map