Add classnames package, use that for a few components that were manually constructing classnames.

bemani/frontend/static/classnames.min.js

@@ -0,0 +1 @@
+!function(){"use strict";var f={}.hasOwnProperty;function s(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var o,r=typeof n;if("string"==r||"number"==r)e.push(n);else if(Array.isArray(n))!n.length||(o=s.apply(null,n))&&e.push(o);else if("object"==r)if(n.toString===Object.prototype.toString||n.toString.toString().includes("[native code]"))for(var i in n)f.call(n,i)&&n[i]&&e.push(i);else e.push(n.toString())}}return e.join(" ")}"undefined"!=typeof module&&module.exports?module.exports=s.default=s:"function"==typeof define&&"object"==typeof define.amd&&define.amd?define("classnames",[],function(){return s}):window.classNames=s}();

bemani/frontend/static/components/labelledsection.react.js

@@ -2,18 +2,13 @@
 
 var LabelledSection = createReactClass({
     render: function() {
-        var classname = "labelledsection"
-        if (this.props.vertical) {
-            classname = classname + " vertical";
-        } else {
-            classname = classname + " horizontal";
-        }
-        if (this.props.className) {
-            classname = classname + " " + this.props.className;
-        }
         return (
             <div
-                className={classname}
+                className={classNames(
+                    "labelledsection",
+                    {"vertical": this.props.vertical, "horizontal": !this.props.vertical},
+                    this.props.className
+                )}
             >
                 <div className="label">{this.props.label}</div>
                 <div className="content">{this.props.children}</div>

bemani/frontend/static/components/nav.react.js

@@ -2,12 +2,6 @@
 
 var Nav = createReactClass({
     render: function() {
-        var cls = 'nav';
-        if (this.props.active) {
-            cls += ' active';
-        }
-        cls += " " + this.props.title;
-
         var title = (
            <span>
                 {this.props.title}
@@ -19,7 +13,7 @@ var Nav = createReactClass({
         );
         return (
             <Button
-                className={cls}
+                className={classNames("nav", {"active": this.props.active}, this.props.title)}
                 disabled={this.props.disabled}
                 style={this.props.style}
                 onClick={function(event) {

bemani/frontend/static/components/slider.react.js

@@ -4,7 +4,7 @@ var Slider = createReactClass({
     render: function() {
         return (
             <div
-                className={"slider " + (this.props.value ? "on " : "off ") + this.props.className}
+                className={classNames("slider", this.props.value ? "on" : "off", this.props.className)}
                 onClick={function(event) {
                     event.preventDefault();
                     event.stopPropagation();

bemani/frontend/templates/base.html

@@ -17,6 +17,7 @@
         <script type="text/javascript" src="{{ url_for('static', filename='jquery-confirm.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='jquery.touchSwipe.min.js') }}"></script>
         <script type="text/javascript" src="{{ url_for('static', filename='tinynav.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='classnames.min.js') }}"></script>
         <script defer type="text/javascript" src="{{ url_for('static', filename='react.min.js') }}"></script>
         <script defer type="text/javascript" src="{{ url_for('static', filename='react-dom.min.js') }}"></script>
         <script defer type="text/javascript" src="{{ url_for('static', filename='create-react-class.min.js') }}"></script>