Skip to content

Commit

Permalink
Restructed react element rendering to follow format
Browse files Browse the repository at this point in the history
  • Loading branch information
@amupitan
amupitan committed Feb 11, 2017
1 parent 4f75866 commit 21fcebb
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 54 deletions.
26 changes: 15 additions & 11 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ class Square extends React.Component{

class Board extends React.Component{
renderSquare(i, classId){
let customClassName = `square col-sm-4 box-${classId}`;
let customClassName = `square col-xs-4 box-${classId + 1}`;//could be sm
let sq = <Square sqNum={i} customClass={customClassName}/>;
squareLocation.push(sq);
puzzle.push(i);
Expand All @@ -95,22 +95,20 @@ class Board extends React.Component{
}
render(){
return(
<div>
<h1> Cy Sliding Puzzle</h1>
<div className="status">{status}</div>
<div className="board-row">
<div className="col-xs-8 col-xs-offset-2 col-sm-offset-3 col-md-offset-4">
<div className="row">
{this.renderSquare(0, 0)}
{this.renderSquare(1, 1)}
{this.renderSquare(2, 2)}
</div>

<div className="board-row">
<div className="row">
{this.renderSquare(3, 3)}
{this.renderSquare(4, 4)}
{this.renderSquare(5, 5)}
</div>

<div className="board-row">
<div className="row">
{this.renderSquare(6, 6)}
{this.renderSquare(7, 7)}
{this.renderSquare(8, 8)}
Expand All @@ -125,15 +123,21 @@ class Board extends React.Component{
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<div className="container">
<h1> Cy Sliding Puzzle</h1>
<div className="status">{status}</div>
<div className="row">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
<div className="numMoves">Moves: {moves}</div>
<div className="numScore">Score: {score}</div>
<div className ="col-sm-8 col-sm-offset-2" >
<div className = "row">
<p>Moves: {moves}</p>
<p>Score: {score}</p>
</div>
</div>
</div>

</div>
Expand Down
81 changes: 38 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,54 @@
<!DOCTYPE html>
<html>
<!-- jQuery, jQuery.ui -->
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<head>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
<script src="assets/js/main.js" type="text/babel" ></script>



<!--Custom Styles -->
<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
<title>Cy Sliding Puzzle</title>
</head>
<body>
<h1> Cy Sliding Puzzle</h1> <br />
<div id = "container">
<!--<script src="assets/js/main.js" type="text/babel" ></script>-->

<div class = "row">
<div id="board" class ="col-xs-8 col-xs-offset-2 col-sm-offset-3 col-md-offset-4" >
<div class = "row">
<div class = "col-xs-4 box-1 square">Square 1</div>
<div class = "col-xs-4 box-2 square">Square 2</div>
<div class = "col-xs-4 box-3 square">Square 3</div>
</div>
<div class = "row">
<div class = "col-xs-4 box-4 square">Square 4</div>
<div class = "col-xs-4 box-5 square">Square 5</div>
<div class = "col-xs-4 box-6 square">Square 6</div>
</div>
<div class = "row">
<div class = "col-xs-4 box-7 square">Square 7</div>
<div class = "col-xs-4 box-8 square">Square 8</div>
<div class = "col-xs-4 box-9 square">Square 9</div>
</div>
</div>
</head>
<body>
<div id="react-container" class = "container">
<!--<div class = "row">-->
<!-- <div id="board" class ="col-xs-8 col-xs-offset-2 col-sm-offset-3 col-md-offset-4" >-->
<!-- <div class = "row">-->
<!-- <div class = "col-xs-4 box-1 square">Square 1</div>-->
<!-- <div class = "col-xs-4 box-2 square">Square 2</div>-->
<!-- <div class = "col-xs-4 box-3 square">Square 3</div>-->
<!-- </div>-->
<!-- <div class = "row">-->
<!-- <div class = "col-xs-4 box-4 square">Square 4</div>-->
<!-- <div class = "col-xs-4 box-5 square">Square 5</div>-->
<!-- <div class = "col-xs-4 box-6 square">Square 6</div>-->
<!-- </div>-->
<!-- <div class = "row">-->
<!-- <div class = "col-xs-4 box-7 square">Square 7</div>-->
<!-- <div class = "col-xs-4 box-8 square">Square 8</div>-->
<!-- <div class = "col-xs-4 box-9 square">Square 9</div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
</div>
</div>

<br />

<div class ="col-sm-8 col-sm-offset-2" >
<div class = "row">
<h4>Moves: </h4>
</div>
</div>
<br />
<!--<div class ="col-sm-8 col-sm-offset-2" >-->
<!-- <div class = "row">-->
<!-- <h4>Moves: </h4>-->
<!-- </div>-->
<!--</div>-->

</body>
<!--No current use for jquery or bootsrap.js-->
<!--<script src="https://code.jquery.com/jquery.min.js"></script>-->
<!--<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>-->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

<script src="assets/js/main.js" type="text/babel" ></script>
</body>
</html>

0 comments on commit 21fcebb

Please sign in to comment.