Merge pull request #201 from domino14/staging

Add customizability.

djAerolith/current_version.py

@@ -1 +1 @@
-CURRENT_VERSION = '0.9.0.1'
+CURRENT_VERSION = '0.9.0.2'

djAerolith/wordwalls/static/js/wordwalls/reactapp/app.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import Styling from './style';
 import WordwallsApp from './wordwalls_app';
 
 class App {
@@ -10,41 +11,10 @@ class App {
    */
   static initialize(options) {
     // WordwallsApp will be the holder of state.
-    let style;
     let listName;
     let autoSave;
 
-    if (options.addlParams.style != null) {
-      style = JSON.parse(options.addlParams.style);
-      // Add default options that may not have been there.
-      if (style.tc.showChips !== false) {
-        style.tc.showChips = true;
-      }
-      if (!style.tc.selection) {
-        style.tc.selection = '1';
-      }
-      if (!style.tc.customOrder) {
-        style.tc.customOrder = '';
-      }
-      style.bc.hideLexiconSymbols = style.bc.hideLexiconSymbols || false;
-    } else {
-      // Default style.
-      style = {
-        tc: {
-          on: true,
-          selection: '1',
-          customOrder: '',
-          blankCharacter: '?',
-          font: 'mono',
-          showChips: true,
-          bold: false,
-        },
-        bc: {
-          showBorders: false,
-          hideLexiconSymbols: false,
-        },
-      };
-    }
+    const style = new Styling(options.addlParams.style);
     // Get the list name from one of two places.
     if (options.addlParams.saveName) {
       listName = options.addlParams.saveName;

djAerolith/wordwalls/static/js/wordwalls/reactapp/background.js

@@ -0,0 +1,26 @@
+
+/**
+ * Return a url string that can be given to a style.
+ * @param {string} option The name of a background.
+ */
+function backgroundURL(option) {
+  let backgroundImageUrl;
+  if (option === '') {
+    backgroundImageUrl = '';
+  } else {
+    backgroundImageUrl = {
+      pool_table: '/static/img/wordwalls/table_noborder.png',
+      canvas: '/static/img/wordwalls/canvas.png',
+      pink_rice: '/static/img/aerolith/pink_rice.png',
+      scribble_light: '/static/img/aerolith/scribble_light.png',
+      cork_wallet: '/static/img/aerolith/cork-wallet.png',
+      hexellence: '/static/img/aerolith/hexellence.png',
+      black_linen: '/static/img/wordwalls/black-Linen.png',
+    }[option];
+  }
+  return `url("${backgroundImageUrl}")`;
+}
+
+
+export default backgroundURL;
+

djAerolith/wordwalls/static/js/wordwalls/reactapp/challenge_results.jsx

@@ -78,7 +78,7 @@ class ResultsComponent extends React.Component {
                 height: '500px',
               }}
             >
-              <table className="table table-condensed table-bordered">
+              <table className="table table-condensed">
                 <thead>
                   <tr>
                     <th>#</th>

djAerolith/wordwalls/static/js/wordwalls/reactapp/forms/select.jsx

@@ -3,7 +3,7 @@
 import React from 'react';
 
 const Select = (props) => {
-  const inputColSizeClass = `col-lg-${props.colSize}`;
+  const inputColSizeClass = `col-md-${props.colSize}`;
   const options = [];
   props.options.forEach((element, idx) =>
     options.push(<option
@@ -33,7 +33,7 @@ Select.propTypes = {
     value: React.PropTypes.string,
     displayValue: React.PropTypes.string,
   })),
-  colSize: React.PropTypes.string,
+  colSize: React.PropTypes.number,
   label: React.PropTypes.string,
   selectedValue: React.PropTypes.string,
   onChange: React.PropTypes.func,

djAerolith/wordwalls/static/js/wordwalls/reactapp/forms/text_input.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 const TextInput = (props) => {
-  const inputColSizeClass = `col-lg-${props.colSize}`;
+  const inputColSizeClass = `col-md-${props.colSize}`;
   return (
     <div className="form-group">
       <div className="row">

djAerolith/wordwalls/static/js/wordwalls/reactapp/game_tile.jsx

@@ -57,11 +57,21 @@ function colorFromTileStyle(style) {
 const GameTile = (props) => {
   let letter;
   let fontSize;
+  let fontFamily;
+  fontSize = props.fontSize;
   const transform = `translate(${props.x},${props.y})`;
-  const fontFamily = '"Courier New",monospace';
+  if (props.font === 'mono') {
+    fontFamily = '"Courier New",monospace';
+    fontSize *= 1.1;
+  } else if (props.font === 'sans') {
+    fontFamily = 'Arial,Geneva,Helvetica,Helv,sans-serif';
+  } else if (props.font === 'sansmono') {
+    fontFamily = 'Monaco,Consolas,"Ubuntu Mono",monospace';
+  }
+  const fontWeight = props.bold ? 'bold' : 'normal';
   const color = colorFromTileStyle(props.tileStyle);
   letter = props.letter;
-  fontSize = props.fontSize;
+
   switch (letter) {
     case '1':
       letter = 'CH';
@@ -99,6 +109,7 @@ const GameTile = (props) => {
         textAnchor="middle"
         dominantBaseline="central"
         fontFamily={fontFamily}
+        fontWeight={fontWeight}
         fontSize={`${fontSize}%`}
         stroke={color.textColor}
         fill={color.textColor}
@@ -113,6 +124,8 @@ GameTile.propTypes = {
   letter: React.PropTypes.string,
   fontSize: React.PropTypes.number,
   tileStyle: React.PropTypes.string,
+  font: React.PropTypes.string,
+  bold: React.PropTypes.bool,
   x: React.PropTypes.number,
   y: React.PropTypes.number,
 };

djAerolith/wordwalls/static/js/wordwalls/reactapp/gameboard.jsx

@@ -1,84 +1,44 @@
 import React from 'react';
 import Immutable from 'immutable';
 
-import WordwallsQuestion from './wordwalls_question';
 import Solutions from './solutions';
+import Styling from './style';
+import SVGBoard from './svg_board';
 
-class GameBoard extends React.Component {
-  render() {
-    const questions = [];
-    // xSize and ySize are the size that each question object takes
-    // up.
-    const xSize = this.props.width / this.props.gridWidth;
-    const ySize = this.props.height / this.props.gridHeight;
-    // curQuestions is an Immutable List of Maps
-    this.props.curQuestions.forEach((question, idx) => {
-      // Calculate top left X, Y based on dimensions.
-      const gridX = (idx % this.props.gridWidth) * xSize;
-      const gridY = Math.floor(idx / this.props.gridWidth) * ySize;
-      if (idx >= this.props.gridWidth * this.props.gridHeight) {
-        return;
-      }
-      // Only push questions that will fit on the game board.
-      questions.push(
-        <WordwallsQuestion
-          displayStyle={{
-            tilesOn: this.props.displayStyle.tc.on,
-            tileStyle: this.props.displayStyle.tc.selection,
-            blankCharacter: this.props.displayStyle.tc.blankCharacter,
-            font: this.props.displayStyle.tc.font,
-            showChips: this.props.displayStyle.tc.showChips,
-            bold: this.props.displayStyle.tc.bold,
-            showBorders: this.props.displayStyle.bc.showBorders,
-          }}
-          letters={question.get('displayedAs')}
-          key={idx}
-          qNumber={idx}
-          words={question.get('wMap')}
-          gridX={gridX}
-          gridY={gridY}
-          ySize={ySize}
-          xSize={xSize}
-          onShuffle={this.props.onShuffle}
-        />);
-    });
-
-    if (this.props.gameGoing || this.props.numberOfRounds === 0) {
-      return (
-        // Prevent default on mouse down to prevent taking focus in
-        // case of misclick.
-        <svg
-          className="gameboard"
-          onMouseDown={(e) => { e.preventDefault(); }}
-          width={this.props.width}
-          height={this.props.height}
-        >
-          {questions}
-        </svg>
-      );
-    }
-
+const GameBoard = (props) => {
+  if (props.gameGoing || props.numberOfRounds === 0) {
     return (
-      <Solutions
-        questions={this.props.origQuestions}
-        answeredByMe={this.props.answeredByMe}
-        totalWords={this.props.totalWords}
-        height={this.props.height}
-        markMissed={this.props.markMissed}
-        showLexiconSymbols={!this.props.displayStyle.bc.hideLexiconSymbols}
+      // Prevent default on mouse down to prevent taking focus in
+      // case of misclick.
+      <SVGBoard
+        onShuffle={props.onShuffle}
+        displayStyle={props.displayStyle}
+        width={props.width}
+        height={props.height}
+        gridWidth={props.gridWidth}
+        gridHeight={props.gridHeight}
+        questions={props.curQuestions}
       />
     );
   }
-}
+
+  return (
+    <Solutions
+      questions={props.origQuestions}
+      answeredByMe={props.answeredByMe}
+      totalWords={props.totalWords}
+      height={props.height}
+      markMissed={props.markMissed}
+      showLexiconSymbols={!props.displayStyle.hideLexiconSymbols}
+    />
+  );
+};
 
 GameBoard.propTypes = {
   numberOfRounds: React.PropTypes.number,
   curQuestions: React.PropTypes.instanceOf(Immutable.List),
   origQuestions: React.PropTypes.instanceOf(Immutable.OrderedMap),
-  displayStyle: React.PropTypes.shape({
-    tc: React.PropTypes.object,
-    bc: React.PropTypes.object,
-  }),
+  displayStyle: React.PropTypes.instanceOf(Styling),
   totalWords: React.PropTypes.number,
   answeredByMe: React.PropTypes.arrayOf(
     React.PropTypes.instanceOf(Immutable.Map)),

djAerolith/wordwalls/static/js/wordwalls/reactapp/question_text.jsx

@@ -7,6 +7,8 @@ const QuestionText = (props) => {
     fontFamily = '"Courier New",monospace';
   } else if (props.font === 'sans') {
     fontFamily = 'Arial,Geneva,Helvetica,Helv,sans-serif';
+  } else if (props.font === 'sansmono') {
+    fontFamily = 'Monaco,Consolas,"Ubuntu Mono",monospace';
   }
   const fontWeight = props.bold ? 'bold' : 'normal';
 
@@ -17,8 +19,8 @@ const QuestionText = (props) => {
       fontFamily={fontFamily}
       dominantBaseline="central"
       fontSize={`${props.fontSize}%`}
-      stroke="#3e3f3a"
-      fill="#3e3f3a"
+      stroke="#000000"
+      fill="#000000"
       fontWeight={fontWeight}
       strokeWidth="0.5px"
     >{Utils.displaySpanishDigraphs(props.letters)}</text>

djAerolith/wordwalls/static/js/wordwalls/reactapp/solution.jsx

@@ -15,6 +15,7 @@ class Solution extends React.Component {
     let qTdClass = '';
     let wTdClass = 'text-nowrap';
     let markMissedBtn;
+    let rowStyle = {};
 
     if (!this.props.correct) {
       qTdClass = 'danger';
@@ -38,33 +39,41 @@ class Solution extends React.Component {
         text={this.props.alphagram}
       />) : '');
 
+    // Visually separate different alphagrams.
+    if (this.props.wordPos === 0) {
+      rowStyle = { borderTop: '1px solid #777777' };
+    }
+
     return (
       <tr>
-        <td>{
+        <td style={rowStyle}>{
           this.props.wordPos === 0 ? this.props.probability : ''}</td>
         <td
+          style={rowStyle}
           className={qTdClass}
         >{alphagram}</td>
         <td
+          style={rowStyle}
           className="text-right"
         >
           <WordPartDisplay
             classes="text-info small"
             text={this.props.frontHooks}
           /></td>
-        <td className={wTdClass}>
+        <td className={wTdClass} style={rowStyle}>
           <WordPartDisplay
             text={wordDisplay}
           /></td>
         <td
           className="text-left"
+          style={rowStyle}
         >
           <WordPartDisplay
             classes="text-info small"
             text={this.props.backHooks}
           /></td>
-        <td>{this.props.definition}</td>
-        <td>{markMissedBtn}</td>
+        <td style={rowStyle}>{this.props.definition}</td>
+        <td style={rowStyle}>{markMissedBtn}</td>
       </tr>
     );
   }

djAerolith/wordwalls/static/js/wordwalls/reactapp/solutions.jsx

@@ -43,7 +43,7 @@ const Solutions = (props) => {
   return (
     <div
       style={{
-        // height: props.height,
+        backgroundColor: 'white',
         overflowX: 'hidden',
       }}
     >
@@ -54,7 +54,7 @@ const Solutions = (props) => {
       </div>
       <div className="row">
         <div className="col-lg-12 table-responsive">
-          <table className="table table-condensed table-bordered">
+          <table className="table table-condensed">
             <thead>
               <tr>
                 <th>Probability</th>
@@ -81,7 +81,6 @@ Solutions.propTypes = {
   answeredByMe: React.PropTypes.arrayOf(
     React.PropTypes.instanceOf(Immutable.Map)),
   totalWords: React.PropTypes.number,
- // height: React.PropTypes.number,
   markMissed: React.PropTypes.func,
   showLexiconSymbols: React.PropTypes.bool,
 };