Home Reference Source Repository

app/ui/DungeonPicker.js

import LightweightDungeonSerializer from '../dungeons/LightweightDungeonSerializer.js';

var dialogPolyfill = require('../../../../../node_modules/dialog-polyfill/dialog-polyfill.js');
require('../../../../../node_modules/dialog-polyfill/dialog-polyfill.css');

const promiseHandlers = {};

const angular = require('angular');

angular.module('dungeon-picker', [])
.component('dungeonInfo', {
    bindings: {
        data: '='
    },
    controller: function() {
    },
    templateUrl: 'dungeon-info.html'
})
.controller('dungeon-picker', ['$scope', 'promiseHandlers', function($scope, promiseHandlers) {
    const { resolve, reject } = promiseHandlers;

    fetch(new Request('/dungeons', {
        headers: new Headers({
            method: 'GET',
            'Content-Type': 'application/json'
        })
    })).then(r=>r.json()).then(function(dungeons) {
        $scope.dungeons = dungeons;
        $scope.dungeonJSON = JSON.stringify(dungeons, null, 4);
        $scope.$apply();
    })

    $scope.setSelectedDungeon = function(index) {
        $scope.selectedIndex = index;
    };

    $scope.submit = function() {
        const index = $scope.selectedIndex;
        const struct = $scope.dungeons[index].data;
        const dungeon = LightweightDungeonSerializer.deserialize(struct);
        resolve(dungeon);
    };
}]).constant('promiseHandlers', promiseHandlers).run(['$templateCache', function($templateCache) {
    $templateCache.put('dungeon-info.html',
        `<div class="dungeon-info">
            Dimensions: {{$ctrl.data.width}} x {{$ctrl.data.height}}
        </div>`);
    $templateCache.put('dungeon-picker.html',
        `<form method="dialog" class="gitrecht" ng-controller="dungeon-picker" ng-submit="submit()">
            <h2>Select a Dungeon</h2>
            <button ng-repeat="dungeon in dungeons" ng-click="setSelectedDungeon($index)">
                <dungeon-info data="dungeon"></dungeon-info>
            </button>
        </form>`);
}]);

export default class DungeonPicker {
    constructor() {
        this._promise = new Promise((resolve, reject) => {
            var $dialog = $(`
                <dialog class='dungeon-picker'>
                    <ng-include src="'dungeon-picker.html'"></ng-include>
                </dialog>`).appendTo('body');

            const dialog = $dialog[0];

            if(!dialog.open) {
                dialogPolyfill.registerDialog(dialog);
            }

            promiseHandlers.resolve = resolve;
            promiseHandlers.reject = reject;

            angular.bootstrap(dialog, ['dungeon-picker']);

            dialog.showModal();
        });
    }

    getDungeon() {
        return this._promise;
    }
}