Merge pull request #214 from bemusic/feature/moar-stuff

Feature/moar stuff

.babelrc

@@ -3,6 +3,7 @@
   "env": {
     "development": {
       "plugins": [
+        "react-display-name",
         "react-transform"
       ],
       "extra": {

.travis.yml

@@ -6,12 +6,21 @@ env:
     - secure: "vWu/FG20Uc1JgcUmzH467bZ82BKLuRU0wfKnA6f4CGfOIHsiAL62MDA3KRqfsRpsss9JTyERQ2zm7iLEVXu4dOcKody9AsrZRWtC+wvuKBoAllUt6jZnNOgs7Hjac50TI68E0p4Hrz+0xqV+YlppU5I34mGlZ2EhmSTnZ0zdIgw="
     - BROWSER=firefox
     - NODE_ENV=test
+    - CXX=g++-4.8
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
 node_js:
   - "5"
 before_install:
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
-  - 'npm install -g gulp'
+  - "npm install -g gulp"
+before_script:
+  - "npm install"
 script:
   - npm run ci:code-review
   - BEMUSE_COV=true bash -c 'gulp build || gulp build || gulp build'

spec/game/state/player-state_spec.js

@@ -167,6 +167,11 @@ describe('PlayerState', function () {
           expect(state.getNoteStatus(note)).to.equal('judged')
           expect(state.getNoteJudgment(note)).to.equal(-1)
         })
+        it('does not end automatically', function () {
+          advance(2, { 'p1_1': 1 })
+          advance(3.1, { 'p1_1': 1 })
+          expect(state.getNoteStatus(note)).to.equal('active')
+        })
         it('judges long note lifted too slow as missed', function () {
           advance(2, { 'p1_1': 1 })
           advance(4, { 'p1_1': 1 })
@@ -191,7 +196,7 @@ describe('PlayerState', function () {
           expect(state.getNoteStatus(note)).to.equal('active')
           expect(state.getNoteJudgment(note)).to.equal(1)
           expect(state.notifications.judgments[0].judgment).to.equal(1)
-          advance(4, { 'p1_SC': 1 })
+          advance(3.1, { 'p1_SC': 1 })
           expect(state.getNoteStatus(note)).to.equal('judged')
           expect(state.getNoteJudgment(note)).to.equal(1)
           expect(state.notifications.judgments[0].judgment).to.equal(1)

spec/resources/fixtures/f/meow.dat

@@ -0,0 +1 @@
+aaa

spec/resources/fixtures/f/meow.txt

@@ -0,0 +1 @@
+hi

spec/resources/resources_spec.js

@@ -42,6 +42,25 @@ describe('BemusePackageResources', function () {
         })
     })
 
+    it('supports fallback', function () {
+      resources = new BemusePackageResources('/spec/resources/fixtures/a/', {
+        fallback: '/spec/resources/fixtures/f/',
+        fallbackPattern: /\.txt$/,
+      })
+      return resources.file('meow.txt')
+        .then(file => file.read())
+        .then(buffer => new Uint8Array(buffer))
+        .then(array => {
+          expect([array[0], array[1]]).to.deep.equal([0x68, 0x69])
+        })
+    })
+    it('supports fallback only with the pattern', function () {
+      resources = new BemusePackageResources('/spec/resources/fixtures/a/', {
+        fallback: '/spec/resources/fixtures/f/',
+        fallbackPattern: /\.txt$/,
+      })
+      return expect(resources.file('meow.dat')).to.be.rejected
+    })
   })
 
 })

src/app/game-launcher.js

@@ -46,7 +46,10 @@ export function launch ({ server, song, chart }) {
       let url         = server.url + '/' + song.path + '/' + encodeURIComponent(chart.file)
       let assetsUrl   = resolve(url, 'assets/')
       loadSpec.bms    = new URLResource(url)
-      loadSpec.assets = new BemusePackageResources(assetsUrl)
+      loadSpec.assets = new BemusePackageResources(assetsUrl, {
+        fallback: url,
+        fallbackPattern: /\.(?:png|jpg)/,
+      })
     }
 
     let latency = +query.latency || (+options['system.offset.audio-input'] / 1000) || 0
@@ -68,12 +71,14 @@ export function launch ({ server, song, chart }) {
     }
 
     // start loading the game
-    let { tasks, promise } = GameLoader.load(loadSpec)
+    let loader = GameLoader.load(loadSpec)
+    let { tasks, promise } = loader
 
     // display loading scene
     let loadingScene = React.createElement(LoadingScene, {
       tasks: tasks,
-      song:  chart.info,
+      song: chart.info,
+      eyecatchImagePromise: loader.get('EyecatchImage')
     })
     yield SCENE_MANAGER.push(loadingScene)
 

src/app/ui/MusicList.jsx

@@ -8,7 +8,7 @@ import MusicListItem  from './MusicListItem.jsx'
 export default React.createClass({
   mixins: [React.addons.PureRenderMixin],
   render () {
-    return <ul className="MusicList"
+    return <ul className="MusicList js-scrollable-view"
         onTouchStart={this.props.onTouch}>
       {this.props.groups.map(({ title, songs }) => [
         <li className="MusicListのgroupTitle">{title}</li>,

src/app/ui/MusicListItem.jsx

@@ -12,8 +12,12 @@ export default React.createClass({
   mixins: [React.addons.PureRenderMixin],
   render () {
     const song = this.props.song
+    const className = c('MusicListItem', {
+      'is-active': this.props.selected,
+      'js-active-song': this.props.selected,
+    })
     return <li
-        className={c('MusicListItem', { 'is-active': this.props.selected })}
+        className={className}
         onClick={this.handleClick}>
       {
         song.tutorial

src/app/ui/MusicSelectScene.jsx

@@ -3,6 +3,7 @@ import './MusicSelectScene.scss'
 
 import React            from 'react'
 import c                from 'classnames'
+import $                from 'jquery'
 import { connect }      from 'bemuse/flux'
 import SCENE_MANAGER    from 'bemuse/scene-manager'
 import online           from 'bemuse/online/instance'
@@ -165,6 +166,24 @@ export const MusicSelectScene = React.createClass({
       authenticationPopupVisible:   false,
     }
   },
+  componentDidMount () {
+    this.ensureSelectedSongInView()
+  },
+  ensureSelectedSongInView () {
+    const $this = $(React.findDOMNode(this))
+    const active = $this.find('.js-active-song')[0]
+    if (!active) return
+    const scroller = $(active).closest('.js-scrollable-view')[0]
+    if (!scroller) return
+    const scrollerRect = scroller.getBoundingClientRect()
+    const activeRect = active.getBoundingClientRect()
+    if (activeRect.bottom > scrollerRect.bottom || activeRect.top < scrollerRect.top) {
+      scroller.scrollTop += (
+        (activeRect.top + activeRect.height / 2) -
+        (scrollerRect.top + scrollerRect.height / 2)
+      )
+    }
+  },
   handleSongSelect (song, chart) {
     Actions.selectSong(song)
     if (chart) Actions.selectChart(chart)

src/app/ui/ResultScene.jsx

@@ -10,6 +10,7 @@ import ResultTable      from './ResultTable'
 import ResultGrade      from './ResultGrade'
 import RankingContainer from './RankingContainer'
 import Flex             from 'bemuse/ui/Flex'
+import * as QueryFlags  from '../query-flags'
 
 export default React.createClass({
   render () {
@@ -58,14 +59,23 @@ export default React.createClass({
     let title = this.props.chart.info.title
     let subtitle = this.props.chart.info.subtitles[0] || ''
     let score = this.props.result.score
+    let grade = this.props.result.grade
     if (subtitle === '') {
       let match = this.props.chart.info.genre.match(/\[([^\]]+)\]$/)
       if (match) subtitle = match[1]
     }
     subtitle = subtitle.trim()
     if (subtitle !== '' && !/^[\[\(]/.test(subtitle)) subtitle = `[${subtitle}]`
     if (subtitle !== '') subtitle = ` ${subtitle}`
-    let text = `Played:「 ${title}${subtitle} 」on #Bemuse (Score:${score})` + '\n' + `→ https://bemuse.ninja/`
+    let url = 'https://bemuse.ninja/'
+    let server = QueryFlags.getMusicServer()
+    if (server) {
+      url = (
+        (/^http:/.test(server) ? 'http' : 'https') +
+        '://bemuse.ninja/?server=' + encodeURIComponent(server)
+      )
+    }
+    let text = `Played:「 ${title}${subtitle} 」on #Bemuse (Score:${score} [${grade}])` + '\n' + `→ ${url}`
     return 'https://twitter.com/intent/tweet?related=bemusegame&text=' + encodeURIComponent(text)
   },
   onTweet (e) {

src/bmson/notechart-loader.js

@@ -20,6 +20,10 @@ export function load (source, options) {
     ]),
     spacing:      new BMS.Spacing([ ]),
     barLines,
+    images: { // HACK: Hardcoded here, probably should belong in bmson package
+      eyecatch: data.info.eyecatch_image,
+      background: data.info.back_image,
+    }
   }
 
   return new Notechart(stuff, options)

src/game/display/game-display.scss

@@ -18,6 +18,15 @@
     animation-fill-mode: both;
   }
 
+  &--bg img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    animation: 1.2s game-display--bg-default;
+    animation-fill-mode: both;
+  }
+
   > canvas {
     position: relative;
     z-index: 100;

src/game/display/index.js

@@ -4,13 +4,13 @@ import './game-display.scss'
 import $ from 'jquery'
 
 export class GameDisplay {
-  constructor ({ game, context }) {
+  constructor ({ game, context, backgroundImagePromise }) {
     this._game      = game
     this._context   = context
     this._players   = new Map(game.players.map(player =>
         [player, new PlayerDisplay(player)]))
     this._stateful  = { }
-    this._wrapper   = this._createWrapper()
+    this._wrapper   = this._createWrapper({ backgroundImagePromise })
   }
   start () {
     this._started = new Date().getTime()
@@ -63,10 +63,15 @@ export class GameDisplay {
     let f = gameState.readyFraction
     return f > 0.5 ? Math.pow(1 - (f - 0.5) / 0.5, 2) : 0
   }
-  _createWrapper () {
+  _createWrapper ({ backgroundImagePromise }) {
     var $wrapper = $('<div class="game-display"></div>')
-    .append('<div class="game-display--bg"></div>')
+    .append('<div class="game-display--bg js-back-image"></div>')
     .append(this.view)
+    if (backgroundImagePromise) {
+      Promise.resolve(backgroundImagePromise).then(
+        image => $wrapper.find('.js-back-image').append(image)
+      )
+    }
     return $wrapper[0]
   }
   get context () {

src/game/loaders/game-loader.js

@@ -5,10 +5,11 @@ import Progress         from 'bemuse/progress'
 import SamplingMaster   from 'bemuse/sampling-master'
 import LoadingContext   from 'bemuse/boot/loading-context'
 
+import * as Multitasker from './multitasker'
 import SamplesLoader    from './samples-loader'
 import NotechartLoader  from './notechart-loader'
+import loadImage        from './loadImage'
 
-import * as Multitasker from './multitasker'
 import Game             from '../game'
 import GameController   from '../game-controller'
 import GameAudio        from '../audio'
@@ -60,6 +61,16 @@ export function load (spec) {
       return yield loader.load(arraybuffer, spec.bms, spec.options.players[0])
     }))
 
+    task('EyecatchImage', null, ['Notechart'],
+    function (notechart) {
+      return loadImage(assets, notechart.eyecatchImage)
+    })
+
+    task('BackgroundImage', null, ['Notechart'],
+    function (notechart) {
+      return loadImage(assets, notechart.backgroundImage)
+    })
+
     let audioLoadProgress   = new Progress()
     let audioDecodeProgress = new Progress()
 
@@ -77,7 +88,7 @@ export function load (spec) {
 
     task('GameDisplay', null, ['Game', 'Skin', 'SkinContext'],
     function (game, skin, context) {
-      return new GameDisplay({ game, skin, context })
+      return new GameDisplay({ game, skin, context, backgroundImagePromise: run('BackgroundImage') })
     })
 
     task('Samples', null, ['SamplingMaster', 'Game'],
@@ -100,5 +111,4 @@ export function load (spec) {
     return run('GameController')
 
   })
-
 }

src/game/loaders/loadImage.js

@@ -0,0 +1,16 @@
+
+export function loadImage (assets, filename) {
+  return (assets.file(filename)
+    .then(asset => asset.read())
+    .then(arrayBuffer => new Blob([arrayBuffer]))
+    .then(blob => URL.createObjectURL(blob))
+    .then(src => new Promise((resolve, reject) => {
+      const image = new Image()
+      image.onload = () => resolve(image)
+      image.onerror = reject
+      image.src = src
+    }))
+  )
+}
+
+export default loadImage

src/game/loaders/multitasker.js

@@ -48,6 +48,6 @@ export function start (callback) {
     taskToWatch.progress.watch(update)
   }
 
-  return { tasks: status, promise: promise }
+  return { tasks: status, promise: promise, get: run }
 
 }

src/game/notechart.js

@@ -19,6 +19,7 @@ export class Notechart {
       positioning,
       spacing,
       barLines,
+      images,
     } = data
 
     invariant(bmsNotes,     'Expected "data.notes"')
@@ -43,6 +44,7 @@ export class Notechart {
     this._infos       = new Map(this._notes.map(
         note => [note, this._getNoteInfo(note)]))
     this._songInfo    = songInfo
+    this._images      = images
   }
 
   // An Array of note events.
@@ -85,6 +87,16 @@ export class Notechart {
     return this._songInfo
   }
 
+  // Eyecatch image
+  get eyecatchImage () {
+    return (this._images && this._images.eyecatch) || 'eyecatch_image.png'
+  }
+
+  // Background image
+  get backgroundImage () {
+    return (this._images && this._images.background) || 'back_image.png'
+  }
+
   // Returns the characteristic of the note as an Object.
   // The returned object includes the following properties:
   //

src/game/state/player-state.js

@@ -171,7 +171,9 @@ export class PlayerState {
       let judgment  = judgeEndTime(this._gameTime, note.end.time)
       let missed    = judgment === MISSED
       let lifted    = control.changed
-      return missed || lifted
+      let scratch   = note.column === 'SC'
+      let passed    = this._gameTime >= note.end.time
+      return missed || lifted || (scratch && passed)
     } else {
       return false
     }

src/game/ui/LoadingScene.jsx

@@ -11,6 +11,7 @@ export default React.createClass({
 
   render () {
     return <Scene className="LoadingScene" ref="scene">
+      <div className="LoadingSceneのimage" ref="eyecatch"></div>
       <div className="LoadingSceneのinfo">
         <LoadingSceneSongInfo song={this.props.song} />
       </div>
@@ -19,6 +20,15 @@ export default React.createClass({
       <div className="LoadingSceneのcover"></div>
     </Scene>
   },
+
+  componentDidMount () {
+    if (this.props.eyecatchImagePromise) {
+      this.props.eyecatchImagePromise.then(image => {
+        React.findDOMNode(this.refs.eyecatch).appendChild(image)
+      })
+    }
+  },
+
   teardown () {
     React.findDOMNode(this.refs.scene).classList.add('is-exiting')
     return Promise.delay(500)