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

Implement Simon Says module in React

Browse Source
This commit is contained in:
Daniel Sinn
2019-11-26 10:29:37 -05:00
parent 3c9ea427d8
commit 8b7bb7d5e7
7 changed files with 208 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-44
View File
@@ -13,50 +13,6 @@
<h1>Keep Talking and Nobody Explodes</h1>
<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" checked />
<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 class="simonRow">
<div class="simonBlue">&nbsp;</div><div class="simonYellow">&nbsp;</div>
</div>
<div class="simonRow">
<div class="simonRed">&nbsp;</div><div class="simonGreen">&nbsp;</div>
</div>
<div class="arrow" id="arrowRB"></div>
<div class="arrow" id="arrowBR"></div>
<div class="arrow" id="arrowBY"></div>
<div class="arrow" id="arrowYB"></div>
<div class="arrow" id="arrowYG"></div>
<div class="arrow" id="arrowGY"></div>
<div class="arrow" id="arrowGR"></div>
<div class="arrow" id="arrowRG"></div>
<div class="arrow" id="arrowRY"></div>
<div class="arrow" id="arrowYR"></div>
<div class="arrow" id="arrowBG"></div>
<div class="arrow" id="arrowGB"></div>
</div>
</section>
<section id="sectionWof">
<h2>Who's on First</h2>
ktane.js
-40
View File
@@ -39,46 +39,6 @@ $('section').each(function () {
id && $('#navList').append($('<li></li>').append($a));
});
(function () {
/**
* Simon
*/
var $checkbox = $('#simonVowel'),
$strikeButtons = $('#sectionSimon input[name="simonStrikes"]'),
$arrows = [],
mappings = [ // (hasVowel, strikes) -> list of visible arrows by ID
// No vowel
[
['RB', 'BY', 'YR'],
['GY', 'YG'],
['RY', 'BG', 'GB', 'YR']
],
// Vowel
[
['RB', 'BR', 'GY', 'YG'],
['RY', 'BG', 'GB', 'YR'],
['RG', 'BR', 'GY', 'YB']
]
];
$('#simonBoard').find('.arrow').each(function (i, arrow) {
$arrows[arrow.id.replace(/^.*(?=..$)/, '')] = $(arrow);
});
$('#sectionSimon input').on('change', function () {
var hasVowel = +$checkbox.prop('checked'),
strikes = $strikeButtons.filter(':checked').val();
for (var id in $arrows) {
$arrows[id].removeClass('active');
}
$.each(mappings[hasVowel][strikes], function (i, id) {
$arrows[id].addClass('active');
});
}).first().trigger('change');
})();
(function () {
/**
* Who's on First
src/App.css
-121
View File
@@ -108,127 +108,6 @@ nav {
padding: 0.1em 0.5em;
}
#simonInputs {
float: left;
margin-right: 5em;
}
.collapsed #simonBoard {
display: none;
}
#simonBoard {
display: inline-block;
padding-bottom: 40px; /* Compensate for height increase as a result of rotation */
position: relative;
transform: rotate(45deg);
}
#simonBoard > div > div {
border: 2px solid black;
display: inline-block;
height: 64px;
width: 64px;
}
#simonBoard > .simonRow:first-child > div {
border-top-width: 4px;
}
#simonBoard > .simonRow:first-child + div > div {
border-bottom-width: 4px;
}
#simonBoard > .simonRow > div:first-child {
border-left-width: 4px;
}
#simonBoard > .simonRow > div:last-child {
border-right-width: 4px;
}
.simonRed {
background: radial-gradient(#fb9a9a, #fc7373, red);
}
.simonYellow {
background: radial-gradient(#fbfb9a, #fcfc73, yellow);
}
.simonBlue {
background: radial-gradient(#9a9afb, #7373fc, blue);
}
.simonGreen {
background: radial-gradient(#98c998, #72b772, green);
}
.arrow {
background-color: black;
height: 10px;
width: 50px;
opacity: 0;
position: absolute;
}
.arrow::after {
content: '';
border-top: 10px solid transparent;
border-left: 20px solid black;
border-bottom: 10px solid transparent;
height: 0;
width: 0;
margin-left: 50px;
position: absolute;
top: -5px;
}
#arrowRB {
top: 70px;
left: 10px;
transform: rotate(-90deg);
}
#arrowBR {
top: 60px;
left: 10px;
transform: rotate(90deg);
}
#arrowBY {
top: 30px;
left: 45px;
}
#arrowYB {
top: 30px;
left: 45px;
transform: rotate(180deg);
}
#arrowYG {
top: 60px;
left: 80px;
transform: rotate(90deg);
}
#arrowGY {
top: 70px;
left: 80px;
transform: rotate(-90deg);
}
#arrowGR {
top: 100px;
left: 45px;
transform: rotate(180deg);
}
#arrowRG {
top: 100px;
left: 45px;
}
#arrowRY {
top: 66px;
left: 44px;
transform: rotate(-45deg);
}
#arrowYR {
top: 66px;
left: 44px;
transform: rotate(135deg);
}
#arrowBG {
top: 64px;
left: 44px;
transform: rotate(45deg);
}
#arrowGB {
top: 64px;
left: 44px;
transform: rotate(-135deg);
}
#sectionWof {
white-space: nowrap;
}
src/App.js
+2
View File
@@ -2,6 +2,7 @@ import React from 'react';
import './App.css';
import ButtonModule from "./components/ButtonModule";
import KeypadsModule from "./components/KeypadsModule";
import SimonSaysModule from "./components/SimonSaysModule";
import WiresModule from "./components/WiresModule";
function App() {
@@ -14,6 +15,7 @@ function App() {
<WiresModule id="sectionWires" />
<ButtonModule id="sectionButton" />
<KeypadsModule id="sectionKeypads" />
<SimonSaysModule id="sectionSimon" />
</div>
);
}
src/components/KeypadsModule.js
-4
View File
@@ -114,10 +114,6 @@ export default class KeypadsModule extends KtaneModule {
)
}
resetState() {
this.setState(this.getInitialState());
}
toggleHighlight(event) {
this.keyColumnMap = this.keyColumnMap || this.computeKeyColumnMap();
src/components/SimonSaysModule.js
+87
View File
@@ -0,0 +1,87 @@
import KtaneModule from "./KtaneModule";
import React from "react";
import "../css/SimonSaysModule.css";
export default class SimonSaysModule extends KtaneModule {
constructor(props) {
super(props);
this.arrowsWithoutVowel = [
["RB", "BY", "YR"],
["GY", "YG"],
["RY", "BG", "GB", "YR"],
];
this.arrowsWithVowel = [
["RB", "BR", "GY", "YG"],
["RY", "BG", "GB", "YR"],
["RG", "BR", "GY", "YB"],
];
this.setStrikes = this.setStrikes.bind(this);
this.toggleVowel = this.toggleVowel.bind(this);
}
computeArrowsShown(state) {
return (state.hasVowel ? this.arrowsWithVowel : this.arrowsWithoutVowel)[this.state.strikes];
}
getInitialState() {
return {
hasVowel: false,
strikes: 0
};
}
getTitle() {
return "Simon Says";
}
mainRender() {
return (
<>
<div id="simonInputs">
<label>
<input type="checkbox" onChange={this.toggleVowel} /> Vowel
</label>
<ul>
{
[...Array(3).keys()].map(i => (
<li key={i}>
<label>
<input type="radio" checked={this.state.strikes === i} onChange={this.setStrikes} value={i} />
{i} strikes
</label>
</li>
))
}
</ul>
</div>
<div id="simonBoard">
<div className="simonRow">
<div className="simonBlue">&nbsp;</div>
<div className="simonYellow">&nbsp;</div>
</div>
<div className="simonRow">
<div className="simonRed">&nbsp;</div>
<div className="simonGreen">&nbsp;</div>
</div>
{
this.computeArrowsShown(this.state).map(arrow => (
<div className="arrow" id={`arrow${arrow}`} key={arrow} />
))
}
</div>
</>
)
}
setStrikes(event) {
this.setState({strikes: parseInt(event.currentTarget.value, 10)})
}
toggleVowel(event) {
this.setState(state => ({hasVowel: !state.hasVowel}));
}
}
src/css/SimonSaysModule.css
+119
View File
@@ -0,0 +1,119 @@
#simonInputs {
float: left;
margin-right: 5em;
}
.collapsed #simonBoard {
display: none;
}
#simonBoard {
display: inline-block;
padding-bottom: 40px; /* Compensate for height increase as a result of rotation */
position: relative;
transform: rotate(45deg);
}
#simonBoard > div > div {
border: 2px solid black;
display: inline-block;
height: 64px;
width: 64px;
}
#simonBoard > .simonRow:first-child > div {
border-top-width: 4px;
}
#simonBoard > .simonRow:first-child + div > div {
border-bottom-width: 4px;
}
#simonBoard > .simonRow > div:first-child {
border-left-width: 4px;
}
#simonBoard > .simonRow > div:last-child {
border-right-width: 4px;
}
.simonRed {
background: radial-gradient(#fb9a9a, #fc7373, red);
}
.simonYellow {
background: radial-gradient(#fbfb9a, #fcfc73, yellow);
}
.simonBlue {
background: radial-gradient(#9a9afb, #7373fc, blue);
}
.simonGreen {
background: radial-gradient(#98c998, #72b772, green);
}
.arrow {
background-color: black;
height: 10px;
width: 50px;
position: absolute;
}
.arrow::after {
content: '';
border-top: 10px solid transparent;
border-left: 20px solid black;
border-bottom: 10px solid transparent;
height: 0;
width: 0;
margin-left: 50px;
position: absolute;
top: -5px;
}
#arrowRB {
top: 70px;
left: 10px;
transform: rotate(-90deg);
}
#arrowBR {
top: 60px;
left: 10px;
transform: rotate(90deg);
}
#arrowBY {
top: 30px;
left: 45px;
}
#arrowYB {
top: 30px;
left: 45px;
transform: rotate(180deg);
}
#arrowYG {
top: 60px;
left: 80px;
transform: rotate(90deg);
}
#arrowGY {
top: 70px;
left: 80px;
transform: rotate(-90deg);
}
#arrowGR {
top: 100px;
left: 45px;
transform: rotate(180deg);
}
#arrowRG {
top: 100px;
left: 45px;
}
#arrowRY {
top: 66px;
left: 44px;
transform: rotate(-45deg);
}
#arrowYR {
top: 66px;
left: 44px;
transform: rotate(135deg);
}
#arrowBG {
top: 64px;
left: 44px;
transform: rotate(45deg);
}
#arrowGB {
top: 64px;
left: 44px;
transform: rotate(-135deg);
}