Skip to content

Commit

Permalink
Honorary Member & Team Code
Browse files Browse the repository at this point in the history
Team Code implemented with Copy and Get by URL
Honorary Member fixed (Leader that leaves removes the HM)
Added an About Box
Better style and Menu Bar
  • Loading branch information
Gulix committed Jan 12, 2017
1 parent 54069ab commit e821ffb
Show file tree
Hide file tree
Showing 7 changed files with 270 additions and 13 deletions.
131 changes: 131 additions & 0 deletions builder/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}

/********************/
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
57 changes: 52 additions & 5 deletions builder/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,17 @@
</head>
<body>
<div class="page-header">
<div class="global-container">Citizen Assemble !</div>
<div class="global-container">
<h1>Citizen Assemble !</h1>
<h3>A Team-Builder for Pulp City</h3>
</div>
</div>

<div class="menu-bar">
<div class="global-container">
<div class="menu-box">Home</div>
<div class="menu-box">FAQ</div>
<div class="menu-box"><a href="#">Home</a></div>
<div class="menu-box"><a href="http://www.pulp-city.com" target="_blank">Pulp City</a></div>
<div class="menu-box clickable" data-bind="click: showAboutBox">About</div>
</div>
</div>

Expand Down Expand Up @@ -91,8 +95,19 @@ <h2>Recruit your Supremes</h2>
<div class="modal-close" data-bind="click: hideCode"></div>
<div class="modal-content">
<div class="modal-label">Unique Team Code</div>
<div>
<input type="text" readonly class="team-code" data-bind="value: teamCode"></input>
<div class="input-code">
<label>Code</label>
<div class="input-with-button">
<input type="text" readonly class="team-code" id="team-code" data-bind="value: teamCode"></input>
<div class="btncopy" data-clipboard-target="#team-code">Copy</div>
</div>
</div>
<div class="input-code">
<label>Link to Team</label>
<div class="input-with-button">
<input type="text" readonly class="team-code" id="team-code-url" data-bind="value: teamCodeUrl"></input>
<div class="btncopy" data-clipboard-target="#team-code-url">Copy</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -136,6 +151,38 @@ <h2>Recruit your Supremes</h2>
<!-- /ko -->
<!-- /ko -->

<!-- ko if: isAboutBoxVisible -->
<div class="modal-box">
<div class="modal-close" data-bind="click: hideAboutBox"></div>
<div class="modal-content modal-content-large">
<div class="modal-label">About "Citizen Assemble !"</div>
<h3>A Team Builder</h3>
<div class="about-text"><em>Citizen Assemble !</em> is a Team Builder for the Miniatures Games <em>Pulp City</em>.
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.</div>
<div class="about-text">The pictures of the Supremes are from the <a href="http://www.pulp-city.com" target="_blank">Pulp City official website</a>.</div>
<h3>Open-Source Project</h3>
<div class="about-text"><em>Citizen Assemble !</em> is an Open-Source project, hosted on <a href="http://www.github.com/gulix/citizen-assemble" target="_blank">GitHub</a>.
It currently is on <em>version 2.0</em>. Feel free to join in to enhance the software !
You can also <a href="http://www.github.com/gulix/citizen-assemble/issues/new" target="_blank">post issues</a> if you encouter bugs, or if a functionality is missing.</div>
<div class="about-text"><em>Citizen Assemble !</em> uses the following open-source project :</div>
<ul class="about-text">
<li><a href="https://jquery.com/" targer="_blank">Jquery</a> (Javascript Framework)</li>
<li><a href="http://knockoutjs.com/" targer="_blank">Knockout</a> (Data management)</li>
<li><a href="https://lodash.com/" targer="_blank">Lodash</a> (Javascript Helpers)</li>
<li><a href="http://requirejs.org/" targer="_blank">RequireJS</a> (File management)</li>
<li><a href="https://github.com/bgrins/TinyColor" targer="_blank">TinyColor</a> (Color Helpers)</li>
</ul>
<div class="about-text"><em>Citizen Assemble !</em> also makes use of the following fonts, provided by Google Fonts :</div>
<ul class="about-text">
<li><a href="https://fonts.google.com/specimen/Oswald" targer="_blank">Oswald</a></li>
<li><a href="https://fonts.google.com/specimen/Bangers" targer="_blank">Bangers</a></li>
</ul>
</div>
</div>
</div>
<!-- /ko -->

<script src="js/vendor/require.min.js" data-main="js/main.js"></script>
</body>
</html>
8 changes: 5 additions & 3 deletions builder/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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': {
Expand All @@ -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);

});
45 changes: 45 additions & 0 deletions builder/js/scripts/url.js
Original file line number Diff line number Diff line change
@@ -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); }
}
});
7 changes: 7 additions & 0 deletions builder/js/vendor/clipboard.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit e821ffb

Please sign in to comment.