Merge pull request #93 from bemusic/test-notes-display

Test the newly implemented NoteArea

spec/game/note-area_spec.js

@@ -0,0 +1,28 @@
+
+import NoteArea from 'bemuse/game/note-area'
+
+describe('NoteArea', function() {
+
+  it('allows querying the visible note from a list of notes', function() {
+    let notes = [
+      { position: 1, column: 'A' },
+      { position: 2, column: 'A' },
+      { position: 3, column: 'A' },
+      { position: 4, column: 'A' },
+      { position: 5, column: 'A' },
+      { position: 6, column: 'A' },
+      { position: 10, end: { position: 12 }, column: 'B' },
+      { position: 11, column: 'C' },
+    ]
+    let area = new NoteArea(notes)
+    expect(area.getVisibleNotes(1.5, 3.5)).to.have.length(2)
+    expect(area.getVisibleNotes(-1, 7)).to.have.length(6)
+    expect(area.getVisibleNotes(8, 10.1)).to.have.length(1)
+    expect(area.getVisibleNotes(8, 10.1)).to.have.length(1)
+    expect(area.getVisibleNotes(8, 14)).to.have.length(2)
+    expect(area.getVisibleNotes(11.5, 14)).to.have.length(1)
+    expect(area.getVisibleNotes(12.5, 14)).to.have.length(0)
+  })
+
+})
+

spec/scintillator/scintillator_spec.js

@@ -101,6 +101,18 @@ describe('Scintillator', function() {
       expect(stage.children[0].children).to.have.length(2)
       context.destroy()
     }))
+    it('should update same array with content changed', co.wrap(function*() {
+      let skin = yield Scintillator.load(fixture('expr_object.xml'))
+      let context = new Scintillator.Context(skin)
+      let stage = context.stage
+      let notes = []
+      context.render({ notes })
+      expect(stage.children[0].children).to.have.length(0)
+      notes.push({ key: 'a', y: 20 })
+      context.render({ notes })
+      expect(stage.children[0].children).to.have.length(2)
+      context.destroy()
+    }))
     it('should let children get value from item', co.wrap(function*() {
       let skin = yield Scintillator.load(fixture('expr_object_var.xml'))
       let context = new Scintillator.Context(skin)

src/app/index.js

@@ -20,16 +20,29 @@ export function main() {
     let columns = ['SC', '1', '2', '3', '4', '5', '6', '7']
 
     function updateNotes() {
-      let p = data.t * 180 / 60
-      let entities = area.getVisibleNotes(p, p + (5 / 3), 550)
+      let p = data.t * 192 / 60
       for (let column of columns) {
-        data[`note_${column}`] = entities.filter(entity =>
-          !entity.height && entity.column === column)
-        data[`longnote_${column}`] = entities.filter(entity =>
-          entity.height && entity.column === column)
-        .map(entity => Object.assign({ }, entity, {
-          active: entity.y + entity.height > 550
-        }))
+        data[`note_${column}`].length = 0
+        data[`longnote_${column}`].length = 0
+      }
+      let entities = area.getVisibleNotes(p, p + (5 / 2.5))
+      for (let entity of entities) {
+        let note = entity.note
+        let column = note.column
+        if (entity.height) {
+          data[`longnote_${column}`].push({
+            key:    note.id,
+            y:      entity.y * 550,
+            height: entity.height * 550,
+            active: entity.y + entity.height > 1,
+            missed: entity.y + entity.height > 1.1 && note.id % 5 === 0,
+          })
+        } else {
+          data[`note_${column}`].push({
+            key:    note.id,
+            y:      entity.y * 550,
+          })
+        }
       }
     }
 
@@ -63,9 +76,9 @@ function generateRandomNotes() {
   for (let column of columns) {
     let position = 4
     for (let j = 0; j < 2000; j ++) {
-      position += chance.integer({ min: 1, max: 6 }) / 8
-      let length = chance.bool({ likelihood: 20 }) ?
-                      chance.integer({ min: 1, max: 8 }) / 8 : 0
+      position += chance.integer({ min: 1, max: 6 }) / 4
+      let length = chance.bool({ likelihood: 10 }) ?
+                      chance.integer({ min: 1, max: 24 }) / 4 : 0
       let id = nextId++
       if (length > 0) {
         let end = { position: position + length }

src/game/note-area.js

@@ -5,30 +5,35 @@ export class NoteArea {
   constructor(notes) {
     this._notes = R.sortBy(position, notes)
   }
-  getVisibleNotes(lower, upper, height) {
-    return this._notes.filter(note =>
-      note.end ?
-        !(note.position > upper || note.end.position < lower) :
-        !(note.position > upper || note.position < lower))
-    .map(note => {
-      if (!note.end) {
-        return {  key: note.id, y: y(lower, upper, note.position, height),
-                  column: note.column, }
-      } else {
-        let head = y(lower, upper, note.position, height)
-        let tail = y(lower, upper, note.end.position, height)
-        return {  key: note.id, y: Math.min(head, tail),
-                  height: Math.abs(head - tail),
-                  column: note.column, }
+  getVisibleNotes(lower, upper) {
+    let out = []
+    let notes = this._notes
+    for (let i = 0; i < notes.length; i ++) {
+      let note = notes[i]
+      let visible = note.end ?
+            !(note.position > upper || note.end.position < lower) :
+            !(note.position > upper || note.position < lower)
+      if (visible) {
+        let entity = { note: note }
+        if (!note.end) {
+          entity.y = y(lower, upper, note.position)
+        } else {
+          let head = y(lower, upper, note.position)
+          let tail = y(lower, upper, note.end.position)
+          entity.y       = Math.min(head, tail)
+          entity.height  = Math.abs(head - tail)
+        }
+        out.push(entity)
       }
-    })
+    }
+    return out
   }
 }
 
 export default NoteArea
 
-function y(lower, upper, position, height) {
-  return height - (position - lower) / (upper - lower) * height
+function y(lower, upper, position) {
+  return 1 - (position - lower) / (upper - lower)
 }
 
 function position(event) {

src/scintillator/nodes/object.js

@@ -62,7 +62,7 @@ export class ObjectNode extends SkinNode {
       let manager = new ChildManager()
       manager.createInstance = () =>
         multi(this.children.map(c => c.instantiate(context, object)))
-      self.bind(this.key, array => manager.push(array))
+      self.onData(data => manager.push(this.key(data)))
     })
   }
 }