webpackJsonp([0],{

/***/ 270:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__StartScreenOptions__ = __webpack_require__(271);
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "StartScreenOptionsBase", function() { return __WEBPACK_IMPORTED_MODULE_0__StartScreenOptions__["b"]; });
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "StartScreenOptions", function() { return __WEBPACK_IMPORTED_MODULE_0__StartScreenOptions__["a"]; });



/***/ }),

/***/ 271:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return StartScreenOptionsBase; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return StartScreenOptions; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_react_redux__ = __webpack_require__(5);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_actions__ = __webpack_require__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_components_LeaderSelect__ = __webpack_require__(272);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__StartScreenOptions_scss__ = __webpack_require__(280);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__StartScreenOptions_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5__StartScreenOptions_scss__);






var StartScreenOptionsBase = /** @class */ (function (_super) {
    __WEBPACK_IMPORTED_MODULE_0_tslib__["c" /* __extends */](StartScreenOptionsBase, _super);
    function StartScreenOptionsBase(props) {
        return _super.call(this, props) || this;
    }
    StartScreenOptionsBase.prototype.render = function () {
        var _this = this;
        return (__WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("div", { className: 'start-screen-options' },
            __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("div", { className: 'option-wrapper' },
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("span", { className: 'option-name' }, "Leader"),
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"](__WEBPACK_IMPORTED_MODULE_4_components_LeaderSelect__["a" /* LeaderSelect */], { options: [
                        'abraham-lincoln',
                        'george-washington',
                        'mao-zedong'
                    ], onSelect: function (leaderName) { return _this.props.selectLeader(leaderName); } })),
            __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("div", { className: 'option-wrapper' },
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("span", { className: 'option-name' }, "Name"),
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("input", { type: 'text' })),
            __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("div", { className: 'option-wrapper' },
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("span", { className: 'option-name' }, "Civilization Name"),
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("input", { type: 'text' }))));
    };
    return StartScreenOptionsBase;
}(__WEBPACK_IMPORTED_MODULE_1_react__["Component"]));

var StartScreenOptions = Object(__WEBPACK_IMPORTED_MODULE_2_react_redux__["b" /* connect */])(null, {
    selectLeader: __WEBPACK_IMPORTED_MODULE_3_actions__["y" /* selectLeader */]
})(StartScreenOptionsBase);


/***/ }),

/***/ 272:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__LeaderSelect__ = __webpack_require__(273);
/* harmony namespace reexport (by used) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__LeaderSelect__["a"]; });



/***/ }),

/***/ 273:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LeaderSelect; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_components_LeaderIcon__ = __webpack_require__(274);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__LeaderSelect_scss__ = __webpack_require__(278);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__LeaderSelect_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__LeaderSelect_scss__);




var LeaderSelect = /** @class */ (function (_super) {
    __WEBPACK_IMPORTED_MODULE_0_tslib__["c" /* __extends */](LeaderSelect, _super);
    function LeaderSelect(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isOpen: false,
            selectedItem: _this.props.options[0]
        };
        return _this;
    }
    LeaderSelect.prototype.toTitleCase = function (str) {
        return str.replace(/-/g, ' ').replace(/[^\s]+/g, function (word) { return word.replace(/^./, function (first) { return first.toUpperCase(); }); });
    };
    LeaderSelect.prototype.openSelect = function (leader, _) {
        this.setState({
            isOpen: this.state.selectedItem === leader ? true : false,
            selectedItem: leader
        });
        this.props.onSelect(this.toTitleCase(this.state.selectedItem));
    };
    LeaderSelect.prototype.renderOptions = function () {
        var _this = this;
        return this.props.options.map(function (o, idx) {
            var isSelected = _this.state.selectedItem === o;
            var isHidden = _this.state.isOpen ? '' : isSelected ? '' : 'hidden';
            return (__WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("div", { onClick: _this.openSelect.bind(_this, o, idx), key: o, className: "leader-option " + isHidden },
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"](__WEBPACK_IMPORTED_MODULE_2_components_LeaderIcon__["a" /* LeaderIcon */], { style: { marginLeft: '.5rem' }, height: '2rem', width: '2rem', icon: o }),
                __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("span", { style: { marginLeft: '2rem' }, className: 'leader-option-name' }, _this.toTitleCase(o)),
                idx === 0 ?
                    __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("span", { style: { color: '#333', marginLeft: 'auto' } }, "\u25BC")
                    :
                        __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("span", { style: { marginLeft: 'auto' } })));
        });
    };
    LeaderSelect.prototype.render = function () {
        return (__WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("div", { className: "leader-select " + (this.state.isOpen ? 'open' : '') }, this.renderOptions()));
    };
    return LeaderSelect;
}(__WEBPACK_IMPORTED_MODULE_1_react__["Component"]));



/***/ }),

/***/ 274:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__LeaderIcon__ = __webpack_require__(275);
/* harmony namespace reexport (by used) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__LeaderIcon__["a"]; });



/***/ }),

/***/ 275:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return LeaderIcon; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__LeaderIcon_scss__ = __webpack_require__(276);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__LeaderIcon_scss___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__LeaderIcon_scss__);



var LeaderIcon = /** @class */ (function (_super) {
    __WEBPACK_IMPORTED_MODULE_0_tslib__["c" /* __extends */](LeaderIcon, _super);
    function LeaderIcon(props) {
        return _super.call(this, props) || this;
    }
    LeaderIcon.prototype.render = function () {
        var icon = this.props.icon;
        return (__WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("div", { style: __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __assign */]({}, this.props.style, { height: this.props.height, width: this.props.width }), className: "leader-icon leader-" + icon },
            __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("img", { src: "./images/" + icon + ".svg" })));
    };
    return LeaderIcon;
}(__WEBPACK_IMPORTED_MODULE_1_react__["PureComponent"]));



/***/ }),

/***/ 276:
/***/ (function(module, exports, __webpack_require__) {

// style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = __webpack_require__(277);
if(typeof content === 'string') content = [[module.i, content, '']];
// Prepare cssTransformation
var transform;

var options = {"hmr":true}
options.transform = transform
// add the styles to the DOM
var update = __webpack_require__(4)(content, options);
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
	// When the styles change, update the <style> tags
	if(!content.locals) {
		module.hot.accept("!!../../../node_modules/css-loader/index.js??ref--1-1!../../../node_modules/postcss-loader/lib/index.js??ref--1-2!../../../node_modules/sass-loader/lib/loader.js!./LeaderIcon.scss", function() {
			var newContent = require("!!../../../node_modules/css-loader/index.js??ref--1-1!../../../node_modules/postcss-loader/lib/index.js??ref--1-2!../../../node_modules/sass-loader/lib/loader.js!./LeaderIcon.scss");
			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
			update(newContent);
		});
	}
	// When the module is disposed, remove the <style> tags
	module.hot.dispose(function() { update(); });
}

/***/ }),

/***/ 277:
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(3)(false);
// imports


// module
exports.push([module.i, ".leader-icon {\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  background: lightcoral;\n  border-radius: 50%;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center; }\n  .leader-icon img {\n    height: 100%; }\n", ""]);

// exports


/***/ }),

/***/ 278:
/***/ (function(module, exports, __webpack_require__) {

// style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = __webpack_require__(279);
if(typeof content === 'string') content = [[module.i, content, '']];
// Prepare cssTransformation
var transform;

var options = {"hmr":true}
options.transform = transform
// add the styles to the DOM
var update = __webpack_require__(4)(content, options);
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
	// When the styles change, update the <style> tags
	if(!content.locals) {
		module.hot.accept("!!../../../node_modules/css-loader/index.js??ref--1-1!../../../node_modules/postcss-loader/lib/index.js??ref--1-2!../../../node_modules/sass-loader/lib/loader.js!./LeaderSelect.scss", function() {
			var newContent = require("!!../../../node_modules/css-loader/index.js??ref--1-1!../../../node_modules/postcss-loader/lib/index.js??ref--1-2!../../../node_modules/sass-loader/lib/loader.js!./LeaderSelect.scss");
			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
			update(newContent);
		});
	}
	// When the module is disposed, remove the <style> tags
	module.hot.dispose(function() { update(); });
}

/***/ }),

/***/ 279:
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(3)(false);
// imports


// module
exports.push([module.i, ".leader-select {\n  background: white;\n  border: 1px solid #ccc;\n  border-radius: .25rem;\n  cursor: pointer;\n  height: 3rem;\n  padding: .25rem;\n  width: 100%; }\n  .leader-select.open {\n    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);\n            box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); }\n    .leader-select.open .leader-option {\n      border: 1px solid #ccc;\n      border-bottom: 1px solid transparent; }\n      .leader-select.open .leader-option:not(:first-of-type) {\n        margin-left: -4px;\n        width: calc(100% + 8px); }\n      .leader-select.open .leader-option:first-of-type {\n        border: 1px solid transparent;\n        border-bottom: 1px solid transparent; }\n      .leader-select.open .leader-option:last-of-type {\n        border-bottom: 1px solid #ccc; }\n      .leader-select.open .leader-option:nth-of-type(2) {\n        margin-top: 4px; }\n\n.leader-option {\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  background: white;\n  border: 1px solid transparent;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  height: 100%;\n  position: relative;\n  z-index: 1; }\n", ""]);

// exports


/***/ }),

/***/ 280:
/***/ (function(module, exports, __webpack_require__) {

// style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = __webpack_require__(281);
if(typeof content === 'string') content = [[module.i, content, '']];
// Prepare cssTransformation
var transform;

var options = {"hmr":true}
options.transform = transform
// add the styles to the DOM
var update = __webpack_require__(4)(content, options);
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
	// When the styles change, update the <style> tags
	if(!content.locals) {
		module.hot.accept("!!../../../node_modules/css-loader/index.js??ref--1-1!../../../node_modules/postcss-loader/lib/index.js??ref--1-2!../../../node_modules/sass-loader/lib/loader.js!./StartScreenOptions.scss", function() {
			var newContent = require("!!../../../node_modules/css-loader/index.js??ref--1-1!../../../node_modules/postcss-loader/lib/index.js??ref--1-2!../../../node_modules/sass-loader/lib/loader.js!./StartScreenOptions.scss");
			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
			update(newContent);
		});
	}
	// When the module is disposed, remove the <style> tags
	module.hot.dispose(function() { update(); });
}

/***/ }),

/***/ 281:
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(3)(false);
// imports


// module
exports.push([module.i, ".start-screen-options {\n  border: 1px solid #ccc;\n  border-radius: .25rem;\n  background: #eee;\n  margin: 1rem;\n  padding: 1rem;\n  width: 60%; }\n\n.option-wrapper {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  margin: .5rem; }\n\n.option-name {\n  font-size: 1.15rem;\n  margin: 0 .5rem;\n  text-align: left;\n  width: 14rem; }\n\ninput {\n  border: 1px solid #ccc;\n  border-radius: .25rem;\n  padding: .25rem; }\n", ""]);

// exports


/***/ })

});
//# sourceMappingURL=0.bundle.js.map