Merge pull request #382 from paulkaplan/feature/monitor-labels-using-reducer

Take responsibility for labeling, categorizing and positioning monitors

src/components/monitor/monitor.jsx

@@ -7,7 +7,7 @@ const styles = require('./monitor.css');
 const categories = {
     data: '#FF8C1A',
     sensing: '#5CB1D6',
-    sounds: '#CF63CF',
+    sound: '#CF63CF',
     looks: '#9966FF',
     motion: '#4C97FF'
 };

src/lib/monitor-adapter.js

+/**
+ * Convert monitors from VM format to what the GUI needs to render.
+ * - Convert opcode to a label and a category
+ * - Add missing XY position data if needed
+ */
+const OpcodeLabels = require('../lib/opcode-labels.js');
+
+const PADDING = 5;
+const MONITOR_HEIGHT = 23;
+
+const isUndefined = a => typeof a === 'undefined';
+
+module.exports = function ({id, opcode, params, value, x, y}, monitorIndex) {
+    let {label, category, labelFn} = OpcodeLabels(opcode);
+
+    // Use labelFn if provided for dynamic labelling (e.g. variables)
+    if (!isUndefined(labelFn)) label = labelFn(params);
+
+    // Simple layout if x or y are undefined
+    // @todo scratch2 has a more complex layout behavior we may want to adopt
+    // @todo e.g. this does not work well when monitors have already been moved
+    if (isUndefined(x)) x = PADDING;
+    if (isUndefined(y)) y = PADDING + (monitorIndex * (PADDING + MONITOR_HEIGHT));
+
+    return {id, label, category, value, x, y};
+};

src/lib/opcode-labels.js

+const opcodeMap = {
+    // Motion
+    motion_direction: {
+        category: 'motion',
+        label: 'direction'
+    },
+    motion_xposition: {
+        category: 'motion',
+        label: 'x position'
+    },
+    motion_yposition: {
+        category: 'motion',
+        label: 'y position'
+    },
+
+    // Looks
+    looks_size: {
+        category: 'looks',
+        label: 'size'
+    },
+    looks_costumeorder: {
+        category: 'looks',
+        label: 'costume #'
+    },
+    looks_backdroporder: {
+        category: 'looks',
+        label: 'backdrop #'
+    },
+    looks_backdropname: {
+        category: 'looks',
+        label: 'backdrop name'
+    },
+
+    // Data
+    data_variable: {
+        category: 'data',
+        labelFn: params => params.VARIABLE
+    },
+
+    // Sound
+    sound_volume: {
+        category: 'sound',
+        label: 'volume'
+    },
+    sound_tempo: {
+        category: 'sound',
+        label: 'tempo'
+    },
+
+    // Sensing
+    sensing_loudness: {
+        category: 'sensing',
+        label: 'loudness'
+    },
+    sensing_of: {
+        category: 'sensing',
+        labelFn: params => `${params.PROPERTY} of ${params.OBJECT}`
+    },
+    sensing_current: {
+        category: 'sensing',
+        labelFn: params => params.CURRENTMENU.toLowerCase()
+    },
+    sensing_timer: {
+        category: 'sensing',
+        label: 'timer'
+    }
+};
+
+module.exports = function (opcode) {
+    if (opcode in opcodeMap) return opcodeMap[opcode];
+    return {
+        category: 'data',
+        label: opcode
+    };
+};

src/reducers/monitors.js

+const monitorAdapter = require('../lib/monitor-adapter.js');
+
 const UPDATE_MONITORS = 'scratch-gui/monitors/UPDATE_MONITORS';
 
 const initialState = [];
@@ -6,7 +8,7 @@ const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
     case UPDATE_MONITORS:
-        return [...action.monitors];
+        return action.monitors.map(monitorAdapter);
     default:
         return state;
     }