WIP: Recreate Data Velocity Interactive

csfieldguide/interactives/content/en/interactives.yaml

@@ -52,6 +52,8 @@ confusing-error:
   name: Confusing Error
 data-bias:
   name: Data Bias
+data-drop:
+  name: Data Drop
 data-visualisation:
   name: Data Visualisation
 date-picker:

csfieldguide/interactives/content/structure/interactives.yaml

@@ -126,6 +126,10 @@ data-bias:
   languages:
     en: interactives/data-bias.html
   is_interactive: true
+data-drop:
+  languages:
+    en: interactives/data-drop.html
+  is_interactive: true
 data-visualisation:
   languages:
     en: interactives/data-visualisation.html

csfieldguide/package.json

@@ -51,6 +51,7 @@
         "csfg-interactive-cmy-mixer": "file:./static/interactives/cmy-mixer/",
         "csfg-interactive-colour-matcher": "file:./static/interactives/colour-matcher/",
         "csfg-interactive-data-bias": "file:./static/interactives/data-bias/",
+        "csfg-interactive-data-drop": "file:./static/interactives/data-drop/",
         "csfg-interactive-data-visualisation": "file:./static/interactives/data-visualisation/",
         "csfg-interactive-frequency-anaylsis": "file:./static/interactives/frequency-analysis/",
         "csfg-interactive-jpeg-compression": "file:./static/interactives/jpeg-compression/",

csfieldguide/static/interactives/data-drop/README.md

@@ -0,0 +1,27 @@
+# Data Drop interactive
+
+**Authors:**
+
+- Riley McCann
+- Nishant Chintala
+- Nonso Iwu
+- Connor Creavin
+
+The original can be found [here](https://github.com/rmccann01/DataVelocityInteractive).
+
+**Recreated by:** Alasdair Smith
+
+This interactive demonstrates the limits of processing a lot of data with a single processor.
+
+## Assets
+
+Assets used in the `assets` directory are images from the original game, edited by Alasdair Smith for the new context.
+
+## Licences
+
+TODO
+
+## Known Issues
+
+- The animation of objects will stop while the webpage is hidden, but new data balls are still created.
+  When the user returns all the new balls are dropped at once.

csfieldguide/static/interactives/data-drop/js/data-drop.js

@@ -0,0 +1,28 @@
+
+require('phaser');
+//var urlParameters = require('../../../js/third-party/url-parameters.js');
+var GAME = require('./game.js');
+
+$(document).ready(function() {
+  var gameScene = new GAME.GameScene();
+  var uiScene = new GAME.UIScene();
+
+  var config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    physics: {
+      default: 'arcade',
+      arcade: {
+        gravity: { y: 0 },
+        debug: false
+      }
+    },
+    backgroundColor: '#000',
+    parent: 'data-drop-game',
+    scene: gameScene
+  }
+
+  var game = new Phaser.Game(config);
+  game.scene.add('UIScene', uiScene, true);
+});