<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Menu</h1>
<ul>
<li><a href="helloworld.html">Hello world</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="yourname.html">Your name</a></li>
<li><a href="playnine.html">Play 9</a></li>
</ul>
</html>
<html>
<head>
<title>Counter</title>
</head>
<body>
<h2>Count</h2>
<!--Knockout area-->
<fieldset>
<legend>Knockout</legend>
<button data-bind="text: count, click: increment"></button>
</fieldset>
<!--React area-->
<fieldset>
<legend>React</legend>
<div id="root"></div>
</fieldset>
<br/><a href="index.html">Back</a>
<!--include knockout-->
<script src="http://knockoutjs.com/downloads/knockout-3.4.1.js"></script>
<!--Include react-->
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!--Custom knockout-->
<script type="text/javascript">
var c = 0;
var viewModel = {
count: ko.observable(c),
increment: function () {
this.count(++c);
}
};
ko.applyBindings(viewModel);
</script>
<!--Custom react-->
<script type="text/babel">
var CountButton = React.createClass({
getInitialState: function () {
return { count: 0 };
},
handleClick: function () {
this.setState({ count: ++this.state.count });
},
render: function () {
return <button onClick={this.handleClick}>{this.state.count}</button>
}
});
ReactDOM.render(<CountButton/>, document.getElementById('root'));
</script>
</body>
</html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
<h2>Hello world</h2>
<!--Knockout area-->
<fieldset>
<legend>Knockout</legend>
<p data-bind="text: message"></p>
</fieldset>
<!--React area-->
<fieldset>
<legend>React</legend>
<div id="root"></div>
</fieldset>
<br/><a href="index.html">Back</a>
<!--Include knockout-->
<script src="http://knockoutjs.com/downloads/knockout-3.4.1.js"></script>
<!--Include react-->
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!--Custom knockout-->
<script type="text/javascript">
var viewModel = {
message: "Hello world!"
};
ko.applyBindings(viewModel);
</script>
<!--Custom react-->
<script type="text/babel">
var Hello = React.createClass({
render: function () {
return <p>Hello world!</p>;
}
});
ReactDOM.render(<Hello/>, document.getElementById('root'));
</script>
</body>
</html>
<html>
<head>
<title>Your name</title>
</head>
<body>
<h2>Your name</h2>
<!--Knockout area-->
<fieldset>
<legend>Knockout</legend>
Your name: <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'"/><br/>
Hi, <span data-bind="text: name"></span>
</fieldset>
<!--React area-->
<fieldset>
<legend>React</legend>
<div id="root"></div>
</fieldset>
<br/><a href="index.html">Back</a>
<!--Include knockout-->
<script src="http://knockoutjs.com/downloads/knockout-3.4.1.js"></script>
<!--Include react-->
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!--Custom knockout-->
<script type="text/javascript">
var viewModel = {
name: ko.observable()
};
ko.applyBindings(viewModel);
</script>
<!--Custom react-->
<script type="text/babel">
var YourName = React.createClass({
getInitialState: function () {
return {name: ""};
},
handleChange: function (e) {
this.setState({name: e.target.value});
},
render: function () {
return <div>
Your name: <input type="text" onChange={this.handleChange} /><br />
Hi, <span>{this.state.name}</span><br/>
</div>;
}
});
ReactDOM.render(<YourName/>, document.getElementById('root'));
</script>
</body>
</html>
<html>
<head>
<title>Play 9</title>
<!-- Bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
#StarsFrame .glyphicon
{
margin: 0.3em;
font-size: 1.75em;
}
#StarsFrame, #AnswersFrame
{
width: 40%;
float: left
}
#ButtonFrame
{
width: 20%;
text-align: center;
float: left;
margin-top: 50px;
}
#StarsFrame .well, #AnswersFrame .well
{
height: 250px;
}
#NumbersFrame .number, #AnswersFrame .well span
{
display: inline-block;
margin: 0.5em;
background-color: #bbb;
width: 30px;
text-align: center;
font-size: 22;
border-radius: 50%;
cursor: pointer;
}
#NumbersFrame .selected-true
{
background-color: #e8e8e8;
color: #ddd;
cursor: not-allowed;
}
#NumbersFrame .used-true
{
background-color: #aaddaa;
color: #99bb99;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<h2>Play 9</h2>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Knockout</div>
<div class="panel-body">
Comming soon
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">React</div>
<div class="panel-body">
<div id="root"></div>
</div>
</div>
</div>
</div>
<br/><a href="index.html" class="btn btn-info">Back</a>
<div id="dadad">sasasa</div>
</div>
<!--Include Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--Include bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--include knockout-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<!--Include react-->
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!--Custom knockout-->
<script type="text/javascript">
var viewModel = {
message: "Hello world!"
};
ko.applyBindings(viewModel);
</script>
<!--Custom react-->
<script type="text/babel">
var possibleCombinationSum = function(arr, n) {
if (arr.indexOf(n) >= 0) { return true; }
if (arr[0] > n) { return false; }
if (arr[arr.length - 1] > n) {
arr.pop();
return possibleCombinationSum(arr, n);
}
var listSize = arr.length, combinationsCount = (1 << listSize)
for (var i = 1; i < combinationsCount ; i++ ) {
var combinationSum = 0;
for (var j=0 ; j < listSize ; j++) {
if (i & (1 << j)) { combinationSum += arr[j]; }
}
if (n === combinationSum) { return true; }
}
return false;
};
var StarsFrame = React.createClass({
render: function () {
var numberOfStars = this.props.starsNumber;
var stars = [];
for (var i = 0; i < numberOfStars; i++) {
stars.push(
<span className="glyphicon glyphicon-star"></span>
);
}
return (
<div id="StarsFrame">
<div className="well">
{stars}
</div>
</div>
);
}
});
var ButtonFrame = React.createClass({
render: function () {
var disabled;
var button;
switch(this.props.corect) {
case true:
button = (
<button className="btn btn-lg btn-success" onClick={this.props.acceptAnswer}>
<span className="glyphicon glyphicon-ok"></span>
</button>
);
break;
case false:
button = (
<button className="btn btn-lg btn-danger">
<span className="glyphicon glyphicon-remove"></span>
</button>
);
break
default:
disabled = (this.props.selectedNumbers.length === 0);
button = <button className="btn btn-info btn-lg" disabled={disabled} onClick={this.props.checkAnswer}>=</button>;
}
return (
<div id="ButtonFrame">
{button} <br /><br />
<button className="btn btn-xs btn-warning" onClick={this.props.redraw} disabled={this.props.redrawsRemaining === 0}>
<span className="glyphicon glyphicon-refresh"></span>
{this.props.redrawsRemaining}
</button>
</div>
);
}
});
var AnswersFrame = React.createClass({
render: function () {
var unselectNumber = this.props.unselectNumber;
var selectedNumbers = this.props.selectedNumbers.map(function (i) {
return (
<span onClick={unselectNumber.bind(null, i)}>{i}</span>
);
});
return (
<div id="AnswersFrame">
<div className="well">
{selectedNumbers}
</div>
</div>
);
}
});
var NumbersFrame = React.createClass({
render: function () {
var numbers = [];
var selectedNumbers = this.props.selectedNumbers;
var usedNumbers = this.props.usedNumbers;
var selectNumber = this.props.selectNumber;
for (var i = 1; i <= 9; i++) {
var className = "number selected-" + (selectedNumbers.indexOf(i) >= 0);
className += " used-" + (usedNumbers.indexOf(i) >= 0)
numbers.push(
<span className={className} onClick={selectNumber.bind(null, i)}>{i}</span>
);
}
return (
<div id="NumbersFrame">
<div className="well">
{numbers}
</div>
</div>
);
}
});
var DoneFrame = React.createClass({
render: function () {
return (
<div className="well text-center">
{this.props.doneMessage}<br /><br />
<button className="btn btn-info" onClick={this.props.resetGame}>Play again!</button>
</div>
);
}
});
var Game = React.createClass({
getInitialState: function () {
return {
selectedNumbers: [],
starsNumber: this.randomNumber(),
corect: null,
usedNumbers: [],
redrawsRemaining: 5,
doneMessage: ""
};
},
randomNumber: function () {
return Math.floor(Math.random() * 9) + 1;
},
selectNumber: function (nr) {
if (this.state.selectedNumbers.indexOf(nr) < 0) {
this.setState({
selectedNumbers: this.state.selectedNumbers.concat(nr),
corect: null
});
}
},
unselectNumber: function (nr) {
var selectedNumbers = this.state.selectedNumbers;
var i = selectedNumbers.indexOf(nr);
selectedNumbers.splice(i, 1);
this.setState({
selectedNumbers: selectedNumbers,
corect: null
});
},
selectedNumbersSum: function () {
var s = 0;
var selectedNumbers = this.state.selectedNumbers;
for (var i = 0; i < selectedNumbers.length; i++) {
s += selectedNumbers[i];
}
return s;
},
checkAnswer: function () {
var corect = (this.state.starsNumber === this.selectedNumbersSum());
this.setState({ corect: corect});
},
acceptAnswer: function () {
var usedNumbers = this.state.usedNumbers.concat(this.state.selectedNumbers);
this.setState({
corect: null,
usedNumbers: usedNumbers,
selectedNumbers: [],
starsNumber: this.randomNumber()
}, function () {
this.updateDoneMessage();
});
},
redraw: function () {
if (this.state.redrawsRemaining > 0) {
this.setState({
corect: null,
starsNumber: this.randomNumber(),
selectedNumbers: [],
redrawsRemaining: this.state.redrawsRemaining - 1
}, function () {
this.updateDoneMessage();
});
}
},
updateDoneMessage: function () {
if (this.state.usedNumbers === 9) {
this.setState({doneMessage: "You win! Nice"});
return;
}
if (this.state.redrawsRemaining === 0 && !this.possibleSolutions()) {
this.setState({doneMessage: "Game over!"});
}
},
possibleSolutions: function () {
var numberOfStars = this.state.starsNumber;
var possibleNumbers = [];
var usedNumbers = this.state.usedNumbers;
for (var i = 1; i <= 9; i++) {
if (usedNumbers.indexOf(i) < 0)
possibleNumbers.push(i);
}
return possibleCombinationSum(possibleNumbers, numberOfStars)
},
playAgain: function () {
this.replaceState(this.getInitialState());
},
render: function () {
var selectedNumbers = this.state.selectedNumbers;
var usedNumbers = this.state.usedNumbers;
var starsNumber = this.state.starsNumber;
var doneMessage = this.state.doneMessage;
var Bottom;
if (doneMessage) {
Bottom = <DoneFrame doneMessage={this.state.doneMessage} resetGame={this.playAgain()}/>
}
else {
Bottom = (
<NumbersFrame selectedNumbers={selectedNumbers}
selectNumber={this.selectNumber}
usedNumbers={usedNumbers}/>
);
}
return (
<div>
<div className="clearfix">
<StarsFrame starsNumber={starsNumber}/>
<ButtonFrame
selectedNumbers={selectedNumbers}
corect={this.state.corect}
checkAnswer={this.checkAnswer}
acceptAnswer={this.acceptAnswer}
redrawsRemaining={this.state.redrawsRemaining}
redraw= {this.redraw}
/>
<AnswersFrame selectedNumbers={selectedNumbers} unselectNumber={this.unselectNumber} />
</div>
{Bottom}
</div>
);
}
});
ReactDOM.render(<Game/>, document.getElementById('root'));
</script>
</body>
</html>