diff --git a/package.json b/package.json index 9c0f89f..740c830 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "devDependencies": { "react-scripts": "0.9.0" }, + "compilerOptions": { + "baseUrl": "src" + }, "dependencies": { "bootstrap": "^3.3.7", "clipboard": "^1.6.1", diff --git a/src/LyricsEditor.js b/src/components/lyrics/editor/index.jsx similarity index 96% rename from src/LyricsEditor.js rename to src/components/lyrics/editor/index.jsx index ddec69a..ae73ca9 100644 --- a/src/LyricsEditor.js +++ b/src/components/lyrics/editor/index.jsx @@ -1,8 +1,8 @@ import React, { Component } from 'react'; -import './LyricsPane.css'; +import '../lyrics.css'; -import {CustomVerse} from './verse.js'; +import {CustomVerse} from '../../../utils/verse.js'; class LyricsEditor extends Component { diff --git a/src/LyricsPane.css b/src/components/lyrics/lyrics.css similarity index 100% rename from src/LyricsPane.css rename to src/components/lyrics/lyrics.css diff --git a/src/LyricsPane.js b/src/components/lyrics/pane/index.jsx similarity index 93% rename from src/LyricsPane.js rename to src/components/lyrics/pane/index.jsx index ad8ddc2..9525bfd 100644 --- a/src/LyricsPane.js +++ b/src/components/lyrics/pane/index.jsx @@ -1,9 +1,9 @@ import React, { Component } from 'react'; -import './LyricsPane.css'; +import '../lyrics.css'; -import Word from './Word.js'; -import { NOINDEX } from './constants.js'; +import Word from '../../word/'; +import { NOINDEX } from '../../../constants'; /** Shows the entire current verse in a big multi-column block. Not responsible * for the editing view. */ diff --git a/src/LyricsPorthole.js b/src/components/lyrics/porthole/index.jsx similarity index 98% rename from src/LyricsPorthole.js rename to src/components/lyrics/porthole/index.jsx index cd0679b..de91b65 100644 --- a/src/LyricsPorthole.js +++ b/src/components/lyrics/porthole/index.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import './LyricsPorthole.css'; +import './style.css'; class LyricsPorthole extends Component { diff --git a/src/LyricsPorthole.css b/src/components/lyrics/porthole/style.css similarity index 100% rename from src/LyricsPorthole.css rename to src/components/lyrics/porthole/style.css diff --git a/src/DummyMatrix.js b/src/components/matrix/DummyMatrix.jsx similarity index 89% rename from src/DummyMatrix.js rename to src/components/matrix/DummyMatrix.jsx index 7703a4b..717cfb0 100644 --- a/src/DummyMatrix.js +++ b/src/components/matrix/DummyMatrix.jsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import './Matrix.css'; +import './style.css'; class DummyMatrix extends Component { diff --git a/src/Matrix.js b/src/components/matrix/index.jsx similarity index 98% rename from src/Matrix.js rename to src/components/matrix/index.jsx index 99472ff..addfc2f 100644 --- a/src/Matrix.js +++ b/src/components/matrix/index.jsx @@ -2,10 +2,10 @@ import React, { Component } from 'react'; import { hsluvToHex } from 'hsluv'; import { saveAs } from 'file-saver'; -import './Matrix.css'; +import './style.css'; -import {STOPWORDS, NOINDEX, MODE} from './constants.js'; -import config from './config.js'; +import {STOPWORDS, NOINDEX, MODE} from '../../constants.js'; +import config from '../../config.js'; // TODO: colormap docs (https://www.npmjs.com/package/colormap) say that n>10 // should be enough divisions for any colormap, but using the 'warm' colormap diff --git a/src/Matrix.css b/src/components/matrix/style.css similarity index 100% rename from src/Matrix.css rename to src/components/matrix/style.css diff --git a/src/SongSelector.js b/src/components/song-selector/index.jsx similarity index 92% rename from src/SongSelector.js rename to src/components/song-selector/index.jsx index a88e4bd..1618c4e 100644 --- a/src/SongSelector.js +++ b/src/components/song-selector/index.jsx @@ -1,12 +1,12 @@ import React, { Component } from 'react'; import {hashHistory} from 'react-router'; -import './SongSelector.css'; +import './style.css'; -import {CUSTOM_SLUG} from './constants.js'; -import { GROUPED_CANS } from './canned.js'; -import CANNED_SONGS, { ORDERED_CATEGORIES } from './canned-data.js'; -import {CannedVerse} from './verse.js'; +import {CUSTOM_SLUG} from '../../constants'; +import { GROUPED_CANS } from '../../utils/canned'; +import CANNED_SONGS, { ORDERED_CATEGORIES } from '../../utils/canned.data'; +import {CannedVerse} from '../../utils/verse'; class SongSelector extends Component { diff --git a/src/SongSelector.css b/src/components/song-selector/style.css similarity index 100% rename from src/SongSelector.css rename to src/components/song-selector/style.css diff --git a/src/Songsim.js b/src/components/songsim/index.jsx similarity index 94% rename from src/Songsim.js rename to src/components/songsim/index.jsx index 98d4fc2..9148d46 100644 --- a/src/Songsim.js +++ b/src/components/songsim/index.jsx @@ -5,23 +5,23 @@ import JSZip from 'jszip'; import { hashHistory } from 'react-router'; import browser from 'detect-browser'; -import './Songsim.css'; +import './style.css'; -import LyricsPorthole from './LyricsPorthole.js'; -import Toolbox from './Toolbox'; -import Matrix from './Matrix.js'; -import { Diagonal } from './utils.js'; -import DummyMatrix from './DummyMatrix.js'; -import LyricsPane from './LyricsPane.js'; -import SongSelector from './SongSelector.js'; -import LyricsEditor from './LyricsEditor.js'; -import {CustomVerse, CannedVerse} from './verse.js'; -import { MODE, CUSTOM_SLUG, NOINDEX } from './constants.js'; -import { LANDING_CANNED } from './canned.js'; -import LANDING_LYRICS from './landing_lyrics.js'; -import config from './config.js'; -import DBHelper from './firebasehelper.js'; -import CANNED_SONGS from './canned-data.js'; +import LyricsPorthole from '../lyrics/porthole'; +import Toolbox from '../toolbox'; +import Matrix from '../matrix'; +import { Diagonal } from '../../utils'; +import DummyMatrix from '../matrix/DummyMatrix'; +import LyricsPane from '../lyrics/pane'; +import SongSelector from '../song-selector'; +import LyricsEditor from '../lyrics/editor'; +import {CustomVerse, CannedVerse} from '../../utils/verse'; +import { MODE, CUSTOM_SLUG, NOINDEX } from '../../constants'; +import { LANDING_CANNED } from '../../utils/canned'; +import LANDING_LYRICS from '../../utils/landing-lyrics'; +import config from '../../config'; +import DBHelper from '../../utils/firebasehelper'; +import CANNED_SONGS from '../../utils/canned.data'; const MOBILE_THRESH = 768; diff --git a/src/Songsim.css b/src/components/songsim/style.css similarity index 100% rename from src/Songsim.css rename to src/components/songsim/style.css diff --git a/src/Toolbox.js b/src/components/toolbox/index.jsx similarity index 97% rename from src/Toolbox.js rename to src/components/toolbox/index.jsx index 0bd2c64..5a7d98b 100644 --- a/src/Toolbox.js +++ b/src/components/toolbox/index.jsx @@ -1,10 +1,10 @@ import React, { Component } from 'react'; import Clipboard from 'clipboard'; -import './Toolbox.css'; +import './style.css'; -import config from './config.js'; -import {MODE, MODE_TOOLTIPS} from './constants.js'; +import config from '../../config'; +import {MODE, MODE_TOOLTIPS} from '../../constants'; // TODO: is this really the orthodox way to do this? :/ new Clipboard('#perma'); diff --git a/src/Toolbox.css b/src/components/toolbox/style.css similarity index 100% rename from src/Toolbox.css rename to src/components/toolbox/style.css diff --git a/src/Word.js b/src/components/word/index.jsx similarity index 88% rename from src/Word.js rename to src/components/word/index.jsx index c7b4cd2..b2c66ef 100644 --- a/src/Word.js +++ b/src/components/word/index.jsx @@ -1,8 +1,8 @@ import React, { Component } from 'react'; -import {NOINDEX} from './constants.js'; +import {NOINDEX} from '../../constants'; -import './Word.css'; +import './style.css'; class Word extends Component { diff --git a/src/Word.css b/src/components/word/style.css similarity index 100% rename from src/Word.css rename to src/components/word/style.css diff --git a/src/config.js b/src/config.js index 926dcb7..d3d62f2 100644 --- a/src/config.js +++ b/src/config.js @@ -1,9 +1,9 @@ import {MODE} from './constants.js'; -var config = { +const config = { alleys: true, default_mode: MODE.vanilla, - debug: false, + debug: true, exportSVGEnabled: true, checkerboard: true, rect_saturation: 100, // range [0-100] diff --git a/src/index.js b/src/index.js index e7527a2..4a68275 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App'; -import About from './About.js'; -import Gallery from './Gallery.js'; -import Songsim from './Songsim.js'; +import Home from './routes/home'; +import About from './routes/about'; +import Gallery from './routes/gallery'; +import Songsim from './components/songsim'; import { IndexRoute, Router, Route, hashHistory } from 'react-router'; import './index.css'; @@ -13,7 +13,7 @@ import 'bootstrap/dist/css/bootstrap.css'; ReactDOM.render( ( - + diff --git a/src/About.js b/src/routes/about/index.jsx similarity index 97% rename from src/About.js rename to src/routes/about/index.jsx index 0a6415a..abd76cd 100644 --- a/src/About.js +++ b/src/routes/about/index.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router'; -import './About.css'; +import './style.css'; const IMG_DIR = '/img/about/'; @@ -28,7 +28,7 @@ class About extends Component { return p(i); }); } - var panelClass = SECTION_METADATA[chapter] ? + let panelClass = SECTION_METADATA[chapter] ? SECTION_METADATA[chapter].panelClass : "col-lg-10 col-lg-offset-1 col-xs-12"; panelClass += " abtPanel"; @@ -51,9 +51,9 @@ class About extends Component { } render() { - var chapter = this.props.params.chapter || 'default'; - var sections = SECTIONS[chapter].map((sect) => (this.renderSection(sect, chapter))); - var chapter_preamble; + const chapter = this.props.params.chapter || 'default'; + const sections = SECTIONS[chapter].map((sect) => (this.renderSection(sect, chapter))); + let chapter_preamble; if (this.props.params.chapter === 'advanced') { chapter_preamble = (

Below are some common patterns to look out for.

@@ -81,6 +81,7 @@ class About extends Component { } } +// TODO: check what that do (seems like its hardcoded) const SECTIONS = { 'default': [ diff --git a/src/About.css b/src/routes/about/style.css similarity index 100% rename from src/About.css rename to src/routes/about/style.css diff --git a/src/Gallery.js b/src/routes/gallery/index.jsx similarity index 95% rename from src/Gallery.js rename to src/routes/gallery/index.jsx index d1d9aee..5433530 100644 --- a/src/Gallery.js +++ b/src/routes/gallery/index.jsx @@ -2,10 +2,10 @@ import React, { Component } from 'react'; import { Link } from 'react-router'; import Lightbox from 'react-image-lightbox'; -import './Gallery.css'; +import './style.css'; -import { Canned, GROUPED_CANS } from './canned.js'; -import CANNED_SONGS, { ORDERED_CATEGORIES } from './canned-data.js'; +import { Canned, GROUPED_CANS } from '../../utils/canned'; +import CANNED_SONGS, { ORDERED_CATEGORIES } from '../../utils/canned.data'; const GALLERY_FILE_PATH = '/img/gallery/'; diff --git a/src/Gallery.css b/src/routes/gallery/style.css similarity index 100% rename from src/Gallery.css rename to src/routes/gallery/style.css diff --git a/src/App.js b/src/routes/home/index.jsx similarity index 86% rename from src/App.js rename to src/routes/home/index.jsx index 8bdb50b..fc25569 100644 --- a/src/App.js +++ b/src/routes/home/index.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router'; -import './App.css'; -import octocat from './octocat.svg'; +import './style.css'; +import octocat from '../../octocat.svg'; const LINKS = [ {path: "/", name: "SongSim"}, @@ -9,10 +9,10 @@ const LINKS = [ {path: "/gallery", name: "Gallery"} ]; -class App extends Component { +class Home extends Component { renderNavLink = (link) => { // I'm sure there's a better way to do this... - let active = link.path === "/" ? + const active = link.path === "/" ? !LINKS.some((l) => ( l.path !== "/" && this.props.location.pathname.startsWith(l.path)) ) @@ -25,7 +25,7 @@ class App extends Component { {link.name}); } render() { - var links = LINKS.map(this.renderNavLink); + const links = LINKS.map(this.renderNavLink); return (