Update dependencies (PIXI v2 → v3); 5K support

config/webpack.js

@@ -38,6 +38,15 @@ let config = {
         include: [path('src'), path('spec')],
         loader: 'babel?modules=common&experimental=true',
       },
+      {
+        test: /\.js$/,
+        include: [path('node_modules', 'pixi.js')],
+        loader: 'transform/cacheable?brfs',
+      },
+      {
+        test: /\.json$/,
+        loader: 'json',
+      },
       {
         test: /\.pegjs$/,
         loader: 'pegjs',

package.json

@@ -4,14 +4,14 @@
   "description": "BEAT☆MUSIC☆SEQUENCE, a web-based music game of the future",
   "main": "index.js",
   "scripts": {
-    "code-review": "gulp code-review",
+    "build": "gulp build",
     "ci:code-review": "npm run code-review; ./bin/upload-code-review",
-    "test": "bash -c \"BEMUSE_COV=true gulp build && BEMUSE_COV=true gulp test:exit\"",
+    "code-review": "gulp code-review",
     "lint": "gulp lint",
+    "pre-commit": "gulp pre-commit",
     "start": "gulp server",
-    "build": "gulp build",
-    "travis": "gulp travis",
-    "pre-commit": "gulp pre-commit"
+    "test": "bash -c \"BEMUSE_COV=true gulp build && BEMUSE_COV=true gulp test:exit\"",
+    "travis": "gulp travis"
   },
   "repository": {
     "type": "git",
@@ -28,28 +28,29 @@
   "homepage": "https://github.com/spacetme/bemuse",
   "devDependencies": {
     "artstep": "^5555.0.0",
-    "autoprefixer-loader": "^1.2.0",
-    "babel-core": "^4.3.0",
-    "babel-eslint": "^3.0.1",
-    "babel-loader": "^4.0.0",
+    "autoprefixer-loader": "^2.0.0",
+    "babel-core": "^5.8.20",
+    "babel-eslint": "^4.0.5",
+    "babel-loader": "^5.3.2",
     "body-parser": "^1.10.0",
+    "brfs": "^1.4.0",
     "browser-launcher": "^1.0.0",
     "bundle-loader": "^0.5.2",
-    "chai": "^2.2.0",
-    "chai-as-promised": "^4.1.1",
-    "codeclimate-test-reporter": "0.0.4",
+    "chai": "^3.2.0",
+    "chai-as-promised": "^5.1.0",
+    "codeclimate-test-reporter": "^0.1.0",
     "connect": "^3.3.3",
     "coveralls": "^2.11.2",
-    "css-loader": "^0.9.0",
+    "css-loader": "^0.15.6",
     "dotenv": "^1.2.0",
-    "eslint": "^0.19.0",
-    "eslint-plugin-react": "^2.1.1",
+    "eslint": "^1.0.0",
+    "eslint-plugin-react": "^3.2.0",
     "exports-loader": "^0.6.2",
     "express": "^4.10.6",
     "file-loader": "^0.8.1",
-    "glob": "^4.3.2",
+    "glob": "^5.0.14",
     "gulp": "^3.8.10",
-    "gulp-eslint": "^0.9.0",
+    "gulp-eslint": "^1.0.0",
     "gulp-gh-pages": "git://github.com/dtinth/gulp-gh-pages",
     "gulp-mocha": "^2.0.1",
     "gulp-util": "^3.0.1",
@@ -60,39 +61,39 @@
     "jade-loader": "^0.7.0",
     "jasmine": "^2.1.1",
     "js-yaml": "^3.2.5",
+    "json-loader": "^0.5.2",
     "merge-stream": "^0.1.6",
     "mocha": "^2.1.0",
     "node-env": "^0.1.6",
     "node-notifier": "^4.0.3",
-    "node-sass": "^2.1.1",
+    "node-sass": "^3.2.0",
     "node-ssi": "^0.3.0",
     "pegjs-loader": "^0.1.1",
-    "ractive-loader": "^0.5.6",
-    "sass-loader": "^0.4.2",
+    "sass-loader": "^1.0.4",
     "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-chai": "^2.7.0",
     "style-loader": "^0.9.0",
     "through2": "^0.6.3",
+    "transform-loader": "^0.2.2",
     "url-loader": "^0.5.5",
     "val-loader": "^0.5.0",
-    "web-audio-test-api": "^0.2.1",
+    "web-audio-test-api": "^0.3.6",
     "webpack": "^1.4.13",
     "webpack-dev-server": "^1.6.6",
-    "worker-loader": "^0.6.0",
-    "yadda": "^0.11.5"
+    "worker-loader": "^0.6.0"
   },
   "dependencies": {
     "audio-context": "^0.1.0",
     "baconjs": "^0.7.53",
-    "bemuse-indexer": "^1.1.2",
+    "bemuse-indexer": "^1.3.0",
     "bluebird": "^2.9.10",
-    "bms": "^0.11.1",
-    "bytes": "^1.0.0",
+    "bms": "^0.12.0",
+    "bytes": "^2.1.0",
     "chance": "^0.7.3",
-    "classnames": "^1.2.0",
+    "classnames": "^2.1.3",
     "co": "^4.3.1",
     "data-structure": "^1.2.0",
     "debug": "^2.1.1",
@@ -109,11 +110,12 @@
     "lru-cache": "^2.6.5",
     "once": "^1.3.1",
     "parse": "^1.5.0",
-    "pixi.js": "^2.2.3",
+    "pixi.js": "^3.0.7",
     "react": "^0.13.2",
     "react-fa": "^3.2.0",
     "react-overlay-popup": "^1.0.2",
     "remarkable": "^1.6.0",
+    "require-sdk": "0.0.2",
     "screenfull": "^2.0.0",
     "serviceworker-cache-polyfill": "^3.0.0",
     "throat": "^2.0.2",

public/skins/default/skin_screen.xml

@@ -1935,12 +1935,6 @@
       <sprite image="NoteArea/Stripe.png" x="1" y="537" blend="screen"></sprite>
     </group>
   </defs>
-  <sprite image="Background/Space.jpg" x="0" y="0">
-    <animation>
-      <keyframe t="0.0" y="0" alpha="0"></keyframe>
-      <keyframe t="1.0" y="-32" alpha="1" ease="quadOut"></keyframe>
-    </animation>
-  </sprite>
   <!-- note panel (Left)-->
   <if key="p1_placement" value="left">
     <group>

public/skins/default/skin_template.jade

@@ -6,11 +6,6 @@ include _lib/common
   defs
     +all-note-area(id='note-area')
 
-  sprite(image='Background/Space.jpg' x='0' y='0')
-    animation
-      keyframe(t='0.0' y='0' alpha='0')
-      keyframe(t='1.0' y='-32' alpha='1' ease='quadOut')
-
   // note panel (Left)
   #{'if'}(key='p1_placement' value='left')
     group

spec/game/notechart_spec.js

@@ -26,6 +26,51 @@ describe('Notechart', function() {
     })
   })
 
+  describe('5K', function() {
+    const src = `
+      #00116:01
+      #00111:01
+      #00112:01
+      #00113:01
+      #00114:01
+      #00115:01
+    `
+    function byColumn(column) {
+      return note => note.column === column
+    }
+    describe('scratch left', function() {
+      it('should keep notes intact', function() {
+        var subject = notechart(src, { scratch: 'left' })
+        expect(subject.notes).to.have.length(6)
+        void expect(subject.notes.filter(byColumn('1'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('2'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('3'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('4'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('5'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('6'))).to.be.empty
+        void expect(subject.notes.filter(byColumn('7'))).to.be.empty
+      })
+    })
+    describe('scratch off', function() {
+      it('should shift columns by 1', function() {
+        var subject = notechart(src, { scratch: 'off' })
+        expect(subject.notes).to.have.length(5)
+        void expect(subject.notes.filter(byColumn('6'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('1'))).to.be.empty
+      })
+    })
+    describe('scratch right', function() {
+      it('should shift columns by 2', function() {
+        var subject = notechart(src, { scratch: 'right' })
+        expect(subject.notes).to.have.length(6)
+        void expect(subject.notes.filter(byColumn('6'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('7'))).not.to.be.empty
+        void expect(subject.notes.filter(byColumn('1'))).to.be.empty
+        void expect(subject.notes.filter(byColumn('2'))).to.be.empty
+      })
+    })
+  })
+
   describe('#samples', function() {
     it('should return an array of all used samples', function() {
       var subject = notechart('#WAV0X wow.wav\n#00101:0x0x')

spec/progress/formatters_spec.js

@@ -12,7 +12,7 @@ describe('ProgressFormatters', function() {
     it('should format as human readable size', function() {
       let p = new Progress()
       p.report(1, 1024)
-      expect(Formatters.BYTES_FORMATTER(p)).to.equal('1b / 1kb')
+      expect(Formatters.BYTES_FORMATTER(p)).to.equal('1B / 1kB')
     })
   })
 

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

@@ -15,6 +15,8 @@ export function MusicSelectStoreFactory(CollectionStore) {
   const $unofficial   = CollectionStore.map(state => state.unofficial)
   const $loading      = $collection.map(({ loading }) => loading)
 
+  const playableChart = chart => chart.keys === '7K' || chart.keys === '5K'
+
   const $grouping     = Bacon.constant([
     { title: 'Custom Song', criteria: song => song.custom },
     { title: 'Tutorial', criteria: song => song.tutorial },
@@ -34,7 +36,7 @@ export function MusicSelectStoreFactory(CollectionStore) {
           .sortByAll([
             song => {
               return _(song.charts)
-                .filter({ keys: '7K' })
+                .filter(playableChart)
                 .filter(chart => chart.info.difficulty < 5)
                 .filter(chart => chart.info.level > 0)
                 .map(chart => chart.info.level)
@@ -65,7 +67,7 @@ export function MusicSelectStoreFactory(CollectionStore) {
   const $charts = $song.map(song => (song && song.charts) || [ ])
 
   const $visibleCharts = $charts.map(charts => _(charts)
-      .filter({ keys: '7K' })
+      .filter(playableChart)
       .sortByAll(
         chart => chart.info.difficulty >= 5 ? 1 : 0,
         chart => chart.info.level

src/app/ui/music-chart-selector-item.jsx

@@ -12,6 +12,7 @@ export default React.createClass({
           'is-active': this.props.isSelected,
           'is-tutorial': this.props.isTutorial,
           'is-insane': this.props.chart.info.difficulty >= 5,
+          'is-5keys': this.props.chart.keys === '5K',
         })
     return <li
         className={classes}

src/app/ui/music-chart-selector-item.scss

@@ -3,7 +3,6 @@
 
 .music-chart-selector-item {
   list-style: none;
-  border: 2px solid #8ac;
   height: 12vmin;
   line-height: 12vmin;
   font-size: 5vmin;
@@ -13,17 +12,9 @@
   cursor: pointer;
   position: relative;
   &.is-active {
-    background: #8ac;
     color: white;
-    animation: 3s music-chart-selector-item--active-animation infinite;
-  }
-  &.is-insane {
-    border-color: #c66;
-    &.is-active {
-      background: #c66;
-      animation: 3s music-chart-selector-item--active-animation--insane infinite;
-    }
   }
+
   &--level {
     opacity: 1;
     transition: 0.3s opacity;
@@ -43,20 +34,26 @@
   }
 }
 
-@keyframes music-chart-selector-item--active-animation {
-  $color: #8ac;
-  $color1: lighten($color, 10%);
-  $color2: darken($color, 10%);
-  0% { background: $color1; }
-  50% { background: $color2; }
-  100% { background: $color1; }
+@mixin music-chart-selector-item--color($color, $name, $selector) {
+  $animation-name: music-chart-selector-item--active-#{$name};
+  .music-chart-selector-item {
+    #{unquote($selector)} {
+      border: 2px solid $color;
+      &.is-active {
+        background: #8ac;
+        animation: 3s #{$animation-name} infinite;
+      }
+    }
+  }
+  @keyframes #{$animation-name} {
+    $color1: lighten($color, 10%);
+    $color2: darken($color, 10%);
+    0% { background: $color1; }
+    50% { background: $color2; }
+    100% { background: $color1; }
+  }
 }
 
-@keyframes music-chart-selector-item--active-animation--insane {
-  $color: #c66;
-  $color1: lighten($color, 10%);
-  $color2: darken($color, 10%);
-  0% { background: $color1; }
-  50% { background: $color2; }
-  100% { background: $color1; }
-}
+@include music-chart-selector-item--color(#8ac, normal, '&');
+@include music-chart-selector-item--color(#ac8, 5k, '&.is-5keys');
+@include music-chart-selector-item--color(#c66, insane, '&.is-insane');

src/game/display/game-display.scss

@@ -0,0 +1,36 @@
+
+.game-display {
+  display: block;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+
+  &--bg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    background: url(./background/default.jpg) center no-repeat;
+    background-size: cover;
+    animation: 1.5s game-display--bg-default;
+    animation-fill-mode: both;
+  }
+
+  > canvas {
+    position: relative;
+    z-index: 100;
+  }
+}
+
+@keyframes game-display--bg-default {
+  from {
+    transform: translate(0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate(0, -35px);
+    opacity: 1;
+  }
+}