moved player application to own repo

__test__/animation/animation.test.js

@@ -0,0 +1,47 @@
+"use strict"
+const { getDataStructure, reset } = require("../../dataStructures/dataStructures")
+const { array, addArrayClick, addStateChange } = require("../helpers/response")
+const { av } = require("../helpers/av")
+const { swap } = require("../helpers/functions")
+const initialState = require("../../initialState/initialState")
+const animation = require("../../animation/animation")
+
+// const rest = require('../rest/rest')
+
+// jest.mock('../rest/rest')
+// rest.getSubmissions.mockImplementation(() => Promise.resolve(response.fake))
+
+// const handleArrayClick = jest.fn( () => console.log('click set'))
+
+describe("animation with one data structure", () => {
+  beforeEach( () => {
+    reset()
+  })
+
+  test("array click", () => {
+    const id = array.initialState[0].id
+    const currentStep = [0, 1]
+    const index = [0, 1]
+    addArrayClick(id, currentStep[0], index[0])
+    addArrayClick(id, currentStep[0], index[1])
+    initialState.setInitialDataStructures(av, array)
+    animation.setAnimationSteps(av, array)
+    const arr = getDataStructure(id).arr
+
+    expect(arr._indices[index[0]].highlighted).toBe(true)
+    expect(arr._indices[index[1]].highlighted).toBe(true)
+  })
+
+  test("state change", () => {
+    initialState.setInitialDataStructures(av, array)
+    const id = array.initialState[0].id
+    const currentStep = [0, 1]
+    const arr = getDataStructure(id).arr
+    addStateChange(id, currentStep[0], swap(arr._values, 0, 1))
+    addStateChange(id, currentStep[1], swap(swap(arr._values, 0, 1), 2, 3))
+    const state =  swap(swap(arr._values, 0, 1), 2, 3)
+    animation.setAnimationSteps(av, array)
+
+    expect(arr._values).toEqual(state)
+  })
+})

__test__/helpers/av.js

@@ -0,0 +1,36 @@
+const av = {
+  ds: {
+    array: createArray
+  },
+  step: () => console.log("set animation step")
+}
+
+function createArray(values, options) {
+  return {
+    _indices: indices(values),
+    _values: [ ...values ],
+    options: { ...options },
+    highlight: function(i) { this._indices[i].highlighted = true },
+    swap: function(i,j) { swap(this._indices, this._values, i, j) },
+    unhighlight: function(i) { this._indices[i].highlighted = false },
+  }
+}
+
+function indices(values) {
+  return values.map((v, i) => {
+    return { highlighted: false }
+  })
+}
+
+function swap(indices, values, i, j) {
+  const tempValues = values[j]
+  const tempIndices = { ...indices[j] }
+  values[j] = values[i]
+  indices[j] = { ...indices[i] }
+  values[i] = tempValues
+  indices[i] = { ...tempIndices }
+}
+
+module.exports = {
+  av
+}

__test__/helpers/functions.js

@@ -0,0 +1,10 @@
+function swap(array, i, j){
+  const newArray = [ ...array ]
+  newArray[j] = array[i]
+  newArray[i] = array[j]
+  return newArray
+}
+
+module.exports = {
+  swap
+}

__test__/helpers/response.js

@@ -0,0 +1,86 @@
+const array =
+  {
+    "metadata": {},
+    "definitions": {
+      "style": {},
+      "score": {
+        "total": 27,
+        "correct": 3,
+        "undo": 0,
+        "fix": 0,
+        "student": 3
+      },
+      "options": {
+        "title": "Insertion Sort",
+        "instructions": "Use Insertion Sort to sort the table given below in ascending order. Click on an item to select it and click again on another one to swap these bars."
+      }
+    },
+    "initialState": [
+      {
+        "type": "array",
+        "id": "jsav-d0c9c4b33d0947a89dfde2f2413910eb",
+        "values": [
+          107,
+          13,
+          102,
+          26,
+          103,
+          16,
+          75,
+          55,
+          72,
+          21
+        ],
+        "options": {
+          "visible": true,
+          "autoresize": true,
+          "center": true,
+          "layout": "bar",
+          "indexed": true,
+          "template": "<span class=\"jsavvaluebar\"></span><span class=\"jsavvalue\"><span class=\"jsavvaluelabel\">{{value}}</span></span><span class=\"jsavindexlabel\">{{index}}</span>"
+        }
+      }
+    ],
+    "animation": [],
+    "id": 1
+  }
+
+function addArrayClick(id, currentStep, index) {
+  array.animation.push({
+    "type": "click",
+    "tstamp": new Date(),
+    currentStep,
+    "dataStructureId": id,
+    index,
+    score: {
+      "total": 1,
+      "correct": 0,
+      "undo": 0,
+      "fix": 0,
+      "student": 1
+    }
+  })
+}
+
+function addStateChange(id, currentStep, state) {
+  array.animation.push({
+    "type": "state-change",
+    "tstamp": new Date(),
+    currentStep,
+     "dataStructureId": id,
+     state,
+     score: {
+      "total": 1,
+      "correct": 0,
+      "undo": 0,
+      "fix": 0,
+      "student": 1
+    }
+  })
+}
+
+module.exports = {
+  array,
+  addArrayClick,
+  addStateChange
+}

__test__/initialState/initialState.test.js

@@ -0,0 +1,29 @@
+"use strict"
+const { getDataStructure, reset } = require("../../dataStructures/dataStructures")
+const response = require("../helpers/response")
+const { av } = require("../helpers/av")
+const initialState = require("../../initialState/initialState")
+
+describe("initial state with one data structure", () => {
+  beforeEach( () => {
+    reset()
+  })
+
+  test("single array set correctly", () => {
+    initialState.setInitialDataStructures(av, response.array)
+    const submittedInitialState = response.array.initialState
+    const expectedDataStructure = {
+      type: "array",
+      submissionId: submittedInitialState[0].id, 
+      arr: { 
+        _values: [ ...submittedInitialState[0].values ], 
+        options: { ...submittedInitialState[0].options },
+      }
+    }
+    const dataStructure = getDataStructure(submittedInitialState[0].id)
+    expect(dataStructure.type).toEqual(expectedDataStructure.type)
+    expect(dataStructure.submissionId).toEqual(expectedDataStructure.submissionId)
+    expect(dataStructure.arr.values).toEqual(expectedDataStructure.arr.values)
+    expect(dataStructure.arr.options).toEqual(expectedDataStructure.arr.options)
+  })
+})

animation/animation.js

@@ -0,0 +1,106 @@
+const dataStructures = require("../dataStructures/dataStructures")
+const { getSwappedIndexes, isSwap } = require("../utils/helperFunctions")
+
+function setAnimationSteps(av, submission) {
+  submission.animation.forEach(step => {    
+    switch(step.type) {
+      case "click":
+        try {
+          handleClick(av, step)
+        } catch (err) {
+          alert(`Error handling click action: ${err.message} \n continuing with execution but shown animation 
+          might not respond real submission`)   
+        }
+        break
+      case "state-change":
+        try {
+          handleStateChange(av, step)
+        } catch (err) {
+          alert(`Error handling state change: ${err.message} \n continuing with execution but shown animation 
+          might not respond real submission`)   
+        }
+        break
+      case "grade":
+        try {
+          handleGradeEvent(av, step)
+        } catch (err) {
+          alert(`Error handling grade event: ${err.message} \n continuing with execution but shown animation 
+          might not respond real submission`)
+        }
+        break
+      default:        
+        throw new Error(`Unknown animation step type: ${JSON.stringify(step)}`)
+    }
+  })
+}
+
+function handleClick(av, step) {
+  const dataStructure = dataStructures.getDataStructure(step.dataStructureId)  
+  switch(dataStructure.type) {
+    case "array":
+      handleArrayClick(av,dataStructure, step)
+      break
+    default:
+      throw new Error(`Unknown data structure type: ${JSON.stringify(step)}`)
+    }
+}
+
+function handleArrayClick(av, dataStructure, step) {   
+  dataStructure.arr.highlight(step.index)
+  av.step()
+}
+
+function handleStateChange(av, step) {
+  const dataStructure = dataStructures.getDataStructure(step.dataStructureId)  
+  switch(dataStructure.type) {
+    case "array":
+      try {
+        handleArrayStateChange(av,dataStructure, step)
+      } catch (err) {
+        alert(`Error handling array state change: ${err.message} \n continuing with execution but shown animation 
+        might not respond real submission`)
+      }
+      break
+    default:
+      throw new Error(`Unknown data structure type: ${JSON.stringify(step)}`)
+  }
+}
+
+function handleArrayStateChange(av, dataStructure, step) {
+  const oldState = dataStructure.arr._values
+  const newState = step.state
+  const stateChangeType = getArrayStateChangeType(oldState, newState)
+  switch(stateChangeType) {
+    case "swap":     
+      const [ i, j ] = getSwappedIndexes(oldState, newState)
+      dataStructure.arr.swap(i, j)
+      dataStructure.arr.unhighlight(i)
+      dataStructure.arr.unhighlight(j)
+      av.step()
+      break
+    default:
+      dataStructure.arr.unhighlight()
+      throw new Error(`Unknown state change type: ${stateChangeType}`)
+  }
+}
+
+function getArrayStateChangeType(oldState, newState) {
+  if(isSwap(oldState, newState)){
+    return "swap"
+  }
+  return `Old state: ${oldState} \n New statea: ${newState}`
+}
+
+function handleGradeEvent(av, step)  {
+  av.umsg("Animation finished", {"color": "blue"});
+  Object.keys(step.score).forEach(key => {
+    let span = document.createElement('span')
+    span.innerText = `${key[0].toUpperCase()}${key.slice(1)}: ${step.score[key]} `
+    document.getElementById('scores').appendChild(span)
+  })
+  av.step()
+}
+
+module.exports = {
+  setAnimationSteps,
+}