improvments to the state machine (states can now be registered) and those improvments are now used for the existing two states (plus some code general code cleanup)

1 files changed, 126 insertions, 0 deletions

diff --git a/js/codeq/mainScreen.js b/js/codeq/mainScreen.js
new file mode 100644
index 0000000..8752cbe
--- /dev/null
+++ b/js/codeq/mainScreen.js
@@ -0,0 +1,126 @@
+/**
+ * Created by robert on 9/17/15.
+ */
+
+(function() {
+    var problems,//this will the actual (sub)state machine
+        stateNameTag = 'stateName';
+
+    var divs = {};
+    divs['description'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#description)');//lets actually find the needed divs for later use
+    divs['code'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#code_editor)');
+    divs['console'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#console)');//named 'consoleDiv', because 'console' is already in use
+    divs['info'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#info)');
+
+    divs['description'].data(stateNameTag, 'description');
+    divs['code'].data(stateNameTag, 'code');
+    divs['console'].data(stateNameTag, 'console');
+    divs['info'].data(stateNameTag, 'info');
+
+    var eventName = 'mousedown',//event name of the event which will trigger the transition between these substates
+        mouseDownEventFunction = function () {
+            problems.transition($(this).data(stateNameTag));
+        },
+        removeListenersFromDivs = function () {
+            $.each(divs, function (i, value) {
+                value.off(eventName, mouseDownEventFunction);
+            });
+        },
+        removeBlockClassesFromDivs = function () {
+            $.each(divs, function (i, value) {
+                value.removeClass('block');
+            });
+        },
+        removeChangedClassesFromDivs = function () {
+            $.each(divs, function (i, value) {
+                value.removeClass('block-focus block-less-width block-less-height block-less-everything').addClass('block');//these class names were chosen for the view where the screen is partitioned in 4 quarters (2 by 2)
+            });
+        },
+        setTransitionsBetweenDivs = function (current) {
+            $.each(divs, function (key, value) {
+                if (current !== key) value.on(eventName, mouseDownEventFunction);
+            });
+        },
+        addClassesToDivs = function (divsWithClasses) {
+            $.each(divsWithClasses, function (divName, className) {
+                divs[divName].addClass(className);
+            });
+        },
+        substates = {
+            'description': {
+                'enter': function () {
+                    removeBlockClassesFromDivs();
+                    addClassesToDivs({
+                        'description': 'block-focus',
+                        'code': 'block-less-width',
+                        'console': 'block-less-height',
+                        'info': 'block-less-everything'
+                    });
+                    setTransitionsBetweenDivs('description');
+                },
+                'exit': function () {
+                    removeChangedClassesFromDivs();
+                    removeListenersFromDivs();
+                }
+            },
+            'code': {
+                'enter': function () {
+                    removeBlockClassesFromDivs();
+                    addClassesToDivs({
+                        'description': 'block-less-width',
+                        'code': 'block-focus',
+                        'console': 'block-less-everything',
+                        'info': 'block-less-height'
+                    });
+                    setTransitionsBetweenDivs('code');
+                },
+                'exit': function () {
+                    removeChangedClassesFromDivs();
+                    removeListenersFromDivs();
+                }
+            },
+            'info': {
+                'enter': function () {
+                    removeBlockClassesFromDivs();
+                    addClassesToDivs({
+                        'description': 'block-less-everything',
+                        'code': 'block-less-height',
+                        'console': 'block-less-width',
+                        'info': 'block-focus'
+                    });
+                    setTransitionsBetweenDivs('info');
+                },
+                'exit': function () {
+                    removeChangedClassesFromDivs();
+                    removeListenersFromDivs();
+                }
+            },
+            'console': {
+                'enter': function () {
+                    removeBlockClassesFromDivs();
+                    addClassesToDivs({
+                        'description': 'block-less-height',
+                        'code': 'block-less-everything',
+                        'console': 'block-focus',
+                        'info': 'block-less-width'
+                    });
+                    setTransitionsBetweenDivs('console');
+                },
+                'exit': function () {
+                    removeChangedClassesFromDivs();
+                    removeListenersFromDivs();
+                }
+            }
+        };
+    codeq.globalStateMachine.register('prolog', {
+        'enter': function () {
+            $('#screen_prolog').css('display', '');
+            problems = codeq.makeStateMachine(substates);
+            problems.transition(divs['description'].data(stateNameTag));
+        },
+        'exit': function () {
+            $('#screen_prolog').css('display', 'none');
+            problems.destroy();
+        }
+    });
+})();
\ No newline at end of file