diff --git a/src/js/level/index.js b/src/js/level/index.js index 134aa3c5..e06cfa8e 100644 --- a/src/js/level/index.js +++ b/src/js/level/index.js @@ -6,6 +6,7 @@ var Main = require('../app'); var intl = require('../intl'); var log = require('../log'); +var React = require('react'); var Errors = require('../util/errors'); var Sandbox = require('../sandbox/').Sandbox; var GlobalStateActions = require('../actions/GlobalStateActions'); @@ -20,7 +21,7 @@ var MultiView = require('../views/multiView').MultiView; var CanvasTerminalHolder = require('../views').CanvasTerminalHolder; var ConfirmCancelTerminal = require('../views').ConfirmCancelTerminal; var NextLevelConfirm = require('../views').NextLevelConfirm; -var LevelToolbar = require('../views').LevelToolbar; +var LevelToolbarView = require('../react_views/LevelToolbarView.jsx'); var TreeCompare = require('../graph/treeCompare'); @@ -126,11 +127,19 @@ var Level = Sandbox.extend({ initName: function() { var name = intl.getName(this.level); - - this.levelToolbar = new LevelToolbar({ - name: name, - parent: this - }); + this.levelToolbar = React.createElement( + LevelToolbarView, + { + name: name, + onGoalClick: this.toggleGoal.bind(this), + onObjectiveClick: this.toggleObjective.bind(this) + } + ); + debugger; + React.render( + this.levelToolbar, + document.getElementById('levelToolbarMount') + ); }, initGoalData: function(options) { @@ -213,7 +222,6 @@ var Level = Sandbox.extend({ this.goalVis.hide(); this.goalWindowPos = position; this.goalWindowSize = size; - this.levelToolbar.$goalButton.text(intl.str('show-goal-button')); if ($('#goalPlaceholder').is(':visible')) { $('#goalPlaceholder').hide(); this.mainVis.myResize(); @@ -283,7 +291,6 @@ var Level = Sandbox.extend({ showGoal: function(command, defer) { this.showSideVis(command, defer, this.goalCanvasHolder, this.initGoalVisualization); - this.levelToolbar.$goalButton.text(intl.str('hide-goal-button')); // show the squeezer again we are to the side if ($(this.goalVis.el).offset().left > 0.5 * $(window).width()) { $('#goalPlaceholder').show(); @@ -305,7 +312,6 @@ var Level = Sandbox.extend({ hideGoal: function(command, defer) { this.hideSideVis(command, defer, this.goalCanvasHolder); - this.levelToolbar.$goalButton.text(intl.str('show-goal-button')); }, hideSideVis: function(command, defer, canvasHolder, vis) { diff --git a/src/js/react_views/CommandHistoryView.jsx b/src/js/react_views/CommandHistoryView.jsx index fa2757bc..7f52dffc 100644 --- a/src/js/react_views/CommandHistoryView.jsx +++ b/src/js/react_views/CommandHistoryView.jsx @@ -2,8 +2,6 @@ var CommandView = require('../react_views/CommandView.jsx'); var Main = require('../app'); var React = require('react'); -var reactUtil = require('../util/reactUtil'); - var _subscribeEvents = [ 'add', 'reset', diff --git a/src/js/react_views/CommandView.jsx b/src/js/react_views/CommandView.jsx index cea465d1..529d02cc 100644 --- a/src/js/react_views/CommandView.jsx +++ b/src/js/react_views/CommandView.jsx @@ -118,7 +118,7 @@ var CommandView = React.createClass({ for (var i = 0; i < warnings.length; i++) { result.push(

- + {warnings[i]}

); diff --git a/src/js/react_views/LevelToolbarView.jsx b/src/js/react_views/LevelToolbarView.jsx new file mode 100644 index 00000000..c759c595 --- /dev/null +++ b/src/js/react_views/LevelToolbarView.jsx @@ -0,0 +1,72 @@ +var React = require('react'); +var PropTypes = React.PropTypes; + +var intl = require('../intl'); +var reactUtil = require('../util/reactUtil'); + +var LevelToolbarView = React.createClass({ + + propTypes: { + name: PropTypes.string.isRequired, + onGoalClick: PropTypes.func.isRequired, + onObjectiveClick: PropTypes.func.isRequired + }, + + getInitialState: function() { + return { + isHidden: true + }; + }, + + componentDidMount: function() { + this.setState({ + isHidden: false + }); + }, + + render: function() { + return ( +
+
+
+ + {' Level '} + + {this.props.name} + +
+
+
+
+ +
+
+ +
+
+
+ ); + } + +}); + +module.exports = LevelToolbarView; diff --git a/src/js/views/index.js b/src/js/views/index.js index dad028ed..4c050dd3 100644 --- a/src/js/views/index.js +++ b/src/js/views/index.js @@ -559,62 +559,6 @@ var ZoomAlertWindow = ViewportAlert.extend({ } }); -var LevelToolbar = BaseView.extend({ - tagName: 'div', - className: 'levelToolbarHolder', - template: _.template($('#level-toolbar-template').html()), - - initialize: function(options) { - options = options || {}; - this.parent = options.parent; - this.JSON = { - name: options.name || 'Some level! (unknown name)' - }; - - this.beforeDestination = $($('#commandLineHistory div.toolbar')[0]); - this.render(); - - this.$goalButton = this.$el.find('#show-goal'); - this.$objectiveButton = this.$el.find('#show-objective'); - - var parent = this.parent; - this.$goalButton.on('click', function () { - parent.trigger('toggleGoal'); - }); - this.$objectiveButton.on('click', function() { - parent.trigger('toggleObjective'); - }); - - if (!options.wait) { - process.nextTick(_.bind(this.show, this)); - } - }, - - getAnimationTime: function() { return 700; }, - - render: function() { - var HTML = this.template(this.JSON); - - this.$el.html(HTML); - this.beforeDestination.after(this.el); - }, - - die: function() { - this.hide(); - setTimeout(_.bind(function() { - this.tearDown(); - }, this), this.getAnimationTime()); - }, - - hide: function() { - this.$('div.toolbar').toggleClass('hidden', true); - }, - - show: function() { - this.$('div.toolbar').toggleClass('hidden', false); - } -}); - var HelperBar = BaseView.extend({ getClassName: function() { return 'BaseHelperBar'; @@ -1024,6 +968,5 @@ exports.WindowSizeAlertWindow = WindowSizeAlertWindow; exports.MainHelperBar = MainHelperBar; exports.CanvasTerminalHolder = CanvasTerminalHolder; -exports.LevelToolbar = LevelToolbar; exports.NextLevelConfirm = NextLevelConfirm; diff --git a/src/template.index.html b/src/template.index.html index 856a1417..934b4e3f 100644 --- a/src/template.index.html +++ b/src/template.index.html @@ -52,6 +52,9 @@ +
+
+
@@ -65,6 +68,7 @@
+ @@ -85,17 +89,21 @@
-
- Fork me on GitHub + Fork me on GitHub - -