www/editor/editor.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta charset="utf-8">
   5                 <title>PCDSL Editor</title>
   6                 <script type="text/javascript" src="include/jquery.js"></script>
   7                 <script type="text/javascript" src="include/jquery.textarea-util.js"></script>
   8                 <script type="text/javascript" src="include/jquery.selection.js"></script>
   9                 <script type="text/javascript" src="include/texteditor-script.js"></script>
  10                 <style type="text/css">
  11 html,body{
  12         margin:0;padding:0;
  13 }
  14 #menubar{
  15         background-color: #DED7B4;
  16         overflow: hidden;
  17         font-size: 18px;
  18 }
  19 #menubar>a{
  20         display: block;
  21         float: left;
  22         padding: 0.5em 1em;
  23         cursor: pointer;
  24         margin-left: 5px;
  25 }
  26 #menubar>a:hover{
  27         background-color: #BAAB63;
  28
  29 }
  30
  31 .window{
  32         display: none;
  33         height: 100%;
  34         padding-bottom: 36px;
  35         margin-bottom: -36px;
  36 }
  37
  38                 </style>
  39 <script type="text/javascript">
  40
  41 function resize()
  42 {
  43         $('#textarea>textarea').css("width", $(window).width() - 30);
  44         $('#textarea>textarea').css("height", $(window).height() - 120);
  45
  46 }
  47
  48 var isModified = false;
  49
  50  // イベントをキャンセルするハンドラです.
  51 var cancelEvent = function(event) {
  52         event.preventDefault();
  53         event.stopPropagation();
  54         return false;
  55 };
  56
  57 function initDrop()
  58 {
  59         var droppable = $("#openWindow");
  60
  61         if(!window.FileReader) {
  62           alert("File API がサポートされていません。");
  63           window.close();
  64         }
  65
  66
  67         // dragenter, dragover イベントのデフォルト処理をキャンセルします.
  68         droppable.bind("dragenter", cancelEvent);
  69         droppable.bind("dragover", cancelEvent);
  70
  71         // ドロップ時のイベントハンドラを設定します.
  72         var handleDroppedFile = function(event) {
  73           // ファイルは複数ドロップされる可能性がありますが, ここでは 1 つ目のファイルを扱います.
  74           var file = event.originalEvent.dataTransfer.files[0];
  75
  76           // ファイルの内容は FileReader で読み込みます.
  77           var fileReader = new FileReader();
  78           fileReader.onload = function(event) {
  79             // event.target.result に読み込んだファイルの内容が入っています.
  80             $("#textarea textarea").val(event.target.result);
  81
  82             isModified = false;
  83             browserFileName = null;
  84           }
  85           fileReader.readAsText(file);
  86
  87           // デフォルトの処理をキャンセルします.
  88           cancelEvent(event);
  89           $('#openWindow').hide();
  90           return false;
  91         }
  92
  93         // ドロップ時のイベントハンドラを設定します.
  94         droppable.bind("drop", handleDroppedFile);
  95
  96 }
  97
  98 window.onload = function(){
  99
 100         $(window).bind("dragenter", cancelEvent);
 101         $(window).bind("dragover", cancelEvent);
 102         $(window).bind("drop", cancelEvent);
 103         initDrop();
 104         resize();
 105
 106         $('#textarea textarea').change(function(){
 107                 isModified = true;
 108         });
 109
 110 };
 111
 112 function openFile()
 113 {
 114         if(isModified)
 115         {
 116                 if(!window.confirm("内容が変更されています。破棄されますがよろしいですか?")) return;
 117         }
 118         $('#openWindow').show();
 119 }
 120
 121 function saveFile()
 122 {
 123         var value = $('#textarea textarea').val();
 124         var href = "data:application/octet-stream," + encodeURIComponent(value);
 125         isModified = false;
 126         location.href = href;
 127
 128 }
 129
 130 var browserFileName = null;
 131 function saveToBrowser()
 132 {
 133         if(browserFileName == null || !window.confirm("名前 " + browserFileName + " でよろしいですか?"))
 134         {
 135                 var input = window.prompt("名前を入力してください");
 136                 if(!input)
 137                 {
 138                         return;
 139                 }
 140                 browserFileName = input;
 141         }
 142
 143         localStorage.setItem(browserFileName, $('#textarea textarea').val());
 144         isModified = false;
 145         window.alert("名前 " + browserFileName + " で保存しました");
 146 }
 147
 148 function openFromBrowser()
 149 {
 150         $('#selectWindow #select > option').remove();
 151         for(var item in localStorage)
 152         {
 153                   $('#selectWindow #select').append($('<option>').html(item).val(item));
 154         }
 155         $("#selectWindow").show();
 156 }
 157
 158 function removeSelectedItem()
 159 {
 160         var item = $("#selectWindow #select").val();
 161         if(!item) return;
 162         if(window.confirm(item + " の保存項目を削除しますか?"))
 163         {
 164                 $('#selectWindow #select > option:selected').remove();
 165                 localStorage.removeItem(item);
 166         }
 167 }
 168
 169 function openSelectedItem()
 170 {
 171         var item = $("#selectWindow #select").val();
 172         if(!item) return;
 173         if(isModified)
 174         {
 175                 if(!window.confirm("変更されています。破棄されますがよろしいですか？")) return;
 176         }
 177
 178         $("#textarea textarea").val(localStorage.getItem(item));
 179
 180         $("#selectWindow").hide();
 181         isModified = false;
 182         browserFileName = item;
 183 }
 184
 185 function run()
 186 {
 187         localStorage.setItem("previewStage", $("#textarea textarea").val());
 188         window.open("../index_local_debug.html");
 189 }
 190
 191
 192 $(window).bind("resize", resize);
 193
 194 </script>
 195         </head>
 196         <body>
 197                 <div id="menubar">
 198                         <a onclick="openFile();">開く</a>
 199                         <a onclick="saveFile()">名前を付けて保存</a>
 200                         <a onclick="openFromBrowser()">ブラウザから開く</a>
 201                         <a onclick="saveToBrowser();">ブラウザに保存</a>
 202                         <a><s>GUI編集</s></a>
 203                         <a>テキスト編集</a>
 204                         <a onclick="run()">実行</a>
 205                         <a target="_blank" href="readme.txt">ヘルプ</a>
 206                 </div>
 207                 <div id="guiWindow" class="window">
 208
 209                 </div>
 210                 <div id="textWindow" class="window" style="display: block;">
 211                         <div id="wrapper" style="height: 100%;">
 212                                 <div id="textarea" style="width: 100%;">
 213                                         <textarea wrap="off">
 214 // StageObjectsはステージに文字シンボルとして配置したいオブジェクト定義の連想配列である。
 215 // StageObjectの各項目の指定方法は以下の二通りある。
 216 // ・クラス名指定 ... コンストラクタがに引数が不要な時
 217 // a : BlockClass
 218 // ・拡張指定
 219 // a : {base : FreeItemClass,                   //鋳型となるクラス名
 220 //      args : '1190.png',                              //コンストラクタに指定する引数(一つだけの場合) stageは自動で指定されるので不要
 221 //      args : ['1190.png', callback],  //二つ以上の場合。やはり第一引数のstageは不要
 222 //      prop : {times : 1},                             //各インスタンスに指定したいプロパティの連想配列。(省略可)
 223                                                                                 //この例ではaFreeItemClass.timesプロパティを1に指定している
 224 //      adjust : [-50, 50],                             //位置の微調整。必ずX座標、Y座標の相対位置を示す配列にする。(省略可)
 225 //      extid : 19                                              //ネットワークを超えて一つのオブジェクトである必要がある場合にはゼロではない値を取る（ステージ内で固有の値, 省略可; 既定0）
 226 //              sync : true                                             //ネットワーク同期を有効に(addStageObjectの第二引数)(省略可; 既定false)
 227
 228 var stgObjects = {
 229
 230         // BlockClass : 普通のブロック。 引数に画像名を指定
 231     a : {base:BlockClass,args:'1190.png'},
 232
 233     // SlopeBlockClass : 当たり判定が斜めのブロック。
 234     // 引数 : 画像名, 当たり判定領域左側の開始位置のブロック上辺からの高さ, 当たり判定領域右側の...
 235     //        たとえば、この例のように 0, 32 と指定すれば右下がりの坂になり、32, 0と指定すれば左下がり、 16, 16と指定すれば半分の高さの長方形になる
 236     // enableBlockMode : 当たり判定領域をデバッグ表示する。
 237     b : {base:SlopeBlockClass,args:['1191.png',0,32],prop:{enableDebugMode:true}},
 238
 239     // FreeItemClass : キャラが取得するとコールバックが実行されるアイテム
 240     // callback : 誰かに取得されたときに発生するコールバック。アタックした人、そのアタック直後のx, y座標が引数にセットされる。
 241     // times : 取得できる回数で、-1で無限。
 242     c : {base:FreeItemClass,args:["1234.png",callBack],prop:{times:1}},
 243
 244     // 何もブロックを置かない位置のためにかならずこのようなエントリーを記述
 245     _ : null
 246 };
 247
 248 // FreeItemClassのコールバック
 249 function callBack(obj, obj_x, obj_y)
 250 {
 251         if(obj instanceof MainCharacterClass){
 252
 253         }
 254 }
 255
 256 var stgInfo = {
 257     width: 6400,                                //横サイズ
 258     height: 480,                                //縦サイズ
 259     background: "back2.png"             //背景画像。横幅は640pxである必要はない。
 260 };
 261
 262 with(stgObjects) {
 263     var tbl = [
 264         [],
 265         [],
 266         [],
 267         [],
 268         [],
 269         [],
 270         [],
 271         [],
 272         [],
 273         [],
 274         [b],
 275         [_,b],
 276         [_,_,b],
 277         [_,_,_,b,_,_,_,_,_,c],
 278         [a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a],
 279     ];
 280 }
 281
 282 //約束事
 283 var stage = new PCDSLStageClass(stgInfo, tbl);
 284
 285 stage.runStage = function(){
 286         PCDSLStageClass.prototype.runStage.apply(this, []);
 287         var main = new MainCharacterClass(stage, [["kuma1.png","kuma2.png","kuma3.png", "kuma4.png", "kuma3.png", "kuma2.png"], ["kumaready.png"]]);
 288         main.size.x = 64;
 289         main.size.y=64;
 290         main.origin.x = 50;
 291         main.origin.y =0;
 292         main.ownerUID = stage.manager.userID;
 293         stage.userControlledCharacter = main;
 294         stage.addStageObject(main, true);
 295 },
 296
 297
 298 stage;
 299                                         </textarea>
 300                                 </div>
 301
 302                                 <div id="info">
 303                                         <span class="countChar">0</span>
 304                                         <span class="currentLine">1</span>
 305                                         <span class="countLine">1</span>
 306                                 </div>
 307                         </div>
 308                 </div>
 309                 <div id="openWindow" style="z-index : 100; position: absolute; top: 10%; left: 25%; right: 25%; height: 40%; border: 5px #666 solid; background-color: white; display: none">
 310                         <div onclick="$('#openWindow').hide()" style="float: right; width: 4em; text-align: center; background-color: red; color: white; cursor: pointer">X</div>
 311                         <h1>ファイルを開く</h1>
 312                         このウィンドウにファイルをドロップしてください!<br>
 313                 </div>
 314                 <div id="selectWindow" style="z-index : 100; position: absolute; top: 10%; left: 25%; right: 25%; height: 40%; border: 5px #666 solid; background-color: white; display: none">
 315                         <div onclick="$('#selectWindow').hide()" style="float: right; width: 4em; text-align: center; background-color: red; color: white; cursor: pointer">X</div>
 316                         <h1>開く項目の選択</h1>
 317                         操作する項目: <br>
 318                         <select id="select"></select><br>
 319                         <input type="button" onclick="removeSelectedItem()" value="選択項目の削除"><input onclick="openSelectedItem()" type="button" value="開く">
 320                 </div>
 321         </body>
 322 </html>