Progress on Retina/OS X migration.

index.html

@@ -42,6 +42,8 @@
     <script type="text/javascript" src="scripts/core/ronin.js"></script>
     <script type="text/javascript" src="scripts/core/widget.js"></script>
     
+    <link rel="stylesheet" type="text/css" href="links/reset.css"/>
+    <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
     <link rel="stylesheet" type="text/css" href="links/main.css"/>
     <title>Ronin</title>
   </head>

links/fonts.css

@@ -0,0 +1,15 @@
+/* Input Mono */
+
+@font-face {
+    font-family: 'input_mono_regular';
+    src: url('../media/fonts/input_mono_regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'input_mono_medium';
+    src: url('../media/fonts/input_mono_medium.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

links/main.css

@@ -1,4 +1,4 @@
-body { margin:0px; padding:0px; overflow:hidden; font-family:courier,monospace;}
+body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
 *:focus {outline: none; }
 
 canvas:hover { cursor: crosshair;}
@@ -7,16 +7,16 @@ canvas:hover { cursor: crosshair;}
 #surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px;}
 #overlay { position:absolute; z-index:1000;}
 #workspace { position:absolute; background:#efefef; border-radius:3px;}
-#widget { color:#efefef; position:absolute; font-size:11px; line-height:30px;}
+#widget { color:#efefef; position:absolute; font-size:10px; line-height:30px;}
 #widget .cursor { float:right;}
 
 #commander { display:none; z-index: 2000; position:fixed; }
 #commander.visible { display:block; }
 #commander.hidden { display:none; }
-#commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}
+#commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:12px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block;}
 #commander input:before { content:"input"; color:red;}
 
-#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;}
+#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 12px;width: 100vw;color: #999;}
 #commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;}
 #commander_hint .param { font-style: italic;}
 #commander_hint .param:after { content:", "; }

links/reset.css

@@ -0,0 +1 @@
+* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

scripts/core/keyboard.js

@@ -1,24 +1,8 @@
 function Keyboard()
 {
-  this.is_locked = false;
-
-  this.lock = function()
-  {
-    this.is_locked = true;
-    interface.actions_panel.style.color = "red";
-  }
-
-  this.unlock = function()
-  {
-    this.is_locked = false;
-    interface.actions_panel.style.color = "black";
-  }
-
   this.listen_onkeyup = function(event)
   {
-    if(this.is_locked === true){ return; }
-  
-    if(event.keyCode == 9) this.key_tab();
+    console.log(event.which);
     switch (event.key) {
       case "Enter": this.key_enter(); break;
       case " " : this.key_space(); break;
@@ -31,6 +15,12 @@ function Keyboard()
       case ";": if (event.shiftKey) this.key_colon(); break;
       case "Escape": this.key_escape(); break;
     }
+    
+    switch(event.which)
+    {
+      case 13:  this.key_enter(); break;
+      case 186: this.key_colon(); break;
+    }
 
     // Passive
     commander.passive(commander.element_input.value);

scripts/modules/canvas.js

@@ -35,10 +35,12 @@ function Canvas(rune)
     var canvas_pixels = ronin.canvas.element.toDataURL("image/png");
     var pixels_rect   = new Rect(this.element.width+"x"+this.element.height);
     
-    this.element.setAttribute('width',rect.width+"px");
-    this.element.setAttribute('height',rect.height+"px");
+    this.element.width = rect.width * 2;
+    this.element.height = rect.height * 2;
     this.element.style.left = (window.innerWidth/2)-(rect.width/2);
     this.element.style.top = (window.innerHeight/2)-(rect.height/2);
+    this.element.style.width = rect.width+"px";
+    this.element.style.height = rect.height+"px";
     
     ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
     ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
@@ -51,6 +53,7 @@ function Canvas(rune)
     
     if(!position){ position = new Position("0,0");}
     ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
+    ronin.canvas.context().scale(2,2);
   }
   
   this.context = function()

scripts/modules/overlay.js

@@ -103,10 +103,13 @@ function Overlay(rune)
   
   this.resize = function(rect)
   {
-    this.element.setAttribute('width',rect.width+"px");
-    this.element.setAttribute('height',rect.height+"px");
+    this.element.width = rect.width * 2;
+    this.element.height = rect.height * 2;
     this.element.style.left = (window.innerWidth/2)-(rect.width/2);
     this.element.style.top = (window.innerHeight/2)-(rect.height/2);
+    this.element.style.width = rect.width+"px";
+    this.element.style.height = rect.height+"px";
+    this.context().scale(2,2);
   }
   
   this.context = function()