React MikeyBoard

A Nick Arcade Clone

by Karl Olson

HTML

<div id="app"></div>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

#app {
  font-family: Arial, Helvetica;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

.done {
  font-weight: 700;
  color: rgba(0, 0, 0, 1);
  background: rgba(238, 174, 202, 0.75);
  background: radial-gradient(circle, rgba(238, 174, 202, 0.75) 0%, rgba(148, 187, 233, 0.5) 100%);
  transition: 2s;
}

.available {
  font-weight: 700;
  color: rgba(0, 0, 0, 0);
}

.done,
.available {
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: none;
  border-bottom: none;
  width: 98px;
  height: 98px;
  display: inline-block;
  padding: 0px;
  vertical-align: top;
  text-align: center;
}

.text {
  vertical-align: top;
  margin: 30% 0;
  display: block;
}

.title {
  font-size: 20px;
  font-weight: 700px;
}

.show-list {
  width: 600px;
  height: 300px;
}

.map {
  border-right: 2px solid black;
  border-bottom: 2px...

React

class MikeyBoard extends React.Component {
  constructor(props) {
    super(props);
    this.showUpdate = this.showUpdate.bind(this);
    this.state = {
    	spaces: [],
      shows: `Nick Arcade 
Sonic The Hedgehog 
Daniel Songer
Danger 5
Folder of Trash
Look Around You
Space Ghost: C2C
Heroes Of Cosplay
10 Minute Live Draw`,
      view: 'game'
     };
  }
  
  
  randomShow (shows) {
    return shows[Math.floor(Math.random()*(shows.length))];
  }
  
  revealShow (target) {
  	console.log(target);
  	let updatedSpace = this.state.spaces.map(function(e, index) {
    	return { 
      	available: index === target ? !e.available : e.available,
        show: e.show
    	};
    });
  	this.setState({ spaces: updatedSpace});
  }
  
  initSpaces(spaceCount) {
  	let updatedSpaces = [];
    let shows = this.state.shows.split('\n');
    for (var i=0; i< spaceCount; i++){
    	updatedSpaces.push({show: this.randomShow(shows), available: true});
    }
    this.setState({spaces: updatedSpaces});
  }
  
  resetSpaces() {
    this.setState({spaces: []});
  }
  
  setView(view) {
   this.setState({view: view});
  }
  
  
  showUpdate (event) {
  	console.log(event.target.value);
    this.setState({shows: event.target.value});
  }
  
  renderGame () {
  	if (this.state.spaces.length === 0) {
    	this.initSpaces(18);
    }
  	return (
    	<div>
        <br />
        <div className="map">
          {this.state.spaces.map((space, index) => (
            <div key={index} value={index} className={space.available ? "available" : "done"} onClick={()=>this.revealShow(index)}>
              <div className="text">{space.available ? "" : space.show}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  
  renderShows () {
  	if (this.state.spaces.length > 0) {
 			this.resetSpaces();
    }
  	return (
    	<div>
        <textarea className='show-list' value={this.state.shows} onChange={this.showUpdate}></textarea>
      </div>
    );
  }
  
  render() {
   ...