lars/ktane-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial template for the Simon module

Browse Source 
* Make colour classes more reusable
This commit is contained in:
Daniel Sinn
2015-11-29 16:14:01 -05:00
parent bd261df32f
commit 302cff7f89
3 changed files with 98 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+53 -20
View File
@@ -13,11 +13,11 @@
<h2>Wires</h2> <h2>Wires</h2>
<ul id="wireOptions"> <ul id="wireOptions">
<li><button class="buttonRed" data-colour="red"></button></li> <li><button class="button red" data-colour="red"></button></li>
<li><button class="buttonYellow" data-colour="yellow"></button></li> <li><button class="button yellow" data-colour="yellow"></button></li>
<li><button class="buttonBlue" data-colour="blue"></button></li> <li><button class="button blue" data-colour="blue"></button></li>
<li><button class="buttonWhite" data-colour="white"></button></li> <li><button class="button white" data-colour="white"></button></li>
<li><button class="buttonBlack" data-colour="black"></button></li> <li><button class="button black" data-colour="black"></button></li>
</ul> </ul>
<ul id="wireList"></ul> <ul id="wireList"></ul>
@@ -27,10 +27,10 @@
<h2>Button</h2> <h2>Button</h2>
<div> <div>
Colour: Colour:
<input type="radio" name="buttonColour" value="blue" id="buttonColourBlue" checked /> <label for="buttonColourBlue" class="buttonBlue">Blue</label> <input type="radio" name="buttonColour" value="blue" id="buttonColourBlue" checked /> <label for="buttonColourBlue" class="button blue">Blue</label>
<input type="radio" name="buttonColour" value="white" id="buttonColourWhite" /> <label for="buttonColourWhite" class="buttonWhite">White</label> <input type="radio" name="buttonColour" value="white" id="buttonColourWhite" /> <label for="buttonColourWhite" class="button white">White</label>
<input type="radio" name="buttonColour" value="yellow" id="buttonColourYellow" /> <label for="buttonColourYellow" class="buttonYellow">Yellow</label> <input type="radio" name="buttonColour" value="yellow" id="buttonColourYellow" /> <label for="buttonColourYellow" class="button yellow">Yellow</label>
<input type="radio" name="buttonColour" value="red" id="buttonColourRed" /> <label for="buttonColourRed" class="buttonRed">Red</label> <input type="radio" name="buttonColour" value="red" id="buttonColourRed" /> <label for="buttonColourRed" class="button red">Red</label>
</div> </div>
<div> <div>
Text: Text:
@@ -43,13 +43,46 @@
<div> <div>
If holding the button and the strip colour is If holding the button and the strip colour is
<ul> <ul>
<li><span class="buttonBlue">Blue</span>: release when timer has a <strong>4</strong> in any position.</li> <li><span class="button blue">Blue</span>: release when timer has a <strong>4</strong> in any position.</li>
<li><span class="buttonYellow">Yellow</span>: release when timer has a <strong>5</strong> in any position.</li> <li><span class="button yellow">Yellow</span>: release when timer has a <strong>5</strong> in any position.</li>
<li>Other: release when timer has a <strong>1</strong> in any position.</li> <li>Other: release when timer has a <strong>1</strong> in any position.</li>
</ul> </ul>
</div> </div>
</section> </section>
<section id="sectionSimon">
<h2>Simon Says</h2>
<div id="simonInputs">
<input type="checkbox" id="simonVowel" /> <label for="simonVowel">Vowel</label>
<ul>
<li>
<input type="radio" name="simonStrikes" value="0" id="simonStrikes0" />
<label for="simonStrikes0">0 strikes</label>
</li>
<li>
<input type="radio" name="simonStrikes" value="1" id="simonStrikes1" />
<label for="simonStrikes1">1 strike</label>
</li>
<li>
<input type="radio" name="simonStrikes" value="2" id="simonStrikes2" />
<label for="simonStrikes2">2 strikes</label>
</li>
</ul>
</div>
<div id="simonBoard">
<div>
<div class="blue">&nbsp;</div><div class="yellow">&nbsp;</div>
</div>
<div>
<div class="red">&nbsp;</div><div class="green">&nbsp;</div>
</div>
</div>
</section>
<section id="sectionDisplay"> <section id="sectionDisplay">
<h2>Display</h2> <h2>Display</h2>
@@ -264,15 +297,15 @@
<section id="sectionSequence"> <section id="sectionSequence">
<h2>Wire Sequence</h2> <h2>Wire Sequence</h2>
<ul id="sequenceOptions"> <ul id="sequenceOptions">
<li><button class="buttonRed" data-colour="red" data-letter="A">A</button></li> <li><button class="button red" data-colour="red" data-letter="A">A</button></li>
<li><button class="buttonBlue" data-colour="blue" data-letter="A">A</button></li> <li><button class="button blue" data-colour="blue" data-letter="A">A</button></li>
<li><button class="buttonBlack" data-colour="black" data-letter="A">A</button></li> <li><button class="button black" data-colour="black" data-letter="A">A</button></li>
<li><button class="buttonRed" data-colour="red" data-letter="B">B</button></li> <li><button class="button red" data-colour="red" data-letter="B">B</button></li>
<li><button class="buttonBlue" data-colour="blue" data-letter="B">B</button></li> <li><button class="button blue" data-colour="blue" data-letter="B">B</button></li>
<li><button class="buttonBlack" data-colour="black" data-letter="B">B</button></li> <li><button class="button black" data-colour="black" data-letter="B">B</button></li>
<li><button class="buttonRed" data-colour="red" data-letter="C">C</button></li> <li><button class="button red" data-colour="red" data-letter="C">C</button></li>
<li><button class="buttonBlue" data-colour="blue" data-letter="C">C</button></li> <li><button class="button blue" data-colour="blue" data-letter="C">C</button></li>
<li><button class="buttonBlack" data-colour="black" data-letter="C">C</button></li> <li><button class="button black" data-colour="black" data-letter="C">C</button></li>
</ul> </ul>
<ul id="sequenceInstruction"></ul> <ul id="sequenceInstruction"></ul>
</section> </section>
ktane.css
+43 -7
View File
@@ -22,29 +22,37 @@ button {
border-width: 1px; border-width: 1px;
} }
.buttonRed, .buttonYellow, .buttonBlue, .buttonWhite, .buttonBlack { .button {
color: black;
padding: 0.2em; padding: 0.2em;
} }
.buttonRed { .red {
background-color: red; background-color: red;
color: white; color: white;
} }
.buttonYellow { .yellow {
background-color: yellow; background-color: yellow;
color: black;
} }
.buttonBlue { .blue {
background-color: blue; background-color: blue;
color: white; color: white;
} }
.buttonWhite { .green {
background-color: green;
color: white;
}
.white {
background-color: white; background-color: white;
border-color: black; border-color: black;
color: black;
} }
.buttonBlack { .black {
background-color: black; background-color: black;
color: white; color: white;
} }
.button.white {
border: 1px solid black;
}
.active { .active {
opacity: 1; opacity: 1;
@@ -108,6 +116,34 @@ h2 {
border-width: 1px; border-width: 1px;
} }
#simonInputs {
float: left;
margin-right: 5em;
}
#simonBoard {
display: inline-block;
padding-bottom: 40px; /* Compensate for height increase as a result of rotation */
transform: rotate(45deg);
}
#simonBoard > div > div {
border: 2px solid black;
display: inline-block;
height: 64px;
width: 64px;
}
#simonBoard > div:first-child > div {
border-top-width: 4px;
}
#simonBoard > div:last-child > div {
border-bottom-width: 4px;
}
#simonBoard > div > div:first-child {
border-left-width: 4px;
}
#simonBoard > div > div:last-child {
border-right-width: 4px;
}
#sectionDisplay { #sectionDisplay {
white-space: nowrap; white-space: nowrap;
} }
ktane.js
+2 -2
View File
@@ -350,8 +350,8 @@ $('.jsResetSection').on('click', function () {
$('#sequenceOptions button').on('click', function () { $('#sequenceOptions button').on('click', function () {
var colour = this.getAttribute('data-colour'), var colour = this.getAttribute('data-colour'),
letter = this.getAttribute('data-letter'), letter = this.getAttribute('data-letter'),
$li = $('<li><button class="button' + colour.charAt(0).toUpperCase() + colour.substring(1) $li = $('<li><button class="button ' + colour + '" data-colour="' + colour + '" data-letter="' + letter
+ '" data-colour="' + colour + '" data-letter="' + letter + '">' + letter + '</button></li>'); + '">' + letter + '</button></li>');
if (typeof occurrences[colour][count[colour]] !== 'undefined') { if (typeof occurrences[colour][count[colour]] !== 'undefined') {
$li.append(occurrences[colour][count[colour]].indexOf(letter) === -1 ? 'Ignore' : 'Cut'); $li.append(occurrences[colour][count[colour]].indexOf(letter) === -1 ? 'Ignore' : 'Cut');