Initial NEI commit (untested)

#40
onsubmit · Mar 1, 2015 · f9aded8 · f9aded8
1 parent 701fa3d
commit f9aded8
Show file tree

Hide file tree

Showing 5 changed files with 440 additions and 29 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -34,13 +34,13 @@ h1, h2, h3, h4, h5, h6, p {
   padding-bottom: 10px;
 }
 
-#craftingTable {
+#craftingTable, #craftingDialogTable {
   empty-cells: show;
   border-spacing: 0px;
   float: left;
 }
 
-#craftingTable td, td.craftingCell {
+#craftingTable td, #craftingDialogTable td, td.craftingCell {
   width: 24px;
   height: 32px;
   min-width: 24px;
@@ -53,7 +53,7 @@ h1, h2, h3, h4, h5, h6, p {
   border-bottom: 2px solid #fff;
 }
 
-div.accept, div#craftingOutput {
+div.accept, div#craftingOutput, div #craftingDialogOutput {
   width: 24px;
   height: 24px;
   min-width: 24px;
@@ -79,7 +79,12 @@ div.accept, div#craftingOutput {
   float: left;
 }
 
-#craftingOutputTable {
+#craftDialogArrow {
+  padding: 10px 5px 0 5px;
+  float: left;
+}
+
+#craftingOutputTable, #craftingDialogOutputTable {
   empty-cells: show;
   border-spacing: 0px;
 }
@@ -303,6 +308,59 @@ table.tile td div.shadowTop {
   height: calc(100% - 78px);
 }
 
+#itemTooltip {
+  position: absolute;
+  z-index: 1000;
+  width: 125px;
+  opacity: 0.9;
+  filter: Alpha(Opacity=90);
+
+  border: 2px solid #fff;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.75);
+
+  color: #fff;
+  text-shadow: 1px 1px #000;
+  font-family: georgia, arial, helvetica, sans-serif;
+  font-size: 0.8em;
+  box-shadow: 2px 2px 4px #666;
+}
+
+#itemTooltipName {
+  padding: 0;
+  margin: 0;
+  height: 24px;
+  text-decoration: underline;
+  font-size: 1.2em;
+  line-height: 24px;
+}
+
+#itemMenu {
+  padding: 4px 0 0 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+#itemMenu li {
+  width: 100%;
+}
+
+#itemMenu a {
+  text-decoration: none;
+  display: block;
+  color: #eee;
+  background-color: #333;
+}
+
+#itemMenu a:link, #itemMenu a:visited {
+  color: #eee;
+}
+
+#itemMenu a:link:hover, #itemMenu a:visited:hover {
+  background-color: #444;
+  color: #eee;
+}
+
 #options {
   float: right;
   margin: 0;
@@ -326,6 +384,10 @@ img.itemListItem {
   float: left;
 }
 
+.floatRight {
+  float: right;
+}
+
 .clearBoth {
   clear: both;
 }
@@ -357,6 +419,7 @@ button.big {
   height: 40px;
   font-size: 1.0em;
   font-weight: bold;
+  font-family: georgia, arial, helvetica, sans-serif;
   text-align: center;
   box-shadow: 0px 0px 8px #666;
   border: 1px solid #666;
@@ -371,6 +434,10 @@ input[type=checkbox] {
   color: #f00;
 }
 
+.ui-widget {
+  font-family: georgia, arial, helvetica, sans-serif;
+}
+
 .ui-dialog {
   box-shadow: 0px 0px 16px #666;
 }
@@ -385,10 +452,14 @@ input[type=checkbox] {
   box-shadow: 0px 0px 16px #666;
 }
 
+.ui-dialog.craftingDialog, .ui-dialog-buttonpane.craftingDialog {
+  background: #c6c6c6;
+}
+
 .ui-widget-overlay.override {
-    background: repeat-x scroll 50% 50% #000;
-    opacity: 0.5;
-    filter: Alpha(Opacity=50);
+  background: repeat-x scroll 50% 50% #000;
+  opacity: 0.5;
+  filter: Alpha(Opacity=50);
 }
 
 .ui-widget textarea.override {

diff --git a/index.html b/index.html
@@ -16,8 +16,8 @@
     <script src="js/game.js"></script>
     <script src="js/selectors.js"></script>
     <script src="js/tests.js"></script>
-    <link href="css/styles.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
+    <link href="css/styles.css" rel="stylesheet" />
     <link rel="shortcut icon" href="favicon.ico" />
     <link rel="apple-touch-icon" href="images/icons/ios/Icon.png"/>  
     <link rel="apple-touch-icon" sizes="72x72" href="images/icons/Icon-72.png"/>  
@@ -47,7 +47,7 @@
           <div class="clearBoth"></div>
         </div>
         <div id="inventoryContainer" class="clearBoth">
-          <input id="inventoryFilter" class="filter" type="textbox" placeholder="Filter" />
+          <input id="inventoryFilter" class="filter" type="textbox" placeholder="Filter" /><br />
           <label id="inventoryMoveStacksLabel"><input id="inventoryMoveStacks" type="checkbox" />Drag stacks</label>
           <ul id="inventoryList"></ul>
         </div>
@@ -59,6 +59,14 @@
         <div id="itemList"></div>
         <button id="options" class="big"><u>O</u>ptions</button>
       </div>
+      <div id="itemTooltip">
+        <img id="itemTooltipIcon" class="floatRight" />
+        <p id="itemTooltipName"></p>
+        <ul id="itemMenu">
+          <li id="itemMenuRecipe"><a href="#">Recipe</a></li>
+          <li id="itemMenuUses"><a href="#">Uses</a></li>
+        </ul>
+      </div>
     </div>
     <div id="middleColumn">
       <div id="worldContainer">
@@ -87,5 +95,18 @@
         <button id="reset" class="big red"><u>R</u>eset</button>
       </div>
     </div>
+    <div id="craftingDialog">
+      <table id="craftingDialogTable"></table>
+      <div id="craftingDialogAction">
+        <div id="craftDialogArrow">
+          <img src="images/ArrowRight.png" />
+        </div>
+        <table id="craftingDialogOutputTable">
+          <tr>
+            <td class="craftingCell"><div id="craftingDialogOutput"></div></td>
+          </tr>
+        </table>
+      </div>
+    </div>
   </body>
 </html>