CoCalc -- view.js

GitHub Repository: loeasy68/loeasy68.github.io
Path: blob/main/website/GAUSS/js/view.js
²⁹⁴¹ views
1
var preventHighlitingCSS =
2
{
3
    '-webkit-touch-callout' : 'none',
4
    '-webkit-user-select' : 'none',
5
    '-khtml-user-select' : 'none',
6
    '-moz-user-select' : 'none',
7
    '-ms-user-select' : 'none',
8
    'user-select' : 'none',
9
    'padding-left' : '0px',
10
    'border' : 'none'
11
};
12
var editorScriptState = 'ok';
13
var editorScriptTree;
14
var editorScriptLastBtnPressed = null;
15
var codeMirror;
16
var cropPoly;
17

18
$(document).ready(function()
19
{
20
    $(".app").hide();
21
    $('#start-test').click(function(){ initTest(); });
22
});
23

24
/*============================================================ NAVBAR LOGIC ===================================================================*/
25
$(document).ready(function()
26
{
27
    $('#project-uploader').inputfile({
28
        uploadText: '<span class="glyphicon glyphicon-upload"></span> Select a project',
29
        removeText: '<span class="glyphicon glyphicon-trash"></span>',
30
        restoreText: '<span class="glyphicon glyphicon-remove"></span>',
31

32
        uploadButtonClass: 'btn btn-default btn-xs',
33
        removeButtonClass: 'btn btn-default',
34
        dontRemove: true
35
    });
36

37
    var showConfirmMessage = function()
38
    {
39
        return confirm('Are you sure? You will lose unsaved changes!');
40
    };
41
    $('#new-project').click(function()
42
    {
43
        if(showConfirmMessage() === false)
44
            return;
45
        newProject();
46
    });
47
    $('#project-uploader').change(function(ev)
48
    {
49
        if(editorRoomsCount + editorItemsCount + editorAnimsCount + editorAudioCount + editorInvItemCount
50
             + editorDialogsCount + editorCharactersList.length > 0)
51
            if(showConfirmMessage() === false)
52
                return;
53
        loadProject(ev);
54
    });
55
    $('#project-downloader').click(function ()
56
    {
57
        saveProject();
58
    });
59
    $('#export-game').click(function ()
60
    {
61
        exportGame();
62
    });
63

64
    /* Navbar buttons logic */
65
    $(".app-state").click(function ()
66
    {
67
        $(".app-state").removeClass("active");
68
        $(".project-action").removeClass("open");
69
        $(this).addClass("active");
70

71
        $('.app').hide();
72
        if ($(this).hasClass("room"))
73
            $("#room-manager").show();
74
        else if ($(this).hasClass("action"))
75
            $("#action-manager").show();
76
        else if ($(this).hasClass("script"))
77
            $("#script-manager").show();
78
        else if ($(this).hasClass("test"))
79
            $("#test-manager").show();
80
        else if ($(this).hasClass("character"))
81
            $("#character-manager").show();
82
        else if ($(this).hasClass("variables"))
83
            $("#global-vars-manager").show();
84
        else if ($(this).hasClass('anims'))
85
            $('#anims-manager').show();
86
        else if ($(this).hasClass('inventory'))
87
            $('#inventory-manager').show();
88
        else if ($(this).hasClass("dialog"))
89
            $("#dialog-manager").show();
90
        else if ($(this).hasClass("options"))
91
            $("#options-manager").show();
92
        else if ($(this).hasClass("sound"))
93
            $("#sound-manager").show();
94
    });
95
    $(".project-action").click(function ()
96
    {
97
        $(".app-state").removeClass("active");
98
    });
99
});
100
/*========================================================== END OF NAVBAR LOGIC ===================================================================*/
101

102
/*=========================================================== ACTION SECTION =================================================================*/
103
$(document).ready(function()
104
{
105
    for (var i in editorActionsList)
106
    {
107
        var actionId = editorActionsList[i].id;
108
        editorMapIdAction[actionId] = editorActionsList[i];
109
        editorActionsCount++;
110
        //view_CreateNewActionPanel(editorActionsList[i].id);
111
        if(actionId !== 'Walk_to')
112
            view_UpdateDataLists('add', 'actions', actionId);
113
    }
114
});
115
/*======================================================== END OF ACTION SECTION =================================================================*/
116

117
/*===========================================================  ROOMS SECTION  ===================================================================*/
118
$(document).ready(function()
119
{
120

121
    $('.add.room').click(function ()
122
    {
123
        var newRoomName = 'Room_' + editorRoomsCount++;
124

125
        createNewEditorRoom(newRoomName);
126
        view_CreateNewRoomPanel(newRoomName);
127
    });
128
    $('.delete.room').click(function ()
129
    {
130
        if (editorCurrentRoom == null)
131
            return;
132
        //editorItemsCount -= editorCurrentRoom.items.length > 1 ? editorCurrentRoom.items.length - 1 : 0;
133
        //editorRoomsCount--;
134
        deleteEditorRoom(editorCurrentRoom.id);
135
        view_DeleteActiveRoomPanel();
136

137
        editorCurrentRoom = null;
138
        editorCurrentItem = null;
139
    });
140
});
141
/*=========================================================== END OF ROOMS SECTION  ===================================================================*/
142

143
/*===========================================================  CHARACTERS SECTION  ===================================================================*/
144
$(document).ready(function()
145
{
146
    $('.add.character').click(function ()
147
    {
148
        var newCharacterId = 'Character_' + editorCharactersList.length;
149
        createNewEditorCharacter(newCharacterId);
150
        view_CreateNewCharacterPanel(newCharacterId);
151
    });
152
});
153
/*=====================================================  END OF CHARACTERS SECTION  ===================================================================*/
154

155
/*========================================================= CANVAS INPUT HANDLERS =================================================*/
156
$(document).ready(function()
157
{
158
    $canvas = $('canvas');
159
    canvas = $canvas[0];
160
    canvas_Char = $canvas[1];
161

162
    ctx = canvas.getContext('2d');
163
    ctx_Char = canvas_Char.getContext('2d');
164

165
    canvas.state = 'idle';
166
    canvas.mouseDown = { 'clicked' : 'false', 'offset' : null };
167
    canvas.selected = null;
168
    canvas_Char.state = 'idle';
169
    canvas_Char.mouseDown = { 'clicked' : 'false', 'offset' : null };
170
    canvas_Char.selected = null;
171
    $('.canvas').each(function() { $(this).css('background', 'lightgrey'); });
172
    $('.toolbar button').css({'font-size' : '13.5px'});
173
    $('.toolbar img').css({'width' : '13.5px', 'height' : '13.5px'});
174

175
    var editorCanvas = $("#editor-canvas");
176
    editorCanvas.click(function(e)
177
    {
178
        e.preventDefault();
179

180
        var offset = $(this).offset();
181
        var relX = parseInt(e.pageX - offset.left);
182
        var relY = parseInt(e.pageY - offset.top);
183

184
        var pushPolygonPoint = function(type)
185
        {
186
            //var initPolygon = function(poly) { poly = []; poly['closed'] = false};
187
            var polygon;
188
            switch(type)
189
            {
190
                case 'hotspot':
191
                    if(!(editorCurrentItem.id in editorMapIdItem))
192
                    {
193
                        alert('Please select an item!');
194
                        return;
195
                    }
196
                    if(editorCurrentItem.hotspot == null)
197
                        editorCurrentItem.hotspot = new Polygon();
198
                    polygon = editorCurrentItem.hotspot;
199
                    break;
200
                case 'path':
201
                    //if(editorCurrentRoom.walkablePath == null)
202
                    //    editorCurrentRoom.walkablePath = new Polygon();
203
                    //polygon = editorCurrentRoom.walkablePath;
204
                    polygon = editorCurrentRoom.walkBoxes[editorCurrentWalkBox].polygon;
205
                    break;
206
                case 'crop-image':
207
                    /*if(!(editorCurrentItem.id in editorMapIdWb))
208
                    {
209
                        alert('Please select a walk-behind!');
210
                        return;
211
                    }
212
                    if(editorCurrentItem.poly == null)
213
                        editorCurrentItem.poly = new Polygon();*/
214
                    if(cropPoly == null)
215
                        cropPoly = new Polygon();
216
                    polygon = cropPoly;
217
                    break;
218
            }
219

220
            if (!polygon.closed) {
221
                if (polygon.points.length && new paper.Rectangle(polygon.points[0].x - 5, polygon.points[0].y - 5, 10, 10).contains(new paper.Point(relX, relY)))
222
                    polygon.close();
223

224
                else {
225
                    var present = false;
226
                    for (var i = 0; i < polygon.points.length; i++)
227
                        if (relX == polygon.points[i].x && relY == polygon.points[i].y) {
228
                            present = true;
229
                            break;
230
                        }
231
                    if (!present) polygon.points.push(new paper.Point(relX, relY));
232
                }
233
            }
234

235
            updateCanvas(editorCurrentRoom, 'room');
236
        };
237

238
        switch(canvas.state)
239
        {
240
            case('hotspot'): pushPolygonPoint('hotspot');
241
                break;
242
            case('pathfinding'):
243
                //if(!e.shiftKey)
244
                relX = e.pageX - offset.left;
245
                relY = e.pageY - offset.top;
246
                var highlightedEdge = getHighlightedWalkboxEdge(editorCurrentRoom.walkBoxes);
247
                if(!highlightedEdge)
248
                {
249
                    var highlightedPoint = getHighlightedWalkboxVertex(editorCurrentRoom.walkBoxes);
250
                    if (highlightedPoint && highlightedPoint.wboxId !== editorCurrentWalkBox)
251
                    {
252
                        relX = highlightedPoint.point.x;
253
                        relY = highlightedPoint.point.y;
254
                    }
255
                    pushPolygonPoint('path');
256
                }
257
                else if(editorCurrentRoom.walkBoxes[editorCurrentWalkBox].polygon.closed === false)
258
                {
259
                    var wbox = editorCurrentRoom.walkBoxes[highlightedEdge.wboxId];
260
                    if(editorCurrentWalkBox === highlightedEdge.wboxId)
261
                        return;
262
                    var p = wbox.polygon.getNearestPoint(new paper.Point(relX, relY));
263
                    //p.x = parseInt(p.x);
264
                    //p.y = parseInt(p.y);
265
                    relX = p.x;
266
                    relY = p.y;
267
                    splitEdge(wbox, highlightedEdge.edge, p);
268
                    pushPolygonPoint('path');
269
                }
270
                break;
271
            case 'crop-image':
272
                pushPolygonPoint('crop-image');
273
                break;
274
            case 'start-pos':
275
                editorCurrentRoom.egoStartPos = { x : relX, y : relY};
276
                updateCanvas(editorCurrentRoom, 'room');
277
                break;
278
            case 'xy-pick':
279
                $('.clipboard').remove();
280
                var clipboard = 'Clipboard: (' + relX + ', ' + relY + ')';
281
                $('.well').append($(document.createElement('span')).attr('class', 'clipboard').append($(document.createElement('b')).text(clipboard)).css({ 'margin-left' : '20px'}));
282
                break;
283
            case 'walk-behind':
284
                if(editorCurrentItem.id in editorMapIdItem)
285
                {
286
                    var hasAnims = false;
287
                    for (var key in editorCurrentItem.defaultAnims)
288
                        if (editorCurrentItem.defaultAnims[key] != null)
289
                        {
290
                            hasAnims = true;
291
                            break;
292
                        }
293
                    if (hasAnims)
294
                        editorCurrentItem.centralPerspectiveWalkBehind = relY;
295
                    else
296
                    {
297
                        alert('Item \"' + editorCurrentItem.id + '\" has no sprite.');
298
                        return;
299
                    }
300
                }
301
                else if(editorCurrentItem.id in editorMapIdWb)
302
                {
303
                    if(editorCurrentItem.image != null)
304
                        editorCurrentItem.centralPerspectiveWalkBehind = relY;
305
                    else
306
                    {
307
                        alert('Walk-behind \"' + editorCurrentItem.id + '\" has no sprite.');
308
                        return;
309
                    }
310

311
                }
312
                updateCanvas(editorCurrentRoom, 'room');
313
                break;
314
            default :
315
                break;
316
        }
317
    });
318

319
    editorCanvas.on("contextmenu", function(evt)
320
    {
321
        evt.preventDefault();
322
        switch($(this)[0].state)
323
        {
324
            case 'hotspot':
325
                if(editorCurrentItem.hotspot != null)
326
                    editorCurrentItem.hotspot = null;
327
                break;
328
            case 'pathfinding':
329
                var wbox = editorCurrentRoom.walkBoxes[editorCurrentWalkBox];
330
                if(wbox.polygon.points.length > 0)
331
                {
332
                    wbox.polygon.points = [];
333
                    wbox.polygon.edges = [];
334
                    wbox.polygon.closed = false;
335
                }
336
                break;
337
            case 'crop-image':
338
                if(cropPoly != null)
339
                {
340
                    cropPoly = null;
341
                }
342
                break;
343
            case 'walk-behind':
344
                delete editorCurrentItem.centralPerspectiveWalkBehind;
345
                break;
346
        }
347
        updateCanvas(editorCurrentRoom, 'room');
348
    });
349

350
    editorCanvas.mousemove(function(e)
351
    {
352

353
        var offset = $(this).offset();
354
        var relX = parseInt(e.pageX - offset.left);
355
        var relY = parseInt(e.pageY - offset.top);
356

357
        view_UpdateMousePos(relX.toString(), relY.toString(), 'room');
358

359
        switch(canvas.state)
360
        {
361
            case 'sprite' :
362
                if (canvas.mouseDown.clicked == true && canvas.mouseDown.offset != null && canvas.selected != null)
363
                {
364
                    canvas.selected.position = { x : relX + canvas.mouseDown.offset.x, y : relY + canvas.mouseDown.offset.y};
365
                    //getItemPlaceHolder(canvas.selected).setPosition(canvas.selected.position.x, canvas.selected.position.y);
366
                    updateCanvas(editorCurrentRoom, 'room');
367
                    //drawItemBoundingBox(canvas.selected);
368
                }
369
                break;
370
            case 'walk-behind':
371
                updateCanvas(editorCurrentRoom, 'room');
372
                ctx.beginPath();
373
                ctx.setLineDash([10]);
374
                ctx.moveTo(0, relY);
375
                ctx.lineTo(canvas.width, relY);
376
                ctx.stroke();
377
                break;
378
            case 'pathfinding':
379
                updateCanvas(editorCurrentRoom, 'room');
380

381
                var wboxes = editorCurrentRoom.walkBoxes;
382

383
                for(i in wboxes)
384
                {
385
                    resetVertexHighlighting(wboxes[i]);
386
                    resetEdgeHighlighting(wboxes[i]);
387

388
                    highlightCloseVertex(new Point(relX, relY), wboxes[i], 10);
389

390
                    var vtx = getHighlightedWalkboxVertex(wboxes);
391
                    if(!vtx)
392
                    {
393
                        highlightCloseEdge(new Point(relX, relY), wboxes[i], 5);
394
                        var highlightedEdge = getHighlightedWalkboxEdge(wboxes);
395
                        if(highlightedEdge && highlightedEdge.wboxId === i)
396
                        {
397
                            var p = wboxes[i].polygon.getNearestPoint(new paper.Point(relX, relY));
398
                            ctx.fillRect(p.x - 5, p.y - 5, 10, 10);
399
                        }
400
                    }
401

402
                    var lockedVertex = getLockedWalkboxVertex(editorCurrentRoom.walkBoxes);
403
                    if(lockedVertex !== null)
404
                    {
405
                        changeLockedWalkboxVertexPosition(wboxes, lockedVertex.wboxId, relX, relY);
406
                    }
407
                }
408

409
                if(editorCurrentWalkBox == null)
410
                    return;
411
                var path = editorCurrentRoom.walkBoxes[editorCurrentWalkBox].polygon;
412
                if(path != null && path.points.length && !path.closed)
413
                {
414
                    ctx.beginPath();
415
                    var lastPoint = path.points[path.points.length - 1];
416
                    ctx.beginPath();
417
                    ctx.moveTo(lastPoint.x, lastPoint.y);
418
                    ctx.lineTo(relX, relY);
419
                    ctx.stroke();
420
                }
421
                break;
422
            case 'hotspot':
423
                updateCanvas(editorCurrentRoom, 'room');
424
                var hotspot = editorCurrentItem.hotspot;
425
                if(hotspot != null && hotspot.points.length && !hotspot.closed)
426
                {
427
                    ctx.beginPath();
428
                    var lastPoint = hotspot.points[hotspot.points.length - 1];
429
                    ctx.beginPath();
430
                    ctx.moveTo(lastPoint.x, lastPoint.y);
431
                    ctx.lineTo(relX, relY);
432
                    ctx.stroke();
433
                }
434
                break;
435
            case 'crop-image':
436
                updateCanvas(editorCurrentRoom, 'room');
437
                var poly = cropPoly;
438
                if(poly != null && poly.points.length && !poly.closed)
439
                {
440
                    ctx.beginPath();
441
                    var lastPoint = poly.points[poly.points.length - 1];
442
                    ctx.beginPath();
443
                    ctx.moveTo(lastPoint.x, lastPoint.y);
444
                    ctx.lineTo(relX, relY);
445
                    ctx.stroke();
446
                }
447
                break;
448
            default:
449
                break;
450

451
        }
452
    });
453

454
    $(document).on('keydown',
455
        function(e)
456
        {
457
            var keycodes = { W : 87, A: 65, S : 83, D : 68};
458

459
            if(canvas.selected)
460
            {
461
                var fineTune = 1;
462
                switch (e.which)
463
                {
464
                    case keycodes.W : canvas.selected.position.y -= fineTune ;
465
                        break;
466
                    case keycodes.A : canvas.selected.position.x -= fineTune;
467
                        break;
468
                    case keycodes.D : canvas.selected.position.x += fineTune;
469
                        break;
470
                    case keycodes.S : canvas.selected.position.y += fineTune;
471
                        break;
472
                }
473
                updateCanvas(editorCurrentRoom, 'room');
474
            }
475
        }
476
    );
477

478
    editorCanvas.on('dragover', function(e)
479
    {
480
        e.preventDefault();
481
        view_UpdateMousePos(parseInt(e.originalEvent.pageX - $(this).offset().left), parseInt(e.originalEvent.pageY - $(this).offset().top), 'room');
482
    });
483

484
    editorCanvas.on('drop', function(e)
485
    {
486
        e.preventDefault();
487
        var xPos = parseInt($('.room .xPos').text());
488
        var yPos = parseInt($('.room .yPos').text());
489
        var sprite = getItemPlaceHolder(editorCurrentItem);
490
        editorCurrentItem.position.x = xPos;
491
        editorCurrentItem.position.y = yPos + sprite.img.height;
492
        //var frame = getItemPlaceHolder(editorCurrentItem);
493
        //frame.setPosition(xPos, yPos);
494
        updateCanvas(editorCurrentRoom, 'room');
495
    });
496

497
    editorCanvas.on('mousedown', function(e)
498
    {
499
        e.preventDefault();
500

501
        canvas.mouseDown.clicked = true;
502
        var offset = $(this).offset();
503
        var relX = Math.round(e.pageX - offset.left);
504
        var relY = Math.round(e.pageY - offset.top);
505

506
        switch(canvas.state)
507
        {
508
            case 'sprite':
509
                var clickedItem = getItemWithSpriteContaining(new paper.Point(relX, relY));
510
                canvas.selected = clickedItem;
511
                if(clickedItem != null)
512
                    canvas.mouseDown.offset = new paper.Point(clickedItem.position.x - relX, clickedItem.position.y - relY);
513
            break;
514
            case 'pathfinding':
515
                var highlightedVertex = getHighlightedWalkboxVertex(editorCurrentRoom.walkBoxes);
516
                if(highlightedVertex !== null)
517
                {
518
                    var wbox = editorCurrentRoom.walkBoxes[highlightedVertex.wboxId];
519
                    lockVertex(wbox, highlightedVertex.point);
520
                }
521
                break;
522

523
        }
524
        updateCanvas(editorCurrentRoom, 'room');
525
    });
526

527
    editorCanvas.on('mouseup', function(e)
528
    {
529
        canvas.mouseDown.clicked = false;
530
        canvas.mouseDown.offset = null;
531

532
        var lockedVertex = getLockedWalkboxVertex(editorCurrentRoom.walkBoxes);
533
        if(lockedVertex !== null)
534
            resetVertexLocking(editorCurrentRoom.walkBoxes[lockedVertex.wboxId]);
535
    });
536

537
    editorCanvas.on('mouseout', function(e)
538
    {
539
        canvas.mouseDown.clicked = false;
540
        canvas.mouseDown.offset = null;
541
        view_UpdateMousePos('-', '-');
542
    });
543

544
    /*============================================ TOOLBAR 1 MANAGEMENT =====================================*/
545
    $('#cropped-image-modal-OK').click(function()
546
    {
547
        $('#cropped-image-modal').modal('hide');
548
        downloadCroppedImage('chunk.png', $('#cropped-image img')[0].src)
549
    } );
550

551

552
    $('#place-sprite').click(function()
553
    {
554
        canvas.state = 'sprite';
555
        //context.attach('canvas', canvas_cMenu['spritePositioning']);
556
        $('.toolbar.room button').removeClass('active');
557
        $(this).addClass('active');
558
        updateCanvas(editorCurrentRoom, 'room');
559
    });
560

561
    $('#set-hotspot').click(function()
562
    {
563
        canvas.selected = null;
564
        if(editorCurrentItem == null || !(editorCurrentItem.id in editorMapIdItem))
565
        { this.blur(); alert('Please select an item.'); return; }
566
        canvas.state = 'hotspot';
567
        $('.toolbar.room button').removeClass('active');
568
        $(this).addClass('active');
569
        updateCanvas(editorCurrentRoom, 'room');
570
    });
571

572
    $('#set-walkzone').click(function()
573
    {
574
        canvas.selected = null;
575
        canvas.state = 'pathfinding';
576
        $('.toolbar.room button').removeClass('active');
577
        $(this).addClass('active');
578
        updateCanvas(editorCurrentRoom, 'room');
579
    });
580

581
    $('#set-start-pos').click(function()
582
    {
583
        canvas.selected = null;
584
        canvas.state = 'start-pos';
585
        $('.toolbar.room button').removeClass('active');
586
        $(this).addClass('active');
587
        updateCanvas(editorCurrentRoom, 'room');
588
    });
589

590
    $('#xy-picker').click(function()
591
    {
592
        canvas.selected = null;
593
        canvas.state = 'xy-pick';
594
        $('.toolbar.room button').removeClass('active');
595
        $(this).addClass('active');
596
    });
597

598
    $('#walk-behind').click(function()
599
    {
600
        canvas.selected = null;
601
        if(editorCurrentItem == null)
602
        { this.blur(); canvas.focus(); alert('Please select an item.'); return; }
603
        canvas.state = 'walk-behind';
604
        $('.toolbar button').removeClass('active');
605
        $(this).addClass('active');
606
        updateCanvas(editorCurrentRoom, 'room');
607
    });
608

609
    $('#crop-image').click(function()
610
    {
611
        canvas.selected = null;
612
        //if(editorCurrentItem == null || !(editorCurrentItem.id in editorMapIdWb))
613
        //{ this.blur(); canvas.focus(); alert('Please select a walk-behind.'); return; }
614
        canvas.state = 'crop-image';
615
        $('.toolbar.room button').removeClass('active');
616
        $(this).addClass('active');
617
        updateCanvas(editorCurrentRoom, 'room');
618
    });
619

620
    /*=======================================================================================================*/
621

622
    /*============================================ TOOLBAR 2 MANAGEMENT =====================================*/
623

624
    $('#place-spriteChar').click(function()
625
    {
626
        canvas_Char.state = 'sprite';
627
        //context.attach('canvas', canvas_cMenu['spritePositioning']);
628
        $('.toolbar.character button').removeClass('active');
629
        $(this).addClass('active');
630
        updateCanvas(editorMapIdRoom[editorCurrentCharacter.parentRoomId], 'character');
631
    });
632

633
    $('#set-hotspotChar').click(function()
634
    {
635
        canvas_Char.selected = null;
636
        if(editorCurrentCharacter == null)
637
        { this.blur(); alert('Please select a character.'); return; }
638
        canvas_Char.state = 'hotspot';
639
        $('.toolbar.character button').removeClass('active');
640
        $(this).addClass('active');
641
        updateCanvas(editorMapIdRoom[editorCurrentCharacter.parentRoomId], 'character');
642
    });
643

644
    $('#xy-pickerChar').click(function()
645
    {
646
        canvas_Char.selected = null;
647
        canvas_Char.state = 'xy-pick';
648
        $('.toolbar.character button').removeClass('active');
649
        $(this).addClass('active');
650
    });
651

652
    editorCanvas = $('#character-canvas');
653
    editorCanvas.click(function(e)
654
    {
655
        e.preventDefault();
656

657
        var offset = $(this).offset();
658
        var relX = Math.round(e.pageX - offset.left);
659
        var relY = Math.round(e.pageY - offset.top);
660

661
        var pushPolygonPoint = function(type)
662
        {
663
            //var initPolygon = function(poly) { poly = []; poly['closed'] = false};
664
            var polygon;
665
            switch(type)
666
            {
667
                case 'hotspot':
668
                    /*if(!(editorCurrentCharacter.id in editorMapIdItem))
669
                     {
670
                     alert('Please select an item!');
671
                     return;
672
                     }*/
673
                    if(editorCurrentCharacter.hotspot == null)
674
                        editorCurrentCharacter.hotspot = new Polygon();
675
                    polygon = editorCurrentCharacter.hotspot;
676
                    break;
677
            }
678

679
            if (!polygon.closed) {
680
                if (polygon.points.length && new paper.Rectangle(polygon.points[0].x - 5, polygon.points[0].y - 5, 10, 10).contains(new paper.Point(relX, relY)))
681
                {
682
                    polygon.close();
683
                    polygon.centroid = getPolygonCentroid(polygon);
684
                }
685

686
                else {
687
                    var present = false;
688
                    for (var i = 0; i < polygon.points.length; i++)
689
                        if (relX == polygon.points[i].x && relY == polygon.points[i].y) {
690
                            present = true;
691
                            break;
692
                        }
693
                    if (!present) polygon.points.push(new paper.Point(relX, relY));
694
                }
695
            }
696

697
            updateCanvas(editorMapIdRoom[editorCurrentCharacter.parentRoomId], 'character');
698
        };
699

700
        switch(canvas_Char.state)
701
        {
702
            case('hotspot'): pushPolygonPoint('hotspot');
703
                break;
704
            case 'xy-pick':
705
                $('.clipboard').remove();
706
                var clipboard = 'Clipboard: (' + relX + ', ' + relY + ')';
707
                $('.well').append($(document.createElement('span')).attr('class', 'clipboard').append($(document.createElement('b')).text(clipboard)).css({ 'margin-left' : '20px'}));
708
                break;
709
            default :
710
                break;
711
        }
712
    });
713

714
    editorCanvas.on('mousedown', function(e)
715
    {
716
        e.preventDefault();
717

718
        canvas_Char.mouseDown.clicked = true;
719
        var offset = $(this).offset();
720
        var relX = Math.round(e.pageX - offset.left);
721
        var relY = Math.round(e.pageY - offset.top);
722

723
        if(canvas_Char.state == 'sprite')
724
        {
725
            var clickedItem = getCharacterWithSpriteContaining(new paper.Point(relX, relY));
726
            canvas_Char.selected = clickedItem;
727

728
            if(clickedItem != null)
729
            {
730
                var frame = getItemPlaceHolder(clickedItem);
731
                canvas_Char.mouseDown.offset = new paper.Point(clickedItem.position.x - relX, clickedItem.position.y - relY);
732
            }
733
        }
734

735
        updateCanvas(editorMapIdRoom[editorCurrentCharacter.parentRoomId], 'character');
736
    });
737

738
    editorCanvas.mousemove(function(e)
739
    {
740

741
        var offset = $(this).offset();
742
        var relX = parseInt(e.pageX - offset.left);
743
        var relY = parseInt(e.pageY - offset.top);
744

745
        view_UpdateMousePos(relX.toString(), relY.toString(), 'character');
746

747
        var room = editorMapIdRoom[editorCurrentCharacter.parentRoomId];
748
        switch(canvas_Char.state)
749
        {
750
            case 'sprite' :
751
                if (canvas_Char.mouseDown.clicked == true && canvas_Char.mouseDown.offset != null && canvas_Char.selected != null)
752
                {
753
                    canvas_Char.selected.position = { x : relX + canvas_Char.mouseDown.offset.x, y : relY + canvas_Char.mouseDown.offset.y};
754
                    //getItemPlaceHolder(canvas.selected).setPosition(canvas.selected.position.x, canvas.selected.position.y);
755
                    updateCanvas(room, 'character');
756
                    //drawItemBoundingBox(canvas.selected);
757
                }
758
                break;
759
            case 'hotspot':
760
                updateCanvas(room, 'character');
761
                var hotspot = editorCurrentCharacter.hotspot;
762
                if(hotspot != null && hotspot.points.length && !hotspot.closed)
763
                {
764
                    ctx_Char.beginPath();
765
                    var lastPoint = hotspot.points[hotspot.points.length - 1];
766
                    ctx_Char.beginPath();
767
                    ctx_Char.moveTo(lastPoint.x, lastPoint.y);
768
                    ctx_Char.lineTo(relX, relY);
769
                    ctx_Char.stroke();
770
                }
771
                break;
772

773
            default:
774
                break;
775

776
        }
777
    });
778

779
    editorCanvas.on('mouseup', function(e)
780
    {
781
        canvas_Char.mouseDown.clicked = false;
782
        canvas_Char.mouseDown.offset = null;
783
    });
784

785
    editorCanvas.on('mouseout', function(e)
786
    {
787
        canvas_Char.mouseDown.clicked = false;
788
        canvas_Char.mouseDown.offset = null;
789
        view_UpdateMousePos('-', '-', 'character');
790
    });
791

792
    editorCanvas.on("contextmenu", function(evt)
793
    {
794
        evt.preventDefault();
795
        switch($(this)[0].state)
796
        {
797
            case 'hotspot':
798
                if(editorCurrentCharacter.hotspot != null)
799
                    editorCurrentCharacter.hotspot = null;
800
                break;
801
            default:
802
                break;
803
        }
804
        updateCanvas(editorMapIdRoom[editorCurrentCharacter.parentRoomId], 'character');
805
    });
806
});
807
/*===================================================== END OF CANVAS INPUT HANDLERS =====================================================*/
808

809
/*=========================================================== SCRIPTS SECTION ===================================================================*/
810
$(document).ready(function()
811
{
812
    $('#textarea').css({'width': '100%', 'height': '500px'});
813
    codeMirror = CodeMirror.fromTextArea($('#textarea')[0],
814
        {
815
            lineNumbers: true,
816
            mode: "javascript"
817
        });
818

819
    $('#script-name, #script-to-load').css({ 'width' : '100%' }).select2();
820

821
    $('#script-name').change(function()
822
    {
823
        $('#saveScriptInputText')[0].value = this.value;
824
    });
825

826
    $('#new-script').click(function ()
827
    {
828
        editorScriptLastBtnPressed = 'new';
829
        if (editorScriptState == 'ok')
830
        {
831
            //view_DeleteAllTreeNodes();
832
            view_DeleteAllTuples();
833
            codeMirror.doc.setValue('');
834
            $('#currentScript').text('unnamed script');
835
            //view_AcceptTreeDND();
836
        }
837
        else $('#unsaved-script-modal').modal('show');
838
    });
839

840
    $('#unsaved-script-modal-OK').click(function ()
841
    {
842
        editorScriptState = 'ok';
843
        if (editorScriptLastBtnPressed == 'new')
844
            $('#new-script').trigger('click');
845

846
        else $('#load-script-modal').modal('show');
847
    });
848

849
    $('#load-script').click(function ()
850
    {
851
        editorScriptLastBtnPressed = 'load';
852
        if (editorScriptState != 'ok')
853
        {
854
            $('#unsaved-script-modal').modal('show');
855
            return;
856
        }
857
        $('#load-script-modal').modal('show');
858
    });
859
    $('#load-script-modal-OK').click(function ()
860
    {
861
        var scriptToLoad = $('#script-to-load')[0].value;
862
        if (!scriptToLoad.length)
863
            return;
864
        var script = editorScriptList[scriptToLoad];
865
        $('#new-script').trigger('click');
866
        $('#currentScript').text(scriptToLoad);
867
        codeMirror.doc.setValue(script.code);
868
        for (var i = 0; i < script.scriptTriggerers.length; i++)
869
            view_CreateNewScriptRunnerTuple(script.scriptTriggerers[i].type, script.scriptTriggerers[i].params);
870
        return;
871
        $('#load-script-modal').modal('hide');
872
        editorScriptState = 'ok';
873
    });
874

875
    var validateScriptId = function (id)
876
    {
877
        if (id.trim().length == 0)
878
            return false;
879

880
        if (id in editorScriptList)
881
            return 'overwrite';
882

883
        return true;
884
    };
885

886
    var saveScript = function (scriptId)
887
    {
888
        editorScriptState = 'ok';
889
        var triggerers = [];
890
        $('.tuple.triggerer').each(function ()
891
        {
892
            var params = [];
893
            var type = ($(this).attr('class').split(' ')[3]);
894
            switch(type)
895
            {
896
                case 'user-trigger':
897
                    params[0] = $(this).find('select.triggerer-ev-1')[0].value;
898
                    params[1] = $(this).find('select.target-obj-1')[0].value;
899
                    params[2] = $(this).find('input[type="checkbox"]')[0].checked;
900
                    params[3] = $(this).find('select.target-obj-2')[0].value;
901
                    params[4] = $(this).find('.script-sentence')[0].value;
902
                    break;
903
                case 'event-trigger':
904
                    params[0] = $(this).find('input')[0].value;
905
                    break;
906
                case 'enter-room-trigger':
907
                    params[0] = $(this).find('select')[0].value;
908
                    editorMapIdRoom[params[0]].onEnterScript = scriptId;
909
                    break;
910
                default :
911
                    break;
912
            }
913

914
            triggerers.push(new ScriptTriggerer(type, params));
915
        });
916
        //var scriptTree = jsTree2ScriptTree(editorScriptTree.get_node('j1_1'), null);
917
        if (!(scriptId in editorScriptList))
918
        {
919
            $('#datalist-game-scripts').append($(document.createElement('option')).text(scriptId));
920
            view_UpdateDataLists('add', 'scripts', scriptId);
921
        }
922
        //editorScriptList[scriptId] = new Script(scriptTree, triggerers);
923

924
        editorScriptList[scriptId] = new Script(codeMirror.getValue(), triggerers);
925
    };
926

927
    $('#save-script').click(function ()
928
    {
929
        var currentScript = $('#currentScript')[0].textContent;
930
        if(currentScript === 'unnamed script')
931
        {
932
            $('#save-script-as').click();
933
            return;
934
        }
935
        editorScriptLastBtnPressed = 'save';
936
        $('#saveScriptInputText')[0].value = currentScript;
937
        $('#overwrite-script-modal').modal('show');
938
    });
939

940
    $('#save-script-as').click(function ()
941
    {
942
        editorScriptLastBtnPressed = 'save';
943
        $('#save-script-modal').modal('show');
944
    });
945
    $('#save-script-modal-OK').click(function ()
946
    {
947
        var scriptName = $('#saveScriptInputText');
948
        var scriptId = scriptName[0].value;
949
        var saveScriptModal = $('#save-script-modal');
950
        var isValid = validateScriptId(scriptId);
951
        if (!isValid)
952
            return;
953

954
        saveScriptModal.modal('hide');
955
        $('#currentScript').text(scriptId);
956
        if (isValid != 'overwrite')
957
        {
958
            saveScript(scriptId);
959
            scriptName[0].value = '';
960
            return;
961
        }
962
        $('#overwrite-script-modal').modal('show');
963
    });
964
    $('#save-script-modal-Cancel').click(function ()
965
    {
966
        $('#script-name')[0].value = '';
967
    });
968
    $('#overwrite-script-modal-OK').click(function ()
969
    {
970
        var scriptName = $('#saveScriptInputText');
971
        saveScript(scriptName[0].value);
972
        scriptName[0].value = '';
973
        $('#overwrite-script-modal').modal('hide');
974
    });
975
    $('#overwrite-script-modal-Cancel').click(function ()
976
    {
977
        $('#script-name')[0].value = '';
978
    });
979

980
    var addExecutionTriggerer = $('#add-execution-triggerer');
981
    addExecutionTriggerer.hover(function ()
982
        {
983
            $(this).css('cursor', 'pointer')
984
        },
985
        function ()
986
        {
987
            $(this).css('cursor', 'default')
988
        });
989
    addExecutionTriggerer.click(function ()
990
    {
991
        view_CreateNewScriptRunnerTuple($('#script-runner')[0].value)
992
    });
993

994
    $('.game-side-effects li, .game-controllers li').attr({'draggable': 'true'}).on('dragstart', function (event)
995
    {
996
        //event.preventDefault();
997
        event.originalEvent.dataTransfer.setData('data', JSON.stringify({'type': $(this).parent()[0].className, 'text': $(this).find('span').attr('value')}));
998
    });
999

1000
    $('input[value=interaction]').attr('checked', 'checked');
1001
    $('#script-event').prop('disabled', true);
1002

1003
    var radios = $('input[name=reaction]');
1004
    radios.change(function ()
1005
    {
1006
        var selected = $(this).filter(':checked');
1007

1008
        var scriptRoom = $('#script-room');
1009
        var scriptItem = $('#script-item');
1010
        var scriptAction = $('#script-action');
1011
        var scriptEvent = $('#script-event');
1012

1013
        if (selected[0].value == 'interaction')
1014
        {
1015
            scriptRoom.prop('disabled', false);
1016
            scriptItem.prop('disabled', false);
1017
            scriptAction.prop('disabled', false);
1018
            scriptEvent.prop('disabled', true)
1019
            return;
1020
        }
1021
        scriptRoom.prop('disabled', true);
1022
        scriptItem.prop('disabled', true);
1023
        scriptAction.prop('disabled', true);
1024
        scriptEvent.prop('disabled', false);
1025
    });
1026

1027
    //view_AssociateSelectors($('#script-room')[0], $('#script-item')[0]);
1028

1029
    $('#game-test-container').css(
1030
        preventHighlitingCSS).attr('tabindex', '0');
1031
    /*$().focus(function(){
1032
     $(this).css('border', 'none');
1033
     console.log('ett');});*/
1034
    //$('#game-test-container').bind('keydown', keyboardManager);
1035
    $('.cond-logic').css({'font-size': '15px'});
1036
});
1037
/*======================================================== END OF SCRIPTS SECTION ===========================================================*/
1038

1039
/*=========================================================== GAME VARS SECTION =================================================================*/
1040
$(document).ready(function()
1041
{
1042
    $('#new-var').click(view_AddGameVariable).css(preventHighlitingCSS);
1043
    $('#clear-all-vars').click(view_ClearGameVariables).css(preventHighlitingCSS);
1044
    $('#new-var, #clear-all-vars').hover(function() { $(this).css('cursor', 'pointer')}, function() { $(this).css('cursor', 'default')});
1045
});
1046
/*======================================================= END OF GAME VARS SECTION =========================================================================*/
1047

1048
/*============================================================ ANIMS SECTION =====================================================================*/
1049

1050
$(document).ready(function()
1051
{
1052
    $($('.add.anim')).click(function ()
1053
    {
1054
        var animId = 'Anim_' + editorAnimsCount++;
1055
        view_CreateNewAnimPanel(animId);
1056
        createNewAnim(animId);
1057
    });
1058
});
1059
/*======================================================== END OF ANIMS SECTION ============================================================================*/
1060

1061
/*========================================================= INVENTORY SECTION =====================================================================*/
1062
$(document).ready(function()
1063
{
1064
    $('.add.inventory').click(function() { createNewInvItem('InvObj_' + editorInvItemCount); view_CreateNewInvItemPanel('InvObj_' + editorInvItemCount++); });
1065
});
1066
/*====================================================== END OF INVENTORY SECTION =============================================================================*/
1067

1068

1069
/*============================================================ DIALOG SECTION ==============================================*/
1070
$(document).ready(function()
1071
{
1072
    $('.add.dialog').click(function()
1073
    {
1074
        var dialogId = 'Dialog_' + editorDialogsCount++;
1075
        view_CreateNewDialogPanel(dialogId);
1076
    });
1077
});
1078
/*======================================================= END OF DIALOG SECTION =================================================================*/
1079

1080
/*============================================================ SOUNDS SECTION =====================================================================*/
1081
$(document).ready(function()
1082
{
1083
    var soundUploader = $('#sound-uploader');
1084
    soundUploader.hide();
1085
    soundUploader.change(function (event)
1086
        {
1087
            var files = event.target.files;
1088

1089
            var loadAudioContent = function (i)
1090
            {
1091
                var id = files[i].name;
1092
                createNewAudioContent(id);
1093

1094
                var fileReader = new FileReader();
1095
                fileReader.onload = function (event)
1096
                {
1097
                    view_AddNewSound(event.target.result, id);
1098
                    if (i < files.length - 1)
1099
                        loadAudioContent(i + 1)
1100

1101
                };
1102
                fileReader.readAsDataURL(files[i]);
1103
            };
1104

1105
            loadAudioContent(0);
1106
        }
1107
    );
1108
    $($('.add.sound')).click(function ()
1109
    {
1110
        $('#sound-uploader').click();
1111
    });
1112
});
1113
/*======================================================= END OF SOUNDS SECTION ========================================================================================*/
1114
/*============================================================ OPTIONS SECTION =====================================================================*/
1115
$(document).ready(function()
1116
{
1117

1118
    $('#game-resolution').change(
1119
        function()
1120
        {
1121
            switch(this.value)
1122
            {
1123
                case '320x200': resolution.width = 320; resolution.height = 200;
1124
                break;
1125
                case '640x480': resolution.width = 640; resolution.height = 480;
1126
                break;
1127
                case '800x600': resolution.width = 800; resolution.height = 600;
1128
                break;
1129
                case '1024x768': resolution.width = 1024; resolution.height = 768;
1130
                break;
1131
            }
1132
            updateCanvas(editorCurrentRoom, 'room');
1133
        }
1134
    );
1135
});
1136
/*======================================================= END OF OPTIONS SECTION ===============================================================================*/
1137

1138
var view_AppendAdditionalTreeDOMNodes = function(node)
1139
{
1140
    node = $('#script-tree').jstree().get_node(node);
1141
    var data = node.data;
1142
    if(!data || !data.DOM)
1143
        return;
1144
    node = $('#' + node.id);
1145
    // Order inversion is needed since we're using $.after
1146
    for(var i = data.DOM.length - 1; i >= 0; i--) $(node.find('a')[0]).after(data.DOM[i]);
1147
};
1148

1149
var view_DeleteAllTuples = function()
1150
{
1151
    $('.tuple.triggerer').remove();
1152
};
1153

1154
var initSelectNode = function(node, datalist)
1155
{
1156
    $(datalist).each(function()
1157
    {
1158
        $(this.options).each(function()
1159
        {
1160
            node.append($(document.createElement('option')).attr({'value' : this.text}).text(this.text));
1161
        });
1162
    });
1163
};
1164

1165
/**
1166
 * Creates a row that allows to specify parameters for different types of script triggerers
1167
 */
1168
var view_CreateNewScriptRunnerTuple = function(type, data)
1169
{
1170
    var row = $(document.createElement('div')).addClass('row tuple triggerer ' + type).css('margin-top', '10px');
1171
    var eraser = $(document.createElement('span')).attr('class', 'glyphicon glyphicon-remove').css('color', 'firebrick');
1172
    eraser.hover(function() { $(this).css('cursor', 'pointer');}, function() {$(this).css('cursor', 'default');});
1173
    eraser.click(function() { row.remove();});
1174
    row.append(eraser);
1175

1176
    switch(type)
1177
    {
1178
        case 'user-trigger':
1179
            var actString = '';
1180
            var obj1String = '';
1181
            var obj2String = '';
1182

1183
            var checkbox = $(document.createElement('input')).attr({'type' : 'checkbox', 'class' : 'col activate-obj-2'}).css('margin-left', '15px');
1184
            var sentence = $(document.createElement('input')).attr({'class' : 'col script-sentence'}).css('width', '150px');
1185

1186
            var updateSentence = function()
1187
            {
1188
                if(actString.length == 0)
1189
                    return;
1190
                var action = editorMapIdAction[actString];
1191
                if(!action)
1192
                {
1193
                    sentence[0].value = '';
1194
                    return;
1195
                }
1196
                var s = actString + ' ' + obj1String;
1197
                if(obj2String && checkbox[0].checked)
1198
                    s += ' ' + (action.id == 'Use' ? 'with' : (action.id == 'Give' ? 'to' : '-')) + ' ' + obj2String;
1199

1200
                sentence[0].value = s;
1201
            };
1202

1203
            row.append($(document.createElement('span')).text('Action performed ').css('margin-left', '5px'));
1204
            var action = $(document.createElement('select')).attr({'class' : 'col triggerer-ev-1 datalist-triggerer-events'}).css({ width: '150px' });
1205
            initSelectNode(action, $('#datalist-triggerer-events'));
1206
            row.append(action);
1207
            action.select2();
1208

1209
            row.append($(document.createElement('span')).text('Target object ').css('margin-left', '15px'));
1210
            //var obj1 = $(document.createElement('input')).attr({'list' : 'datalist-game-items', 'class' : 'target-obj-1'});
1211
            var obj1 = $(document.createElement('select')).attr({'class' : 'col target-obj-1 datalist-game-items'}).css({ width: '150px' });
1212
            initSelectNode(obj1, $('#datalist-game-items'));
1213
            row.append(obj1);
1214
            obj1.select2();
1215

1216
            row.append(checkbox);
1217
            row.append($(document.createElement('span')).text('Second target object ').css('margin-left', '5px'));
1218
            var targetObject2 = $(document.createElement('select')).attr({'class' : 'col target-obj-2 datalist-game-items', 'disabled' : 'disabled'}).css({ width: '150px' });;
1219
            initSelectNode(targetObject2, $('#datalist-game-items'));
1220
            row.append(targetObject2);
1221
            targetObject2.select2();
1222

1223
            row.append(($(document.createElement('span')).text('Sentence ').css('margin-left', '15px'))).append(sentence);
1224
            /*targetObject2.change(
1225
                function()
1226
                {
1227
                    obj2String = editorMapIdItem[this.value].description || editorMapIdInvItem[this.description];
1228
                    updateSentence();
1229
                }
1230
            );*/
1231
            checkbox.on('change', function() {
1232
                if(this.checked)
1233
                {
1234
                    targetObject2.prop('disabled', false);
1235
                }
1236
                else
1237
                {
1238
                    targetObject2.prop('disabled', true);
1239
                    targetObject2[0].value = '';
1240
                }
1241
                updateSentence();
1242
            });
1243
        break;
1244
        case 'event-trigger':
1245
            row.append($(document.createElement('span')).text('Event name').css('margin-left', '5px'));
1246
            row.append($(document.createElement('input')).attr({'type' : 'text', 'class' : 'col triggerer-ev'}).css('margin-left', '5px'));
1247

1248
        break;
1249
        case 'timer-trigger':
1250
            row.append($(document.createElement('span')).text('Time in milliseconds ').css('margin-left', '5px'));
1251
            row.append($(document.createElement('input')).attr({'type' : 'number', 'class' : 'col triggerer-timer', 'min' : 150, 'value' : 150}).css('margin-left', '5px'));
1252
            row.append($(document.createElement('input')).attr({'type' : 'checkbox', 'class' : 'col time-interval'}).css('margin-left', '15px'));
1253
            row.append($(document.createElement('span')).text('Always restart timer ').css('margin-left', '5px'));
1254
        break;
1255
        case 'enter-room-trigger':
1256
            row.append($(document.createElement('span')).text('Room ID ').css('margin-left', '5px'));
1257
            var selectRoom = $(document.createElement('select')).attr({ 'class' : 'col datalist-game-rooms' }).css({ width: '200px' });
1258
            initSelectNode(selectRoom, $('#datalist-game-rooms'));
1259
            row.append(selectRoom);
1260
            selectRoom.select2();
1261
            break;
1262
    }
1263
    $('#script-container').append(row);
1264
    if(data)
1265
        view_PopulateTuple(type, row, data);
1266
};
1267

1268
var view_CreateNewRoomPanel = function(roomId)
1269
{
1270
    var roomPanel = $(document.createElement('div'));
1271
    var roomPanelHeading = $(document.createElement('div'));
1272
    var roomPanelTitle = $(document.createElement('h4'));
1273
    var roomPanelToggler = $(document.createElement('a'));
1274
    var roomPanelCollapse = $(document.createElement('div'));
1275
    var roomPanelBody = $(document.createElement('div'));
1276
    var bgSelector = $(document.createElement('input'));
1277

1278
    roomPanelBody.append($(document.createElement('span')).append($(document.createTextNode('Background image '))));
1279
    roomPanelBody.append(bgSelector);
1280
    bgSelector.attr(
1281
        {
1282
            'type' : 'file',
1283
            'accept' : 'image/*',
1284
            'id' : roomId + '-bg-selector'
1285
        });
1286

1287
    $(bgSelector).inputfile({
1288
        uploadText: '<span class="glyphicon glyphicon-upload"></span> Select image file',
1289
        removeText: '<span class="glyphicon glyphicon-trash"></span>',
1290
        restoreText: '<span class="glyphicon glyphicon-remove"></span>',
1291

1292
        uploadButtonClass: 'btn btn-default',
1293
        removeButtonClass: 'btn btn-default',
1294

1295
        dontRemove: true
1296
    });
1297

1298

1299

1300
    roomPanelToggler.attr(
1301
        {
1302
            'data-toggle' : 'collapse',
1303
            'data-parent' : '#room-accordion',
1304
            'href' : '#' + roomId + '-panel',
1305
            'class' : 'glyphicon glyphicon-collapse-down pull-right',
1306
            'style' : 'color: inherit; text-decoration: none'
1307
        }
1308
    );
1309

1310
    roomPanelTitle.addClass('panel-title');
1311
    roomPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(roomId))));
1312
    roomPanelTitle.append(roomPanelToggler);
1313
    roomPanelHeading.addClass('panel-heading room');
1314
    roomPanelHeading.append(roomPanelTitle);
1315
    roomPanelBody.addClass('panel-body');
1316
    roomPanelCollapse.attr(
1317
        {
1318
            'id' : roomId + '-panel',
1319
            'class' : 'panel-collapse collapse'
1320
        }
1321
    );
1322

1323
    roomPanelCollapse.append(roomPanelBody);
1324
    roomPanel.append(roomPanelHeading);
1325
    roomPanel.append(roomPanelCollapse);
1326
    roomPanel.attr(
1327
        {
1328
            'class' : 'panel panel-default room'
1329
        }
1330
    );
1331
    $('#room-accordion').append(roomPanel);
1332
    $('#' + roomId + '-bg-selector')[0].addEventListener('change', setEditorRoomBackground, false);
1333

1334
    // Handle click on a room panel's heading
1335
    $(roomPanelHeading).click(function ()
1336
    {
1337
        /* Look for another room panel that was previosuly collapsed down.
1338
           If present, trigger click on his 'collapse' link to collapse it up.
1339
         */
1340
        if($(this).siblings()[0].className.indexOf('in') == -1)
1341
            $('.room .in').siblings().find('a').trigger('click');
1342

1343
        var roomId = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
1344

1345
        editorCurrentRoom = editorMapIdRoom[roomId];
1346

1347
        var pHeadingRoomActive = $('.panel-heading.room.active, .panel-heading.item.active, .panel-heading.walk-behind.active');
1348
        pHeadingRoomActive.css({ 'background' : '#f5f5f5', 'color' : 'inherit'});
1349
        pHeadingRoomActive.removeClass('active');
1350

1351
        $(this).addClass('active');
1352
        $(this).css( {'background-color' : '#428bca', 'color' : 'white'});
1353

1354
        editorCurrentItem = null;
1355
        $('.toolbar.room button.active').blur();
1356
        $('.toolbar.room button').removeClass('active');
1357
        canvas.state = 'idle';
1358
        updateCanvas(editorCurrentRoom, 'room');
1359

1360

1361
    });
1362

1363
    // Defines the attributes of the popup div generated by bootstrap-editable
1364
    $(roomPanelHeading).find('span').editable({
1365
        type: 'text',
1366
        title: 'Enter room name',
1367
        placement: 'right',
1368
        unsavedclass: null
1369
    });
1370

1371
    $(roomPanelHeading).find('span').editable('option', 'validate', function(inputString)
1372
    {
1373
        if(inputString == '')
1374
            return 'This field can\'t be null!';
1375

1376
        inputString = inputString.replace(/[\s\'\"]/g, '_');
1377

1378
        if(checkIdUniqueness(inputString, 'room') == false)
1379
            return 'Ids must be unique!';
1380

1381
        var oldId = $(this).text().replace(/[\s\'\"]/g, '_');
1382

1383
        //view_EditOptionOccurrences(inputString, $(this).text(), 'room');
1384
        //changeParamNameOccurrences(inputString, oldId);
1385
        view_UpdateDataLists('delete', 'rooms', oldId);
1386
        view_UpdateDataLists('add', 'rooms', inputString);
1387
        $('input[list="datalist-game-rooms"]').each(function() { if(this.value == oldId) this.value = inputString});
1388

1389
        // Deletes from the map the old id/room match and adds the new one
1390
        var editorRoomToBeModified = editorMapIdRoom[oldId];
1391
        delete editorMapIdRoom[editorRoomToBeModified.id];
1392
        editorRoomToBeModified.setId(inputString);
1393
        editorMapIdRoom[editorRoomToBeModified.id] = editorRoomToBeModified;
1394
        $('#' + $(this).text() + '-panel').attr('id', inputString + '-panel');
1395
        $('#' + $(this).text() + '-items-accordion').attr('id', inputString + '-items-accordion');
1396
        $(this).text(inputString);
1397
        roomPanelToggler.attr({ 'href' : '#' + inputString + '-panel'});
1398
    });
1399

1400
    view_CreateEditorItemPanelGroup(roomPanelBody);
1401
    view_CreateEditorWalkBoxesGroup(roomPanelBody);
1402
    view_UpdateDataLists('add', 'rooms', roomId);
1403
};
1404

1405
var view_CreateEditorItemPanelGroup = function(roomPanel)
1406
{
1407
    var buttonGroup = $(document.createElement('div'));
1408
    var addButton = $(document.createElement('button'));
1409
    var deleteButton = $(document.createElement('button'));
1410
    //var clearButton = $(document.createElement('button'));
1411

1412
    buttonGroup.addClass('btn-group btn-group-xs item');
1413
    buttonGroup.css({ 'font-family' : 'inherited' });
1414
    addButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs add item'});
1415
    deleteButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs delete item'});
1416
    //clearButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs clear item'});
1417

1418
    addButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-plus-sign')).append($(document.createTextNode(' Add')));
1419
    deleteButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-minus-sign')).append($(document.createTextNode(' Delete')));
1420
    //clearButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-remove-sign')).append($(document.createTextNode(' Clear')));
1421

1422
    buttonGroup.append(addButton);
1423
    buttonGroup.append(deleteButton);
1424
    //buttonGroup.append(clearButton);
1425
    buttonGroup.append($(document.createElement('div')).addClass('row spacer').css({ 'margin-top' : '40px'}));
1426
    roomPanel.append($(document.createElement('hr')).addClass('item')).append($(document.createElement('h4')).addClass('item').append($(document.createElement('i')).append(document.createTextNode('Objects'))));
1427
    roomPanel.append(buttonGroup);
1428
    //roomPanel.append($(document.createElement('br')));
1429

1430
    var parentRoomName;
1431
    var node =  roomPanel[0];
1432

1433
    do
1434
    {
1435
        node = node.parentNode;
1436
    }
1437
    while(node.className.indexOf('collapse') == -1);
1438

1439
    parentRoomName = node.id.slice(0, node.id.length - '-panel'.length);
1440

1441
    roomPanel.append($(document.createElement('div')).attr({ 'class' : 'panel-group', 'id' : parentRoomName + '-items-accordion' }));
1442

1443
    addButton.click(function() {
1444
        var parentRoomName = node.id.slice(0, node.id.length - '-panel'.length);
1445
        if(editorMapIdRoom[parentRoomName].items.length == 0) {
1446
            if($(this).closest('.panel-body').find('.alert').length == 0)
1447
                alertMessage($(this).closest('.panel-body'), 'Please choose a background for this room, first!', 'danger');
1448
            return;
1449
        }
1450
        var newItemId = 'Item_' + editorItemsCount++;
1451
        createNewEditorItem(newItemId, $(this).closest('.collapse')[0].id.slice(0, node.id.length - '-panel'.length));
1452
        view_CreateEditorItemPanel(newItemId, parentRoomName);
1453
    });
1454
    deleteButton.click(function()
1455
    {
1456
        if(editorCurrentItem == null)
1457
            return;
1458
        var itemId = editorCurrentItem.id;
1459
        view_DeleteEntity('items', itemId);
1460
    });
1461
};
1462

1463
var view_CreateEditorWBPanelGroup = function(roomPanel)
1464
{
1465
    var buttonGroup = $(document.createElement('div'));
1466
    var addButton = $(document.createElement('button'));
1467
    var deleteButton = $(document.createElement('button'));
1468
    //var clearButton = $(document.createElement('button'));
1469

1470
    buttonGroup.addClass('btn-group btn-group-xs walk-behind');
1471
    buttonGroup.css({ 'font-family' : 'inherited' });
1472
    addButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs add walk-behind'});
1473
    deleteButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs delete walk-behind'});
1474
    //clearButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs clear walk-behind'});
1475

1476
    addButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-plus-sign')).append($(document.createTextNode(' Add')));
1477
    deleteButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-minus-sign')).append($(document.createTextNode(' Delete')));
1478
    //clearButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-remove-sign')).append($(document.createTextNode(' Clear')));
1479

1480
    buttonGroup.append(addButton);
1481
    buttonGroup.append(deleteButton);
1482
    //buttonGroup.append(clearButton);
1483
    buttonGroup.append($(document.createElement('div')).addClass('row spacer').css({ 'margin-top' : '40px'}));
1484
    roomPanel.append($(document.createElement('hr')).addClass('walk-behind')).append($(document.createElement('h4')).addClass('walk-behind').append($(document.createElement('i')).append(document.createTextNode('Walk-behinds'))));
1485
    roomPanel.append(buttonGroup);
1486
    //roomPanel.append($(document.createElement('br')));
1487

1488
    var parentRoomName;
1489
    var node =  roomPanel[0];
1490

1491
    do
1492
    {
1493
        node = node.parentNode;
1494
    }
1495
    while(node.className.indexOf('collapse') == -1);
1496

1497
    parentRoomName = node.id.slice(0, node.id.length - '-panel'.length);
1498

1499
    roomPanel.append($(document.createElement('div')).attr({ 'class' : 'panel-group', 'id' : parentRoomName + '-wb-accordion' }));
1500

1501
    addButton.click(function() {
1502
        var parentRoomName = node.id.slice(0, node.id.length - '-panel'.length);
1503
        if(editorMapIdRoom[parentRoomName].items.length == 0) {
1504
            if($(this).closest('.panel-body').find('.alert').length == 0)
1505
                alertMessage($(this).closest('.panel-body'), 'Please choose a background for this room, first!', 'danger');
1506
            return;
1507
        }
1508
        var newWbId = 'Walk-Behind_' + editorWbCount++;
1509
        //createNewEditorItem(newWbId, $(this).closest('.collapse')[0].id.slice(0, node.id.length - '-panel'.length));
1510
        view_CreateEditorWBPanel(newWbId, parentRoomName);
1511
    });
1512
};
1513

1514
var view_CreateEditorWalkBoxesGroup = function(roomPanel)
1515
{
1516
    var buttonGroup = $(document.createElement('div'));
1517
    var addButton = $(document.createElement('button'));
1518
    var deleteButton = $(document.createElement('button'));
1519
    var clearButton = $(document.createElement('button'));
1520

1521
    buttonGroup.addClass('btn-group btn-group-xs walk-behind');
1522
    buttonGroup.css({ 'font-family' : 'inherited' });
1523
    addButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs add walk-boxes'});
1524
    deleteButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs delete walk-boxes'});
1525
    clearButton.attr({ 'type' : 'button' , 'class' : 'btn btn-default btn-xs clear walk-boxes'});
1526

1527
    addButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-plus-sign')).append($(document.createTextNode(' Add')));
1528
    deleteButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-minus-sign')).append($(document.createTextNode(' Delete')));
1529
    clearButton.append($(document.createElement('span')).addClass('glyphicon glyphicon-remove-sign')).append($(document.createTextNode(' Clear')));
1530

1531
    buttonGroup.append(addButton);
1532
    buttonGroup.append(deleteButton);
1533
    buttonGroup.append(clearButton);
1534
    buttonGroup.append($(document.createElement('div')).addClass('row spacer').css({ 'margin-top' : '40px'}));
1535
    roomPanel.append($(document.createElement('hr')).addClass('walk-behind')).append($(document.createElement('h4')).addClass('walk-boxes').append($(document.createElement('i')).append(document.createTextNode('WalkBoxes'))));
1536
    roomPanel.append(buttonGroup);
1537
    //roomPanel.append($(document.createElement('br')));
1538

1539
    var parentRoomName;
1540
    var node =  roomPanel[0];
1541

1542
    do
1543
    {
1544
        node = node.parentNode;
1545
    }
1546
    while(node.className.indexOf('collapse') == -1);
1547

1548
    parentRoomName = node.id.slice(0, node.id.length - '-panel'.length);
1549

1550
    roomPanel.append($(document.createElement('div')).attr({ 'class' : 'panel-group', 'id' : parentRoomName + '-wboxes-accordion' }));
1551

1552
    addButton.click(function() {
1553
        var parentRoomName = node.id.slice(0, node.id.length - '-panel'.length);
1554
        /*if(editorMapIdRoom[parentRoomName].items.length == 0) {
1555
            if($(this).closest('.panel-body').find('.alert').length == 0)
1556
                alertMessage($(this).closest('.panel-body'), 'Please choose a background for this room, first!', 'danger');
1557
            return;
1558
        }*/
1559
        var newWBoxId = 'WalkBox_' + keys(editorMapIdRoom[parentRoomName].walkBoxes).length + '_' + parentRoomName;
1560
        editorMapIdRoom[parentRoomName].walkBoxes[newWBoxId] = new WalkBox(newWBoxId);
1561
        //createNewEditorItem(newWbId, $(this).closest('.collapse')[0].id.slice(0, node.id.length - '-panel'.length));
1562
        view_CreateEditorWalkBoxPanel(newWBoxId, parentRoomName);
1563
    });
1564

1565
    deleteButton.click(function()
1566
    {
1567
        if(editorCurrentWalkBox == null)
1568
            return;
1569
        view_DeleteEntity('walkboxes', editorCurrentWalkBox);
1570
        editorCurrentWalkBox = null;
1571
    });
1572
};
1573

1574
var view_CreateEditorWBPanel = function(wbId, parentRoomName)
1575
{
1576
    var wbPanel = $(document.createElement('div'));
1577
    var wbPanelHeading = $(document.createElement('div'));
1578
    var wbPanelTitle = $(document.createElement('h4'));
1579
    var wbPanelToggler = $(document.createElement('a'));
1580
    var wbPanelCollapse = $(document.createElement('div'));
1581
    var wbPanelBody = $(document.createElement('div'));
1582
    //var spriteSelector = $(document.createElement('input'));
1583

1584
    $('#' + parentRoomName + '-wb-accordion').append(wbPanel);
1585

1586
    wbPanelTitle.addClass('panel-title');
1587
    wbPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(wbId))));
1588
    wbPanelTitle.append(wbPanelToggler);
1589
    wbPanelHeading.addClass('panel-heading walk-behind');
1590
    wbPanelHeading.append(wbPanelTitle);
1591
    wbPanelBody.addClass('panel-body');
1592
    wbPanelCollapse.attr(
1593
        {
1594
            'id': wbId + '-panel',
1595
            'class': 'panel-collapse collapse'
1596
        }
1597
    );
1598
    wbPanelCollapse.append(wbPanelBody);
1599
    wbPanel.append(wbPanelHeading);
1600
    wbPanel.append(wbPanelCollapse);
1601
    wbPanel.attr(
1602
        {
1603
            'class': 'panel panel-default'
1604
        }
1605
    );
1606
    wbPanelToggler.attr(
1607
        {
1608
            'data-toggle' : 'collapse',
1609
            'data-parent' : '#' + parentRoomName + '-wb-accordion',
1610
            'href' : '#' + wbId + '-panel',
1611
            'class' : 'glyphicon glyphicon-collapse-down pull-right',
1612
            'style' : 'color: inherit; text-decoration: none'
1613
        }
1614
    );
1615

1616
    var thumbnailDiv = $(document.createElement('div'));
1617
    var thumbnailA = $(document.createElement('a')).addClass('thumbnail');
1618
    var thumbnail;
1619
    if(editorMapIdWb[wbId] != undefined)
1620
    {
1621
        thumbnail = new Image();
1622
        thumbnail.src = editorMapIdWb[wbId].image;
1623
    }
1624
    else
1625
    {
1626
        thumbnail = new Image(100, 100);
1627
        thumbnail.src = './images/no-img.png';
1628
        createNewEditorWalkBehind(wbId, parentRoomName);
1629
    }
1630
    thumbnailA.append(thumbnail);
1631
    thumbnailDiv.append(thumbnailA);
1632
    wbPanelBody.append(thumbnailDiv);
1633

1634
    // Handle click on a walk-behind panel's header
1635
    $(wbPanelHeading).click(function ()
1636
    {
1637
        var relativeItemName = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
1638
        var relativePanelGroup = $(this).closest('.panel-group');
1639

1640
        // Collapse the previously opened item panel within the same room panel
1641
        if($(relativePanelGroup).find('.collapse.in').length)
1642
            if($(relativePanelGroup).find('.collapse.in').attr('id') != relativeItemName + '-panel')
1643
                $(relativePanelGroup).find('.collapse.in').siblings().find('a').trigger('click');
1644

1645

1646
        editorCurrentItem = editorMapIdWb[relativeItemName];
1647

1648
        var select = $('.panel-heading.walk-behind.active, .panel-heading.item.active');
1649
        select.css({ 'background' : '#f5f5f5', 'color' : 'inherit'});
1650
        select.removeClass('active');
1651

1652
        $(this).addClass('active');
1653
        $(this).css( {'background-color' : '#428bca', 'color' : 'white'});
1654

1655
        updateCanvas(editorCurrentRoom, 'room');
1656
    });
1657
};
1658

1659
var view_DeleteWbThumbnail = function(wbId)
1660
{
1661
    var thumbnail = new Image(100, 100);
1662
    thumbnail.src = './images/no-img.png';
1663
    $('#' + wbId + '-panel .thumbnail').empty();
1664
    $('#' + wbId.id + '-panel .thumbnail').append(thumbnail);
1665
};
1666

1667
var view_CreateEditorWalkBoxPanel = function(wboxId, parentRoomName)
1668
{
1669
    var wboxPanel = $(document.createElement('div'));
1670
    var wboxPanelHeading = $(document.createElement('div'));
1671
    var wboxPanelTitle = $(document.createElement('h4'));
1672
    var wboxPanelToggler = $(document.createElement('a'));
1673
    var wboxPanelCollapse = $(document.createElement('div'));
1674
    var wboxPanelBody = $(document.createElement('div'));
1675
    //var spriteSelector = $(document.createElement('input'));
1676

1677
    $('#' + parentRoomName + '-wboxes-accordion').append(wboxPanel);
1678

1679
    wboxPanelTitle.addClass('panel-title');
1680
    wboxPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(wboxId))));
1681
    wboxPanelTitle.append(wboxPanelToggler);
1682
    wboxPanelHeading.addClass('panel-heading walkbox');
1683
    wboxPanelHeading.append(wboxPanelTitle);
1684
    wboxPanelBody.addClass('panel-body');
1685
    wboxPanelCollapse.attr(
1686
        {
1687
            'id': wboxId + '-panel',
1688
            'class': 'panel-collapse collapse'
1689
        }
1690
    );
1691
    wboxPanelCollapse.append(wboxPanelBody);
1692
    wboxPanel.append(wboxPanelHeading);
1693
    wboxPanel.append(wboxPanelCollapse);
1694
    wboxPanel.attr(
1695
        {
1696
            'class': 'panel panel-default'
1697
        }
1698
    );
1699
    wboxPanelToggler.attr(
1700
        {
1701
            'data-toggle' : 'collapse',
1702
            'data-parent' : '#' + parentRoomName + '-wboxes-accordion',
1703
            'href' : '#' + wboxId + '-panel',
1704
            'class' : 'glyphicon glyphicon-collapse-down pull-right',
1705
            'style' : 'color: inherit; text-decoration: none'
1706
        }
1707
    );
1708

1709
    var wboxData;
1710
    var wbox = editorMapIdRoom[parentRoomName].walkBoxes[wboxId];
1711

1712
    wboxData = $(document.createElement('input')).attr('type', 'checkbox');
1713
    if(wbox.visible === true)
1714
        wboxData.prop('checked', 'checked');
1715
    wboxPanelBody.append($(document.createElement('div')).append($(document.createTextNode('Visible: '))).append(wboxData));
1716
    wboxData.change(function() {
1717
        wboxPanelHeading.trigger('click');
1718
        wbox.visible = !wbox.visible; });
1719
    wboxData.checked = true;
1720

1721
    wboxData = view_CreateInputList(wboxId, 'audio');
1722
    wboxPanelBody.append($(document.createElement('div')).append($(document.createTextNode('Walking sound: '))).append(wboxData));
1723
    $(wboxData).change(function() { wboxPanelHeading.trigger('click'); wbox.walkingSound = this.value;});
1724
    if(wbox.walkingSound)
1725
        wboxData.value = wbox.walkingSound;
1726

1727
    wboxData = $(view_CreateInputNumber(wboxId, 'Max scale factor')).attr({ 'min' : '0'});
1728
    wboxPanelBody.append($(document.createElement('div')).append($(document.createTextNode('Max scale factor: '))).append(wboxData));
1729
    wboxData.change(function()
1730
    {
1731
        wboxPanelHeading.trigger('click');
1732
        wbox.maxScaleFactor = parseInt(this.value);
1733
    });
1734
    wboxData[0].value = wbox.maxScaleFactor;
1735

1736
    wboxData = $(view_CreateInputNumber(wboxId, 'Min scale factor')).attr({ 'min' : '0'});
1737
    wboxPanelBody.append($(document.createElement('div')).append($(document.createTextNode('Min scale factor: '))).append(wboxData));
1738
    wboxData.change(function()
1739
    {
1740
        wboxPanelHeading.trigger('click');
1741
        wbox.minScaleFactor = parseInt(this.value);
1742
    });
1743
    wboxData[0].value = wbox.minScaleFactor;
1744

1745
    // Handle click on a walkBox panel's header
1746
    $(wboxPanelHeading).click(function ()
1747
    {
1748
        var relativeItemName = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
1749
        var relativePanelGroup = $(this).closest('.panel-group');
1750

1751
        // Collapse the previously opened item panel within the same room panel
1752
        if($(relativePanelGroup).find('.collapse.in').length)
1753
            if($(relativePanelGroup).find('.collapse.in').attr('id') != relativeItemName + '-panel')
1754
                $(relativePanelGroup).find('.collapse.in').siblings().find('a').trigger('click');
1755

1756
        editorCurrentWalkBox = relativeItemName;
1757

1758
        //editorCurrentItem = editorMapIdWb[relativeItemName];
1759

1760
        var select = $('.panel-heading.walkbox.active, .panel-heading.item.active');
1761
        select.css({ 'background' : '#f5f5f5', 'color' : 'inherit'});
1762
        select.removeClass('active');
1763

1764
        $(this).addClass('active');
1765
        $(this).css( {'background-color' : '#428bca', 'color' : 'white'});
1766

1767
        updateCanvas(editorCurrentRoom, 'room');
1768
    });
1769
};
1770

1771
function view_UpdateDataLists(op, type, text)
1772
{
1773
    var dataList;
1774
    var selectNodes;
1775

1776
    switch(type)
1777
    {
1778
        case 'actions': dataList = $('#datalist-triggerer-events');
1779
                        selectNodes = $('select.datalist-triggerer-events');
1780
        break;
1781
        case 'items': dataList = $('#datalist-game-items');
1782
            selectNodes = $('select.datalist-game-items');
1783
        break;
1784
        case 'rooms': dataList = $('#datalist-game-rooms');
1785
            selectNodes = $('select.datalist-game-rooms');
1786
        break;
1787
        case 'inventory-items': dataList =  $('#datalist-game-inventory-items');
1788
            selectNodes = $('select.datalist-game-inventory-items');
1789
        break;
1790
        case 'dialogs': dataList =  $('#datalist-game-dialogs');
1791
            selectNodes = $('select.datalist-game-dialogs');
1792
        break;
1793
        case 'anims': dataList =  $('#datalist-game-anims');
1794
            selectNodes = $('select.datalist-game-anims');
1795
        break;
1796
        case 'audio': dataList =  $('#datalist-game-audio');
1797
            selectNodes = $('select.datalist-game-audio');
1798
            break;
1799
        case 'scripts': dataList =  $('#datalist-game-scripts');
1800
            selectNodes = $('select.datalist-game-scripts');
1801
            break;
1802
        case 'walkboxes':
1803
            return;
1804
        default:
1805
            throwError('Error: unrecognized datalist type \"' + type + '\"')();
1806
    }
1807

1808
    if(op == 'add')
1809
    {
1810
        dataList.append($(document.createElement('option')).attr('value', text).append($(document.createTextNode(text))));
1811
        selectNodes.each(function()
1812
        {
1813
            $(this).append($(document.createElement('option')).attr('value', text).append($(document.createTextNode(text))));
1814
        });
1815
    }
1816
    else if(op == 'delete')
1817
    {
1818
        var options = dataList[0].options;
1819
        for(var i = 0; i < options.length; i++)
1820
        {
1821
            if(options[i].value === text)
1822
            {
1823
                dataList[0].remove(i);
1824
                break;
1825
            }
1826
        };
1827

1828
        selectNodes.each(function()
1829
        {
1830
            $(this).find('option[value="' + text + '"]').remove();
1831
        });
1832
    }
1833

1834
    //editorScriptTree.trigger('redraw');
1835
};
1836
var view_CreateEditorItemPanel = function(_itemId_, parentRoomName)
1837
{
1838
    var itemId = _itemId_;
1839
    var itemPanel = $(document.createElement('div'));
1840
    var itemPanelHeading = $(document.createElement('div'));
1841
    var itemPanelTitle = $(document.createElement('h4'));
1842
    var itemPanelToggler = $(document.createElement('a'));
1843
    var itemPanelCollapse = $(document.createElement('div'));
1844
    var itemPanelBody = $(document.createElement('div'));
1845
    //var spriteSelector = $(document.createElement('input'));
1846

1847
    $('#' + parentRoomName + '-items-accordion').append(itemPanel);
1848

1849
    itemPanelTitle.addClass('panel-title');
1850
    itemPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(itemId))));
1851
    itemPanelTitle.append(itemPanelToggler);
1852
    itemPanelHeading.addClass('panel-heading item');
1853
    itemPanelHeading.append(itemPanelTitle);
1854
    itemPanelBody.addClass('panel-body');
1855
    itemPanelCollapse.attr(
1856
        {
1857
            'id' : itemId + '-panel',
1858
            'class' : 'panel-collapse collapse'
1859
        }
1860
    );
1861
    itemPanelCollapse.append(itemPanelBody);
1862
    itemPanel.append(itemPanelHeading);
1863
    itemPanel.append(itemPanelCollapse);
1864
    itemPanel.attr(
1865
        {
1866
            'class' : 'panel panel-default'
1867
        }
1868
    );
1869

1870
    var hideFromCanvas = $(document.createElement('input')).attr('type', 'checkbox').css('margin-left', '10px');
1871
    hideFromCanvas.change(function()
1872
    {
1873
        editorMapIdItem[itemId].hideFromCanvas = this.checked;
1874
        updateCanvas(editorCurrentRoom, 'room');
1875
    });
1876
    hideFromCanvas[0].checked = editorMapIdItem[itemId].hideFromCanvas;
1877
    itemPanelBody.append($(document.createElement('span')).text('Hide from canvas')).append(hideFromCanvas);
1878
    itemPanelBody.append($(document.createElement('h4')).append($(document.createElement('i')).append('Properties')));
1879
    var itemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
1880
    var itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Description')));
1881
    var itemInput = $(document.createElement('input')).attr(
1882
        {
1883
            'type' : 'text',
1884
            'class' : 'form-control item'
1885
        }
1886
    );
1887
    var saveItemChanges = function()
1888
    {
1889
        var itemParentRoomId = $(this.panelTitle).text();
1890

1891
        switch($(this).attr('type'))
1892
        {
1893
            case 'text':
1894
                editorMapIdItem[itemParentRoomId].description = this.value;
1895
                break;
1896
            case 'number':
1897
                if($(this).hasClass('layer'))
1898
                {
1899
                    editorMapIdItem[itemParentRoomId].setLayer(2 * this.value);
1900
                    updateCanvas(editorCurrentRoom, 'room');
1901
                }
1902
                else if($(this).hasClass('walkX'))
1903
                    //editorMapIdItem[itemParentRoomId].walkingX = parseInt(this.value);
1904
                    editorMapIdItem[itemParentRoomId].walkspot.x = parseInt(this.value);
1905
                else
1906
                    //editorMapIdItem[itemParentRoomId].walkingY = parseInt(this.value);
1907
                    editorMapIdItem[itemParentRoomId].walkspot.y = parseInt(this.value);
1908
                break;
1909
        }
1910

1911
    };
1912
    itemInput[0].panelTitle = itemPanelTitle.find('span')[0];
1913
    $(itemInput).on('change', saveItemChanges);
1914
    itemPanelBody.append((itemInputGroup.append(itemInputLabel).append(itemInput)));
1915

1916
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Layer')));
1917
    var itemInputLayer = $(document.createElement('input')).attr(
1918
        {
1919
            'type' : 'number',
1920
            'class' : 'form-control item layer',
1921
            'min' : '1',
1922
            'value' : '1'
1923
        }
1924
    );
1925
    itemInputLayer[0].panelTitle = itemPanelTitle.find('span')[0];
1926
    $(itemInputLayer).on('change', saveItemChanges);
1927

1928
    itemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
1929
    itemPanelBody.append((itemInputGroup.append(itemInputLabel).append(itemInputLayer)));
1930

1931
    itemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
1932
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Walking X')));
1933
    var itemWalkX = $(document.createElement('input')).attr({ 'type' : 'number', 'class' : 'form-control item walkX' });
1934
    itemWalkX[0].panelTitle = itemPanelTitle.find('span')[0];
1935
    itemWalkX.on('change', saveItemChanges);
1936
    itemPanelBody.append((itemInputGroup.append(itemInputLabel).append(itemWalkX)));
1937

1938
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Walking Y')));
1939
    var itemWalkY = $(document.createElement('input')).attr({ 'type' : 'number', 'class' : 'form-control item walkY' });
1940
    itemWalkY[0].panelTitle = itemPanelTitle.find('span')[0];
1941
    itemWalkY.on('change', saveItemChanges);
1942
    itemPanelBody.append((itemInputGroup.append(itemInputLabel).append(itemWalkY)));
1943

1944
    itemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
1945
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Face direction')));
1946
    var dirs = $(view_CreateInputList(itemId + '-direction', 'directions')).attr('type', 'datalist').addClass('form-control item direction');
1947
    dirs[0].value = editorMapIdItem[itemId].faceDir;
1948
    dirs.change(function() { editorMapIdItem[itemId].faceDir = this.value; });
1949
    itemInputGroup.append(itemInputLabel).append(dirs);
1950
    itemPanelBody.append(itemInputGroup);
1951

1952
    var itemVisibleCheckBox = $(document.createElement('input')).attr({ 'type' : 'checkbox', 'class' : 'item visible' });
1953
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append(itemVisibleCheckBox);
1954
    var itemVisibleText = $(document.createElement('input')).attr('type', 'text').addClass('form-control item layer');
1955
    itemVisibleCheckBox[0].checked = editorMapIdItem[_itemId_].visible;
1956
    itemVisibleText[0].value = editorMapIdItem[_itemId_].visible ? 'Visible' : 'Hidden';
1957
    itemVisibleCheckBox.on('change', function()
1958
    {
1959
        if(this.checked)
1960
            itemVisibleText[0].value = 'Visible';
1961
        else
1962
            itemVisibleText[0].value = 'Hidden';
1963
        editorMapIdItem[_itemId_].visible = this.checked;
1964

1965
    });
1966
    itemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
1967
    itemPanelBody.append((itemInputGroup.append(itemInputLabel)).append(itemVisibleText));
1968

1969
    //////////////////////////////////////////////////////////////////////////////////////////////////
1970
    itemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
1971
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Leads to room')));
1972
    var room = $(view_CreateInputList(itemId + '-exit-to', 'rooms')).addClass('form-control item exit');
1973
    room[0].value = editorMapIdItem[itemId].exitTo.room;
1974
    room.change(function() { editorMapIdItem[itemId].exitTo.room = this.value; });
1975
    itemInputGroup.append(itemInputLabel).append(room);
1976
    //itemPanelBody.append(itemInputGroup);
1977

1978
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Pos X')));
1979
    var exitPosX = $(document.createElement('input')).attr({ 'type' : 'number', 'class' : 'form-control item exit' });
1980
    exitPosX[0].value = editorMapIdItem[itemId].exitTo.xPos;
1981
    exitPosX.change(function() { editorMapIdItem[itemId].exitTo.xPos = this.value.length === 0 ? null : parseInt(this.value); });
1982
    itemPanelBody.append((itemInputGroup.append(itemInputLabel).append(exitPosX)));
1983

1984
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Pos Y')));
1985
    var exitPosY = $(document.createElement('input')).attr({ 'type' : 'number', 'class' : 'form-control item exit' });
1986
    exitPosY[0].value = editorMapIdItem[itemId].exitTo.yPos;
1987
    exitPosY.change(function() { editorMapIdItem[itemId].exitTo.yPos = this.value.length === 0 ? null : parseInt(this.value); });
1988
    itemPanelBody.append((itemInputGroup.append(itemInputLabel).append(exitPosY)));
1989
    //////////////////////////////////////////////////////////////////////////////////////////////////
1990

1991
    itemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
1992
    itemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Default Anim')));
1993
    itemInput = $(document.createElement('select')).attr('class', 'datalist-game-anims').addClass('form-control item anim-default').css({ width : '100%' });
1994
    itemInput.append($(document.createElement('option')).attr({ 'value' : ''}).text('No anim'));
1995
    initSelectNode(itemInput, $('#datalist-game-anims'));
1996
    itemInput[0].panelTitle = itemPanelTitle.find('span')[0];
1997
    itemInput.on('change', function() {
1998
        var animId = itemInput[0].value;
1999
        if(!animId.length)
2000
        {
2001
            editorMapIdItem[itemId].defaultAnims.default = null;
2002
            thumbnailDiv.hide();
2003
            return;
2004
        }
2005
        editorMapIdItem[itemId].defaultAnims.default = animId;
2006
        var anim = editorMapIdAnim[animId];
2007
        if(!anim)
2008
            return;
2009
        view_addThumbnail(anim.frames[anim.start_idx]);
2010
        updateCanvas(editorCurrentRoom, 'room');
2011
    });
2012
    itemPanelBody.append((itemInputGroup.append(itemInputLabel).append(itemInput)));
2013

2014
    var view_addThumbnail = function(sprite)
2015
    {
2016
        thumbnail.src = sprite.img.src;
2017
        thumbnailDiv.show();
2018
        $(thumbnail).on('dragstart', function(event)
2019
        {
2020
            event.originalEvent.dataTransfer.setDragImage(thumbnail, sprite.img.width / 2, 0);
2021
        });
2022
    };
2023

2024
    var thumbnailDiv = $(document.createElement('div'));
2025
    var thumbnailA = $(document.createElement('a')).addClass('thumbnail');
2026
    var thumbnail = new Image();
2027
    thumbnailA.append(thumbnail);
2028
    thumbnailDiv.append(thumbnailA);
2029
    itemPanelBody.append(thumbnailDiv);
2030
    thumbnailDiv.hide();
2031
    if(editorMapIdItem[itemId].defaultAnims.default)
2032
    {
2033
        var frame = getItemPlaceHolder(editorMapIdItem[itemId]);
2034
        if(frame)
2035
        {
2036
            view_addThumbnail(frame);
2037
        }
2038
    }
2039
    var itemStateAdder = $(document.createElement('span')).addClass('glyphicon glyphicon-plus').css({'color' : 'green', 'margin-top' : '15px'});
2040
    itemStateAdder.hover(function() { $(this).css('cursor', 'pointer');}, function() { $(this).css('cursor', 'default'); });
2041
    itemPanelBody.append(itemStateAdder);
2042
    var itemStateContainer = $(document.createElement('div'));
2043
    itemPanelBody.append(itemStateContainer);
2044

2045
    itemStateAdder.after(($(document.createElement('span')).css({'margin-left' : '10px', 'font-style' : 'italic'}).append(document.createTextNode('New <state, anim> couple'))));
2046
    itemStateAdder.click(function() { itemStateContainer.append(view_CreateStateAnimCouple(editorMapIdItem[itemId]));});
2047

2048
    itemPanelToggler.attr(
2049
        {
2050
            'data-toggle' : 'collapse',
2051
            'data-parent' : '#' + parentRoomName + '-items-accordion',
2052
            'href' : '#' + itemId + '-panel',
2053
            'class' : 'glyphicon glyphicon-collapse-down pull-right',
2054
            'style' : 'color: inherit; text-decoration: none'
2055
        }
2056
    );
2057

2058
    $(itemPanelHeading).find('span').editable({
2059
        type: 'text',
2060
        title: 'Enter item id',
2061
        placement: 'right',
2062
        unsavedclass: null
2063
    });
2064

2065
    $(itemPanelHeading).find('span').editable('option', 'validate', function(inputString)
2066
    {
2067
        if (inputString == '')
2068
            return 'This field can\'t be null!';
2069

2070
        //else if(inputString.indexOf(' ')!=-1) return 'Invalid name';
2071

2072
        inputString = inputString.replace(/[\s\'\"]/g, '_');
2073

2074
        if(checkIdUniqueness(inputString, 'item') == false)
2075
            return 'Ids must be unique!';
2076

2077
        itemId = inputString;
2078
        _itemId_ = inputString;
2079
        var oldId = $(this).text().replace(/[\s\'\"]/g, '_');
2080

2081
        view_UpdateDataLists('delete', 'items', oldId);
2082
        view_UpdateDataLists('add', 'items', inputString);
2083

2084
        for(var key in editorScriptList)
2085
            replaceScriptOccurrencies(editorScriptList[key], 'item', oldId, itemId);
2086

2087
        $('input[list="datalist-game-items"]').each(function() { if(this.value == oldId) this.value = inputString});
2088

2089
        for(var key in editorScriptList)
2090
            if(key.indexOf(oldId) != -1)
2091
            {
2092
                var action = key.split(' + ')[0];
2093
                editorScriptList[action + ' + ' + inputString] = editorScriptList[key];
2094
                delete  editorScriptList[key];
2095
            }
2096

2097
        // Deletes from the map the old id/item match and adds the new one
2098
        var editorItemToBeModified = editorMapIdItem[oldId];
2099
        delete editorMapIdItem[editorItemToBeModified.id];
2100
        //if(editorItemToBeModified.defaultAnims.default != null)
2101
        //{
2102
            var index = editorCurrentRoom.zOrderMap[editorItemToBeModified.layer].indexOf(editorItemToBeModified.id);
2103
            editorCurrentRoom.zOrderMap[editorItemToBeModified.layer].splice(index, 1);
2104
            editorCurrentRoom.zOrderMap[editorItemToBeModified.layer].push(inputString);
2105
        //}
2106
        editorItemToBeModified.id = inputString;
2107
        editorMapIdItem[editorItemToBeModified.id] = editorItemToBeModified;
2108
        $('#' + $(this).text() + '-panel').attr('id', inputString + '-panel');
2109
        itemPanelToggler.attr({ 'href' : '#' + inputString + '-panel'});
2110
    });
2111

2112
    // Handle click on an item panel's header
2113
    $(itemPanelHeading).click(function ()
2114
    {
2115
        var relativeItemName = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
2116
        var relativePanelGroup = $(this).closest('.panel-group');
2117

2118
        // Collapse the previously opened item panel within the same room panel
2119
        if($(relativePanelGroup).find('.collapse.in').length)
2120
            if($(relativePanelGroup).find('.collapse.in').attr('id') != relativeItemName + '-panel')
2121
                $(relativePanelGroup).find('.collapse.in').siblings().find('a').trigger('click');
2122

2123

2124
        editorCurrentItem = editorMapIdItem[relativeItemName];
2125

2126
        var pHeadingItemActive = $('.panel-heading.item.active');
2127
        pHeadingItemActive.css({ 'background' : '#f5f5f5', 'color' : 'inherit'});
2128
        pHeadingItemActive.removeClass('active');
2129
        var pHeadingWbActive = $('.panel-heading.walk-behind.active');
2130
        pHeadingWbActive.css({ 'background' : '#f5f5f5', 'color' : 'inherit'});
2131
        pHeadingWbActive.removeClass('active');
2132

2133
        $(this).addClass('active');
2134
        $(this).css( {'background-color' : '#428bca', 'color' : 'white'});
2135

2136

2137
        if(editorCurrentItem.description != '')
2138
            $(this).parent().find(':input[type="text"]').filter('.item')[0].value = editorCurrentItem.description;
2139
        $(this).parent().find(':input[type="number"]')[0].value = editorCurrentItem.layer / 2;
2140
        $(this).parent().find(':input[type="number"]')[1].value = editorCurrentItem.walkspot.x;
2141
        $(this).parent().find(':input[type="number"]')[2].value = editorCurrentItem.walkspot.y;
2142
        $(this).parent().find('select')[0].value = editorCurrentItem.defaultAnims.default;
2143

2144
        updateCanvas(editorCurrentRoom, 'room');
2145
    });
2146

2147
    (function()
2148
    {
2149
        var item = editorMapIdItem[itemId];
2150
        for(var key in item.customAnims)
2151
            if(key != 'default')
2152
                itemStateContainer.append(view_CreateStateAnimCouple(item, { key : key, val : item.customAnims[key] }));
2153
    })();
2154

2155
    view_UpdateDataLists('add', 'items', itemId);
2156
};
2157

2158
var view_ClearRoomPanels = function()
2159
{
2160
  $('.panel.panel-default.room, .panel.panel-default.character').remove();
2161
};
2162

2163
var view_DeleteActiveRoomPanel = function()
2164
{
2165
    $('.panel-heading.room.active').parent().remove();
2166
};
2167

2168

2169
var view_UpdateMousePos = function(x, y, which)
2170
{
2171
    if(x < 0 || y < 0)
2172
        x = y = '-';
2173
    $('.' + which + ' .xPos').text(x);
2174
    $('.' + which + ' .yPos').text(y);
2175
};
2176

2177
function view_CreateNewActionPanel(actionId) {
2178
    var actionPanel = $(document.createElement('div'));
2179
    var actionPanelHeading = $(document.createElement('div'));
2180
    var actionPanelTitle = $(document.createElement('h4'));
2181
    var actionPanelToggler = $(document.createElement('a'));
2182
    var actionPanelCollapse = $(document.createElement('div'));
2183
    var actionPanelBody = $(document.createElement('div'));
2184

2185
    actionPanelTitle.addClass('panel-title');
2186
    actionPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(actionId))));
2187
    actionPanelTitle.append(actionPanelToggler);
2188
    actionPanelHeading.addClass('panel-heading action');
2189
    actionPanelHeading.append(actionPanelTitle);
2190
    actionPanelBody.addClass('panel-body');
2191
    actionPanelCollapse.attr(
2192
        {
2193
            'id': actionId + '-panel',
2194
            'class': 'panel-collapse collapse'
2195
        }
2196
    );
2197

2198
    actionPanelCollapse.append(actionPanelBody);
2199
    actionPanel.append(actionPanelHeading);
2200
    actionPanel.append(actionPanelCollapse);
2201
    actionPanel.attr(
2202
        {
2203
            'class': 'panel panel-default action'
2204
        }
2205
    );
2206
    actionPanelToggler.attr(
2207
        {
2208
            'data-toggle': 'collapse',
2209
            'data-parent': '#action-accordion',
2210
            'href': '#' + actionId + '-panel',
2211
            'class': 'glyphicon glyphicon-collapse-down pull-right',
2212
            'style': 'color: inherit; text-decoration: none'
2213
        }
2214
    );
2215
    $('#action-accordion').append(actionPanel);
2216

2217
    var actionInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
2218
    var actionInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Description')));
2219
    var actionInput = $(document.createElement('input')).attr(
2220
        {
2221
            'type': 'text',
2222
            'class': 'form-control action'
2223
        }
2224
    );
2225
    actionPanelBody.append((actionInputGroup.append(actionInputLabel).append(actionInput)));
2226
    /*actionPanelBody.append($(document.createElement('div')).addClass('divider').css({ 'margin-top': '40px' })).append($(document.createElement('button')).click(function () {
2227
        var actionId = $(this).parent().parent().attr('id');
2228
        actionId = actionId.slice(0, actionId.length - '-panel'.length);
2229
        editorMapIdAction[actionId].description = $(this).parent().find(':input[type="text"]')[0].value;
2230
    }).addClass('btn btn-success btn-sm').append($(document.createTextNode('Save changes'))));*/
2231
    actionInput.change(function()
2232
    {
2233
       editorMapIdAction[actionId].description = this.value;
2234
    });
2235

2236
    // Defines the attributes of the popup div generated by bootstrap-editable
2237
    /*$(actionPanelHeading).find('span').editable({
2238
        type: 'text',
2239
        title: 'Enter action id',
2240
        placement: 'right',
2241
        unsavedclass: null
2242
    });
2243

2244
    $(actionPanelHeading).find('span').editable('option', 'validate', function (inputString) {
2245
        if (inputString == '')
2246
            return 'This field can\'t be null!';
2247

2248
        inputString = inputString.replace(/[\s\'\"]/g, '_');
2249

2250
        if(checkIdUniqueness(inputString, 'action') == false)
2251
            return 'Ids must be unique!';
2252

2253
        actionId = inputString;
2254
        var oldId = $(this).text().replace(/[\s\'\"]/g, '_');
2255

2256
        //view_EditOptionOccurrences(inputString, $(this).text(), 'action');
2257
        //changeParamNameOccurrences(inputString, oldId);
2258
        view_UpdateDataLists('delete', 'actions', oldId);
2259
        view_UpdateDataLists('add', 'actions', inputString);
2260
        $('input[list="datalist-triggerer-events"]').each(function() { if(this.value == oldId) this.value = inputString});
2261

2262
        for(var key in editorScriptList)
2263
            if(key.indexOf(oldId) != -1)
2264
            {
2265
                var item = key.split(' + ')[1];
2266
                editorScriptList[inputString + ' + ' + item] = editorScriptList[key];
2267
                delete  editorScriptList[key];
2268
            }
2269
        // Deletes from the map the old id/action match and adds the new one
2270
        var editorActionToBeModified = editorMapIdAction[oldId];
2271
        delete editorMapIdAction[editorActionToBeModified.id];
2272

2273
        editorActionToBeModified.id = inputString;
2274
        editorMapIdAction[editorActionToBeModified.id] = editorActionToBeModified;
2275
        $('#' + $(this).text() + '-panel').attr('id', inputString + '-panel');
2276
        actionPanelToggler.attr({ 'href': '#' + inputString + '-panel'});
2277
    });*/
2278

2279
    // Handle click on an action panel's header
2280
    $(actionPanelHeading).click(function () {
2281
        if($(this).siblings()[0].className.indexOf('in') == -1)
2282
            $('.in').siblings().find('a').trigger('click');
2283

2284
        var relativeActionId = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
2285

2286
        var pHeadingActionActive = $('.panel-heading.action.active');
2287
        pHeadingActionActive.css({ 'background': '#f5f5f5', 'color': 'inherit'});
2288
        pHeadingActionActive.removeClass('active');
2289

2290
        $(this).addClass('active');
2291
        $(this).css({'background-color': '#428bca', 'color': 'white'});
2292

2293
        $(this).parent().find(':input[type="text"]').filter('.action')[0].value = editorMapIdAction[relativeActionId].description;
2294
    });
2295

2296
    view_UpdateDataLists('add', 'actions', actionId);
2297
};
2298

2299
var view_CreateNewCharacterPanel = function(characterId)
2300
{
2301
    var characterPanel = $(document.createElement('div'));
2302
    var characterPanelHeading = $(document.createElement('div'));
2303
    var characterPanelTitle = $(document.createElement('h4'));
2304
    var characterPanelToggler = $(document.createElement('a'));
2305
    var characterPanelCollapse = $(document.createElement('div'));
2306
    var characterPanelBody = $(document.createElement('div'));
2307
    var col1 = $(document.createElement('div')).addClass('col-md-12');
2308

2309
    characterPanelTitle.addClass('panel-title');
2310
    characterPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(characterId))));
2311
    characterPanelTitle.append(characterPanelToggler);
2312
    characterPanelHeading.addClass('panel-heading character');
2313
    characterPanelHeading.append(characterPanelTitle);
2314
    characterPanelBody.addClass('panel-body');
2315
    characterPanelCollapse.attr(
2316
        {
2317
            'id': characterId + '-panel',
2318
            'class': 'panel-collapse collapse'
2319
        }
2320
    );
2321

2322
    characterPanelCollapse.append(characterPanelBody);
2323
    characterPanel.append(characterPanelHeading);
2324
    characterPanel.append(characterPanelCollapse);
2325
    characterPanel.attr(
2326
        {
2327
            'class': 'panel panel-default character'
2328
        }
2329
    );
2330
    characterPanelToggler.attr(
2331
        {
2332
            'data-toggle': 'collapse',
2333
            'data-parent': '#character-accordion',
2334
            'href': '#' + characterId + '-panel',
2335
            'class': 'glyphicon glyphicon-collapse-down pull-right',
2336
            'style': 'color: inherit; text-decoration: none'
2337
        }
2338
    );
2339
    $('#character-accordion').append(characterPanel);
2340

2341
/*======================================================= Set player character input ===========================================================*/
2342
    var characterInputGroup = $(document.createElement('div')).addClass('');
2343
    var characterInputLabel = $(document.createElement('span')).append($(document.createTextNode('Set as player character')));
2344
    var characterInput = $(document.createElement('input')).attr({'type': 'checkbox', 'class': 'character hero' }).css('margin-left', '10px');
2345
    characterInput.change(function()
2346
    {
2347
        editorPlayerCharacter = null;
2348
        var that = this;
2349
        for(var i in editorMapIdCharacter)
2350
            editorMapIdCharacter[i].isPlayer = false;
2351
        $('.character.hero').each(function()
2352
        {
2353
            if(that !== this)
2354
            {
2355
                this.checked = false;
2356
            }
2357
        });
2358
        editorMapIdCharacter[characterId].isPlayer = this.checked;
2359
        editorPlayerCharacter = this.checked === true ? characterId : null;
2360
    });
2361
    if(editorMapIdCharacter[characterId].isPlayer === true)
2362
    {
2363
        characterInput[0].checked = true;
2364
        editorPlayerCharacter = characterId;
2365
    }
2366
    col1.append((characterInputGroup.append(characterInputLabel)).append(characterInput));
2367

2368
/*======================================================= Character description input ===========================================================*/
2369
    characterInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
2370
    characterInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Description')));
2371
    characterInput = $(document.createElement('input')).attr({'type': 'text', 'class': 'form-control character' });
2372
    characterInput.change(function() { editorMapIdCharacter[characterId].description = this.value; });
2373

2374
    //characterPanelBody.append($(document.createElement('h4')).append($(document.createElement('i')).append(document.createTextNode('General properties'))));
2375
    characterPanelBody.append($(document.createElement('div')).addClass('row').append(col1.append($(document.createElement('h4')).append($(document.createElement('i')).append(document.createTextNode('General properties'))))));
2376
    col1.append((characterInputGroup.append(characterInputLabel).append(characterInput)));
2377

2378
/*======================================================= Character initial room input ===========================================================*/
2379
    characterInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
2380
    characterInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Parent room')));
2381
    characterInput = $(document.createElement('input')).attr({'list' : 'datalist-game-rooms', 'class' : 'room-selector form-control'});
2382
    characterInput.change(function() { editorMapIdCharacter[characterId].parentRoomId = this.value; });
2383
    if(editorMapIdCharacter[characterId].parentRoomId != undefined)
2384
        characterInput[0].value = editorMapIdCharacter[characterId].parentRoomId;
2385
    col1.append((characterInputGroup.append(characterInputLabel)).append(characterInput));
2386
/*====================================================== Character speech color input ===========================================================*/
2387

2388
    characterInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
2389
    characterInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Speech color')));
2390
    var characterSpeechColor = $(document.createElement('input')).attr('type', 'color').addClass('speech-col form-control');
2391
    characterInputGroup.append(characterInputLabel);
2392
    characterInputGroup.append(characterSpeechColor);
2393
    col1.append(characterInputGroup);
2394
    characterSpeechColor[0].value = editorMapIdCharacter[characterId].speechColor;
2395
    characterSpeechColor.change(function() { editorMapIdCharacter[characterId].speechColor = this.value; });
2396
/*======================================================= Character initial position input ======================================================*/
2397
    characterInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
2398
    characterInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Initial posX')));
2399
    var characterInputPosX = $(document.createElement('input')).attr({
2400
        'type': 'number',
2401
        'class': 'point-x form-control',
2402
        'value': '0'});
2403
    characterInputPosX[0].value = editorMapIdCharacter[characterId].position.x;
2404
    characterInputPosX.change(function() { editorMapIdCharacter[characterId].position.x = parseInt(this.value); });
2405
    characterInputGroup.append(characterInputLabel);
2406
    characterInputGroup.append(characterInputPosX);
2407
    col1.append(characterInputGroup);
2408
    var characterInputPosY = $(document.createElement('input')).attr({
2409
            'type': 'number',
2410
            'class': 'point-y form-control',
2411
            'value': '0'});
2412
    characterInputPosY[0].value = editorMapIdCharacter[characterId].position.y;
2413
    characterInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
2414
    characterInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Initial posY')));
2415
    characterInputPosY.change(function() { editorMapIdCharacter[characterId].position.y = parseInt(this.value); });
2416
    characterInputGroup.append(characterInputLabel);
2417
    characterInputGroup.append(characterInputPosY);
2418
    col1.append(characterInputGroup);
2419

2420
    col1.append($(document.createElement('h4')).text('Character Anims').css({'font-style' : 'italic', 'margin-top' : '25px'}));
2421
    var createAnimInputGroup = function(state, dir, label)
2422
    {
2423
        var characterInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
2424
        var characterInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('<' + state + ', ' + label + '>')));
2425
        var characterInput = $(document.createElement('select')).addClass('form-control character datalist-game-anims');
2426
        initSelectNode(characterInput, $('#datalist-game-anims'));
2427
        characterInput.change(function() { editorMapIdCharacter[characterId].defaultAnims[state][dir] = characterInput[0].value.length ? characterInput[0].value : null });
2428
        try {
2429
            characterInput[0].value = editorMapIdCharacter[characterId].defaultAnims[state][dir]; }
2430
        catch(err) {
2431
            console.log(err.message);
2432
                   }
2433
        return characterInputGroup.append(characterInputLabel).append(characterInput);
2434
    };
2435

2436
    //var states = ['stand', 'walk', 'talk_start', 'talk_stop'];
2437
    var states = ['stand', 'walk', 'talk'];
2438
    //var dirKeys = ['FL', 'FR', 'FF', 'FB', 'FFL', 'FFR', 'FBL', 'FBR'];
2439
    var dirKeys = ['FL', 'FR', 'FF', 'FB'];
2440
    //var dirText = ['face left', 'face right', 'face front', 'face back', 'face front left', 'face front right', 'face back left', 'face back right'];
2441
    var dirText = ['face left', 'face right', 'face front', 'face back'];
2442
    for(var i = 0; i < states.length; i++)
2443
        for(var j = 0; j < dirKeys.length; j++)
2444
            col1.append(createAnimInputGroup(states[i], dirKeys[j], dirText[j]));
2445

2446
    $('select.character.datalist-game-anims').select2({ 'allowClear' : true});
2447
    var characterStateAdder = $(document.createElement('span')).addClass('glyphicon glyphicon-plus').css({'color' : 'green', 'margin-top' : '15px'});
2448
    characterStateAdder.hover(function() { $(this).css('cursor', 'pointer');}, function() { $(this).css('cursor', 'default'); });
2449
    characterPanelBody.append(characterStateAdder);
2450
    var characterStateContainer = $(document.createElement('div'));
2451
    characterPanelBody.append(characterStateContainer);
2452

2453
    characterStateAdder.after(($(document.createElement('span')).css({'margin-left' : '10px', 'font-style' : 'italic'}).append(document.createTextNode('New <state, anim> couple'))));
2454
    characterStateAdder.click(function() { characterStateContainer.append(view_CreateStateAnimCouple(editorMapIdCharacter[characterId], null));});
2455
/*===============================================================================================================================================*/
2456

2457
    // Defines the attributes of the popup div generated by bootstrap-editable
2458
    $(characterPanelHeading).find('span').editable({
2459
        type: 'text',
2460
        title: 'Enter character id',
2461
        placement: 'right',
2462
        unsavedclass: null
2463
    });
2464

2465
    $(characterPanelHeading).find('span').editable('option', 'validate', function (inputString) {
2466
        if (inputString == '')
2467
            return 'This field can\'t be null!';
2468

2469
        inputString = inputString.replace(/[\s\'\"]/g, '_');
2470

2471
        if(checkIdUniqueness(inputString, 'character') == false)
2472
            return 'Ids must be unique!';
2473

2474
        var oldId = $(this).text().replace(/[\s\'\"]/g, '_');
2475

2476
        //view_EditOptionOccurrences(inputString, $(this).text(), 'character');
2477
        //changeParamNameOccurrences(inputString, oldId);
2478
        view_UpdateDataLists('delete', 'items', oldId);
2479
        view_UpdateDataLists('add', 'items', inputString);
2480
        $('input[list="datalist-game-items"]').each(function() { if(this.value == oldId) this.value = inputString});
2481

2482
        for(var key in editorScriptList)
2483
            if(key.indexOf(oldId) != -1)
2484
            {
2485
                var action = key.split(' + ')[0];
2486
                editorScriptList[action + ' + ' + inputString] = editorScriptList[key];
2487
                delete  editorScriptList[key];
2488
            }
2489
        // Deletes from the map the old id/character match and adds the new one
2490
        var editorCharacterToBeModified = editorMapIdCharacter[oldId];
2491
        delete editorMapIdCharacter[editorCharacterToBeModified.id];
2492

2493
        editorCharacterToBeModified.id = inputString;
2494
        editorMapIdCharacter[editorCharacterToBeModified.id] = editorCharacterToBeModified;
2495
        $('#' + $(this).text() + '-panel').attr('id', inputString + '-panel');
2496
        characterPanelToggler.attr({ 'href': '#' + inputString + '-panel'});
2497
    });
2498

2499

2500
    // Handle click on a character panel's header
2501
    $(characterPanelHeading).click(function () {
2502
        if($(this).siblings()[0].className.indexOf('in') == -1)
2503
            $('.in').siblings().find('a').trigger('click');
2504

2505
        var relativeCharacterId = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
2506
        editorCurrentCharacter = editorMapIdCharacter[relativeCharacterId];
2507

2508
        $('.panel-heading.character.active').css({ 'background': '#f5f5f5', 'color': 'inherit'});
2509
        $('.panel-heading.character.active').removeClass('active');
2510

2511
        $(this).addClass('active');
2512
        $(this).css({'background-color': '#428bca', 'color': 'white'});
2513

2514
        $(this).parent().find(':input[type="text"]').filter('.character')[0].value = editorMapIdCharacter[relativeCharacterId].description;
2515
        if(editorMapIdRoom[editorMapIdCharacter[relativeCharacterId].locationId] != undefined)
2516
            $(this).parent().find('.room-selector')[0].value = editorMapIdCharacter[relativeCharacterId].locationId;
2517

2518
        updateCanvas(editorMapIdRoom[editorCurrentCharacter.parentRoomId], 'character');
2519
    });
2520

2521
    // If loading project, add previously defined custom <state, anim> couples, if any.
2522
    (function()
2523
    {
2524
        var character = editorMapIdCharacter[characterId];
2525
        for(var key in character.customAnims)
2526
            if(states.lastIndexOf(key) == -1)
2527
                characterStateContainer.append(view_CreateStateAnimCouple(character, { key : key, val : character.customAnims[key] }));
2528
    })();
2529

2530
    view_UpdateDataLists('add', 'items', characterId);
2531
};
2532

2533
var view_CreateNewAnimPanel = function(animId)
2534
{
2535
    var animPanel = $(document.createElement('div'));
2536
    var animPanelHeading = $(document.createElement('div'));
2537
    var animPanelTitle = $(document.createElement('h4'));
2538
    var animPanelToggler = $(document.createElement('a'));
2539
    var animPanelCollapse = $(document.createElement('div'));
2540
    var animPanelBody = $(document.createElement('div'));
2541

2542
    animPanelTitle.addClass('panel-title');
2543
    animPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(animId))));
2544
    animPanelTitle.append(animPanelToggler);
2545
    animPanelHeading.addClass('panel-heading anim');
2546
    animPanelHeading.append(animPanelTitle);
2547
    animPanelBody.addClass('panel-body');
2548
    animPanelCollapse.attr(
2549
        {
2550
            'id': animId + '-panel',
2551
            'class': 'panel-collapse collapse'
2552
        }
2553
    );
2554

2555
    animPanelCollapse.append(animPanelBody);
2556
    animPanel.append(animPanelHeading);
2557
    animPanel.append(animPanelCollapse);
2558
    animPanel.attr(
2559
        {
2560
            'class': 'panel panel-default anim'
2561
        }
2562
    );
2563
    animPanelToggler.attr(
2564
        {
2565
            'data-toggle': 'collapse',
2566
            'data-parent': '#anim-accordion',
2567
            'href': '#' + animId + '-panel',
2568
            'class': 'glyphicon glyphicon-collapse-down pull-right',
2569
            'style': 'color: inherit; text-decoration: none'
2570
        }
2571
    );
2572

2573
    var framesContainer = $(document.createElement('table'));
2574
    framesContainer[0].r = new Array();
2575
    framesContainer[0].r.push({'tr' : $(document.createElement('tr')).addClass('r0')[0], 'td' : []});
2576
    framesContainer.append(framesContainer[0].r[0].tr);
2577
    var frameAdder = $(document.createElement('span')).attr('class', 'glyphicon glyphicon-plus').css('color', 'green');
2578
    frameAdder.hover(function() { $(this).css('cursor', 'pointer');}, function() { $(this).css('cursor', 'default')});
2579
    animPanelBody.append(frameAdder).append(framesContainer);
2580
    frameAdder.after(($(document.createElement('span')).css({'margin-left' : '10px', 'font-style' : 'italic'}).append(document.createTextNode('Add frame(s)'))));
2581
    var frameSelector = $(document.createElement('input'));
2582
    frameSelector.attr({ 'type' : 'file', 'accept' : 'image/*'}).prop({'multiple' : true});
2583
    animPanelBody.append(frameSelector);
2584
    frameAdder.click(function() { frameSelector.click(); });
2585
    frameSelector.hide();
2586
    frameSelector[0].addEventListener('change', function(event)
2587
    {
2588
        var anim = editorMapIdAnim[animId];
2589
        var animFramesLength = anim.frames.length;
2590
        var files = event.target.files;
2591
        $.each(files, function(i)
2592
        {
2593
            var fileReader = new FileReader();
2594
            fileReader.onload = function(event)
2595
            {
2596
                var img = new Image();
2597
                img.onload = function()
2598
                {
2599
                    var newFrame = new EditorSprite(img);
2600
                    newFrame.setPosition(-img.width, -img.height);
2601
                    newFrame.setSize(img.width, img.height);
2602
                    anim.addFrame(i + animFramesLength, newFrame);
2603
                };
2604
                img.src = event.target.result;
2605

2606
                view_AddNewFrame(img);
2607
            };
2608
            fileReader.readAsDataURL(this);
2609
        });
2610
    });
2611

2612
    var view_AddNewFrame = function(imgData)
2613
    {
2614
        var td = $(document.createElement('td'));
2615
        var thumbnailDiv = $(document.createElement('div'));
2616
        var thumbnailA = $(document.createElement('a')).attr('class', 'thumbnail');
2617
        var img = new Image();
2618
        img.src = imgData.src;
2619
        img.height = 100;
2620
        img.width = img.height * imgData.width / imgData.height;
2621
        td.append(thumbnailDiv.append(thumbnailA.append(img)));
2622

2623
        var numRow = framesContainer[0].r.length;
2624
        var row = framesContainer[0].r[numRow - 1];
2625
        if (row.td.length == MAX_COLS)
2626
        {
2627
            row = {'tr': $(document.createElement('tr')).addClass('r' + numRow)[0], 'td': []};
2628
            framesContainer[0].r.push(row);
2629
            framesContainer.append(row.tr);
2630
        }
2631
        row.td.push(td.addClass('c' + row.td.length)[0]);
2632
        $(row.tr).append(td);
2633
        thumbnailDiv.on('contextmenu', function (e)
2634
        {
2635
            e.preventDefault();
2636
            var rowIdx = parseInt($(this).parent().parent().attr('class').split('r')[1]);
2637
            var colIdx = parseInt(td[0].className.split('c')[1]);
2638
            var frameIdx = getArrayIdx(rowIdx, colIdx);
2639
            //console.log(row.tr.className.split('r')[1] + ', ' + td[0].className.split('c')[1] + ' -> ' + frameIdx);
2640
            var rows = framesContainer[0].r;
2641

2642
            var updateColumns = function (i)
2643
            {
2644
                if (i < rowIdx)
2645
                    return;
2646
                if (i == rowIdx)
2647
                {
2648
                    var toDelete = rows[rowIdx].td.splice(colIdx, 1);
2649
                    $(toDelete).remove();
2650
                }
2651
                else if (rows[i] && rows[i].td.length)
2652
                {
2653
                    var elem = rows[i].td.splice(0, 1);
2654
                    $(elem).attr('class', 'c' + MAX_COLS - 1);
2655
                    rows[i - 1].td.push(elem[0]);
2656
                    $(rows[i - 1].tr).append(elem);
2657
                }
2658
                for (var j = 0; j < rows[i].td.length; j++)
2659
                    $(rows[i].td[j]).attr('class', 'c' + j);
2660
                if (rows[i].td.length == 0 && rows.length > 1)
2661
                {
2662
                    var r = rows.splice(i, 1)[0];
2663
                    numRow = rows.length;
2664
                    row = framesContainer[0].r[numRow - 1];
2665
                    $(r.tr).remove();
2666
                }
2667
            };
2668
            for (var i = rowIdx; i < rows.length; i++)
2669
                updateColumns(i);
2670
            editorMapIdAnim[animId].removeFrame(getArrayIdx(rowIdx, colIdx));
2671
        });
2672
    };
2673
    var MAX_COLS = 13;
2674
    var getArrayIdx = function(rowIdx, colIdx) { return rowIdx * MAX_COLS + colIdx; };
2675

2676
    // Defines the attributes of the popup div generated by bootstrap-editable
2677
    $(animPanelHeading).find('span').editable({
2678
        type: 'text',
2679
        title: 'Enter anim id',
2680
        placement: 'right',
2681
        unsavedclass: null
2682
    });
2683

2684
    $(animPanelHeading).find('span').editable('option', 'validate', function (inputString) {
2685
        if (inputString == '')
2686
            return 'This field can\'t be null!';
2687

2688
        inputString = inputString.replace(/[\s\'\"]/g, '_');
2689

2690
        if(checkIdUniqueness(inputString, 'anim') == false)
2691
            return 'Ids must be unique!';
2692

2693
        animId = inputString;
2694
        var oldId = $(this).text().replace(/[\s\'\"]/g, '_');
2695

2696
        view_UpdateDataLists('delete', 'anims', oldId);
2697
        view_UpdateDataLists('add', 'anims', inputString);
2698

2699
        $('input[list="datalist-game-anims"]').each(function()
2700
        {
2701
            if(this.value == oldId)
2702
            {
2703
                this.value = inputString;
2704
                $(this).change();
2705
            }
2706
        });
2707

2708
        for(var itemId in editorMapIdItem)
2709
            for(var animState in editorMapIdItem[itemId].anims)
2710
                if(editorMapIdItem[itemId].anims[animState] == oldId)
2711
                    editorMapIdItem[itemId].anims[animState] = inputString;
2712

2713

2714

2715
        // Deletes from the map the old id/invItem match and adds the new one
2716
        var editorAnimToBeModified = editorMapIdAnim[oldId];
2717
        delete editorMapIdAnim[editorAnimToBeModified.id];
2718

2719
        editorAnimToBeModified.id = inputString;
2720
        editorMapIdAnim[editorAnimToBeModified.id] = editorAnimToBeModified;
2721
        $('#' + $(this).text() + '-panel').attr('id', inputString + '-panel');
2722
        animPanelToggler.attr({ 'href': '#' + inputString + '-panel'});
2723
    });
2724

2725
    // Handle click on an anim's panel header
2726
    $(animPanelHeading).click(function ()
2727
    {
2728
        if ($(this).siblings()[0].className.indexOf('in') == -1)
2729
            $('.in').siblings().find('a').trigger('click');
2730

2731
        var relativeAnimId = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
2732

2733
        var pHeadingAnimActive = $('.panel-heading.anim.active');
2734
        pHeadingAnimActive.css({ 'background': '#f5f5f5', 'color': 'inherit'});
2735
        pHeadingAnimActive.removeClass('active');
2736

2737
        $(this).addClass('active');
2738
        $(this).css({'background-color': '#428bca', 'color': 'white'});
2739
    });
2740

2741
    if(editorMapIdAnim[animId])
2742
        for(var i = 0; i < editorMapIdAnim[animId].frames.length; i++)
2743
        {
2744
            var frame = editorMapIdAnim[animId].frames[i];
2745
            view_AddNewFrame(editorMapIdAnim[animId].frames[i].img);
2746
        }
2747

2748
    view_UpdateDataLists('add', 'anims', animId);
2749
    $('#anims-accordion').append(animPanel);
2750

2751

2752
};
2753

2754
var view_CreateNewDialogPanel = function(dialogId)
2755
{
2756
    var dialogPanel = $(document.createElement('div'));
2757
    var dialogPanelHeading = $(document.createElement('div'));
2758
    var dialogPanelTitle = $(document.createElement('h4'));
2759
    var dialogPanelToggler = $(document.createElement('a'));
2760
    var dialogPanelCollapse = $(document.createElement('div'));
2761
    var dialogPanelBody = $(document.createElement('div'));
2762

2763
    dialogPanelTitle.addClass('panel-title');
2764
    dialogPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(dialogId))));
2765
    dialogPanelTitle.append(dialogPanelToggler);
2766
    dialogPanelHeading.addClass('panel-heading dialog');
2767
    dialogPanelHeading.append(dialogPanelTitle);
2768
    dialogPanelBody.addClass('panel-body');
2769
    dialogPanelCollapse.attr(
2770
        {
2771
            'id': dialogId + '-panel',
2772
            'class': 'panel-collapse collapse'
2773
        }
2774
    );
2775

2776
    dialogPanelCollapse.append(dialogPanelBody);
2777
    dialogPanel.append(dialogPanelHeading);
2778
    dialogPanel.append(dialogPanelCollapse);
2779
    dialogPanel.attr(
2780
        {
2781
            'class': 'panel panel-default dialog'
2782
        }
2783
    );
2784
    dialogPanelToggler.attr(
2785
        {
2786
            'data-toggle': 'collapse',
2787
            'data-parent': '#dialog-accordion',
2788
            'href': '#' + dialogId + '-panel',
2789
            'class': 'glyphicon glyphicon-collapse-down pull-right',
2790
            'style': 'color: inherit; text-decoration: none'
2791
        }
2792
    );
2793
    $('#dialog-accordion').append(dialogPanel);
2794

2795
    var createDialogRow = function(data)
2796
    {
2797
        var row = $(document.createElement('div')).addClass('row dialog-choice').css({'margin-top': '10px', 'margin-left': '0px', 'font-size' : '9.9px'});
2798
        var eraser = $(document.createElement('span')).attr('class', 'glyphicon glyphicon-remove').css('color', 'firebrick');
2799
        eraser.hover(function ()
2800
        {
2801
            $(this).css('cursor', 'pointer');
2802
        }, function ()
2803
        {
2804
            $(this).css('cursor', 'default');
2805
        });
2806
        eraser.click(function ()
2807
        {
2808
            row.remove();
2809
        });
2810
        row.append(eraser);
2811
        row.append($(document.createElement('span')).text('#').css('margin-left', '5px'));
2812
        var inputDialogNumber = $(document.createElement('input')).attr({
2813
            'type': 'number',
2814
            'min' : '1',
2815
            'value' : '1',
2816
            'class': 'dialog-order'}).css({/*'margin-left' : '10px',*/ 'width' : '50px'});
2817
        row.append(inputDialogNumber);
2818
        row.append($(document.createElement('span')).text('Sentence text').css('margin-left', '5px'));
2819
        var inputDialogText = $(document.createElement('input')).attr({'type': 'text', 'class': 'dialog-text'}).css({'margin-left' : '5px', 'width' : '150px'});
2820
        row.append(inputDialogText);
2821
        row.append($(document.createElement('span')).text('Subdialog name').css('margin-left', '5px'));
2822
        var inputDialogNameSub = $(document.createElement('input')).attr({
2823
            'type': 'text',
2824
            'placeholder' : 'root',
2825
            'class': 'dialog-name'}).css({'margin-left' : '5px'});
2826
        row.append(inputDialogNameSub);
2827
        row.append($(document.createElement('span')).text('Hidden').css('margin-left', '5px'));
2828
        var inputDialogHidden = $(document.createElement('input')).attr({
2829
            'type': 'checkbox',
2830
            'class': 'dialog-hidden'}).css({'margin-left' : '5px'});
2831
        row.append(inputDialogHidden);
2832
        row.append($(document.createElement('span')).text('Ends dialog').css('margin-left', '5px'));
2833
        var inputDialogQuit = $(document.createElement('input')).attr({
2834
            'type': 'checkbox',
2835
            'class': 'dialog-end'}).css({'margin-left' : '5px'});
2836
        row.append(inputDialogQuit);
2837

2838
        inputDialogQuit.change(function()
2839
        {
2840
            if(this.checked)
2841
            {
2842

2843
                inputDialogRunSub.prop('disabled', 'disabled').css('background', 'lightgray');
2844
                inputDialogRunSub.prop('disabled', 'disabled').css('background', 'lightgray');
2845
            }
2846
            else
2847
            {
2848
                inputDialogRunSub.prop('disabled', false).css('background', 'white');
2849
                inputDialogRunSub.prop('disabled', false).css('background', 'white');
2850
            }
2851
        });
2852
        row.append($(document.createElement('span')).text('Opens subdialog').css('margin-left', '10px'));
2853
        var inputDialogRunSub = $(document.createElement('input')).attr({
2854
            'type': 'text',
2855
            'placeholder' : 'Enter subdialog name',
2856
            'class': 'dialog-open'}).css({'margin-left' : '10px'});
2857
        row.append(inputDialogRunSub);
2858
        row.append($(document.createElement('span')).text('Triggers script').css('margin-left', '10px'));
2859
        var inputDialogScript = $(document.createElement('input')).attr({
2860
            'list' : 'datalist-game-scripts',
2861
            'placeholder' : 'None',
2862
            'class': 'dialog-script'}).css({'margin-left' : '10px'});
2863
        row.append(inputDialogScript);
2864
        row.append($(document.createElement('span')).text('Show once').css('margin-left', '10px'));
2865
        var inputDialogShowOnce = $(document.createElement('input')).attr({
2866
            'type': 'checkbox',
2867
            'class': 'dialog-showOnce'}).css({'margin-left' : '5px'});
2868
        row.append(inputDialogShowOnce);
2869
        row.append($(document.createElement('span')).text('Choose once').css('margin-left', '10px'));
2870
        var inputDialogChooseOnce = $(document.createElement('input')).attr({
2871
            'type': 'checkbox',
2872
            'class': 'dialog-chooseOnce'}).css({'margin-left' : '5px'});
2873
        row.append(inputDialogChooseOnce);
2874
        inputDialogChooseOnce.change(function()
2875
        {
2876
            if(this.checked === true)
2877
                inputDialogShowOnce[0].checked = false;
2878
        });
2879
        inputDialogShowOnce.change(function()
2880
        {
2881
            if(this.checked === true)
2882
                inputDialogChooseOnce[0].checked = false;
2883
        });
2884
        dialogChoicesContainer.append(row);
2885

2886
        if(data)
2887
        {
2888
            inputDialogNumber[0].value = data.order;
2889
            inputDialogText[0].value = data.sentence;
2890
            inputDialogQuit[0].checked = data.quit;
2891
            inputDialogRunSub[0].value = data.open;
2892
            inputDialogScript[0].value = data.script;
2893
            inputDialogHidden[0].checked = data.hidden;
2894
            inputDialogShowOnce[0].checked = data.showOnce;
2895
            inputDialogChooseOnce[0].checked = data.chooseOnce;
2896
            if(data.branchName !== 'root')
2897
                inputDialogNameSub[0].value = data.branchName;
2898

2899
            inputDialogQuit.change();
2900
        }
2901
    };
2902
    var plus = $(document.createElement('span')).attr('class', 'glyphicon glyphicon-plus').css('color', 'green');
2903
    plus.hover(function() { $(this).css('cursor', 'pointer');}, function() { $(this).css('cursor', 'default')});
2904
    plus.click(function() { createDialogRow(null); });
2905
    dialogPanelBody.append(plus);
2906

2907
    var dialogChoicesContainer = $(document.createElement('div'));
2908
    dialogPanelBody.append(dialogChoicesContainer);
2909

2910
    var dialogSaveButton = $(document.createElement('button')).attr('type', 'button').addClass('btn btn-success').append($(document.createTextNode('Save')));
2911
    dialogPanelBody.append($(document.createElement('div')).append(dialogSaveButton).css('margin-top', '25px'));
2912
    dialogSaveButton.click(function()
2913
    {
2914
        var dialog = new Dialog(dialogId);
2915

2916
        var dialogChoices = dialogChoicesContainer.find('.dialog-choice');
2917

2918
        dialogChoices.each(function(i)
2919
        {
2920
            var data =
2921
            {
2922
                'order' : parseInt($(dialogChoices[i]).find('.dialog-order')[0].value),
2923
                'text' : $(dialogChoices[i]).find('.dialog-text')[0].value,
2924
                'name' : $(dialogChoices[i]).find('.dialog-name')[0].value,
2925
                'quit' : $(dialogChoices[i]).find('.dialog-end')[0].checked,
2926
                'open' : $(dialogChoices[i]).find('.dialog-open')[0].value,
2927
                'script' : $(dialogChoices[i]).find('.dialog-script')[0].value,
2928
                'showOnce' : $(dialogChoices[i]).find('.dialog-showOnce')[0].checked,
2929
                'chooseOnce' : $(dialogChoices[i]).find('.dialog-chooseOnce')[0].checked,
2930
                'hidden' : $(dialogChoices[i]).find('.dialog-hidden')[0].checked,
2931
            };
2932
            var dialogChoice = new DialogChoice(data.text, data.script.length ? data.script : null,
2933
            data.quit, data.open && data.open.length ? data.open : null, data.hidden, data.showOnce, data.chooseOnce);
2934
            dialog.addDialogChoice(data.name, dialogChoice, data.order);
2935
        });
2936

2937
        editorMapIdDialog[dialogId] = dialog;
2938
    });
2939

2940
    var fillDialogPanel = function()
2941
    {
2942
        var dialog = editorMapIdDialog[dialogId];
2943

2944
        for(var key in dialog.subdialogs)
2945
        {
2946
            var sub = dialog.subdialogs[key];
2947
            for(var i = 0; i < sub.length; i++)
2948
            {
2949
                var data = { order : i + 1, branchName : key, hidden : sub[i].hidden, showOnce : sub[i].showOnce,
2950
                    chooseOnce : sub[i].chooseOnce, chosen : sub[i].chosen, sentence : sub[i].sentence,
2951
                    quit : sub[i].quit, open : sub[i].open, script : sub[i].script };
2952
                createDialogRow(data);
2953
            }
2954
        }
2955
    };
2956

2957
    if(editorMapIdDialog[dialogId] == undefined)
2958
        editorMapIdDialog[dialogId] = new Dialog(dialogId);
2959
    else
2960
        fillDialogPanel();
2961

2962
    // Defines the attributes of the popup div generated by bootstrap-editable
2963
    $(dialogPanelHeading).find('span').editable({
2964
        type: 'text',
2965
        title: 'Enter dialog id',
2966
        placement: 'right',
2967
        unsavedclass: null
2968
    });
2969

2970
    $(dialogPanelHeading).find('span').editable('option', 'validate', function (inputString) {
2971
        if (inputString == '')
2972
            return 'This field can\'t be null!';
2973

2974
        inputString = inputString.replace(/[\s\'\"]/g, '_');
2975

2976
        if(checkIdUniqueness(inputString, 'dialog') == false)
2977
            return 'Ids must be unique!';
2978

2979
        dialogId = inputString;
2980
        var oldId = $(this).text().replace(/[\s\'\"]/g, '_');
2981

2982
        //view_EditOptionOccurrences(inputString, $(this).text(), 'character');
2983
        //changeParamNameOccurrences(inputString, oldId);
2984
        view_UpdateDataLists('delete', 'dialogs', oldId);
2985
        view_UpdateDataLists('add', 'dialogs', inputString);
2986

2987
        for(var key in editorScriptList)
2988
            replaceScriptOccurrencies(editorScriptList[key], 'dialog', oldId, dialogId);
2989
        $('input[list="datalist-game-dialogs"]').each(function() { if(this.value == oldId) this.value = inputString});
2990

2991
        // Deletes from the map the old id/invItem match and adds the new one
2992
        var editorDialogToBeModified = editorMapIdDialog[oldId];
2993
        delete editorMapIdDialog[editorDialogToBeModified.id];
2994

2995
        editorDialogToBeModified.id = inputString;
2996
        editorMapIdDialog[editorDialogToBeModified.id] = editorDialogToBeModified;
2997
        $('#' + $(this).text() + '-panel').attr('id', inputString + '-panel');
2998
        dialogPanelToggler.attr({ 'href': '#' + inputString + '-panel'});
2999
    });
3000

3001

3002
    // Handle click on a dialog panel's header
3003
    $(dialogPanelHeading).click(function () {
3004
        if($(this).siblings()[0].className.indexOf('in') == -1)
3005
            $('.in').siblings().find('a').trigger('click');
3006

3007
        //var relativeInvItemId = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
3008
        //editorCurrentInvItem = editorMapIdCharacter[relativeCharacterId];
3009

3010
        var pHeadingDialogActive = $('.panel-heading.dialog.active');
3011
        pHeadingDialogActive.css({ 'background': '#f5f5f5', 'color': 'inherit'});
3012
        pHeadingDialogActive.removeClass('active');
3013

3014
        $(this).addClass('active');
3015
        $(this).css({'background-color': '#428bca', 'color': 'white'});
3016

3017
        //$(this).parent().find(':input[type="text"]').filter('.character')[0].value = editorMapIdInvItem[relativeInvItemId].description;
3018
        //if(editorMapIdInvItem[editorMapIdCharacter[relativeCharacterId].locationId] != undefined)
3019
        //    $(this).parent().find('.room-selector')[0].value = editorMapIdCharacter[relativeCharacterId].locationId;
3020
    });
3021

3022
    view_UpdateDataLists('add', 'dialogs', dialogId);
3023
};
3024

3025
var view_CreateNewInvItemPanel = function(invItemId)
3026
{
3027
    var invItemPanel = $(document.createElement('div'));
3028
    var invItemPanelHeading = $(document.createElement('div'));
3029
    var invItemPanelTitle = $(document.createElement('h4'));
3030
    var invItemPanelToggler = $(document.createElement('a'));
3031
    var invItemPanelCollapse = $(document.createElement('div'));
3032
    var invItemPanelBody = $(document.createElement('div'));
3033
    var col1 = $(document.createElement('div')).addClass('col-md-5');
3034

3035
    invItemPanelTitle.addClass('panel-title');
3036
    invItemPanelTitle.append($(document.createElement('span')).append($(document.createTextNode(invItemId))));
3037
    invItemPanelTitle.append(invItemPanelToggler);
3038
    invItemPanelHeading.addClass('panel-heading inventory');
3039
    invItemPanelHeading.append(invItemPanelTitle);
3040
    invItemPanelBody.addClass('panel-body');
3041
    invItemPanelCollapse.attr(
3042
        {
3043
            'id': invItemId + '-panel',
3044
            'class': 'panel-collapse collapse'
3045
        }
3046
    );
3047

3048
    invItemPanelCollapse.append(invItemPanelBody);
3049
    invItemPanel.append(invItemPanelHeading);
3050
    invItemPanel.append(invItemPanelCollapse);
3051
    invItemPanel.attr(
3052
        {
3053
            'class': 'panel panel-default inventory'
3054
        }
3055
    );
3056
    invItemPanelToggler.attr(
3057
        {
3058
            'data-toggle': 'collapse',
3059
            'data-parent': '#inventory-accordion',
3060
            'href': '#' + invItemId + '-panel',
3061
            'class': 'glyphicon glyphicon-collapse-down pull-right',
3062
            'style': 'color: inherit; text-decoration: none'
3063
        }
3064
    );
3065
    $('#inventory-accordion').append(invItemPanel);
3066

3067
    /*======================================================= InvItem description input ===========================================================*/
3068
    var invItemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
3069
    var invItemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Description')));
3070
    var invItemInput = $(document.createElement('input')).attr({'type': 'text', 'class': 'form-control inventory' });
3071
    invItemInput.change(function() { editorMapIdInvItem[invItemId].description = this.value; });
3072
    invItemInput[0].value = editorMapIdInvItem[invItemId].description;
3073
    invItemPanelBody.append($(document.createElement('div')).addClass('row').append(col1));
3074
    col1.append((invItemInputGroup.append(invItemInputLabel).append(invItemInput)));
3075

3076
    /*======================================================= InvItem anim input ============================================================*/
3077

3078
    invItemInputGroup = $(document.createElement('div')).addClass('input-group input-group-sm');
3079
    invItemInputLabel = $(document.createElement('span')).addClass('input-group-addon').append($(document.createTextNode('Anim')));
3080
    invItemInput = $(document.createElement('input')).attr('list', 'datalist-game-anims').addClass('form-control inventory anim-default');
3081
    col1.append((invItemInputGroup.append(invItemInputLabel).append(invItemInput)));
3082
    invItemInput[0].panelTitle = invItemPanelTitle.find('span')[0];
3083
    var thumbnailDiv = $(document.createElement('div'));
3084
    var thumbnailA = $(document.createElement('a')).addClass('thumbnail');
3085
    var thumbnail = new Image();
3086
    thumbnailA.append(thumbnail);
3087
    thumbnailDiv.append(thumbnailA);
3088
    var col2 = $(document.createElement('div')).addClass('row').append($(document.createElement('div')).addClass('col-md-1').append(thumbnailDiv));
3089
    invItemPanelBody.append(col2);
3090
    thumbnailDiv.hide();
3091

3092
    var view_addThumbnail = function(sprite)
3093
    {
3094
        thumbnail.src = sprite.img.src;
3095
        //thumbnail.height = thumbnail.height * 100 / thumbnail.width;
3096
        //thumbnail.width = 100;
3097
        thumbnailDiv.show();
3098
        $(thumbnail).on('dragstart', function(event)
3099
        {
3100
            event.originalEvent.dataTransfer.setDragImage(thumbnail, 0, 0);
3101
        });
3102
        /*if(editorCurrentRoom.zOrderMap[editorCurrentItem.layer] == undefined)
3103
         editorCurrentRoom.zOrderMap[editorCurrentItem.layer] = [];
3104
         editorCurrentRoom.zOrderMap[editorCurrentItem.layer].push(editorCurrentItem.id);*/
3105

3106
    };
3107

3108
    invItemInput.on('change', function()
3109
    {
3110
        var animId = invItemInput[0].value;
3111
        if (!animId.length) {
3112
            editorMapIdInvItem[invItemId].anims = null;
3113
            thumbnailDiv.hide();
3114
            return;
3115
        }
3116
        editorMapIdInvItem[invItemId].anim = animId;
3117
        var anim = editorMapIdAnim[animId];
3118
         if(!anim)
3119
         return;
3120
        view_addThumbnail(anim.frames[anim.start_idx]);
3121
    });
3122

3123
    invItemInput[0].value = editorMapIdInvItem[invItemId].anim;
3124
    invItemInput.change();
3125

3126
    // Defines the attributes of the popup div generated by bootstrap-editable
3127
    $(invItemPanelHeading).find('span').editable({
3128
        type: 'text',
3129
        title: 'Enter character id',
3130
        placement: 'right',
3131
        unsavedclass: null
3132
    });
3133

3134
    $(invItemPanelHeading).find('span').editable('option', 'validate', function (inputString) {
3135
        if (inputString == '')
3136
            return 'This field can\'t be null!';
3137

3138
        inputString = inputString.replace(/[\s\'\"]/g, '_');
3139

3140
        if(checkIdUniqueness(inputString, 'inventory-item') == false)
3141
            return 'Ids must be unique!';
3142

3143
        invItemId = inputString;
3144
        var oldId = $(this).text().replace(/[\s\'\"]/g, '_');
3145

3146
        //view_EditOptionOccurrences(inputString, $(this).text(), 'character');
3147
        //changeParamNameOccurrences(inputString, oldId);
3148
        view_UpdateDataLists('delete', 'items', oldId);
3149
        view_UpdateDataLists('add', 'items', inputString);
3150

3151
        for(var key in editorScriptList)
3152
            replaceScriptOccurrencies(editorScriptList[key], 'inventoryItem', oldId, invItemId);
3153

3154
        $('input[list="datalist-game-inventory-items"]').each(function() { if(this.value == oldId) this.value = inputString});
3155

3156
        // Deletes from the map the old id/invItem match and adds the new one
3157
        var editorInvItemToBeModified = editorMapIdInvItem[oldId];
3158
        delete editorMapIdInvItem[editorInvItemToBeModified.id];
3159

3160
        editorInvItemToBeModified.id = inputString;
3161
        editorMapIdInvItem[editorInvItemToBeModified.id] = editorInvItemToBeModified;
3162
        $('#' + $(this).text() + '-panel').attr('id', inputString + '-panel');
3163
        invItemPanelToggler.attr({ 'href': '#' + inputString + '-panel'});
3164
    });
3165

3166

3167
    // Handle click on a character panel's header
3168
    $(invItemPanelHeading).click(function () {
3169
        if($(this).siblings()[0].className.indexOf('in') == -1)
3170
            $('.in').siblings().find('a').trigger('click');
3171

3172
        //var relativeInvItemId = $(this).find('span').text().replace(/[\s\'\"]/g, '_');
3173
        //editorCurrentInvItem = editorMapIdCharacter[relativeCharacterId];
3174

3175
        var pHeadingInvActive = $('.panel-heading.inventory.active');
3176
        pHeadingInvActive.css({ 'background': '#f5f5f5', 'color': 'inherit'});
3177
        pHeadingInvActive.removeClass('active');
3178

3179
        $(this).addClass('active');
3180
        $(this).css({'background-color': '#428bca', 'color': 'white'});
3181

3182
        //$(this).parent().find(':input[type="text"]').filter('.character')[0].value = editorMapIdInvItem[relativeInvItemId].description;
3183
        //if(editorMapIdInvItem[editorMapIdCharacter[relativeCharacterId].locationId] != undefined)
3184
        //    $(this).parent().find('.room-selector')[0].value = editorMapIdCharacter[relativeCharacterId].locationId;
3185
    });
3186

3187

3188
    view_UpdateDataLists('add', 'items', invItemId);
3189
};
3190

3191
var view_ScriptTreeAddNode = function(parent, data)
3192
{
3193
    var newNode = editorScriptTree.get_node(editorScriptTree.create_node(parent, JSON.parse(JSON.stringify({'text' : data.text})), 'last'));
3194
    editorScriptTree.open_node(parent);
3195
    newNode.type = data.type;
3196
    newNode.data = { DOM : []};
3197
    var icon;
3198
    switch(newNode.type)
3199
    {
3200
        case 'game-controllers':
3201
            icon = 'glyphicon glyphicon-exclamation-sign';
3202
            newNode.original.max_children = Infinity;
3203
            break;
3204
        case 'game-side-effects':
3205
            icon = 'glyphicon glyphicon-leaf';
3206
            newNode.original.max_children = 0;
3207
            break;
3208
        default :
3209
            break;
3210
    }
3211
    editorScriptTree.set_icon(newNode, icon);
3212
    switch(newNode.text.toLowerCase())
3213
    {
3214
        case 'setdirection':
3215
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'items');
3216
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3217
            newNode.data.DOM[1] = view_CreateInputList(newNode.id + '-param-2', 'directions');
3218
            $(newNode.data.DOM[1]).attr('class', 'param-2');
3219
        break;
3220
        case 'walktopos':
3221
        case 'setposition':
3222
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'items');
3223
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3224
            newNode.data.DOM[1] = view_CreateInputNumber(newNode.id + '-param-2', 'xPos');
3225
            $(newNode.data.DOM[1]).attr('class', 'param-2');
3226
            newNode.data.DOM[2] = view_CreateInputNumber(newNode.id + '-param-3', 'yPos');
3227
            $(newNode.data.DOM[2]).attr('class', 'param-3');
3228
            break;
3229
        case 'walktoobj':
3230
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'items');
3231
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3232
            newNode.data.DOM[1] = view_CreateInputList(newNode.id + '-param-2', 'items');
3233
            $(newNode.data.DOM[1]).attr('class', 'param-2');
3234
        break;
3235
        case 'setroom':
3236
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'rooms');
3237
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3238
        break;
3239
        case 'show':
3240
        case 'hide':
3241
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'items');
3242
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3243
            break;
3244
        case 'sayline':
3245
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'items');
3246
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3247
            newNode.data.DOM[1] = view_CreateInputText(newNode.id + '-param-2', 'Sentence');
3248
            $(newNode.data.DOM[1]).attr('class', 'param-2');
3249
            break;
3250
        case 'inventoryadd':
3251
        case 'inventoryremove':
3252
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'items');
3253
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3254
            break;
3255
        case 'if':
3256
            newNode.data.DOM[0] = view_CreateInputText(newNode.id + '-param-1', 'Condition');
3257
            $(newNode.data.DOM[0]).addClass('param-1 condition');
3258
            $(newNode.data.DOM[0]).on('input', function()
3259
            {
3260
                if(new Parser().parse(this.value).valid == false)
3261
                    $(this).css('color', 'red');
3262
                else $(this).css('color', 'black');
3263
            }).css('width', '200px');
3264
            break;
3265
        case 'fireevent':
3266
        case 'waitevent':
3267
            newNode.data.DOM[0] = view_CreateInputText(newNode.id + '-param-1', 'Event name');
3268
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3269
            break;
3270
        /*case 'parallel':
3271
            //newNode.data.DOM[0] = view_CreateSelector(newNode.id + 'aggregator', ['SortedSequence', 'Parallel']);
3272
            //$(newNode.data.DOM[0]).attr('class', 'param-1');
3273
            break;*/
3274
        case 'varset':
3275
            newNode.data.DOM[0] = view_CreateInputText(newNode.id + '-param-1', 'Variable');
3276
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3277
            newNode.data.DOM[1] = view_CreateInputText(newNode.id + '-param-2', 'Value');
3278
            $(newNode.data.DOM[1]).attr('class', 'param-2');
3279
            break;
3280
        case 'varincr':
3281
            newNode.data.DOM[0] = view_CreateInputText(newNode.id + '-param-1', 'Variable');
3282
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3283
            newNode.data.DOM[1] = view_CreateInputNumber(newNode.id + '-param-2', 'Amount');
3284
            $(newNode.data.DOM[1]).attr('class', 'param-2');
3285
            break;
3286
        case 'setstate':
3287
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'items');
3288
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3289
            newNode.data.DOM[1] = view_CreateInputText(newNode.id + '-param-2', 'Value');
3290
            $(newNode.data.DOM[1]).attr('class', 'param-2');
3291
        break;
3292
        case 'delay':
3293
            newNode.data.DOM[0] = view_CreateInputNumber(newNode.id + '-param-1', 'millisecs');
3294
            $(newNode.data.DOM[0]).attr({'class' : 'param-1', 'min' : '0', 'value' : '0'});
3295
        break;
3296
        case 'opendialog':
3297
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'dialogs');
3298
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3299
        break;
3300
        case 'playaudio':
3301
            newNode.data.DOM[0] = view_CreateInputList(newNode.id + '-param-1', 'audio');
3302
            $(newNode.data.DOM[0]).attr('class', 'param-1');
3303
        break;
3304
        default:
3305
        break;
3306
    }
3307
    view_AppendAdditionalTreeDOMNodes(editorScriptTree.get_node(newNode.id));
3308
    if(data.params)
3309
        view_PopulateTreeNodeDOM(newNode.data.DOM, data.params);
3310
    return newNode.id;
3311
};
3312

3313
var view_ParseConditionalInputs = function()
3314
{
3315
    $('.condition').on('input', (function()
3316
        {
3317
            if (new Parser().parse(this.value).valid == false)
3318
                $(this).css('color', 'red');
3319
            else $(this).css('color', 'black');
3320
        }
3321
    ));
3322
};
3323

3324
var view_CreateSelector = function(id, options)
3325
{
3326
    var input =  $(document.createElement('select')).attr('id', id);
3327
    for(var i = 0; i < options.length; i++)
3328
        input.append($(document.createElement('option')).text(options[i]));
3329
    //return input.css('border-radius', '10px')[0];
3330
    return input[0];
3331
};
3332

3333
var view_CreateInputList = function(id, type)
3334
{
3335
    var input = $(document.createElement('input')).attr('id', id);
3336
    switch(type)
3337
    {
3338
        case 'items': input.attr('list', 'datalist-game-items');
3339
        break;
3340
        case 'rooms': input.attr('list', 'datalist-game-rooms');
3341
        break;
3342
        case 'inventory-items': input.attr('list', 'datalist-game-inventory-items');
3343
        break;
3344
        case 'directions': input.attr('list', 'datalist-game-directions');
3345
        break;
3346
        case 'dialogs': input.attr('list', 'datalist-game-dialogs');
3347
        break;
3348
        case 'audio': input.attr('list', 'datalist-game-audio');
3349
        break;
3350
    }
3351

3352
    //return input.css('border-radius', '10px')[0];
3353
    return input[0];
3354
};
3355

3356
var view_CreateInputNumber = function(id, placeholder)
3357
{
3358
    //return $(document.createElement('input')).attr({'id' : id, 'type' : 'number', 'placeholder' : placeholder}).css('border-radius', '10px')[0];
3359
    return $(document.createElement('input')).attr({'id' : id, 'type' : 'number', 'placeholder' : placeholder})[0];
3360
};
3361

3362
var view_CreateInputText = function(id, placeholder)
3363
{
3364
    //return $(document.createElement('input')).attr({ 'id' : id, 'type' : 'text', 'placeholder' : placeholder }).css('border-radius', '10px')[0];
3365
    return $(document.createElement('input')).attr({ 'id' : id, 'type' : 'text', 'placeholder' : placeholder })[0];
3366
};
3367

3368
var view_PopulateTreeNodeDOM = function(DOM, params)
3369
{
3370
    for(var i = 0; i < params.length; i++)
3371
        DOM[i].value = params[i];
3372
};
3373

3374
var view_PopulateTuple = function(type, tuple, params)
3375
{
3376
    var DOM = tuple.find('.col').not('div');
3377
    /*for(var i = 0; i < DOM.length; i++)
3378
        DOM[i] = DOM[i][0];
3379
*/
3380
    switch(type)
3381
    {
3382
        case 'user-trigger':
3383
            DOM[0].value = params[0];
3384
            $(DOM[0]).select2();
3385
            DOM[1].value = params[1];
3386
            $(DOM[1]).select2();
3387
            DOM[2].checked = params[2];
3388
            DOM[3].value = params[3];
3389
            $(DOM[3]).attr('disabled', params[2] ? false : 'disabled');
3390
            $(DOM[3]).select2();
3391
            DOM[4].value = params[4];
3392
            //;
3393
            //$(DOM[4]).attr('disabled', params[2] ? false : 'disabled');
3394
        break;
3395
        case 'event-trigger':
3396
            DOM[0].value = params[0];
3397
        break;
3398
        case 'enter-room-trigger':
3399
        case 'exit-room-trigger':
3400
            DOM[0].value = params[0];
3401
            $(DOM[0]).select2();
3402
        break;
3403
        case 'timer-trigger':
3404
            DOM[0].value = params[0];
3405
            DOM[1].checked = params[1];
3406
        break;
3407
    }
3408
};
3409

3410
var view_CreateStateAnimCouple = function(item, couple)
3411
{
3412
    var row = $(document.createElement('div')).addClass('row obj-state-anim').css({'margin-top' : '10px', 'margin-left' : '10px'});
3413
    var eraser = $(document.createElement('span')).attr('class', 'glyphicon glyphicon-remove').css('color', 'firebrick');
3414
    eraser.hover(function() { $(this).css('cursor', 'pointer');}, function() {$(this).css('cursor', 'default');});
3415
    eraser.click(function()
3416
    {
3417
        row.remove();
3418
        delete item.customAnims[stateInput[0].value];
3419
    });
3420
    row.append(eraser);
3421
    var stateInput = $(document.createElement('input')).attr({'type' : 'text', 'placeholder' : 'Enter state name'}).addClass('obj-state').css('margin-left', '10px');
3422
    row.append(stateInput);
3423
    var animInput = $(document.createElement('input')).attr({'list' : 'datalist-game-anims', 'placeholder' : 'Select Anim'});
3424
    row.append(animInput);
3425

3426
    /*/////////////////////////////// If loading a project, couple param is not null /////////////////////*/
3427
    if(couple)
3428
    {
3429
        stateInput[0].value = couple.key;
3430
        animInput[0].value = couple.val;
3431
        stateInput[0].oldState = couple.key;
3432
    }
3433
    ////////////////////////////////////////////////////////////////////////////////////////////////////////
3434

3435
    // Manage item state
3436
    stateInput.on('input', function()
3437
    {
3438
        if(stateInput[0].value in item.customAnims && stateInput[0].oldState != stateInput[0].value)
3439
            $(this).css('color', 'red'); else $(this).css('color', 'black');
3440
    });
3441
    stateInput.change(function()
3442
    {
3443
        var state = stateInput[0].value;
3444
        if(!state.length || state in item.customAnims)
3445
            return;
3446
        var oldState = stateInput[0].oldState;
3447
        if(oldState)
3448
            delete item.customAnims[stateInput[0].oldState];
3449
        item.customAnims[state] = animInput[0].value.length ? animInput[0].value : null;
3450
        stateInput[0].oldState = state;
3451
    });
3452

3453
    // Manage item anim
3454
    animInput.change(function() {
3455
        var state = stateInput[0].value;
3456
        if(state.length)
3457
            item.customAnims[state] = animInput[0].value;
3458
    });
3459

3460
    return row;
3461
};
3462

3463
var view_AddGameVariable = function(varData)
3464
{
3465
    var row = $(document.createElement('div')).addClass('row game-var').css({'margin-top' : '10px', 'margin-left' : '10px'});
3466
    var eraser = $(document.createElement('span')).attr('class', 'glyphicon glyphicon-remove').css('color', 'firebrick');
3467
    eraser.hover(function() { $(this).css('cursor', 'pointer');}, function() {$(this).css('cursor', 'default');});
3468
    eraser.click(function() {
3469
        row.remove();});
3470
    row.append(eraser);
3471
    row.append($(document.createElement('span')).text('Variable name').css('margin-left', '10px'));
3472
    var inputVarName = $(document.createElement('input')).attr({'type' : 'text', 'class' : 'var-name'}).css('margin-left', '10px');
3473
    row.append(inputVarName);
3474
    row.append($(document.createElement('span')).text('Variable type').css('margin-left', '10px'));
3475
    var select = $(view_CreateSelector(null, ['Boolean', 'Numeric', 'String'])).addClass('var-type').css('margin-left', '10px');
3476
    row.append(select);
3477
    var associatedSelector = $(view_CreateSelector(null, ['true', 'false'])).addClass('var-value').css('margin-left', '10px');
3478
    row.append(associatedSelector);
3479
    select.change(function(e)
3480
    {
3481
        associatedSelector.remove();
3482
        switch(this.value)
3483
        {
3484
            case 'Boolean':
3485
                associatedSelector = $(view_CreateSelector(null, ['true', 'false']));
3486
            break;
3487
            case 'Numeric':
3488
                associatedSelector = $(document.createElement('input')).attr({'type' : 'number', 'value' : 0});
3489
            break;
3490
            case 'String':
3491
                associatedSelector = $(document.createElement('input')).attr('type', 'text');
3492
            break;
3493
            default: return;
3494
        }
3495

3496
        associatedSelector.addClass('var-value').css('margin-left', '10px');
3497
        row.append(associatedSelector);
3498
        e.stopPropagation();
3499
    });
3500
    $('#game-vars-container').append(row);
3501
    if(varData)
3502
    {
3503
        if(varData.hasOwnProperty('originalEvent'))
3504
            return;
3505
        inputVarName[0].value = varData.name;
3506
        select[0].value = varData.type;
3507
        select.trigger('change');
3508
        associatedSelector[0].value = varData.value;
3509
    }
3510
};
3511

3512
var view_ClearGameVariables = function()
3513
{
3514
    $('.game-var').remove();
3515
};
3516

3517
var view_SaveGameVariables = function()
3518
{
3519
    $('.game-var').each(function() { view_SaveGameVariable($(this));});
3520
};
3521

3522
var view_SaveGameVariable = function(varRow)
3523
{
3524
    var varName = varRow.find('input[class="var-name"]')[0].value;
3525
    var varType = varRow.find('select[class="var-type"]')[0].value;
3526
    var varValue;
3527
    switch(varType)
3528
    {
3529
        case 'Boolean':
3530
            varValue = varRow.find('select[class="var-value"]')[0].value;
3531
            varValue = varValue == 'true';
3532
        break;
3533
        case 'Numeric':
3534
            varValue = parseFloat(varRow.find('input[class="var-value"]')[0].value);
3535
        break;
3536
        case 'String':
3537
            varValue = varRow.find('input[class="var-value"]')[0].value;
3538
        break;
3539
        default:
3540
            throw 'Error: invalid variable type.';
3541
            return;
3542
    }
3543

3544
    addGameVar(varName, varValue);
3545
};
3546

3547
var view_LoadGameVariables = function()
3548
{
3549
    for(var key in editorGameVars)
3550
    {
3551
        var type;
3552
        switch(typeof editorGameVars[key])
3553
        {
3554
            case 'boolean': type = 'Boolean';
3555
            break;
3556
            case 'number': type = 'Numeric';
3557
            break;
3558
            case 'string': type = 'String';
3559
            break;
3560
            default:
3561
                throw 'Error: variable ' + key + 'has invalid type.';
3562
                return;
3563
        }
3564
        view_AddGameVariable({name : key, type : type, value : editorGameVars[key]});
3565
    }
3566
};
3567

3568
var alertMessage = function(element, string, type)
3569
{
3570
    var alert = $(document.createElement('div')).addClass('alert alert-' + type + ' alert-dismissable');
3571
    var alertButton = $(document.createElement('button')).attr(
3572
        {
3573
            'type' : 'button',
3574
            'class' : 'close',
3575
            'data-dismiss' : 'alert',
3576
            'aria-hidden' : 'true'
3577
        });
3578
    alertButton.append('&times;');
3579
    alert.append(alertButton);
3580
    alert.append($(document.createElement('strong')).append($(document.createTextNode(string))));
3581
    element.append(alert);
3582
};
3583

3584
var view_AddNewSound = function(audioData, id)
3585
{
3586
    editorMapIdAudio[id].audioData = audioData;
3587
    //var rowContainer = $(document.createElement('div')).css('margin-left', '10px');
3588
    var row = $(document.createElement('div')).addClass('row tuple ' + 'audio').css({'margin-top' : '10px', 'margin-left' : 'inherit'});
3589
    var eraser = $(document.createElement('span')).attr('class', 'glyphicon glyphicon-remove').css({'color' : 'firebrick', 'float' : 'left'});
3590
    eraser.hover(function() { $(this).css('cursor', 'pointer');}, function() {$(this).css('cursor', 'default');});
3591
    eraser.click(function() { row.remove();});
3592
    row.append(eraser);
3593
    var idContainer = $(document.createElement('div')).css({'width' : '400px', 'float' : 'left'});
3594
    var span = $(document.createElement('span')).text('Filename: ').css('margin-left', '10px');
3595
    idContainer.append(span);
3596
    span = $(document.createElement('span')).append($(document.createElement('i')).append($(document.createElement('b')).text(id)));
3597
    idContainer.append(span);
3598
    row.append(idContainer);
3599
    var audioDiv = $(document.createElement('audio')).prop('controls', true).css({'float' : 'left', 'vertical-align' : 'middle', 'margin-left' : '10px'});
3600
    var source = $(document.createElement('source')).attr({'src' : audioData, 'type' : 'audio/mpeg'});
3601
    audioDiv.append(source);
3602
    row.append(audioDiv);
3603
    $('#audio-container').append(row);
3604

3605
    view_UpdateDataLists('add', 'audio', id);
3606
};
3607

3608
var view_DeleteEntity = function(type, id)
3609
{
3610
    $('#' + id + '-panel').parent().remove();
3611
    view_UpdateDataLists('delete', type, id);
3612
    switch (type)
3613
    {
3614
        case 'room':
3615
            deleteEditorRoom(id);
3616
            break;
3617
        case 'items':
3618
            deleteEditorItem(id);
3619
            break;
3620
        case 'character':
3621
            deleteEditorCharacter(id);
3622
            break;
3623
        case 'anim':
3624
            deleteEditorAnim(id);
3625
            break;
3626
        case 'invItem':
3627
            deleteInvItem(id);
3628
            break;
3629
        case 'audio':
3630
            deleteAudioContent(id);
3631
            break;
3632
        case 'dialog':
3633
            deleteDialog(id);
3634
            break;
3635
        case 'walkboxes':
3636
            deleteWalkbox(editorCurrentRoom.id, id);
3637
            break;
3638
    }
3639
};
3640

3641
// TODO: ADD ANIM PLAYER TO ANIM SECTION
3642
Product

Resources

Company
