Styling improvements.

src/components/create-or-join/CreateOrJoin.jsx

@@ -34,6 +34,7 @@ class CreateOrJoin extends React.Component {
     render() {
         return (
             <Fragment>
+                <div className="font-preloader">text</div>
                 <Button size='large' className='shadow' onClick={this.props.showNewGame}>
                     New Game
                 </Button>

src/components/farm/Board.jsx

@@ -889,6 +889,9 @@ class Misc extends React.Component {
                     <li>
                         <a href='https://code.thintz.com/farm'>Game source</a> available under the <a href='https://www.gnu.org/licenses/gpl-3.0-standalone.html'>GPLv3</a>+ license.
                     </li>
+                    <li>
+                        IndieFlower font available under the <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web&_sc=1">SIL OFLv1.1</a>. Copyright <a href="http://www.kimberlygeswein.com/">Kimberly Geswein</a>.
+                    </li>
                     <li>
                         <img src={TractorFullImg} /> <img src={TractorImg} /> Copyright Nick Roach with modifications by Thomas Hintz - License <a href='GPL http://www.gnu.org/copyleft/gpl.html'>GPL</a>
                     </li>
@@ -1964,7 +1967,7 @@ class StartGame extends React.Component {
                     <li><b>Audit Threshold</b>: ${formatMoney(auditThreshold)}</li>
                     <li><b>Max Debt</b>: ${formatMoney(maxDebt)}</li>
                     <li><b>Loan Interest</b>: {loanInterest * 100}%</li>
-                    <li><b>Required Down Payment</b>: ${formatMoney(downPayment)}</li>
+                    <li><b>Required Down Payment</b>: {downPayment * 100}%</li>
                     <li><b>Starting {itemCardShort}</b>: {startingOtbs}</li>
                     <li><b>Starting Cash</b>: ${formatMoney(startingCash)}</li>
                     <li><b>Starting Debt</b>: ${formatMoney(startingDebt)}</li>

src/style.scss

@@ -16,6 +16,20 @@
 // along with the Alpha Centauri Farming project.  If not, see
 // <https://www.gnu.org/licenses/>.
 
+@font-face {
+  font-family: 'IndieFlower-Regular';
+  src: url('../assets/font/IndieFlower-Regular.woff2') format('woff2'),
+       url('../assets/font/IndieFlower-Regular.woff') format('woff'),
+       url('../assets/font/IndieFlower-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'LibreBaskerville-Regular';
+  src: url('../assets/font/LibreBaskerville-Regular.woff2') format('woff2'),
+       url('../assets/font/LibreBaskerville-Regular.woff') format('woff'),
+       url('../assets/font/LibreBaskerville-Regular.ttf') format('truetype');
+}
+
 @import './foundation/foundation';
 
 // Global styles
@@ -159,6 +173,8 @@ $tab-margin: 0.3rem;
     width: 100%; }
 
 .space {
+    font-family: 'IndieFlower-Regular';
+    // font-family: 'LibreBaskerville-Regular';
     flex-grow: 1;
     flex-basis: 0;
     padding: 3px;
@@ -169,6 +185,7 @@ $tab-margin: 0.3rem;
         font-size: 4px; }
     @include breakpoint(large) {
         font-size: 14px; }
+    text-shadow: 0px 0px 2px black;
 }
 
 .space-description {
@@ -454,21 +471,107 @@ $trade-margin: 3rem;
 .space-type-hay {
     background-color: hsla(120, 100%, 25%, 0.19); }
 
+.space-type-hay::after {
+    background: url('../assets/img/hay.svg') repeat;
+    content: '';
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+    z-index: -1;
+    position: absolute;
+    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
+    background-size: auto 100%;
+    top: 0;
+    left: 0; }
+
 .space-type-cherry {
     background-color: hsla(0, 100%, 40%, 0.28); }
 
+.space-type-cherry::after {
+    background: url('../assets/img/fruit.svg') repeat;
+    content: '';
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+    z-index: -1;
+    position: absolute;
+    filter: invert(13%) sepia(54%) saturate(6280%) hue-rotate(358deg) brightness(98%) contrast(123%);
+    background-size: auto 50%;
+    background-position: right;
+    top: 0;
+    left: 0; }
+
 .space-type-apple {
     background-color: hsla(0, 100%, 40%, 0.28); }
 
+.space-type-apple::after {
+    background: url('../assets/img/fruit.svg') repeat;
+    content: '';
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+    z-index: -1;
+    position: absolute;
+    filter: invert(13%) sepia(54%) saturate(6280%) hue-rotate(358deg) brightness(98%) contrast(123%);
+    background-size: auto 50%;
+    background-position: right;
+    top: 0;
+    left: 0; }
+
 .space-type-wheat {
     background-color: hsla(50, 97%, 48%, 0.22); }
 
+.space-type-wheat::after {
+    background: url('../assets/img/wheat.svg') repeat;
+    content: '';
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+    z-index: -1;
+    position: absolute;
+    filter: invert(68%) sepia(58%) saturate(747%) hue-rotate(8deg) brightness(102%) contrast(106%);
+    background-size: auto 110%;
+    background-position: right;
+    top: 0;
+    left: 0; }
+
 .space-type-corn {
     background-color: hsla(50, 97%, 48%, 0.22); }
 
+.space-type-corn::after {
+    background: url('../assets/img/wheat.svg') repeat;
+    content: '';
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+    z-index: -1;
+    position: absolute;
+    filter: invert(68%) sepia(58%) saturate(747%) hue-rotate(8deg) brightness(102%) contrast(106%);
+    background-size: auto 110%;
+    background-position: right;
+    top: 0;
+    left: 0; }
+
 .space-type-cows {
     background-color: hsla(0, 25%, 43%, 0.49); }
 
+.space-type-cows::after {
+    background: url('../assets/img/cow.svg') repeat;
+    content: '';
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+    z-index: -1;
+    position: absolute;
+    filter: invert(43%) sepia(5%) saturate(4943%) hue-rotate(314deg) brightness(76%) contrast(75%);
+    background-size: auto 35%;
+    background-position: right;
+    top: 0;
+    left: 0; }
+
+.space-type-buy {
+    background-color: hsla(240, 100%, 85%, 0.15); }
+
 .space-title {
     text-align: center;
     font-style: italic; }
@@ -953,3 +1056,8 @@ $intro-time: 6s;
 ul {
     margin-left: 0;
     list-style-type: none; }
+
+.font-preloader {
+    font-family: 'IndieFlower-Regular';
+    width: 0;
+    height: 0; }

webpack.common.js

@@ -93,12 +93,19 @@ module.exports = {
             //     },
             // },
             {
-                test: /\.(woff|woff2|eot|ttf|otf|svg|png|gif)$/,
+                test: /\.(svg|png|gif)$/,
                 loader: 'file-loader',
                 options: {
                     name: './assets/img/[name].[contenthash].[ext]',
                 },
             },
+            {
+                test: /\.(woff|woff2|eot|ttf|otf)$/,
+                loader: 'file-loader',
+                options: {
+                    name: './assets/font/[name].[contenthash].[ext]',
+                },
+            },
             {
                 test: /\.s[ac]ss$/i,
                 exclude: /(node_modules|bower_components)/,