@@ -1,78 +1,78 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var $ = require('js/shims/jquery');
var React = require('react');
var Reflux = require('reflux');
var $ = require('js/shims/jquery');

var Progress = require('react-progress');
var Progress = require('react-progress');

var BodyRPCStore = require('js/stores/rpc/body');
var BodyRPCStore = require('js/stores/rpc/body');
var ServerRPCStore = require('js/stores/rpc/server');
var EmpireRPCStore = require('js/stores/rpc/empire');

var centerBar = require('js/components/mixin/centerBar');
var centerBar = require('js/components/mixin/centerBar');

var util = require('js/util');
var int = util.int;
var Lib = window.YAHOO.lacuna.Library;
var util = require('js/util');
var int = util.int;
var Lib = window.YAHOO.lacuna.Library;

var storageStyle = {
margin: 0,
marginTop: '5px'
margin : 0,
marginTop : '5px'
};

var storageProgressStyle = {
position: 'absolute'
position : 'absolute'
};


var BottomBar = React.createClass({
mixins: [
mixins : [
Reflux.connect(BodyRPCStore, 'body'),
Reflux.connect(ServerRPCStore, 'server'),
Reflux.connect(EmpireRPCStore, 'empire'),
centerBar('bottombar')
],

calcToolTip : function(info) {
// name, icon, iconClass, hour, store, cap
var name = info.title || Lib.capitalizeFirstLetter(info.type);
var icon = info.icon || info.type;
var iconClass = info.iconClass || name;
var hour = this.state.body[info.type + '_hour'];
var store = this.state.body[info.type + '_stored'] || this.state.body[info.type] || 0;
var cap = this.state.body[info.type + '_capacity'];
var wantCap = 'undefined' !== typeof cap;
var wantCap = typeof cap !== 'undefined';

return [
'<div><strong>', name, '</strong></div>',
'<div><img alt="" class="smallStorage" src="', Lib.AssetUrl, 'ui/s/storage.png" />', Lib.formatNumber(Math.round(store)), (wantCap ? ' / ' + Lib.formatNumber(cap) : ''), '</div>',
'<div><img alt="" class="small', iconClass, '" src="', Lib.AssetUrl, 'ui/s/', icon, '.png" /> ', Lib.formatNumber(hour), ' / hr</div>',
(wantCap ? '<div><img alt="" class="smallTime" src="' + Lib.AssetUrl + 'ui/s/time.png" />' + (
hour < 0 && store > 0 ?
'Empty In ' + Lib.formatTime(-3600 * store / hour) :
hour >= 0 && cap == store ?
'Full' :
hour > 0 ?
'Full In ' + Lib.formatTime(3600 * (cap - store) / hour) :
'Will Never Fill'
) + '</div>' : ''),
(wantCap
? '<div><img alt="" class="smallTime" src="' + Lib.AssetUrl + 'ui/s/time.png" />' + (
hour < 0 && store > 0
? 'Empty In ' + Lib.formatTime(-3600 * store / hour)
: hour >= 0 && cap === store
? 'Full'
: hour > 0
? 'Full In ' + Lib.formatTime(3600 * (cap - store) / hour)
: 'Will Never Fill'
) +
'</div>' : ''),
info.happy_boost
].join('');

},
componentWillUnmount: function() {
componentWillUnmount : function() {
// Destroy!
$('div', this.refs.bottombar).popup('destroy');
},
render: function() {
render : function() {
var This = this;
var happy_boost = 0;
// These numbers could be retrieved from the server, but for now, server changes
// must be duplicated here so that the formulas match.
if (this.state.body.happiness < 0) {
happy_boost = '<i class="caret down small icon" />-' + int(150 * Math.log(-this.state.body.happiness) / Math.log(1000) * 10) / 10;
}
else if (this.state.body.happiness > 0) {
} else if (this.state.body.happiness > 0) {
happy_boost = '<i class="caret up small icon" />' + int(4 * Math.log(this.state.body.happiness) / Math.log(1000) * 10) / 10;
}
happy_boost = [
@@ -81,22 +81,25 @@ var BottomBar = React.createClass({
].join('');

var build_queue_help =
this.state.body.type === 'space station' ?
'Build Queue: How many modules are queued to be built. Space stations do not have a build queue limit.' :
"Build Queue: How many <a target='_new' href='http://community.lacunaexpanse.com/wiki/development-ministry'>buildings are queued or can be queued</a>.";

this.state.body.type === 'space station'
? 'Build Queue: How many modules are queued to be built. Space stations do not have a build queue limit.'
: "Build Queue: How many <a target='_new' href='http://community.lacunaexpanse.com/wiki/development-ministry'>buildings are queued or can be queued</a>.";

return (
<div className="ui blue inverted icon menu" ref="bottombar" style={{
bottom: '40px',
zIndex: '2000',
position: 'fixed',
margin: 0
bottom : '40px',
zIndex : '2000',
position : 'fixed',
margin : 0
}}>

<div id="foodbar" className="item"
onMouseEnter={function() { $('#foodbar').popup({html:This.calcToolTip({type:'food'})}); }}
>
<div id="foodbar" className="item" onMouseEnter={function() {
$('#foodbar').popup({
html : This.calcToolTip({
type : 'food'
})
});
}}>
<Progress
percent={this.state.body.food_percent_full}
style={storageProgressStyle} />
@@ -111,9 +114,13 @@ var BottomBar = React.createClass({
{util.reduceNumber(this.state.body.food_hour)} / hr
</div>

<div id="orebar" className="item"
onMouseEnter={function() { $('#orebar').popup({html:This.calcToolTip({type:'ore'})}); }}
>
<div id="orebar" className="item" onMouseEnter={function() {
$('#orebar').popup({
html : This.calcToolTip({
type : 'ore'
})
});
}}>
<Progress
percent={this.state.body.ore_percent_full}
style={storageProgressStyle} />
@@ -128,9 +135,13 @@ var BottomBar = React.createClass({
{util.reduceNumber(this.state.body.ore_hour)} / hr
</div>

<div id="waterbar" className="item"
onMouseEnter={function() { $('#waterbar').popup({html:This.calcToolTip({type:'water'})}); }}
>
<div id="waterbar" className="item" onMouseEnter={function() {
$('#waterbar').popup({
html : This.calcToolTip({
type : 'water'
})
});
}}>
<Progress
percent={this.state.body.water_percent_full}
style={storageProgressStyle} />
@@ -145,9 +156,13 @@ var BottomBar = React.createClass({
{util.reduceNumber(this.state.body.water_hour)} / hr
</div>

<div id="energybar" className="item"
onMouseEnter={function() { $('#energybar').popup({html:This.calcToolTip({type:'energy'})}); }}
>
<div id="energybar" className="item" onMouseEnter={function() {
$('#energybar').popup({
html : This.calcToolTip({
type : 'energy'
})
});
}}>
<Progress
percent={this.state.body.energy_percent_full}
style={storageProgressStyle} />
@@ -163,41 +178,63 @@ var BottomBar = React.createClass({
</div>

{
this.state.body.type === 'space station' ? '' :
<div id="wastebar" className="item"
onMouseEnter={function() { $('#wastebar').popup({html:This.calcToolTip({type:'waste'})}); }}
>
<Progress
percent={this.state.body.waste_percent_full}
style={storageProgressStyle} />
<i className="trash large icon"></i>
<p style={storageStyle}>
{
util.reduceNumber(this.state.body.waste_stored)
} / {
util.reduceNumber(this.state.body.waste_capacity)
}
</p>
{util.reduceNumber(this.state.body.waste_hour)} / hr
</div>
this.state.body.type === 'space station'
? ''
: (
<div id="wastebar" className="item" onMouseEnter={function() {
$('#wastebar').popup({
html : This.calcToolTip({
type : 'waste'
})
});
}}>
<Progress
percent={this.state.body.waste_percent_full}
style={storageProgressStyle} />
<i className="trash large icon"></i>
<p style={storageStyle}>
{
util.reduceNumber(this.state.body.waste_stored)
} / {
util.reduceNumber(this.state.body.waste_capacity)
}
</p>
{util.reduceNumber(this.state.body.waste_hour)} / hr
</div>
)
}

{
this.state.body.type === 'space station' ? '' :

<div id="happybar" className="item"
onMouseEnter={function() { $('#happybar').popup({html:This.calcToolTip({type:'happiness', iconClass:'Happy', happy_boost:happy_boost})}); }}
>
<i className="smile large icon"></i>
<p style={storageStyle}>
{util.reduceNumber(this.state.body.happiness)}
</p>
{util.reduceNumber(this.state.body.happiness_hour)} / hr
</div>
this.state.body.type === 'space station'
? ''
: (
<div id="happybar" className="item" onMouseEnter={function() {
$('#happybar').popup({
html : This.calcToolTip({
type : 'happiness',
iconClass : 'Happy',
happy_boost : happy_boost
})
});
}}>
<i className="smile large icon"></i>
<p style={storageStyle}>
{util.reduceNumber(this.state.body.happiness)}
</p>
{util.reduceNumber(this.state.body.happiness_hour)} / hr
</div>
)
}

<div id="buildingcountbar" className="item"
onMouseEnter={function() { $('#buildingcountbar').popup({html:"Your current <a target='_new' href='http://community.lacunaexpanse.com/wiki/plots'>plot-using</a> building count, and how many <a target='_new' href='http://community.lacunaexpanse.com/wiki/plots'>plots</a> you have available.", hoverable:true, delay:{hide:800}}); }}>
<div id="buildingcountbar" className="item" onMouseEnter={function() {
$('#buildingcountbar').popup({
html : "Your current <a target='_new' href='http://community.lacunaexpanse.com/wiki/plots'>plot-using</a> building count, and how many <a target='_new' href='http://community.lacunaexpanse.com/wiki/plots'>plots</a> you have available.",
hoverable : true,
delay : {
hide : 800
}
});
}}>
<i className="block layout large icon"></i>
<p style={storageStyle}>
{
@@ -210,23 +247,37 @@ var BottomBar = React.createClass({
</p>
</div>

<div id="buildqueuebar" className="item"
onMouseEnter={function() { $('#buildqueuebar').popup({html:build_queue_help, hoverable:true, delay:{hide:800}}); }}>
<div id="buildqueuebar" className="item" onMouseEnter={function() {
$('#buildqueuebar').popup({
html : build_queue_help,
hoverable : true,
delay : {
hide : 800
}
});
}}>
<i className="list large icon" />
<p style={storageStyle}>
{
this.state.body.build_queue_len
} {this.state.body.type === 'space station' ? '' : ' / ' + this.state.body.build_queue_size}
<br />Build Q
<br /> Build Q
</p>
</div>

<div id="rpcusagebar" className="item"
onMouseEnter={function() { $('#rpcusagebar').popup({html:"The <a target='_new' href='http://community.lacunaexpanse.com/wiki/rpc-limit'>RPC limit</a> is the number of requests you can send to the server in a 24 hour period.", hoverable:true, delay:{hide:800}}); }}>
<div id="rpcusagebar" className="item" onMouseEnter={function() {
$('#rpcusagebar').popup({
html : "The <a target='_new' href= 'http://community.lacunaexpanse.com/wiki/rpc-limit'>RPC limit</a> is the number of requests you can send to the server in a 24 hour period.",
hoverable : true,
delay : {
hide : 800
}
});
}}>
<i className="exchange large icon" />
<p style={storageStyle}>
{this.state.empire.rpc_count} / {util.reduceNumber(this.state.server.rpc_limit)}
<br />Actions
<br />Actions
</p>
</div>
</div>
@@ -1,62 +1,66 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var $ = require('js/shims/jquery');
var Firebase = require('firebase');

var ChatStore = require('js/stores/menu/chat');
var ChatStore = require('js/stores/menu/chat');
var BodyRPCStore = require('js/stores/rpc/body');

var Chat = React.createClass({
mixins: [
mixins : [
Reflux.connect(ChatStore, 'show')
],
getInitialState: function() {
getInitialState : function() {
return {
show: false
show : false
};
},
hasRenderedChat: false,
componentDidUpdate: function() {
hasRenderedChat : false,
componentDidUpdate : function() {

if (this.state.show !== this.hasRenderedChat) {
if (this.state.show === true && this.hasRenderedChat == false) {
if (this.state.show === true && this.hasRenderedChat === false) {
this.loadChat();
} else if (this.state.show === false && this.hasRenderedChat == true) {
} else if (this.state.show === false && this.hasRenderedChat === true) {
this.logoutChat();
} else {
return;
}
}
},
logoutChat: function() {
logoutChat : function() {
try {
this.chat.unsetUser();
this.hasRenderedChat = false;
}
catch (err) {
} catch (err) {
console.error('Cannot unsetuser ' + err);
}
},
loadChat: function() {
loadChat : function() {
console.log('Loading chat!');

// ChiselChat needs these.
window.Firebase = require('firebase');
window.$ = window.jQuery = require('jquery');
// window.PNotify = require('pnotify');

if (!window.PNotify) {
$.getScript('//cdnjs.cloudflare.com/ajax/libs/pnotify/2.0.0/pnotify.all.min.js', _.bind(function(data, textStatus, jqXHR) {
if (textStatus === 'success' && jqXHR.status === 200) {
}
}, this));
$.getScript(
'//cdnjs.cloudflare.com/ajax/libs/pnotify/2.0.0/pnotify.all.min.js',
_.bind(function(data, textStatus, jqXHR) {
// Do nothing?
}, this)
);
}

if (!window.ChiselChat) {
// ChiselChat is not on mpn so we need to pull some tricks to get it into the app.
$.getScript('chiselchat/chiselchat.min.js', _.bind(function(data, textStatus, jqXHR) {
if (textStatus === 'success' && jqXHR.status === 200) {
this.renderChat.call(self);
this.renderChat.call();
} else {
console.error('Loading ChiselChat failed.');
}
@@ -65,7 +69,7 @@ var Chat = React.createClass({
this.renderChat();
}
},
renderChat: function() {
renderChat : function() {

// Only do this process once.
// NOTE: it's checked before but we're just making sure. (nice rhyming)
@@ -78,7 +82,7 @@ var Chat = React.createClass({
try {

var config = {
numMaxMessages: window.cc_max_messages || 100
numMaxMessages : window.cc_max_messages || 100
};

// Make sure we go to the right server's Firebase.
@@ -93,36 +97,35 @@ var Chat = React.createClass({
console.log('Connecting to Firebase: ' + url);

this.chatRef = new Firebase(url);
this.chat = new ChiselchatUI(this.chatRef, this.refs.chatWrapper, config);
this.chat = new window.ChiselchatUI(this.chatRef, this.refs.chatWrapper, config);

this.chat.addCommand({
match : /^\/wiki/,
func : function(e) {
func : function(e) {
var msg = e.content.replace(/^\/wiki/, '');
msg = msg.trim();
if (msg.length) {
msg = msg.replace(/ /g, '+');
e.content = 'http://community.lacunaexpanse.com/wiki?func=search&query=' + msg;
}
else {
} else {
e.content = 'http://community.lacunaexpanse.com/wiki';
}
},
name : '/wiki',
help : 'Quick link to the Lacuna Expanse wiki.',
name : '/wiki',
help : 'Quick link to the Lacuna Expanse wiki.',
moderatorOnly : false
});

this.chat.addCommand({
match : /^\/planet/,
func : function(message, chatui) {
func : function(message, chatui) {
var body = BodyRPCStore.getData();

message.content = message.content.replace(/^\/planet/,
"My current planet is '" + body.name + "' at '" + body.x + '|' + body.y + "' in zone '" + body.zone + "'\n");
},
name : '/planet',
help : 'Show everyone where your current planet is.',
name : '/planet',
help : 'Show everyone where your current planet is.',
moderatorOnly : false
});

@@ -134,7 +137,7 @@ var Chat = React.createClass({
}

},
authenticateChat: function() {
authenticateChat : function() {

// Only do this process once.
// NOTE: it's checked before but we're just making sure. (nice rhyming)
@@ -145,7 +148,7 @@ var Chat = React.createClass({
var Game = YAHOO.lacuna.Game;

Game.Services.Chat.init_chat({
session_id: Game.GetSession()
session_id : Game.GetSession()
}, {
success : _.bind(function(o) {

@@ -166,22 +169,20 @@ var Chat = React.createClass({
this.chatRef.authWithCustomToken(this.chat_auth, _.bind(function(error) {
if (error) {
console.log('Chisel Chat login failed!', error);
}
else {
} else {
console.log('Chisel Chat login successful!');

try {
this.chat.setUser({
userId: result.status.empire.id,
userName: result.chat_name,
isGuest: false, // for now
isModerator: result.isModerator,
isStaff: result.isStaff,
avatarUri: this.gravatar_url,
profileUri: this.gravatar_url
userId : result.status.empire.id,
userName : result.chat_name,
isGuest : false, // for now
isModerator : result.isModerator,
isStaff : result.isStaff,
avatarUri : this.gravatar_url,
profileUri : this.gravatar_url
});
}
catch (err) {
} catch (err) {
console.log('cannot setUser ' + err);
}
if (this.private_room) {
@@ -199,14 +200,14 @@ var Chat = React.createClass({
}
});
},
render: function() {
render : function() {
return (
<div id="chiselchat-wrapper" ref="chatWrapper" style={{
position: 'absolute',
bottom: 0,
width: '100vw',
height: '25px',
zIndex: 5000
position : 'absolute',
bottom : 0,
width : '100vw',
height : '25px',
zIndex : 5000
}}></div>
);
}
@@ -1,68 +1,35 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var util = require('js/util');
var server = require('js/server');
var $ = require('js/shims/jquery');
var windowTypes = require('js/windowTypes');

var LeftSidebarActions = require('js/actions/menu/leftSidebar');
var AboutActions = require('js/actions/window/about');
var NotesActions = require('js/actions/window/notes');
var OptionsActions = require('js/actions/window/options');
var React = require('react');
var Reflux = require('reflux');
var util = require('js/util');
var server = require('js/server');
var $ = require('js/shims/jquery');

var LeftSidebarActions = require('js/actions/menu/leftSidebar');
var OptionsActions = require('js/actions/window/options');
var WindowManagerActions = require('js/actions/menu/windowManager');

var windowTypes = require('js/windowTypes');
var RpcBodyActions = require('js/actions/rpc/body');
var windowTypes = require('js/windowTypes');

var EmpireRPCStore = require('js/stores/rpc/empire');
var LeftSidebarStore = require('js/stores/menu/leftSidebar');

var LeftSidebarStore = require('js/stores/menu/leftSidebar');
var windowTypes = require('js/windowTypes');
var EmpireRPCStore = require('js/stores/rpc/empire');
var LeftSidebarStore = require('js/stores/menu/leftSidebar');

// Because there's a bit of special logic going on here, this is in a separate component.
var SelfDestruct = React.createClass({

mixins: [
mixins : [
Reflux.connect(EmpireRPCStore, 'empire')
],

render: function() {
var destructActive = this.state.empire.self_destruct_active
&& this.state.empire.self_destruct_ms > 0;
var destructMs = this.state.empire.self_destruct_ms;
var formattedDestructMs = destructActive ? util.formatMillisecondTime(destructMs) : '';

var itemStyle = destructActive ? {'color':'red'} : {};
var verb = destructActive ? 'Disable' : 'Enable';

return (
<a
className="item"
style={itemStyle}
onClick={function() {
LeftSidebarActions.hide();
this.onClickSelfDestruct();
}}
>
<i className="bomb icon"></i>
{verb} Self Destruct {
destructActive ?
<span>
<p style={{margin:0}}>SELF DESTRUCT ACTIVE</p>
<p style={{textAlign: 'right !important'}}>{formattedDestructMs}</p>
</span>
:
''
}
</a>
);
handleDestructClick : function() {
LeftSidebarActions.hide();
this.onClickSelfDestruct();
},

onClickSelfDestruct : function() {
var method = '';

if (this.state.empire.self_destruct_active === 1) {
method = 'disable_self_destruct';
} else if (this.confirmSelfDestruct()) {
@@ -72,58 +39,103 @@ var SelfDestruct = React.createClass({
}

server.call({
module: 'empire',
method: method,
params: [],
scope: this,
success: function() {
module : 'empire',
method : method,
params : [],
scope : this,
success : function() {
if (method === 'enable_self_destruct') {
alert('Success - your empire will be deleted in 24 hours.');
window.alert('Success - your empire will be deleted in 24 hours.');
} else {
alert('Success - your empire will not be deleted. Phew!');
window.alert('Success - your empire will not be deleted. Phew!');
}
}
});
},

confirmSelfDestruct: function() {
return confirm('Are you ABSOLUTELY sure you want to enable self destuct? If enabled, your empire will be deleted after 24 hours.');
confirmSelfDestruct : function() {
return window.confirm('Are you ABSOLUTELY sure you want to enable self destuct? If enabled, your empire will be deleted after 24 hours.');
},

render : function() {
var destructActive = this.state.empire.self_destruct_active &&
this.state.empire.self_destruct_ms > 0;
var destructMs = this.state.empire.self_destruct_ms;
var formattedDestructMs = destructActive ? util.formatMillisecondTime(destructMs) : '';

var itemStyle = destructActive
? {
color : 'red'
}
: {};

var verb = destructActive
? 'Disable'
: 'Enable';

return (
<a
className="item"
style={itemStyle}
onClick={this.handleDestructClick}
>
<i className="bomb icon"></i>
{verb} Self Destruct {
destructActive
? (
<span>
<p style={{
margin : 0
}}>
SELF DESTRUCT ACTIVE
</p>
<p style={{
textAlign : 'right !important'
}}>
{formattedDestructMs}
</p>
</span>
)
: ''
}
</a>
);
}
});

var LeftSidebar = React.createClass({
mixins: [
mixins : [
Reflux.connect(EmpireRPCStore, 'empire'),
Reflux.connect(LeftSidebarStore, 'leftSidebar')
],

componentDidMount: function() {
componentDidMount : function() {
var el = this.refs.sidebar;

$(el)
.sidebar({
context: $('#sidebarContainer'),
duration: 300,
transition: 'overlay',
onHidden: LeftSidebarActions.hide,
onVisible: LeftSidebarActions.show
context : $('#sidebarContainer'),
duration : 300,
transition : 'overlay',
onHidden : LeftSidebarActions.hide,
onVisible : LeftSidebarActions.show
});
},

componentDidUpdate: function(prevProps, prevState) {
componentDidUpdate : function(prevProps, prevState) {
if (prevState.leftSidebar !== this.state.leftSidebar) {
this.handleSidebarShowing();
}
},

handleSidebarShowing: function() {
handleSidebarShowing : function() {
var el = this.refs.sidebar;

$(el)
.sidebar(this.state.leftSidebar ? 'show' : 'hide');
},

render: function() {
render : function() {

return (
<div className="ui left vertical inverted sidebar menu" ref="sidebar">
@@ -147,8 +159,6 @@ var LeftSidebar = React.createClass({
Refresh
</a>



<div className="ui horizontal inverted divider">
Links
</div>
@@ -197,8 +207,6 @@ var LeftSidebar = React.createClass({
Wiki
</a>



<div className="ui horizontal inverted divider">
Windows
</div>
@@ -241,32 +249,7 @@ var LeftSidebar = React.createClass({
<SelfDestruct />
</div>
);
},

onClickSelfDestruct : function() {
var Game = YAHOO.lacuna.Game;
var EmpireServ = Game.Services.Empire;
var func;
if (this.state.empire.self_destruct_active === 1) {
func = EmpireServ.disable_self_destruct;
}
else if (confirm('Are you certain you want to enable self destuct? If enabled, your empire will be deleted after 24 hours.')) {
func = EmpireServ.enable_self_destruct;
}
else {
return;
}
require('js/actions/menu/loader').show();
func({session_id:Game.GetSession()}, {
success : function(o) {
Game.ProcessStatus(o.result.status);
require('js/actions/menu/loader').hide();
}
});

LeftSidebarActions.hide();
},
}
});


module.exports = LeftSidebar;
@@ -2,27 +2,26 @@

var React = require('react');
var Reflux = require('reflux');
var $ = require('js/shims/jquery');

var EmpireRPCStore = require('js/stores/rpc/empire');
var LeftSidebarActions = require('js/actions/menu/leftSidebar');

var LeftSidebarButton = React.createClass({
mixins: [
mixins : [
Reflux.connect(EmpireRPCStore, 'empire')
],

clickLeftSidebarButton: function() {
clickLeftSidebarButton : function() {
LeftSidebarActions.show();
},

render: function() {
render : function() {
return (
<div style={{
position: 'absolute',
zIndex: 2500,
left: '15px',
top: '15px'
position : 'absolute',
zIndex : 2500,
left : '15px',
top : '15px'
}}>
<div className="ui left labeled icon blue button" onClick={this.clickLeftSidebarButton}>
<i className="content icon" />
@@ -1,22 +1,29 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');

var classNames = require('classnames');
var classNames = require('classnames');

var LoaderStore = require('js/stores/menu/loader');

var Loader = React.createClass({
mixins: [
mixins : [
Reflux.connect(LoaderStore, 'show')
],
render: function() {
render : function() {
return (
<div className={classNames(
'ui large loader',
{active: this.state.show}
)} style={{zIndex: 9999999999, top: '40vh'}}>
<div
className={classNames(
'ui large loader',
{
active : this.state.show
}
)}
style={{
zIndex : 9999999999,
top : '40vh'
}}>
</div>
);
}
@@ -1,30 +1,30 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');

var BodyRPCStore = require('js/stores/rpc/body');
var MapModeStore = require('js/stores/menu/mapMode');
var PlanetStore = require('js/stores/menu/planet');
var MenuStore = require('js/stores/menu');
var PlanetStore = require('js/stores/menu/planet');
var MenuStore = require('js/stores/menu');

// TODO: factor out all this glue code

var Map = React.createClass({
mixins: [
mixins : [
Reflux.connect(MapModeStore, 'mapMode'),
Reflux.connect(BodyRPCStore, 'body'),
Reflux.connect(PlanetStore, 'planet'),
Reflux.connect(MenuStore, 'menuVisible')
],
getInitialState: function() {
getInitialState : function() {
return {
planet: ''
planet : ''
};
},
previousMapMode: '',
previousPlanetId: '',
render: function() {
previousMapMode : '',
previousPlanetId : '',
render : function() {

// console.log(this.state);

@@ -48,8 +48,6 @@ var Map = React.createClass({
// console.log('planet = ' + this.state.planet + '(' + this.previousPlanetId + ')');

var Lacuna = YAHOO.lacuna;
var Game = Lacuna.Game;


if (
// Render if the planet id has changed... OR...
@@ -1,42 +1,44 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var $ = require('js/shims/jquery');
var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var $ = require('js/shims/jquery');

var classNames = require('classnames');
var classNames = require('classnames');

var EmpireRPCStore = require('js/stores/rpc/empire');
var BodyRPCStore = require('js/stores/rpc/body');
var EmpireRPCStore = require('js/stores/rpc/empire');
var BodyRPCStore = require('js/stores/rpc/body');

var RightSidebarActions = require('js/actions/menu/rightSidebar');
var MapActions = require('js/actions/menu/map');
var MapActions = require('js/actions/menu/map');

var RightSidebarStore = require('js/stores/menu/rightSidebar');
var RightSidebarStore = require('js/stores/menu/rightSidebar');

var PlanetListItem = React.createClass({

propTypes: {
name: React.PropTypes.string.isRequired,
id: React.PropTypes.string.isRequired,
currentBody: React.PropTypes.string.isRequired
propTypes : {
name : React.PropTypes.string.isRequired,
id : React.PropTypes.string.isRequired,
currentBody : React.PropTypes.string.isRequired,
zone : React.PropTypes.string.isRequired
},

getInitialProps: function() {
getInitialProps : function() {
return {
name: '',
id: '',
currentBody: '',
name : '',
id : '',
currentBody : '',
zone : ''
};
},

// Returns true if this list item is the the currently selected planet.
isCurrentWorld: function() {
isCurrentWorld : function() {
return this.props.currentBody === this.props.id;
},

handleClick: function() {
handleClick : function() {
RightSidebarActions.hide();

if (this.isCurrentWorld()) {
@@ -46,16 +48,16 @@ var PlanetListItem = React.createClass({
}
},

render: function() {
render : function() {
var classStr = classNames({
'ui large teal label': this.isCurrentWorld(),
'item': !this.isCurrentWorld()
'ui large teal label' : this.isCurrentWorld(),
'item' : !this.isCurrentWorld()
});

return (
<a className={classStr} onClick={this.handleClick} style={{
// For some reason this doesn't get set on the items (by Semantic) when it should.
cursor: 'pointer'
cursor : 'pointer'
}}>
{this.props.name} ({this.props.zone})
</a>
@@ -65,52 +67,52 @@ var PlanetListItem = React.createClass({

var AccordionItem = React.createClass({

propTypes: {
list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
currentBody: React.PropTypes.string.isRequired,
title: React.PropTypes.string.isRequired,
initiallyOpen: React.PropTypes.bool.isRequired,
propTypes : {
list : React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
currentBody : React.PropTypes.string.isRequired,
title : React.PropTypes.string.isRequired,
initiallyOpen : React.PropTypes.bool.isRequired
},

getInitialProps: function() {
getInitialProps : function() {
return {
list: [],
currentBody: '',
title: '',
initiallyOpen: false
list : [],
currentBody : '',
title : '',
initiallyOpen : false
};
},

getInitialState: function() {
getInitialState : function() {
return {
open: this.props.initiallyOpen
open : this.props.initiallyOpen
};
},

componentDidMount: function() {
componentDidMount : function() {
RightSidebarActions.collapseAccordion.listen(this.hideList);
RightSidebarActions.expandAccordion.listen(this.showList);
},

showList: function() {
showList : function() {
this.setState({
open: true
open : true
});
},

hideList: function() {
hideList : function() {
this.setState({
open: false
open : false
});
},

toggleList: function() {
toggleList : function() {
this.setState({
open: !this.state.open
open : !this.state.open
});
},

render: function() {
render : function() {
return (
<div>
<div
@@ -122,17 +124,17 @@ var AccordionItem = React.createClass({
}
onClick={this.toggleList}
style={{
cursor: 'pointer',
cursor : 'pointer'
}}
>
{
this.state.open
? <i className="angle down icon"></i>
: <i className="angle right icon"></i>
? <i className="angle down icon"></i>
: <i className="angle right icon"></i>
} {this.props.title}
</div>
<div style={{
display: this.state.open ? '' : 'none'
display : this.state.open ? '' : 'none'
}}>
{
_.map(this.props.list, function(planet) {
@@ -156,29 +158,30 @@ var AccordionItem = React.createClass({
});

var BodiesAccordion = React.createClass({
propTypes: {
bodies: React.PropTypes.object.isRequired
propTypes : {
bodies : React.PropTypes.object.isRequired,
currentBody : React.PropTypes.string.isRequired
},

render: function() {
render : function() {
var items = [
{
title: 'My Colonies',
key: 'colonies',
initiallyOpen: true,
isBaby: false
title : 'My Colonies',
key : 'colonies',
initiallyOpen : true,
isBaby : false
},
{
title: 'My Stations',
key: 'mystations',
initiallyOpen: false,
isBaby: false
title : 'My Stations',
key : 'mystations',
initiallyOpen : false,
isBaby : false
},
{
title: 'Our Stations',
key: 'ourstations',
initiallyOpen: false,
isBaby: false
title : 'Our Stations',
key : 'ourstations',
initiallyOpen : false,
isBaby : false
}
];

@@ -188,10 +191,10 @@ var BodiesAccordion = React.createClass({
.sortBy()
.each(function(babyName) {
items.push({
title: babyName + "'s Colonies",
key: babyName,
initiallyOpen: false,
isBaby: true
title : babyName + "'s Colonies",
key : babyName,
initiallyOpen : false,
isBaby : true
});
})
.value();
@@ -228,26 +231,26 @@ var BodiesAccordion = React.createClass({

var RightSidebar = React.createClass({

mixins: [
mixins : [
Reflux.connect(EmpireRPCStore, 'empire'),
Reflux.connect(BodyRPCStore, 'body'),
Reflux.connect(RightSidebarStore, 'showSidebar')
],

componentDidMount: function() {
componentDidMount : function() {
var el = this.refs.sidebar;

$(el)
.sidebar({
context: $('#sidebarContainer'),
duration: 300,
transition: 'overlay',
onHidden: RightSidebarActions.hide,
onVisible: RightSidebarActions.show
context : $('#sidebarContainer'),
duration : 300,
transition : 'overlay',
onHidden : RightSidebarActions.hide,
onVisible : RightSidebarActions.show
});
},

componentDidUpdate: function(prevProps, prevState) {
componentDidUpdate : function(prevProps, prevState) {
if (prevState.showSidebar !== this.state.showSidebar) {
this.handleSidebarShowing();
}
@@ -256,53 +259,53 @@ var RightSidebar = React.createClass({
var $content = $(this.refs.content);

$content.css({
height: window.innerHeight - $header.outerHeight()
height : window.innerHeight - $header.outerHeight()
});
},

handleSidebarShowing: function() {
handleSidebarShowing : function() {
var el = this.refs.sidebar;

$(el)
.sidebar(this.state.showSidebar ? 'show' : 'hide');
},

homePlanet: function() {
homePlanet : function() {
RightSidebarActions.hide();
MapActions.changePlanet(this.state.empire.home_planet_id);
},

expand: function() {
expand : function() {
RightSidebarActions.expandAccordion();
},

collapse: function() {
collapse : function() {
RightSidebarActions.collapseAccordion();
},

render: function() {
render : function() {
return (
<div className="ui right vertical inverted sidebar menu" ref="sidebar">

<div ref="header" style={{paddingTop: 7}}>
<div ref="header" style={{paddingTop : 7}}>
<a
title="Go to home planet"
className="item"
onClick={this.homePlanet}
style={{
display: 'inline'
display : 'inline'
}}
>
Home
</a>

<div style={{float: 'right'}}>
<div style={{float : 'right'}}>
<a
title="Expand all"
className="item"
onClick={this.expand}
style={{
display: 'inline'
display : 'inline'
}}
>
[+]
@@ -313,7 +316,7 @@ var RightSidebar = React.createClass({
className="item"
onClick={this.collapse}
style={{
display: 'inline'
display : 'inline'
}}
>
[-]
@@ -322,8 +325,8 @@ var RightSidebar = React.createClass({
</div>

<div ref="content" style={{
overflow: 'auto',
overflowX: 'hidden'
overflow : 'auto',
overflowX : 'hidden'
}}>
<BodiesAccordion
bodies={this.state.empire.bodies}
@@ -1,29 +1,28 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var $ = require('js/shims/jquery');
var React = require('react');
var Reflux = require('reflux');

var BodyRPCStore = require('js/stores/rpc/body');
var BodyRPCStore = require('js/stores/rpc/body');
var RightSidebarActions = require('js/actions/menu/rightSidebar');

var RightSidebarButton = React.createClass({

mixins: [
mixins : [
Reflux.connect(BodyRPCStore, 'body')
],

click: function() {
click : function() {
RightSidebarActions.show();
},

render: function() {
render : function() {
return (
<div style={{
position: 'absolute',
zIndex: 2500,
right: '15px',
top: '15px'
position : 'absolute',
zIndex : 2500,
right : '15px',
top : '15px'
}}>
<div className="ui right labeled icon blue button" onClick={this.click}>
<i className="world icon" />
@@ -1,56 +1,55 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var React = require('react');
var Reflux = require('reflux');

var EmpireRPCStore = require('js/stores/rpc/empire');
var MapModeStore = require('js/stores/menu/mapMode');
var ServerRPCStore = require('js/stores/rpc/server');
var EmpireRPCStore = require('js/stores/rpc/empire');
var MapModeStore = require('js/stores/menu/mapMode');
var ServerRPCStore = require('js/stores/rpc/server');

var centerBar = require('js/components/mixin/centerBar');
var classNames = require('classnames');
var centerBar = require('js/components/mixin/centerBar');
var classNames = require('classnames');

var UserActions = require('js/actions/user');
var MapActions = require('js/actions/menu/map');
var UserActions = require('js/actions/user');
var MapActions = require('js/actions/menu/map');

var WindowManagerActions = require('js/actions/menu/windowManager');
var windowTypes = require('js/windowTypes');
var windowTypes = require('js/windowTypes');

var MailActions = require('js/actions/window/mail');
var StatsActions = require('js/actions/window/stats');
var MailActions = require('js/actions/window/mail');
var StatsActions = require('js/actions/window/stats');

var TopBar = React.createClass({
mixins: [
mixins : [
Reflux.connect(EmpireRPCStore, 'empire'),
Reflux.connect(ServerRPCStore, 'server'),
Reflux.connect(MapModeStore, 'mapMode'),
centerBar('bar')
],

mapButtonTip: function() {
mapButtonTip : function() {
if (this.state.mapMode === MapModeStore.PLANET_MAP_MODE) {
return 'To Star Map';
} else {
return 'To Planet Map';
}
},

render: function() {
render : function() {
var barClass = classNames('ui inverted menu', {
red: this.state.empire.self_destruct_active,
blue: !this.state.empire.self_destruct_active
red : this.state.empire.self_destruct_active,
blue : !this.state.empire.self_destruct_active
});

return (
<div className={barClass} ref="bar" style={{
position: 'fixed',
margin: 0,
zIndex: 2000,
width: 'auto',
height: 'auto',
display: 'inline-block',
top: '15px'
position : 'fixed',
margin : 0,
zIndex : 2000,
width : 'auto',
height : 'auto',
display : 'inline-block',
top : '15px'
}}>

<a className="item" data-tip={this.mapButtonTip()}
@@ -62,12 +61,11 @@ var TopBar = React.createClass({
<i className="mail big icon"></i>
{
this.state.empire.has_new_messages > 0
?
<div className="ui yellow circular label">
{this.state.empire.has_new_messages}
</div>
:
''
? (
<div className="ui yellow circular label">
{this.state.empire.has_new_messages}
</div>
) : ''
}
</a>

@@ -86,7 +84,7 @@ var TopBar = React.createClass({

{
this.state.server.promotions.length > 0
?
? (
<a
className="item"
data-tip={
@@ -97,14 +95,13 @@ var TopBar = React.createClass({
onClick={function() {
WindowManagerActions.addWindow(windowTypes.promotions);
}}
>
>
<i className="announcement big icon"></i>
<div className="ui orange floated right circular label">
Event!
</div>
</a>
:
''
) : ''
}

<a className="item" data-tip="Sign Out" onClick={UserActions.userSignOut}>
@@ -1,65 +1,65 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var _ = require('lodash');
var _ = require('lodash');

var WindowManagerActions = require('js/actions/menu/windowManager');
var WindowManagerActions = require('js/actions/menu/windowManager');

var WindowManagerStore = require('js/stores/menu/windowManager');
var WindowManagerStore = require('js/stores/menu/windowManager');

var Panel = require('js/components/panel');
var Panel = require('js/components/panel');

var WINDOWS = {
ABOUT: require('js/components/window/about'),
CAPTCHA: require('js/components/window/captcha'),
ESSENTIA: require('js/components/window/essentia'),
INVITE: require('js/components/window/invite'),
MAIL: require('js/components/window/mail'),
NOTES: require('js/components/window/notes'),
OPTIONS: require('js/components/window/options'),
PROMOTIONS: require('js/components/window/promotions'),
SERVER_CLOCK: require('js/components/window/serverClock'),
SITTER_MANAGER: require('js/components/window/sitterManager'),
STATS: require('js/components/window/stats')
ABOUT : require('js/components/window/about'),
CAPTCHA : require('js/components/window/captcha'),
ESSENTIA : require('js/components/window/essentia'),
INVITE : require('js/components/window/invite'),
MAIL : require('js/components/window/mail'),
NOTES : require('js/components/window/notes'),
OPTIONS : require('js/components/window/options'),
PROMOTIONS : require('js/components/window/promotions'),
SERVER_CLOCK : require('js/components/window/serverClock'),
SITTER_MANAGER : require('js/components/window/sitterManager'),
STATS : require('js/components/window/stats')
};

var BASE_Z_INDEX = 1000000;

var Window = React.createClass({

propTypes: {
window: React.PropTypes.object.isRequired
propTypes : {
window : React.PropTypes.object.isRequired
},

componentDidMount: function() {
componentDidMount : function() {
this.handleDisplayCallbacks();
},

componentDidUpdate: function(prevProps, prevState) {
componentDidUpdate : function(prevProps, prevState) {
if (prevProps.window.show !== this.props.window.show) {
this.handleDisplayCallbacks();
}
},

handleDisplayCallbacks: function() {
handleDisplayCallbacks : function() {
if (this.props.window.show && typeof this.refs.window.onWindowShow === 'function') {
this.refs.window.onWindowShow();
} else if (!this.props.window.show && typeof this.refs.window.onWindowHide === 'function') {
this.refs.window.onWindowHide();
}
},

handleBringingToTop: function(event) {
handleBringingToTop : function(event) {
WindowManagerActions.bringWindowToTop(this.props.window.id);
},

getWindowComponent: function() {
getWindowComponent : function() {
return WINDOWS[this.props.window.type];
},

getWindowOptions: function() {
getWindowOptions : function() {
var component = this.getWindowComponent();

if (component && typeof component.windowOptions === 'object') {
@@ -69,22 +69,22 @@ var Window = React.createClass({
}
},

render: function() {
render : function() {
var onClose = function(id) {
WindowManagerActions.hideWindow(id);
};

var panelOptions = _.merge({}, {
show: this.props.window.show,
zIndex: BASE_Z_INDEX + this.props.window.layer,
onClose: _.partial(onClose, this.props.window.id),
ref: 'panel'
show : this.props.window.show,
zIndex : BASE_Z_INDEX + this.props.window.layer,
onClose : _.partial(onClose, this.props.window.id),
ref : 'panel'
}, this.getWindowOptions());

var windowOptions = {
ref: 'window',
options: _.merge({
id: this.props.window.id
ref : 'window',
options : _.merge({
id : this.props.window.id
}, this.props.window.options)
};

@@ -102,11 +102,11 @@ var Window = React.createClass({

var WindowManager = React.createClass({

mixins: [
mixins : [
Reflux.connect(WindowManagerStore, 'windows')
],

render: function() {
render : function() {
var keys = _.keys(this.state.windows);

var windows = _.map(keys, function(key) {
@@ -1,6 +1,6 @@
'use strict';

var _ = require('lodash');
var _ = require('lodash');

var util = require('js/util');

@@ -19,7 +19,7 @@ var centerBar = function(refName) {

module.exports = function(refName) {
return {
componentDidMount: _.partial(centerBar, refName),
componentDidUpdate: _.partial(centerBar, refName)
componentDidMount : _.partial(centerBar, refName),
componentDidUpdate : _.partial(centerBar, refName)
};
};
@@ -1,58 +1,60 @@
'use strict';

var React = require('react');
var React = require('react');
var $ = require('js/shims/jquery');

var Draggable = require('react-draggable');

var Panel = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
height: React.PropTypes.oneOfType([
propTypes : {
title : React.PropTypes.string.isRequired,
height : React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string
]),
width: React.PropTypes.oneOfType([
width : React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string
]),
onClose: React.PropTypes.func.isRequired,
zIndex: React.PropTypes.number
onClose : React.PropTypes.func.isRequired,
zIndex : React.PropTypes.number,
children : React.PropTypes.element
},

getDefaultProps: function() {
getDefaultProps : function() {
return {
height: 400,
width: 450
height : 400,
width : 450
};
},

render: function() {
render : function() {
return (
<Draggable handle=".drag-handle" zIndex={this.props.zIndex}>
<div ref="container" style={{
position: 'absolute',
zIndex: this.props.zIndex,
left: ($(window.document).width() - this.props.width) / 2
position : 'absolute',
zIndex : this.props.zIndex,
left : ($(window.document).width() - this.props.width) / 2
}}>
<div className="drag-handle" style={{
backgroundColor: '#184F82',
border: '1px solid black',
borderBottom: 0, // Avoid the border appearing thicker on the bottom edge.
borderTopLeftRadius: 7,
borderTopRightRadius: 7,
color: '#FFD800',
cursor: 'move',
fontSize: '110%',
fontWeight: 'bold',
lineHeight: '1.75',
marginLeft: 10,
paddingLeft: 10,
width: this.props.width - 20,
backgroundColor : '#184F82',
border : '1px solid black',
borderBottom : 0, // Avoid the border appearing thicker on the bottom edge.
borderTopLeftRadius : 7,
borderTopRightRadius : 7,
color : '#FFD800',
cursor : 'move',
fontSize : '110%',
fontWeight : 'bold',
lineHeight : '1.75',
marginLeft : 10,
paddingLeft : 10,
width : this.props.width - 20,

// Prevent anyone from selecting the text.
MozUserSelect: 'none',
WebkitUserSelect: 'none',
msUserSelect: 'none'
MozUserSelect : 'none',
WebkitUserSelect : 'none',
msUserSelect : 'none'
}}>
<span className="drag-handle">
{this.props.title}
@@ -61,28 +63,28 @@ var Panel = React.createClass({
<span
onClick={this.props.onClose}
style={{
position: 'absolute',
right: 30,
display: 'inline-block',
cursor: 'pointer'
position : 'absolute',
right : 30,
display : 'inline-block',
cursor : 'pointer'
}}
>
X
</span>
</div>
<div style={{
overflow: 'auto',
width: this.props.width + 'px',
border: '2px solid black',
backgroundColor: '#0268AC',
borderRadius: '10px',
padding: '10px'
overflow : 'auto',
width : this.props.width + 'px',
border : '2px solid black',
backgroundColor : '#0268AC',
borderRadius : '10px',
padding : '10px'
}}>
<div style={{
overflow: 'auto',
overflowX: 'hidden',
height: this.props.height + 'px',
padding: '5px'
overflow : 'auto',
overflowX : 'hidden',
height : this.props.height + 'px',
padding : '5px'
}}>
{this.props.children}
</div>
@@ -1,46 +1,47 @@
'use strict';

var React = require('react');
var React = require('react');

var ReactTabs = require('react-tabs');

var Tabs = React.createClass({

propTypes: {
initialTab: React.PropTypes.number,
onSelect: React.PropTypes.object
propTypes : {
initialTab : React.PropTypes.number,
onSelect : React.PropTypes.object,
children : React.PropTypes.element
},

getDefaultProps: function() {
getDefaultProps : function() {
return {
initialTab: 0
initialTab : 0
};
},

getInitialState: function() {
getInitialState : function() {
return {
selectedTab: this.props.initialTab
selectedTab : this.props.initialTab
};
},

componentDidMount: function() {
componentDidMount : function() {
this.handleCallbacks(this.state.selectedTab);
},

handleSelect: function(index) {
handleSelect : function(index) {
this.handleCallbacks(index);
this.setState({
selectedTab: index
selectedTab : index
});
},

handleCallbacks: function(index) {
handleCallbacks : function(index) {
if (this.props.onSelect && typeof this.props.onSelect[index] === 'function') {
this.props.onSelect[index]();
}
},

render: function() {
render : function() {
return (
<ReactTabs.Tabs
selectedIndex={this.state.selectedTab}
@@ -53,8 +54,8 @@ var Tabs = React.createClass({
});

module.exports = {
Tab: ReactTabs.Tab,
TabList: ReactTabs.TabList,
TabPanel: ReactTabs.TabPanel,
Tabs: Tabs
Tab : ReactTabs.Tab,
TabList : ReactTabs.TabList,
TabPanel : ReactTabs.TabPanel,
Tabs : Tabs
};
@@ -1,39 +1,31 @@
'use strict';

var React = require('react');
var $ = require('js/shims/jquery');
var ReactTooltip = require('react-tooltip');
var React = require('react');
var ReactTooltip = require('react-tooltip');

var TopBar = require('js/components/menu/topBar');
var BottomBar = require('js/components/menu/bottomBar');
var LeftSidebar = require('js/components/menu/leftSidebar');
var RightSidebar = require('js/components/menu/rightSidebar');
var Map = require('js/components/menu/map');
var Menu = require('js/components/menu');
var WindowManager = require('js/components/menu/windowManager');
var LeftSidebar = require('js/components/menu/leftSidebar');
var RightSidebar = require('js/components/menu/rightSidebar');
var Map = require('js/components/menu/map');
var Menu = require('js/components/menu');
var WindowManager = require('js/components/menu/windowManager');

var AboutWindow = require('js/components/window/about');
var EssentiaWindow = require('js/components/window/essentia');
var InviteWindow = require('js/components/window/invite');
var MailWindow = require('js/components/window/mail');
var NotesWindow = require('js/components/window/notes');
var OptionsWindow = require('js/components/window/options');
var PromotionsWindow = require('js/components/window/promotions');
var StatsWindow = require('js/components/window/stats');
var MailWindow = require('js/components/window/mail');
var OptionsWindow = require('js/components/window/options');
var StatsWindow = require('js/components/window/stats');

// This React component will be the main container of everything that appears on the screen.

var Window = React.createClass({
render: function() {
render : function() {
return (
<div
id="sidebarContainer"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%'
position : 'fixed',
top : 0,
left : 0,
width : '100%',
height : '100%'
}}
>

@@ -5,14 +5,13 @@ var Reflux = require('reflux');

var ServerRPCStore = require('js/stores/rpc/server');


var AboutTab = React.createClass({

mixins: [
mixins : [
Reflux.connect(ServerRPCStore, 'server')
],

render: function() {
render : function() {
return (
<div>
<h1>
@@ -8,14 +8,13 @@ var CreditsRPCStore = require('js/stores/rpc/stats/credits');

var CreditsSection = require('js/components/window/about/creditsSection');


var CreditsTab = React.createClass({

mixins: [
mixins : [
Reflux.connect(CreditsRPCStore, 'credits')
],

render: function() {
render : function() {
return (
<div>
<h1>
@@ -5,19 +5,19 @@ var _ = require('lodash');

var CreditsSection = React.createClass({

propTypes: {
header: React.PropTypes.string.isRequired,
names: React.PropTypes.arrayOf(React.PropTypes.string)
propTypes : {
header : React.PropTypes.string.isRequired,
names : React.PropTypes.arrayOf(React.PropTypes.string)
},

getDefaultProps: function() {
getDefaultProps : function() {
return {
header: '',
names: []
header : '',
names : []
};
},

render: function() {
render : function() {
return (
<div>
<strong>{this.props.header}</strong>
@@ -29,8 +29,8 @@ var CreditsSection = React.createClass({
<li
key={name}
style={{
listStyleType: 'disc',
marginLeft: 40
listStyleType : 'disc',
marginLeft : 40
}}
>
{name}
@@ -13,19 +13,18 @@ var Tabs = Tabber.Tabs;
var AboutTab = require('js/components/window/about/about');
var CreditsTab = require('js/components/window/about/credits');


var AboutWindow = React.createClass({
statics: {
windowOptions: {
title: 'About'
statics : {
windowOptions : {
title : 'About'
}
},

render: function() {
render : function() {
return (
<Tabs
onSelect={{
1: AboutActions.load
1 : AboutActions.load
}}
>
<TabList>
@@ -1,54 +1,55 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');

var CaptchaActions = require('js/actions/window/captcha');
var CaptchaActions = require('js/actions/window/captcha');
var WindowManagerActions = require('js/actions/menu/windowManager');

var CaptchaRPCStore = require('js/stores/rpc/captcha');
var CaptchaRPCStore = require('js/stores/rpc/captcha');

var Captcha = React.createClass({
propTypes: {
options: React.PropTypes.object.isRequired
propTypes : {
options : React.PropTypes.object.isRequired
},

mixins: [
mixins : [
Reflux.connect(CaptchaRPCStore, 'captcha')
],

statics: {
windowOptions: {
title: 'Verify Your Humanity',
width: 320,
height: 'auto'
statics : {
windowOptions : {
title : 'Verify Your Humanity',
width : 320,
height : 'auto'
}
},

componentDidUpdate: function(prevProps, prevState) {
componentDidUpdate : function(prevProps, prevState) {
if (prevState.captcha.url !== this.state.captcha.url) {
this.clearSolutionField();
}
},

onWindowShow: function() {
onWindowShow : function() {
this.clearSolutionField();
CaptchaActions.fetch();
},

onWindowHide: function() {
onWindowHide : function() {
this.clearSolutionField();
CaptchaActions.clear();
},

handleEnterKey: function(event) {
handleEnterKey : function(event) {
if (event.key === 'Enter') {
event.preventDefault();
this.onSolveClick();
}
},

onSolveClick: function() {
onSolveClick : function() {
var solution = this.refs.solution.value;
var success = this.props.options.success;

@@ -60,28 +61,28 @@ var Captcha = React.createClass({
}, this));
},

onRefreshClick: function() {
onRefreshClick : function() {
this.clearSolutionField();
CaptchaActions.refresh();
},

onCloseClick: function() {
onCloseClick : function() {
this.clearSolutionField();
WindowManagerActions.hideWindow(this.props.options.id);
},

clearSolutionField: function() {
clearSolutionField : function() {
this.refs.solution.value = '';
},

render: function() {
render : function() {
return (
<div>
<div
style={{
backgroundImage: 'url(' + this.state.captcha.url + ')',
width: 300,
height: 80
backgroundImage : 'url(' + this.state.captcha.url + ')',
width : 300,
height : 80
}}
/>

@@ -95,7 +96,7 @@ var Captcha = React.createClass({
placeholder="Captcha Solution"
style={{
// Magic number to make it the same width as the image.
width: 140
width : 140
}}
/>

@@ -11,32 +11,31 @@ var EmpireRPCStore = require('js/stores/rpc/empire');

var BoostCountdown = require('js/components/window/essentia/boostCountdown');


var Boost = React.createClass({
mixins: [
mixins : [
Reflux.connect(BoostsRPCStore, 'boosts'),
Reflux.connect(EmpireRPCStore, 'empire')
],

propTypes: {
type: React.PropTypes.string.isRequired,
iconName: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired
propTypes : {
type : React.PropTypes.string.isRequired,
iconName : React.PropTypes.string.isRequired,
description : React.PropTypes.string.isRequired
},

getDefaultProps: function() {
getDefaultProps : function() {
return {
type: '',
iconName: '',
description: ''
type : '',
iconName : '',
description : ''
};
},

handleBoost: function() {
handleBoost : function() {
EssentiaActions.boost(this.props.type, this.refs.weeks.value);
},

renderButton: function() {
renderButton : function() {
var iconClassName = classnames('icon', this.props.iconName);

return (
@@ -52,7 +51,7 @@ var Boost = React.createClass({
);
},

render: function() {
render : function() {
return (
<div>
<div className="ui action input">
@@ -63,7 +62,7 @@ var Boost = React.createClass({
title="Weeks to boost for"
disabled={this.state.empire.essentia < 35}
style={{
width: 30
width : 30
}}
></input>
{
@@ -3,22 +3,21 @@
var React = require('react');
var classnames = require('classnames');


var BoostCountdown = React.createClass({
propTypes: {
boost: React.PropTypes.object.isRequired
propTypes : {
boost : React.PropTypes.object.isRequired
},

getDefaultProps: function() {
getDefaultProps : function() {
return {
boost: {
ms: 0,
display: ''
boost : {
ms : 0,
display : ''
}
};
},

render: function() {
render : function() {
if (this.props.boost && this.props.boost.ms > 0) {
var day = 1000 * 60 * 60 * 24; // Milliseconds per day
var ms = this.props.boost.ms;
@@ -7,13 +7,12 @@ var EmpireRPCStore = require('js/stores/rpc/empire');

var Boost = require('js/components/window/essentia/boost');


var BoostsTab = React.createClass({
mixins: [
mixins : [
Reflux.connect(EmpireRPCStore, 'empire')
],

render: function() {
render : function() {
return (
<div className="ui grid">

@@ -1,7 +1,6 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');

var EssentiaActions = require('js/actions/window/essentia');
@@ -10,29 +9,30 @@ var WindowManagerActions = require('js/actions/menu/windowManager');
var windowTypes = require('js/windowTypes');

var SessionStore = require('js/stores/session');
var EssentiaRPCStore = require('js/stores/rpc/empire/essentia').listen(_.noop);
var EssentiaRPCStore = require('js/stores/rpc/empire/essentia');

EssentiaRPCStore.listen(_.noop);

var GetEssentiaTab = React.createClass({

purchase: function() {
purchase : function() {
var url = '/pay?session_id=' + SessionStore.getData();
window.open(url, 'essentiaPayment', 'status=0,toolbar=0,location=0,menubar=0,resizable=1,scrollbars=1,height=550,width=600,directories=0');
},

redeem: function() {
redeem : function() {
var node = this.refs.code;
EssentiaActions.redeemCode(node.value);
node.value = '';
},

invite: function() {
invite : function() {
WindowManagerActions.addWindow(windowTypes.invite);
},

render: function() {
render : function() {
return (
<div style={{textAlign: 'center'}}>
<div style={{textAlign : 'center'}}>
<div className="ui large green labeled icon button" onClick={this.purchase}>
<i className="payment icon"></i>
Purchase Essentia
@@ -1,7 +1,6 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');

var Tabber = require('js/components/tabber');
var Tab = Tabber.Tab;
@@ -14,20 +13,19 @@ var EssentiaActions = require('js/actions/window/essentia');
var BoostsTab = require('js/components/window/essentia/boostsTab');
var GetEssentiaTab = require('js/components/window/essentia/getEssentiaTab');


var EssentiaWindow = React.createClass({
statics: {
windowOptions: {
title: 'Essentia',
width: 600
statics : {
windowOptions : {
title : 'Essentia',
width : 600
}
},

render: function() {
render : function() {
return (
<Tabs
onSelect={{
0: EssentiaActions.loadBoosts
0 : EssentiaActions.loadBoosts
}}
>
<TabList>
@@ -1,52 +1,52 @@
'use strict';

var React = require('react');
var $ = require('js/shims/jquery');
var React = require('react');
var $ = require('js/shims/jquery');

var server = require('js/server');

var InviteWindow = React.createClass({
invite: function() {
invite : function() {
var email = this.refs.email.value;
var message = this.refs.message.value;

server.call({
module: 'empire',
method: 'invite_friend',
params: [email, message],
success: function() {
alert('Sent!');
module : 'empire',
method : 'invite_friend',
params : [email, message],
success : function() {
window.alert('Sent!');
}
});
},

genLink: function() {
genLink : function() {
server.call({
module: 'empire',
method: 'get_invite_friend_url',
params: [],
success: function(result) {
module : 'empire',
method : 'get_invite_friend_url',
params : [],
success : function(result) {
$(this.refs.referral).val(result.referral_url);
},
scope: this
scope : this
});
},

componentDidUpdate: function() {
componentDidUpdate : function() {
var $el = $(this.refs.referral);

$el.off().click(function() {
$(this).select();
});
},

statics: {
windowOptions: {
title: 'Invite A Friend'
statics : {
windowOptions : {
title : 'Invite A Friend'
}
},

render: function() {
render : function() {
var defaultMessage = [
"I'm having a great time with this new game called 'Lacuna Expanse'.",
'Come play with me!'
@@ -56,12 +56,12 @@ var InviteWindow = React.createClass({
<div>
<div className="ui form">
<div className="field">
<label style={{color: '#ffffff'}}>Email</label>
<label style={{color : '#ffffff'}}>Email</label>
<input type="text" placeholder="someone@example.com" ref="email"></input>
</div>

<div className="field">
<label style={{color: '#ffffff'}}>Message</label>
<label style={{color : '#ffffff'}}>Message</label>
<textarea ref="message" defaultValue={defaultMessage}></textarea>
</div>

@@ -1,15 +1,15 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');

var MailWindowStore = require('js/stores/window/mail');

var MailWindow = React.createClass({
mixins: [
mixins : [
Reflux.connect(MailWindowStore, 'show')
],
render: function() {
render : function() {
if (this.state.show) {
YAHOO.lacuna.Messaging.show();
}
@@ -12,19 +12,22 @@ var NotesRPCStore = require('js/stores/rpc/body/notes');
var Panel = require('js/components/panel');

var NotesWindow = React.createClass({
mixins: [
mixins : [
Reflux.connect(NotesWindowStore, 'show'),
Reflux.connect(NotesRPCStore, 'notes')
],
handleClose: function() {
handleClose : function() {
// TODO We need to get the body ID from the NotesWindowStore
BodyActions.rpcBodySetColonyNotes({ bodyId: 16412, notes: this.state.notes });
BodyActions.rpcBodySetColonyNotes({
bodyId : 16412,
notes : this.state.notes
});
NotesActions.hide();
},
handleChange: function(e) {
handleChange : function(e) {
NotesActions.notesSet(e.target.value);
},
render: function() {
render : function() {
return (
<Panel show={this.state.show} onClose={this.handleClose} title="Notes">
<div className="ui attached info message">
@@ -37,7 +40,7 @@ var NotesWindow = React.createClass({
value={this.state.notes}
onChange={this.handleChange}
style={{
height: '450px'
height : '450px'
}}>
</textarea>
</div>
@@ -1,15 +1,15 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');

var OptionsWindowStore = require('js/stores/window/options');

var OptionsWindow = React.createClass({
mixins: [
mixins : [
Reflux.connect(OptionsWindowStore, 'show')
],
render: function() {
render : function() {
if (this.state.show) {
YAHOO.lacuna.Profile.show();
}
@@ -1,23 +1,23 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');
var React = require('react');
var Reflux = require('reflux');
var _ = require('lodash');

var ServerRPCStore = require('js/stores/rpc/server');

var Promotion = React.createClass({
propTypes: {
promotion: React.PropTypes.object.isRequired
propTypes : {
promotion : React.PropTypes.object.isRequired
},

getDefaultProps: function() {
getDefaultProps : function() {
return {
promotion: {}
promotion : {}
};
},

render: function() {
render : function() {
return (
<div className="text item">
<h2>{this.props.promotion.header}</h2>
@@ -27,7 +27,7 @@ var Promotion = React.createClass({
<br /><br />

<span style={{
textDecoration: 'underline'
textDecoration : 'underline'
}}>
Ends {this.props.promotion.ends}
</span>
@@ -37,22 +37,22 @@ var Promotion = React.createClass({
});

var PromotionsWindow = React.createClass({
mixins: [
mixins : [
Reflux.connect(ServerRPCStore, 'server')
],

statics: {
windowOptions: {
title: 'Promotions',
height: 'auto',
width: 300
statics : {
windowOptions : {
title : 'Promotions',
height : 'auto',
width : 300
}
},

render: function() {
render : function() {
return (
<div className="ui vertical menu" style={{
width: '100%'
width : '100%'
}}>
{
_.map(this.state.server.promotions, function(promotion) {
@@ -1,27 +1,27 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');

var ServerTimeRPCStore = require('js/stores/rpc/server/time');
var ServerRPCStore = require('js/stores/rpc/server');
var TickerStore = require('js/stores/ticker');
var ServerTimeRPCStore = require('js/stores/rpc/server/time');
var ServerRPCStore = require('js/stores/rpc/server');
var TickerStore = require('js/stores/ticker');

var ServerClockWindow = React.createClass({
mixins: [
mixins : [
Reflux.connect(TickerStore, 'ticker'),
Reflux.connect(ServerRPCStore, 'server')
],

statics: {
windowOptions: {
title: 'Server Clock',
width: 320,
height: 50
statics : {
windowOptions : {
title : 'Server Clock',
width : 320,
height : 50
}
},

render: function() {
render : function() {
return (
<div>
<p><strong>Server:</strong> {ServerTimeRPCStore.getCurrentServerTimeFormatted()}</p>
@@ -6,49 +6,48 @@ var SitterManagerActions = require('js/actions/window/sitterManager');

var vex = require('js/vex');


var AuthorizeEmpiresTab = React.createClass({

authorizeAllies: function() {
authorizeAllies : function() {
vex.confirm({
message: 'Are you sure you want to authorize all members of your alliance?',
callback: function(value) {
message : 'Are you sure you want to authorize all members of your alliance?',
callback : function(value) {
if (value) {
SitterManagerActions.authorizeAllies();
}
}
});
},

authorizeAlliance: function() {
authorizeAlliance : function() {
var name = this.refs.alliance.value;

vex.confirm({
message: 'Are you sure you want to authorize all members of ' + name + '?',
callback: function(value) {
message : 'Are you sure you want to authorize all members of ' + name + '?',
callback : function(value) {
if (value) {
SitterManagerActions.authorizeAlliance(name);
}
}
});
},

authorizeEmpire: function() {
authorizeEmpire : function() {
var name = this.refs.empire.value;

vex.confirm({
message: 'Are you sure you want to authorize ' + name + '?',
callback: function(value) {
message : 'Are you sure you want to authorize ' + name + '?',
callback : function(value) {
if (value) {
SitterManagerActions.authorizeEmpire(name);
}
}
});
},

render: function() {
render : function() {
return (
<div style={{textAlign: 'center'}}>
<div style={{textAlign : 'center'}}>
<div
className="ui green large labeled icon button"
onClick={this.authorizeAllies}
@@ -12,28 +12,27 @@ var SitterListItem = require('js/components/window/sitterManager/sitterLis

var vex = require('js/vex');


var CurrentSittersTab = React.createClass({
mixins: [
mixins : [
Reflux.connect(SittersRPCStore, 'sitters')
],

reauthorizeAll: function() {
reauthorizeAll : function() {
SitterManagerActions.reauthorizeAll();
},

deauthorizeAll: function() {
deauthorizeAll : function() {
vex.confirm({
message: "Are you sure you want to revoke everyone's access to your empire?",
callback: function(value) {
message : "Are you sure you want to revoke everyone's access to your empire?",
callback : function(value) {
if (value) {
SitterManagerActions.deauthorizeAll();
}
}
});
},

render: function() {
render : function() {
return (
<div>

@@ -55,7 +54,7 @@ var CurrentSittersTab = React.createClass({
<div
className="ui divided list"
style={{
marginTop: 20
marginTop : 20
}}
>
{
@@ -5,7 +5,6 @@ var React = require('react');
var SitterManagerActions = require('js/actions/window/sitterManager');

var ReactTabs = require('react-tabs');
var ReactTooltip = require('react-tooltip');
var Tab = ReactTabs.Tab;
var Tabs = ReactTabs.Tabs;
var TabList = ReactTabs.TabList;
@@ -14,32 +13,31 @@ var TabPanel = ReactTabs.TabPanel;
var AuthorizeEmpiresTab = require('js/components/window/sitterManager/authorizeEmpiresTab');
var CurrentSittersTab = require('js/components/window/sitterManager/currentSittersTab');


var SitterManagerWindow = React.createClass({

statics: {
windowOptions: {
title: 'Manager Sitters'
statics : {
windowOptions : {
title : 'Manager Sitters'
}
},

onWindowShow: function() {
onWindowShow : function() {
SitterManagerActions.load();
},

getInitialState: function() {
getInitialState : function() {
return {
selectedIndex: 0
selectedIndex : 0
};
},

handleSelect: function(index) {
handleSelect : function(index) {
this.setState({
selectedIndex: index
selectedIndex : index
});
},

render: function() {
render : function() {
return (
<Tabs
selectedIndex={this.state.selectedIndex}
@@ -6,37 +6,36 @@ var SitterManagerActions = require('js/actions/window/sitterManager');

var vex = require('js/vex');


var SitterListItem = React.createClass({

propTypes: {
sitter: React.PropTypes.object
propTypes : {
sitter : React.PropTypes.object
},

getDefaultProps: function() {
getDefaultProps : function() {
return {
sitter: {}
sitter : {}
};
},

reauthorize: function() {
reauthorize : function() {
SitterManagerActions.authorizeEmpire(this.props.sitter.name);
},

deauthorize: function() {
deauthorize : function() {
var s = this.props.sitter;

vex.confirm({
message: 'Are you sure you want to remove ' + s.name + "'s access to your empire?",
callback: function(value) {
message : 'Are you sure you want to remove ' + s.name + "'s access to your empire?",
callback : function(value) {
if (value) {
SitterManagerActions.deauthorizeEmpire(s.id);
}
}
});
},

render: function() {
render : function() {
return (
<div className="item">
<div className="ui right floated compact buttons">
@@ -49,7 +48,7 @@ var SitterListItem = React.createClass({
</div>

<div className="content aligned">
<div className="header" style={{color: '#ffffff'}}>
<div className="header" style={{color : '#ffffff'}}>
{this.props.sitter.name}
</div>

@@ -1,15 +1,15 @@
'use strict';

var React = require('react');
var Reflux = require('reflux');
var React = require('react');
var Reflux = require('reflux');

var StatsWindowStore = require('js/stores/window/stats');

var StatsWindow = React.createClass({
mixins: [
mixins : [
Reflux.connect(StatsWindowStore, 'show')
],
render: function() {
render : function() {
if (this.state.show) {
YAHOO.lacuna.Stats.show();
}
@@ -2,23 +2,23 @@

YAHOO.namespace('lacuna');

var React = require('react');
var ReactDom = require('react-dom');
var _ = require('lodash');
var ReactTooltip = require('react-tooltip');
var React = require('react');
var ReactDom = require('react-dom');
var _ = require('lodash');
var ReactTooltip = require('react-tooltip');

var KeyboardActions = require('js/actions/keyboard');
var MenuActions = require('js/actions/menu');
var SessionActions = require('js/actions/session');
var TickerActions = require('js/actions/ticker');
var UserActions = require('js/actions/user');
var KeyboardActions = require('js/actions/keyboard');
var MenuActions = require('js/actions/menu');
var SessionActions = require('js/actions/session');
var TickerActions = require('js/actions/ticker');
var UserActions = require('js/actions/user');

var Window = require('js/components/window');
var Window = require('js/components/window');

var BodyRPCStore = require('js/stores/rpc/body');
var BodyRPCStore = require('js/stores/rpc/body');

var WindowManagerActions = require('js/actions/menu/windowManager');
var windowTypes = require('js/windowTypes');
var windowTypes = require('js/windowTypes');

if (typeof YAHOO.lacuna.Game === 'undefined' || !YAHOO.lacuna.Game) {

@@ -14,16 +14,14 @@
}
if (window.history.replaceState) {
window.history.replaceState({}, document.title, l.protocol + '//' + l.host + l.pathname + l.search);
}
else if (l.hash != '') {
} else if (l.hash !== '') {
l.hash = '';
}

var loader = new YAHOO.util.YUILoader({
base: '//ajax.googleapis.com/ajax/libs/yui/2.8.2r1/build/',
// filter: 'MIN',
allowRollup: true,
combine: false
base : '//ajax.googleapis.com/ajax/libs/yui/2.8.2r1/build/',
allowRollup : true,
combine : false
});

// List of YUI2 components that need to be loaded.
@@ -52,12 +50,10 @@

loader.onSuccess = function(o) {


// /////////////////////////////////////////////////////////////////////////////
// WARNING: IF YOU CHANGE THE ORDER OF THESE, THINGS WILL NOT LOAD PROPERLY! //
// /////////////////////////////////////////////////////////////////////////////


// RPC and core stuff
require('js-yui/library');
require('js-yui/textboxList');
@@ -119,7 +115,6 @@
require('js-yui/module/policeStation');
require('js-yui/module/stationCommand');


// Menu stuff
require('js-yui/mapPlanet');
require('js-yui/messaging');
@@ -1,7 +1,6 @@
'use strict';

var StarmapActions = require('js/actions/starmap');
var SessionStore = require('js/stores/session');
var server = require('js/server');

// Convert a user request for a get_star_chunk rpc into a server request
@@ -11,14 +10,15 @@ StarmapActions.rpcGetStarChunk.listen(function(o) {
console.log('Starmap Action: rpcStarChunk [' + o.xChunk + '][' + o.yChunk + ']');

server.call({
module: 'map',
method: 'get_star_chunk',
params: [{x_chunk: o.xChunk, y_chunk: o.yChunk}],
success: function() {
module : 'map',
method : 'get_star_chunk',
params : [{
x_chunk : o.xChunk,
y_chunk : o.yChunk
}],
success : function() {
console.log('Starmap Action: rpcStarChunk REPLY');
StarmapActions.getStarChunk();
}
});
});