API tools faq
paste
Guest User

Cap Town - RoughJustice

a guest
May 21st, 2014
438
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>TagPro Map Editor</title>
  6. <script src="generatepng.js"></script>
  7. <script src="webtoolkit.base64.js"></script>
  8. <script src="jquery-2.1.0.min.js"></script>
  9. <script src="bootstrap.min.js"></script>
  10.  
  11. <link rel="stylesheet" type="text/css" href="css/style.css">
  12. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  13. </head>
  14.  
  15. <body>
  16.  
  17. <div style="position:fixed;left:0;top:0;bottom:0;width:320px;overflow-y:scroll;overflow-x:hidden;padding:10px;">
  18. <div class="form-group">
  19. <div class="btn-group btn-group-justified">
  20. <div class="btn-group">
  21. <button id='clear' class='btn btn-default' title="Clear map"><span class="glyphicon glyphicon-remove"></span> Clear</button>
  22. </div>
  23. <div class="btn-group">
  24. <button id='save' class='btn btn-default' title="Save map to cache"><span class="glyphicon glyphicon-save"></span> Save</button>
  25. </div>
  26. <div class="btn-group" style="position:static;">
  27. <button class='btn btn-default' title="Test map" style="border-top-right-radius:4px;border-bottom-right-radius:4px;" data-toggle="dropdown"><span class="glyphicon glyphicon-play"></span> Test <span class="caret"></span></button>
  28. <ul class="dropdown-menu" style="margin-top: 35px;top:auto;right:0;left:auto;text-align:right;" role="menu">
  29. <li><a id='test' href="#" style="overflow:hidden;text-overflow:ellipsis;">North American Server</a></li>
  30. <li><a id='testeu' href="#" style="overflow:hidden;text-overflow:ellipsis;">European Server</a></li>
  31. </ul>
  32. </div>
  33. </div>
  34. </div>
  35.  
  36. <div class="form-group">
  37. <div class="row">
  38. <div class="col-xs-4">
  39. <div id="undoRedo" class="btn-group btn-group-justified" role="toolbar">
  40. <a id="undo" class="btn btn-default" title="Undo"><span class="glyphicon glyphicon-share-alt" style="-moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1);"></span></a>
  41. <a id="redo" class="btn btn-default" title="Redo"><span class="glyphicon glyphicon-share-alt"></span></a>
  42. </div>
  43. </div>
  44.  
  45. <div class="col-xs-4">
  46. <div id="zoom" class="btn-group btn-group-justified" role="toolbar">
  47. <a id="zoomOut" class="btn btn-default" title="Zoom out"><span class="glyphicon glyphicon-zoom-out"></span></a>
  48. <a id="zoomIn" class="btn btn-default" title="Zoom in"><span class="glyphicon glyphicon-zoom-in"></span></a>
  49. </div>
  50. </div>
  51.  
  52. <div class="col-xs-4">
  53. <button class="btn btn-default btn-block" title="Import or export map" data-target="#importExport" data-toggle="modal">
  54. <span class="glyphicon glyphicon-import"></span> / <span class="glyphicon glyphicon-export"></span>
  55. </button>
  56. </div>
  57. </div>
  58. </div>
  59.  
  60. <div class="form-group">
  61. <div class="input-group">
  62. <span class="input-group-addon">Map Size:</span>
  63. <input type="number" class="form-control" placeholder="Width" id="resizeWidth">
  64. <span class="input-group-addon">by</span>
  65. <input type="number" class="form-control" placeholder="Height" id="resizeHeight">
  66. <span class="input-group-btn">
  67. <button id="resize" class="btn btn-default" title="Resize the map to the entered dimensions.">
  68. <span class="glyphicon glyphicon-resize-full"></span>
  69. </button>
  70. </span>
  71. </div>
  72. </div>
  73.  
  74. <div class="form-group" style="margin-bottom: 5px;">
  75. <div id="tools" role="toolbar">
  76. <div class="btn-group btn-group-justified">
  77. <a id="toolPencil" class="btn btn-default btn-sm" title="Pencil - paint a single pixel."><span class="glyphicon glyphicon-pencil"></span></a>
  78.  
  79. <a id="toolBrush" class="btn btn-default btn-sm" title="Brush - paint a 3x3 area."><span class="glyphicon glyphicon-th-large"></span></a>
  80.  
  81. <a id="toolLine" class="btn btn-default btn-sm" title="Line - click and drag to draw a line."><span class="glyphicon glyphicon-minus"></span></a>
  82.  
  83. <a id="toolRectFill" class="btn btn-default btn-sm" title="Filled rectangle - draw a filled rectangle"><span class="glyphicon glyphicon-stop"></span></a>
  84.  
  85. <a id="toolRectOutline" class="btn btn-default btn-sm" title="Outlined rectange - draw an outlined rectangle"><span class="glyphicon glyphicon-unchecked"></span></a>
  86.  
  87. <a id="toolCircleFill" class="btn btn-default btn-sm" title="Filled circle - draw a filled circle"><span class="glyphicon glyphicon-record"></span></a>
  88.  
  89. <a id="toolCircleOutline" class="btn btn-default btn-sm" title="Outlined circle - draw an outlined circle"><span class="glyphicon glyphicon-remove-circle"></span></a>
  90.  
  91. <a id="toolFill" class="btn btn-default btn-sm" title="Fill - fill an entire area"><span class="glyphicon glyphicon-tint"></span></a>
  92.  
  93. <a id="toolWire" class="btn btn-default btn-sm" title="Wire - select an emitter (buttons, portals) and then click on the receiver(s) (gates, bombs, portals) to complete the link"><span class="glyphicon glyphicon-wrench"></span></a>
  94. </div>
  95. </div>
  96. </div>
  97.  
  98. <div class="form-group">
  99. <select id="symmetry" class="form-control">
  100. <option selected>No Symmetry</option>
  101. <option value="Horizontal">Horizontal Symmetry</option>
  102. <option value="Vertical">Vertical Symmetry</option>
  103. <option value="4-Way">4-Way Symmetry</option>
  104. <option value="Rotational">Rotational Symmetry</option>
  105. </select>
  106. </div>
  107.  
  108. <div id="palette">
  109. </div>
  110.  
  111. <p><a href="https://github.com/PeterReid/tagpro-map-editor">Source</a></p>
  112. </div>
  113.  
  114. </div>
  115.  
  116. <div style='position:fixed;top:0;bottom:0;right:0;left:300px;overflow: scroll;white-space: nowrap;' id='map'>
  117. </div>
  118.  
  119. <canvas width="200" height="200" id='importCanvas' style='display:none'></canvas>
  120.  
  121. <div class="modal fade" id="importExport" tabindex="-1" role="dialog" aria-labelledby="importExportLabel" aria-hidden="true">
  122. <div class="modal-dialog">
  123. <div class="modal-content">
  124. <div class="modal-header">
  125. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  126. <h4 class="modal-title" id="importExportLabel">Import/Export Map</h4>
  127. </div>
  128.  
  129. <div class="modal-body">
  130. <p>To import a map, drag and drop its .png and .json files into their respective areas and then click Import.</p>
  131. <p>To export a map, click Export and then click the PNG and JSON buttons to download the files.</p>
  132. <div class="form-group">
  133. <div class="row">
  134. <div class="col-xs-6">
  135. <a class="dropArea" draggable="true" id="pngDrop" download="map.png" href="#">PNG</a>
  136. </div>
  137. <div class="col-xs-6">
  138. <a class="dropArea" draggable="true" id="jsonDrop" download="map.json" href="#">JSON</a>
  139. </div>
  140. </div>
  141. </div>
  142. <div class="form-group">
  143. <div class="btn-group btn-group-justified">
  144. <a id="import" class="btn btn-default" title="Import map"><span class="glyphicon glyphicon-import"></span> Import</a>
  145. <a id="export" class="btn btn-default" title="Export map"><span class="glyphicon glyphicon-export"></span> Export</a>
  146. </div>
  147. </div>
  148. <div class="form-group">
  149. <label for="mapName">Map Name</label>
  150. <input type="text" class="form-control" id="mapName" placeholder="Untitled">
  151. </div>
  152. <div class="form-group">
  153. <label for="author">Map Author</label>
  154. <input type="text" class="form-control" id="author" placeholder="Anonymous">
  155. </div>
  156. </div>
  157.  
  158. <div class="modal-footer">
  159. <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164.  
  165. <script type="text/javascript" src="map.js"></script>
  166.  
  167. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!