diff --git a/builder/css/styles.css b/builder/css/styles.css index 38a8677..617d016 100644 --- a/builder/css/styles.css +++ b/builder/css/styles.css @@ -2,6 +2,19 @@ body { background-color: #FCD347; /* Melting Sun */ } +h1 { + font-family: 'Bangers', cursive; + color: #FFFFFF; + text-shadow: + -2px -2px 0 #000, + 2px -2px 0 #000, + -2px 2px 0 #000, + 2px 2px 0 #000; + font-size: 2.8em; + margin-top: 10px; + margin-bottom: 10px; +} + h2 { font-family: 'Bangers', cursive; color: #F25B21; @@ -13,6 +26,14 @@ h2 { font-size: 2.3em; } +h3 { + font-family: 'Oswald', non-serif; + color: #000000; + font-size: 2.3em; + margin-top: 10px; + margin-bottom: 5px; +} + .global-container { width: 90%; max-width: 900px; @@ -37,6 +58,20 @@ h2 { color: #F25B21; display: inline; font-family: 'Bangers', cursive; + font-size: 1.8em; +} +.menu-box.clickable:hover, .menu-box.clickable:active, .menu-box.clickable:focus { + color: #a93f17; + text-decoration: underline; + cursor: pointer; +} +.menu-box a { + color: #F25B21; + text-decoration: none; +} +.menu-box a:hover, .menu-box a:active, .menu-box a:focus { + color: #a93f17; + text-decoration: underline; } /********************/ @@ -513,6 +548,44 @@ h2 { width: 100%; } +.input-code { + margin-top: 10px; +} + +.input-code label { + font-family: 'Oswald', sans-serif; + margin-left: 12px; + font-size: 16px; +} + +.input-with-button { + display: flex; +} + +.input-code .btncopy { + padding-left: 10px; + padding-right: 10px; +} + +.btncopy { + cursor: pointer; + background-color: #FCD347; + color: #000000; + text-align: center; + border-style: solid; + border-width: 1px; + margin: 1px; + border-color: #F25B21; + font-family: 'Oswald', sans-serif; +} + +.btncopy:hover { + background: #b09331; + border-width: 2px; + margin: 0px; +} + + /* Button-Icon to go back one step */ .step-back { @@ -521,3 +594,61 @@ h2 { height: 32px; cursor: pointer; } + +/****************/ +/** Enter code **/ +/****************/ +.enter-code { + display: inline-flex; + width: 80%; +} +.enter-code .team-code { + width: auto; + flex-grow: 5; + margin: 5px; +} +.enter-code .button { + flex-grow: 1; + margin: 5px; + cursor: pointer; + background-color: #BEB6A3; + color: #F25B21; + text-align: center; + font-weight: bold; + -webkit-border-radius: 8px; + border-radius: 8px; + border-style: solid; + border-width: 2px; + border-color: #F25B21; + font-family: 'Bangers', cursive; + font-size: 1.6em; + text-shadow: + -1px -1px 0 #000, + 1px -1px 0 #000, + -1px 1px 0 #000, + 1px 1px 0 #000; +} + +.enter-code .button:hover { + background: #7EBDA4; /* Kids-sized Fedora */ + border-width: 4px; + margin: 3px; +} + +/*************/ +/* About Box */ +/*************/ +.about-text { + font-family: 'Oswald', sans-serif; +} + +.about-text a { + font-weight: bold; + color: #a93f17; + text-decoration: none; +} + +.about-text a:hover, .about-text a:active, .about-text a:focus { + color: #F25B21; + text-decoration: underline; +} diff --git a/builder/index.html b/builder/index.html index ca685b2..a673bf1 100644 --- a/builder/index.html +++ b/builder/index.html @@ -10,13 +10,17 @@
-
Citizen Assemble !
+
+

Citizen Assemble !

+

A Team-Builder for Pulp City

+
-
Home
-
FAQ
+
Home
+
Pulp City
+
About
@@ -91,8 +95,19 @@

Recruit your Supremes

Unique Team Code
-
- +
+ +
+ +
Copy
+
+
+
+ +
+ +
Copy
+
@@ -136,6 +151,38 @@

Recruit your Supremes

+ +
+
+
+
About "Citizen Assemble !"
+

A Team Builder

+
Citizen Assemble ! is a Team Builder for the Miniatures Games Pulp City. + This tool will help you choose your Supremes and share your team with the World. + The rules of Recruitment are all present, and the list of characters is updated regularly.
+
The pictures of the Supremes are from the Pulp City official website.
+

Open-Source Project

+
Citizen Assemble ! is an Open-Source project, hosted on GitHub. + It currently is on version 2.0. Feel free to join in to enhance the software ! + You can also post issues if you encouter bugs, or if a functionality is missing.
+
Citizen Assemble ! uses the following open-source project :
+ +
Citizen Assemble ! also makes use of the following fonts, provided by Google Fonts :
+ +
+
+ + + diff --git a/builder/js/main.js b/builder/js/main.js index 80aa555..ae84a16 100644 --- a/builder/js/main.js +++ b/builder/js/main.js @@ -3,7 +3,8 @@ require.config({ 'jQuery': 'vendor/jquery-3.0.0.min', 'knockout': 'vendor/knockout-3.4.0', 'lodash': 'vendor/lodash', - 'tinycolor': 'vendor/tinycolor' + 'tinycolor': 'vendor/tinycolor', + 'clipboard': 'vendor/clipboard.min' }, shim: { 'jQuery': { @@ -15,13 +16,14 @@ require.config({ require(['knockout', 'components/registration', 'viewmodels/teamBuilderVM', + 'clipboard', 'domReady!' - ], function(ko, components, TeamBuilderVM){ + ], function(ko, components, TeamBuilderVM, Clipboard){ components.register(); var viewModel = TeamBuilderVM.newTeamBuilderVM();; - + new Clipboard('.btncopy'); ko.applyBindings(viewModel); }); diff --git a/builder/js/scripts/url.js b/builder/js/scripts/url.js new file mode 100644 index 0000000..644aad1 --- /dev/null +++ b/builder/js/scripts/url.js @@ -0,0 +1,45 @@ +define([], function() +{ + + /* Source : http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript */ + function getParameterByName(name, url) { + if (!url) { + url = window.location.href; + } + name = name.replace(/[\[\]]/g, "\\$&"); + var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), + results = regex.exec(url); + if (!results) return null; + if (!results[2]) return ''; + return decodeURIComponent(results[2].replace(/\+/g, " ")); + } + + /* Source : http://stackoverflow.com/questions/13063838/add-change-parameter-of-url-and-redirect-to-the-new-url */ + function setGetParameter(paramName, paramValue) + { + var url = window.location.href; + var hash = location.hash; + url = url.replace(hash, ''); + if (url.indexOf(paramName + "=") >= 0) + { + var prefix = url.substring(0, url.indexOf(paramName)); + var suffix = url.substring(url.indexOf(paramName)); + suffix = suffix.substring(suffix.indexOf("=") + 1); + suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : ""; + url = prefix + paramName + "=" + paramValue + suffix; + } + else + { + if (url.indexOf("?") < 0) + url += "?" + paramName + "=" + paramValue; + else + url += "&" + paramName + "=" + paramValue; + } + return url + hash; + } + +return { + getTeamCodeFromUrl: function() { return getParameterByName('teamcode'); }, + getUrlWithTeamCode: function(teamCode) { return setGetParameter('teamcode', teamCode); } + } +}); diff --git a/builder/js/vendor/clipboard.min.js b/builder/js/vendor/clipboard.min.js new file mode 100644 index 0000000..1d7c5d5 --- /dev/null +++ b/builder/js/vendor/clipboard.min.js @@ -0,0 +1,7 @@ +/*! + * clipboard.js v1.5.16 + * https://zenorocha.github.io/clipboard.js + * + * Licensed MIT © Zeno Rocha + */ +!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Clipboard=e()}}(function(){var e,t,n;return function e(t,n,i){function o(a,c){if(!n[a]){if(!t[a]){var l="function"==typeof require&&require;if(!c&&l)return l(a,!0);if(r)return r(a,!0);var s=new Error("Cannot find module '"+a+"'");throw s.code="MODULE_NOT_FOUND",s}var u=n[a]={exports:{}};t[a][0].call(u.exports,function(e){var n=t[a][1][e];return o(n?n:e)},u,u.exports,e,t,n,i)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function e(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function e(){var t=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[n?"right":"left"]="-9999px";var i=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.addEventListener("focus",window.scrollTo(0,i)),this.fakeElem.style.top=i+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,o.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function e(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function e(){this.selectedText=(0,o.default)(this.target),this.copyText()}},{key:"copyText",value:function e(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function e(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function e(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function e(){this.removeFake()}},{key:"action",set:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function e(){return this._action}},{key:"target",set:function e(t){if(void 0!==t){if(!t||"object"!==("undefined"==typeof t?"undefined":r(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function e(){return this._target}}]),e}();e.exports=c})},{select:5}],8:[function(t,n,i){!function(o,r){if("function"==typeof e&&e.amd)e(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if("undefined"!=typeof i)r(n,t("./clipboard-action"),t("tiny-emitter"),t("good-listener"));else{var a={exports:{}};r(a,o.clipboardAction,o.tinyEmitter,o.goodListener),o.clipboard=a.exports}}(this,function(e,t,n,i){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t){var n="data-clipboard-"+e;if(t.hasAttribute(n))return t.getAttribute(n)}var s=o(t),u=o(n),f=o(i),d=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText}},{key:"listenClick",value:function e(t){var n=this;this.listener=(0,f.default)(t,"click",function(e){return n.onClick(e)})}},{key:"onClick",value:function e(t){var n=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new s.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})}},{key:"defaultAction",value:function e(t){return l("action",t)}},{key:"defaultTarget",value:function e(t){var n=l("target",t);if(n)return document.querySelector(n)}},{key:"defaultText",value:function e(t){return l("text",t)}},{key:"destroy",value:function e(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}]),t}(u.default);e.exports=h})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)}); \ No newline at end of file diff --git a/builder/js/viewmodels/teamBuilderVM.js b/builder/js/viewmodels/teamBuilderVM.js index fbf60d0..91dcad5 100644 --- a/builder/js/viewmodels/teamBuilderVM.js +++ b/builder/js/viewmodels/teamBuilderVM.js @@ -5,7 +5,8 @@ define(['knockout', 'viewmodels/supremeVM', 'viewmodels/teamVM', 'viewmodels/supremeFilter', - 'scripts/teamCode'], + 'scripts/teamCode', + 'scripts/url'], function(ko, TinyColor, _, @@ -13,7 +14,8 @@ function(ko, SupremeVM, TeamVM, SupremeFilter, - TeamCode) { + TeamCode, + UrlHelper) { function teamBuilderVM() { @@ -28,6 +30,7 @@ function teamBuilderVM() self.supremeFilter = ko.observable(null); self.goBackIsVisible = ko.observable(false); self.teamCodeInput = ko.observable(''); + self.isAboutBoxVisible = ko.observable(false); /**********************************/ /* Accessors & Computed Variables */ @@ -120,11 +123,16 @@ function teamBuilderVM() } } + /* ------- About Box -------- */ + self.showAboutBox = function() { self.isAboutBoxVisible(true); } + self.hideAboutBox = function() { self.isAboutBoxVisible(false); } + /*************************/ /* Object Initialization */ /*************************/ self.affiliations(AffiliationVM.getAllStartingAffiliations(self.selectAffiliation)); self.supremeFilter(SupremeFilter.newFilter()); + self.teamCodeInput(UrlHelper.getTeamCodeFromUrl()); } return { diff --git a/builder/js/viewmodels/teamVM.js b/builder/js/viewmodels/teamVM.js index 732ef02..63adaef 100644 --- a/builder/js/viewmodels/teamVM.js +++ b/builder/js/viewmodels/teamVM.js @@ -1,12 +1,14 @@ define(['knockout', 'lodash', 'viewmodels/supremeVM', - 'scripts/teamCode' + 'scripts/teamCode', + 'scripts/url' ], function(ko, _, SupremeVM, - TeamCode + TeamCode, + UrlHelper ) { function teamVM(affiliation) @@ -132,6 +134,11 @@ function teamVM(affiliation) return ''; }); + self.teamCodeUrl = ko.pureComputed(function() { + var url = UrlHelper.getUrlWithTeamCode(self.teamCode()); + return url; + }) + /*************/ /* Functions */ @@ -157,11 +164,21 @@ function teamVM(affiliation) // For example, Moonchild authorizing Loup-Garou II to join her // or the Honorary Member leaving the Team when the Leader also leaves // TODO: warning the User of these effects ? + + // Removing the Honorary Member if the Supreme Granting the Power is removed + if ((self.supremeGrantingHonorary() != null) + && (self.supremeGrantingHonorary().jsonData.id == supremeVM.jsonData.id) + && (self.honoraryMember() != null)) + { + self.dismissSupreme(self.honoraryMember()); + self.isHon + } + // Supremes available only if other are selected var shownSupremes = supremeVM.getShownSupremesID(); if ((shownSupremes != null) && (shownSupremes.length > 0)) { _.forEach(self.rosterSupremes(), function(supreme) { if (_.find(shownSupremes, function(o) { return o == supreme.jsonData.id; })) { - self.dismissSupreme(supreme); + self.dismissHonoraryMember(supreme); } }); }