update hack with a slightly better UI

9 years ago · 9f0cc4ed64
parent 71c0a06c3b
commit 9f0cc4ed64
2 changed files with 54 additions and 14 deletions
--- a/www/hack/index.html
+++ b/www/hack/index.html
@ -12,8 +12,14 @@
            box-sizing: border-box;
        }
        textarea{
+            position: absolute;
+            top: 5vh;
+            left: 0px;
+            border: 0px;
+
+            padding-top: 15px;
            width: 100%;
-            height: 100vh;
+            height: 95vh;
            max-width: 100%;
            max-height: 100vh;

@ -32,26 +38,41 @@
            color: #637476;
        }

-        #run {
+        #panel {
            position: fixed;
            top: 0px;
            right: 0px;
-
-            z-index: 100;
-            width: 5vw;
+            width: 100%;
            height: 5vh;
+            z-index: 95;
+            background-color: #777;
+            /* min-height: 75px; */
+        }
+        #run {
+            display: block;
+            float: right;
+            height: 100%;
+            width: 10vw;
+            z-index: 100;
+            line-height: 5vw;
+            font-size: 1.5em;
            background-color: #222;
            color: #CCC;
-
-            display: block;
            text-align: center;
+            border-radius: 5%;
+            border: 0px;
        }

    </style>
 </head>
 <body>
    <textarea></textarea>
-    <a href="#" id="run">RUN</a>
+    <div id="panel">
+            <!-- TODO update this element when new users join -->
+            <span id="users"></span>
+            <!-- what else should go in the panel? -->
+            <a href="#" id="run">RUN</a>
+    </div>
 </body>
 </html>

--- a/www/hack/main.js
+++ b/www/hack/main.js
@ -84,16 +84,35 @@ define([
        setSelectionRange(el, pos, pos);
    };

+    var state = {};
+
+    // TODO
+    $textarea.on('keydown', function (e) {
+        // track when control keys are pushed down
+        //switch (e.key) { }
+    });
+
+    // TODO
+    $textarea.on('keyup', function (e) {
+        // track when control keys are released
+    });
+
    $textarea.on('keypress', function (e) {
        switch (e.key) {
            case 'Tab':
                // insert a tab wherever the cursor is...
-                var position = $textarea.prop("selectionStart");
-                if (typeof position !== 'undefined') {
-                    $textarea.val(function (i, val) {
-                        return splice(val, position, "\t");
-                    });
-                    setCursor($textarea[0], position +1);
+                var start = $textarea.prop('selectionStart');
+                var end = $textarea.prop('selectionEnd');
+                if (typeof start !== 'undefined') {
+                    if (start === end) {
+                        $textarea.val(function (i, val) {
+                            return splice(val, start, "\t");
+                        });
+                        setCursor($textarea[0], start +1);
+                    } else {
+                        // indentation?? this ought to be fun.
+
+                    }
                }
                // prevent default behaviour for tab
                e.preventDefault();