Add space between bytes

src/app/components/results/BinaryStringView.jsx

@@ -2,14 +2,7 @@ import React from 'react';
 
 export default class BinaryStringView extends React.Component {
     render() {
-        const str = this.props.binaryString;
-        const chars = str.split('');
-        const allowFlipBits = this.props.allowFlipBits || false;
-        const css = allowFlipBits ? ' flipable' : ''
-        const classNames = { '0': `zero${css}`, '1' : `one ${css}` };
-        const children = chars.map((c, i) => <span className={classNames[c]} key={i} onClick={e => this.onBitClick(i, e)}>{c}</span>);
-        
-        return <span>{children}</span>
+        return <span>{this.getChildren()}</span>
     }
 
     onBitClick(index, e) {
@@ -21,4 +14,33 @@ export default class BinaryStringView extends React.Component {
             this.props.onFlipBit(index);
         }
     }
+
+    getChildren() {
+        var bits = this.createBits(this.props.binaryString.split(''));
+        
+        if(this.props.emphasizeBytes) {
+            return this.splitIntoBytes(bits);
+        }
+
+        return bits;
+    }
+
+    createBits(bitChars) {
+        const allowFlipBits = this.props.allowFlipBits || false;
+        const css = allowFlipBits ? ' flipable' : ''
+        const classNames = { '0': `zero${css}`, '1' : `one ${css}` };
+        
+        return bitChars.map((c, i) => <span className={classNames[c]} key={i} onClick={e => this.onBitClick(i, e)}>{c}</span>);
+    }
+
+    splitIntoBytes(bits) {
+        const bytes = [];
+
+        var key = 0;
+        while(bits.length > 0) {
+            bytes.push(<span key={key++} className="byte">{bits.splice(0, 8)}</span>);
+        }
+        
+        return bytes;
+    }
 }

src/app/components/results/BitwiseOperationExpressionView.jsx

@@ -23,13 +23,13 @@ export default class BitwiseOperationEpxressionView extends React.Component {
 
         if(expr instanceof expression.SingleOperandExpression) {
             const m = BitwiseExpressionViewModel.buildNot(expr, { emphasizeBytes: this.props.emphasizeBytes });
-            return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} maxNumberOfBits={m.maxNumberOfBits} />);
+            return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
         }
 
         if(expr instanceof expression.MultipleOperandsExpression) {
             const m = BitwiseExpressionViewModel.buildMultiple(expr, { emphasizeBytes: this.props.emphasizeBytes });
             console.log('Render model', m);
-            return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} maxNumberOfBits={m.maxNumberOfBits} />);
+            return m.items.map((itm, i) => <ExpressionRow key={i} {...itm} emphasizeBytes={this.props.emphasizeBytes} maxNumberOfBits={m.maxNumberOfBits} />);
         }
 
         return null;
@@ -38,13 +38,13 @@ export default class BitwiseOperationEpxressionView extends React.Component {
 
 class ExpressionRow extends React.Component {
     render() {
-        const { sign, label, bin, other, css, maxNumberOfBits } = this.props;
+        const { sign, label, bin, other, css, maxNumberOfBits, emphasizeBytes } = this.props;
         
         return <tr className={css}>
                     <td className="sign">{sign}</td>
                     <td className="label">{label}</td>
                     <td className="bin">
-                        <BinaryStringView binaryString={formatter.padLeft(bin, maxNumberOfBits, '0')} allowFlipBits={false}/>
+                        <BinaryStringView emphasizeBytes={emphasizeBytes} binaryString={formatter.padLeft(bin, maxNumberOfBits, '0')} allowFlipBits={false}/>
                     </td>
                     <td className="other">{other}</td>
                 </tr>;

src/app/components/results/DisplayResultView.jsx

@@ -23,7 +23,9 @@ export default class DisplayResult extends React.Component {
     }
 
     renderUnknown() {
-        return <div className="error">Sorry, i don't know what <strong>{this.props.input}</strong> is :(</div>
+        return <div className="result">
+                    <div className="error">¯\_(ツ)_/¯ Sorry, i don't know what <strong>{this.props.input}</strong> is</div>
+               </div>
     }
 
     findResultComponent(result) {

src/app/components/results/HelpResultView.jsx

@@ -35,7 +35,6 @@ export default class HelpResultView extends React.Component {
                                         <li><code>&lt;&lt;</code> — left shift</li>
                                         <li><code>&gt;&gt;</code> — sign propagating right shift</li>
                                         <li><code>&gt;&gt;&gt;</code> — zero-fill right shift</li>
-
                                     </ul>
                                 </p>
                           </div>

src/app/components/results/ListOfNumbersExpressionView.jsx

@@ -8,7 +8,7 @@ export default class ListOfNumersExpressionView extends React.Component {
     render() {
         const expr = this.props.expression;
         const maxBitsLegnth = BitwiseExpressionViewModel.getNumberOfBits(expr.maxBitsLegnth, this.props.emphasizeBytes);
-        const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={maxBitsLegnth} />);
+        const numberRows = expr.numbers.map((n, i) => <OperandView key={i} operand={n} maxBitsLegnth={maxBitsLegnth} emphasizeBytes={this.props.emphasizeBytes} />);
         return <table className="expression">
                         <tbody>
                             {numberRows}
@@ -28,7 +28,7 @@ class OperandView extends React.Component {
 
         return <tr data-kind={op.kind}>
                     <td className="label">{op.input}</td>
-                    <td className="bin"><BinaryStringView binaryString={binaryString} allowFlipBits={true} onFlipBit={e => this.flipBit(e)} /></td>
+                    <td className="bin"><BinaryStringView emphasizeBytes={this.props.emphasizeBytes} binaryString={binaryString} allowFlipBits={true} onFlipBit={e => this.flipBit(e)} /></td>
                     <td className="other">{op.other}</td>
                 </tr>;
     };