<html>
<head>
<title>Quenya Verb Conjugator</title>
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="static/tengwarjs/tengwar.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/tengwarjs/tengwar-parmaite.css">
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var VerbViewer = React.createClass({
render: function() {
return (
<div className="verbViewer">
<div className="latin">{this.props.conjugated}</div>
<p className="tengwar parmaite" data-mode="classical" data-tengwar={this.props.conjugated}></p>
</div>
);
}
});
var InputForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var stem = React.findDOMNode(this.refs.stem).value.trim();
var tense = React.findDOMNode(this.refs.tense).value.trim();
var subject = React.findDOMNode(this.refs.subject).value.trim();
var object = React.findDOMNode(this.refs.object).value.trim();
if (!stem) {
return;
}
this.props.onVerbSubmit({
stem: stem,
tense: tense,
subject: subject,
object: object
});
return;
},
render: function() {
return (
<form className="inputForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Enter a stem!" ref="stem" />
<select ref="tense">
<option disabled selected>Select a tense</option>
<option value="aorist">Aorist</option>
<option value="perfect">Perfect</option>
<option value="past">Past</option>
<option value="present">Present</option>
<option value="future">Future</option>
</select>
<select ref="subject">
<option disabled selected>Select a subject</option>
<option value="none">None</option>
<option value="I">I</option>
<option value="you">you</option>
<option value="he/she">he/she</option>
<option value="it">it</option>
<option value="we inclusive">we inclusive</option>
<option value="we exclusive">we exclusive</option>
<option value="you plural">you plural</option>
<option value="they">they</option>
</select>
<select ref="object">
<option disabled selected>Select an object</option>
<option value="none">None</option>
<option value="me">me</option>
<option value="you">you</option>
<option value="him/her">him/her</option>
<option value="it">it</option>
<option value="us inclusive">us inclusive</option>
<option value="us exclusive">us exclusive</option>
<option value="you plural">you plural</option>
<option value="they">they</option>
</select>
<input type="submit" value="Conjugate!" />
</form>
);
}
});
var VerbConjugator = React.createClass({
getInitialState: function() {
return ({
conjugated: "Results appear here"
});
},
handleVerbSubmit: function(verb) {
$.ajax({
url: '/api/verb',
dataType: 'json',
type: 'POST',
data: JSON.stringify(verb),
success: function(data) {
this.setState({conjugated: data.conjugated_verb});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="verbConjugator">
<h1>Quenya Verb Conjugator</h1>
<VerbViewer conjugated={this.state.conjugated} />
<InputForm onVerbSubmit={this.handleVerbSubmit} />
</div>
);
}
});
React.render(
<VerbConjugator />,
document.getElementById('content')
);
</script>
</body>
</html>