Merge pull request #213 from bemusic/clean

Moar stuffs

config/webpack.js

@@ -86,6 +86,10 @@ let config = {
     ],
     postLoaders: [],
     preLoaders: [],
+    noParse: [
+      /node_modules\/sinon\//,
+      /node_modules\/web-audio-test-api\//,
+    ],
   },
   plugins: [
     new CompileProgressPlugin(),

package.json

@@ -79,7 +79,7 @@
     "script-loader": "^0.6.1",
     "selenium-webdriver": "^2.45.1",
     "serviceworker-loader": "^0.1.0",
-    "sinon": "git://github.com/cjohansen/Sinon.JS#sinon-2.0",
+    "sinon": "^1.17.2",
     "sinon-chai": "^2.7.0",
     "style-loader": "^0.12.3",
     "through2": "^2.0.0",

src/app/stores/music-select-store.js

@@ -19,6 +19,7 @@ export function MusicSelectStoreFactory (CollectionStore, options = { }) {
   const server川 = CollectionStore.map(state => state.server)
   const collection川 = CollectionStore.map(state => state.collection)
   const unofficial川 = CollectionStore.map(state => state.unofficial)
+  const error川 = collection川.map(state => state.error)
   const loading川 = collection川.map(({ loading }) => loading)
 
   const grouping川 = Bacon.constant([
@@ -88,6 +89,7 @@ export function MusicSelectStoreFactory (CollectionStore, options = { }) {
 
   return new Store({
     loading:    loading川,
+    error:      error川,
     server:     server川,
     songs:      songs川,
     groups:     groups川,
@@ -98,7 +100,7 @@ export function MusicSelectStoreFactory (CollectionStore, options = { }) {
     highlight:  filterTextDebounced川,
     unofficial: unofficial川,
     playMode:   mode川,
-  }).log('MSS')
+  })
 
 }
 

src/app/ui/MusicInfoTabStats.jsx

@@ -1,26 +1,58 @@
 
 import './MusicInfoTabStats.scss'
 
-import React  from 'react'
+import React            from 'react'
 
-export default React.createClass({
+import withPersonalRecord             from './withPersonalRecord'
+import { formattedAccuracyForRecord } from 'bemuse/rules/accuracy'
+
+export const MusicInfoTabStats = React.createClass({
 
   render () {
     const chart = this.props.chart
+    const record = this.props.record
     return <div className="MusicInfoTabStats">
+      {this.renderMessage()}
       <dl className="MusicInfoTabStatsのcolumn is-left">
         <dt>Notes</dt>
         <dd>{chart.noteCount}</dd>
         <dt>BPM</dt>
         <dd>{chart.bpm.median}</dd>
+        <dt>Play Count</dt>
+        <dd>{record ? record.playCount : (this.props.user ? '0' : '-')}</dd>
       </dl>
       <dl className="MusicInfoTabStatsのcolumn is-right">
         <dt>Best Score</dt>
-        <dd>-</dd>
+        <dd>{record ? record.score : '-'}</dd>
+
+        <dt>Accuracy</dt>
+        <dd>{record
+          ? formattedAccuracyForRecord(record)
+          : '-'
+        }</dd>
+
         <dt>Max Combo</dt>
-        <dd>-</dd>
+        <dd>{record
+          ? <span>{record.combo} <small>/ {record.total}</small></span>
+          : '-'
+        }</dd>
       </dl>
     </div>
   },
 
+  renderMessage () {
+
+    if (!this.props.user) {
+      return (
+        <div className="MusicInfoTabStatsのmessage">
+          Please log in or create an account to save your play statistics.
+        </div>
+      )
+    }
+
+    return null
+  }
+
 })
+
+export default withPersonalRecord(MusicInfoTabStats)

src/app/ui/MusicInfoTabStats.scss

@@ -1,6 +1,9 @@
 
 .MusicInfoTabStats {
   overflow: hidden;
+  &のmessage {
+    text-align: center;
+  }
   &のcolumn {
     width: 45%;
     margin: 0;
@@ -22,6 +25,10 @@
       line-height: 1;
       padding: 0.45em 0 0;
       line-height: 1em;
+      small {
+        font-size: 0.5em;
+        font-weight: 600;
+      }
     }
   }
 }

src/app/ui/MusicListItem.jsx

@@ -17,8 +17,16 @@ export default React.createClass({
         onClick={this.handleClick}>
       {
         song.tutorial
-        ? <div className="MusicListItemのtutorial">Tutorial</div>
-        : <div className="MusicListItemのinfo">
+        ? (
+          <div className="MusicListItemのtutorial">
+            <div className="MusicListItemのcharts">
+              {this.renderChartlist()}
+            </div>
+            Tutorial
+          </div>
+        )
+        : (
+          <div className="MusicListItemのinfo">
             <div className="MusicListItemのinfo-top">
               <div className="MusicListItemのtitle">
                 {this.renderHighlight(song.title)}
@@ -36,6 +44,7 @@ export default React.createClass({
               </div>
             </div>
           </div>
+        )
       }
     </li>
   },

src/app/ui/MusicListItemChartContainer.jsx

@@ -1,50 +1,22 @@
 
 import React from 'react'
 
-import id from 'bemuse/online/id'
-import online from 'bemuse/online/instance'
-import * as DataStore from 'bemuse/online/data-store'
-import { getGrade } from 'bemuse/rules/grade'
-
+import { getGrade }       from 'bemuse/rules/grade'
+import withPersonalRecord from './withPersonalRecord'
 import MusicListItemChart from './MusicListItemChart'
 
-export default React.createClass({
-
-  getInitialState () {
-    return { data: DataStore.INITIAL_STATE }
-  },
-
-  componentDidMount () {
-    online.seen(this.getDescriptor())
-    this.unsubscribe = online.records川.onValue(data => this.setState({ data }))
-  },
-
-  componentWillUnmount () {
-    if (this.unsubscribe) this.unsubscribe()
-  },
+export const MusicListItemChartContainer = React.createClass({
 
-  shouldComponentUpdate (nextProps, nextState) {
-    if (this.props.chart !== nextProps.chart) return true
-    if (this.props.selected !== nextProps.selected) return true
-    if (this.props.playMode !== nextProps.playMode) return true
-    if (this.getRecord(this.state) !== this.getRecord(nextState)) return true
-    return false
-  },
-
-  getRecord (state) {
-    return DataStore.get(state.data, id(this.getDescriptor())).value
-  },
-
-  getDescriptor () {
-    return { md5: this.props.chart.md5, playMode: this.props.playMode }
-  },
+  mixins: [React.addons.PureRenderMixin],
 
   render () {
-    let record = this.getRecord(this.state)
+    let record = this.props.record
     let played = !!record
     let grade = played ? getGrade(record) : null
     if (grade === 'F') grade = null
     return <MusicListItemChart {...this.props} played={played} grade={grade} />
   }
 
 })
+
+export default withPersonalRecord(MusicListItemChartContainer)

src/app/ui/MusicSelectScene.jsx

@@ -34,82 +34,108 @@ export const MusicSelectScene = React.createClass({
       <SceneHeading>
         Select Music
         <input
-            type="text"
-            placeholder="Filter…"
-            className="MusicSelectSceneのsearch"
-            onChange={this.handleFilter}
-            value={musicSelect.filterText} />
+          type="text"
+          placeholder="Filter…"
+          className="MusicSelectSceneのsearch"
+          onChange={this.handleFilter}
+          value={musicSelect.filterText}
+        />
       </SceneHeading>
-      {
-        musicSelect.unofficial
-        ? <div className="MusicSelectSceneのunofficialLabel"
-              onClick={this.handleUnofficialClick}>
-            <b>Disclaimer:</b> Unofficial Server
-          </div>
-        : null
-      }
-      {
-        musicSelect.loading
-        ? <div className="MusicSelectSceneのloading">Loading…</div>
-        : musicSelect.songs.length === 0
-        ? <div className="MusicSelectSceneのloading">
-            Cannot Load Collection!
-          </div>
-        : <div className={c('MusicSelectSceneのmain',
-              { 'is-in-song': this.state.inSong })}>
-            <MusicList
-                groups={musicSelect.groups}
-                highlight={musicSelect.highlight}
-                selectedSong={musicSelect.song}
-                selectedChart={musicSelect.chart}
-                playMode={musicSelect.playMode}
-                onSelect={this.handleSongSelect}
-                onTouch={this.handleMusicListTouch} />
-            <MusicInfo
-                song={musicSelect.song}
-                chart={musicSelect.chart}
-                charts={musicSelect.charts}
-                playMode={musicSelect.playMode}
-                onChartClick={this.handleChartClick}
-                onOptions={this.handleOptionsOpen} />
-          </div>
-      }
+
+      {this.renderUnofficialDisclaimer()}
+
+      {this.renderMain()}
+
       <SceneToolbar>
         <a onClick={this.popScene} href="javascript://">Exit</a>
-        <a onClick={this.handleCustomBMSOpen} href="javascript://"
-            onDragEnter={this.handleCustomBMSOpen}>
+        <a
+          onClick={this.handleCustomBMSOpen}
+          href="javascript://"
+          onDragEnter={this.handleCustomBMSOpen}
+        >
           Play Custom BMS
         </a>
         <SceneToolbar.Spacer />
         {this.renderOnlineToolbarButtons()}
         <a onClick={this.handleOptionsOpen} href="javascript://">Options</a>
       </SceneToolbar>
+
       <ModalPopup
-          visible={this.state.optionsVisible}
-          onBackdropClick={this.handleOptionsClose}>
-        <Options
-            onClose={this.handleOptionsClose} />
+        visible={this.state.optionsVisible}
+        onBackdropClick={this.handleOptionsClose}
+      >
+        <Options onClose={this.handleOptionsClose} />
       </ModalPopup>
+
       <ModalPopup
-          visible={this.state.customBMSVisible}
-          onBackdropClick={this.handleCustomBMSClose}>
+        visible={this.state.customBMSVisible}
+        onBackdropClick={this.handleCustomBMSClose}
+      >
         <div className="MusicSelectSceneのcustomBms">
-          <CustomBMS
-              onSongLoaded={this.handleCustomSong} />
+          <CustomBMS onSongLoaded={this.handleCustomSong} />
         </div>
       </ModalPopup>
+
       <ModalPopup
-          visible={this.state.unofficialDisclaimerVisible}
-          onBackdropClick={this.handleUnofficialClose}>
-        <UnofficialPanel
-            onClose={this.handleUnofficialClose} />
+        visible={this.state.unofficialDisclaimerVisible}
+        onBackdropClick={this.handleUnofficialClose}
+      >
+        <UnofficialPanel onClose={this.handleUnofficialClose} />
       </ModalPopup>
+
       <AuthenticationPopup
-          visible={this.state.authenticationPopupVisible}
-          onFinish={this.handleAuthenticationFinish}
-          onBackdropClick={this.handleAuthenticationClose} />
+        visible={this.state.authenticationPopupVisible}
+        onFinish={this.handleAuthenticationFinish}
+        onBackdropClick={this.handleAuthenticationClose}
+      />
     </Scene>
   },
+  renderUnofficialDisclaimer () {
+    if (!this.props.musicSelect.unofficial) return null
+    return (
+      <div
+        className="MusicSelectSceneのunofficialLabel"
+        onClick={this.handleUnofficialClick}
+      >
+        <b>Disclaimer:</b> Unofficial Server
+      </div>
+    )
+  },
+  renderMain () {
+    const musicSelect = this.props.musicSelect
+    if (musicSelect.loading) {
+      return <div className="MusicSelectSceneのloading">Loading…</div>
+    }
+    if (musicSelect.error) {
+      return <div className="MusicSelectSceneのloading">Cannot load collection!</div>
+    }
+    if (musicSelect.songs.length === 0) {
+      return <div className="MusicSelectSceneのloading">No songs found!</div>
+    }
+    return (
+      <div
+        className={c('MusicSelectSceneのmain', { 'is-in-song': this.state.inSong })}
+      >
+        <MusicList
+          groups={musicSelect.groups}
+          highlight={musicSelect.highlight}
+          selectedSong={musicSelect.song}
+          selectedChart={musicSelect.chart}
+          playMode={musicSelect.playMode}
+          onSelect={this.handleSongSelect}
+          onTouch={this.handleMusicListTouch}
+        />
+        <MusicInfo
+          song={musicSelect.song}
+          chart={musicSelect.chart}
+          charts={musicSelect.charts}
+          playMode={musicSelect.playMode}
+          onChartClick={this.handleChartClick}
+          onOptions={this.handleOptionsOpen}
+        />
+      </div>
+    )
+  },
   renderOnlineToolbarButtons () {
     if (!online) return null
     let buttons = []