Preset cubes dropdown (#384)

* add axios and setup babel polyfill

* hookup select tag with App.list

* fix cleanwebpackplugin config

* fix cleanwebpackplugin config

* update cube names

* add optgroup, remove clean-wepback-plugin

weird interaction between optgroup and clean-webpack-plugin causes page to lose styling after refresh

* move none option

* selecting none clear textarea

* remove webpack plugin import

package.json

@@ -46,11 +46,12 @@
     "@babel/plugin-proposal-throw-expressions": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
+    "axios": "^0.18.0",
     "babel-loader": "^8.0.0",
     "body-parser": "^1.18.3",
-    "clean-webpack-plugin": "^1.0.1",
     "cors": "^2.8.5",
     "engine.io": "^3.3.2",
     "engine.io-client": "^3.3.2",

public/src/lobby/CubeList.jsx

@@ -0,0 +1,53 @@
+import React, {useState, useEffect} from 'react'
+import axios from 'axios'
+
+import { Textarea } from "../utils";
+import App from '../app';
+
+const CubeList = () => {
+  const [cubes, setCubes] = useState('')
+  const [selectedCube, selectCube] = useState('none')
+  let cubeOptions = []
+
+  const getCubes = async function() {
+    const {data: cubes} = await axios.get('/api/cubes')
+    setCubes(cubes)
+  }
+
+  useEffect(() => {!cubes && getCubes()})
+
+  Object.keys(cubes).forEach(key => {
+    const option = <option value={key} key={key}>{key}</option>
+    cubeOptions.push(option)
+  })
+
+  const handleChange = (e) => {
+    e.preventDefault()
+    selectCube(e.target.value)
+    App.state['list'] = 
+    e.target.value === 'none'
+      ? ''
+      : cubes[e.target.value]
+  }
+
+  return <div id='cube-list'>
+    <div className='column'>
+      <div>one card per line</div>
+      <Textarea 
+        placeholder='cube list' 
+        link='list' 
+      />
+    </div>
+    {cubes && <div id='preset-cubes'>
+      <div>Preset Cubes:</div>
+      <select onChange={handleChange}>
+        <option value='none' key='none'>None</option>
+        <optgroup label="Cube Tutor">
+          {cubeOptions}
+        </optgroup>
+      </select>
+    </div>}
+  </div>
+}
+
+export default CubeList

public/src/lobby/GameOptions.jsx

@@ -3,9 +3,10 @@ import PropTypes from "prop-types";
 
 import _ from "utils/utils";
 import App from "../app";
-import { Checkbox, Select, Textarea } from "../utils";
+import { Checkbox, Select } from "../utils";
 
 import Set from "./Set";
+import CubeList from './CubeList'
 
 const GameOptions = () => {
   const { setsDraft, setsSealed, gametype, gamesubtype } = App.state;
@@ -72,13 +73,6 @@ const CubeSealedOptions = () => (
   </div>
 );
 
-const CubeList = () => (
-  <div>
-    <div>one card per line</div>
-    <Textarea placeholder='cube list' link='list' />
-  </div>
-);
-
 const CubeOptions = () => (
   <div>
     <Select link="cards" opts={_.seq(15, 8)} />

public/style.css

@@ -208,6 +208,15 @@ button:disabled:active {
   flex-direction: row;
 }
 
+#cube-list {
+  display: flex;
+  flex-direction: row;
+}
+
+#preset-cubes {
+  margin-left: 4px;
+}
+
 /** Lobby **/
 
 .lobby {
@@ -585,3 +594,8 @@ button:disabled:active {
 .hidden {
   display: none;
 }
+
+.column {
+  display: flex;
+  flex-direction: column;
+}

src/api/cubes.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const express = require("express");
+const cubesRouter = express.Router();
+const logger = require("../logger");
+
+cubesRouter
+  .get("/", (req, res) => {
+
+    fs.readdir('src/cubes', function(err, fileNames) {
+      if (err) {
+        console.error(err)
+        res.status(500).end()
+      } else {
+        let cubes = {}
+        fileNames.forEach(name => {
+          if (name.includes('.txt')) {
+            const cube = fs.readFileSync(`src/cubes/${name}`)
+            const key = name.slice(0, name.length-4)
+            cubes[key] = cube.toString()
+          }
+        })
+        res.status(200).send(cubes)
+      }
+    });
+
+  });
+
+module.exports = cubesRouter;

src/api/index.js

@@ -2,10 +2,12 @@
 const express = require("express");
 const games = require("./games");
 const sets = require("./sets");
+const cubes = require("./cubes")
 const apiRouter = express.Router();
 
 apiRouter
   .use("/games", games)
-  .use("/sets", sets);
+  .use("/sets", sets)
+  .use("/cubes", cubes);
 
 module.exports = apiRouter;