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