livecodingspace-app/public/web/world-app.js

import page from '/lib/page.mjs';

class WorldApp {
    constructor(userAlias, worldName, saveName) {
        console.log("app constructor");

        this.userAlias = userAlias;
        this.worldName = worldName;
        this.saveName = saveName;

        //this.worlds = {};
        this.language = _LangManager.language;
          
    }


    createWorldStatesGUI() {
        let self = this;

        let worldStatesGUI = {
            $cell: true,
            id: "worldStatesGUI",
            $type: "div",
            $components: [],
            _states: {},
            _refresh: function (data) {
                this._states = data
            },
            $init: async function () {
                //this._refresh();
            },
            _makeWorldCard: function (data) {
                let cardID = data[1].userAlias + '_' + data[1].worldName + '_' + data[0];
                let card = _app.indexApp.createWorldCard(cardID, 'min');
                card._worldInfo = data[1];
                card.$update();
                return {
                    $cell: true,
                    $type: "div",
                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
                    $components: [
                        card
                        //self.createWorldCard(data[1].userAlias, data[1].worldName, data[0])
                        //this._worldCardDef(appInfo)
                    ]
                }
                //console.log(data);
            },
            $update: function () {
                this.$components = [
                    {
                        $type: "div",
                        class: "mdc-layout-grid",
                        $components: [
                            {
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: [
                                    {
                                        $type: "div",
                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                        $components: [
                                            {
                                                $type: "H3",
                                                $text: 'States'
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                $type: "div",
                                class: "mdc-layout-grid__inner",
                                $components: Object.entries(this._states)
                                .filter(el =>Object.keys(el[1]).length !== 0)
                                .sort(function (el1, el2) {
                                    return parseInt(el2[1].created) - parseInt(el1[1].created)
                                })
                                .map(this._makeWorldCard)
                            }
                        ]

                    }


                ]
            }
        }

        return worldStatesGUI
    }

    async initWorldGUI() {

    //  _LCSDB.on('auth',
    //     function (ack) {

    //             document.querySelector('#worldActionsGUI')._refresh();
            
    //     })

        let self = this;
        let user = this.userAlias;
        let space = this.worldName;
        let saveName = this.saveName;

        let el = document.createElement("div");
        el.setAttribute("id", "aboutWorld");
        document.body.appendChild(el);

        let cardID = user + '_' + space + '_' + (saveName ? saveName : "");
        let worldCardGUI = _app.indexApp.createWorldCard(cardID, 'full');
        let worldStatesGUI = [];

        var info = {};

        if (!saveName) {
            info = await _app.getWorldInfo(user, space);
        } else {
            info = await _app.getStateInfo(user, space, saveName);
        }
        worldCardGUI._worldInfo = info;
        worldCardGUI.$update();

        if (!saveName) {
            let statesData = await _app.getSaveStates(user, space);
            let worldStates = this.createWorldStatesGUI();
            worldStates._states = statesData;
            worldStates.$update();
            worldStatesGUI.push(worldStates);
        }


        let actionsGUI = {
            $cell: true,
            id: "worldActionsGUI",
            $type: "div",
            $components: [],
            _worldInfo: {},
            _refresh: function () {

                this._worldInfo = {
                    'userAlias': self.userAlias,
                    'worldName': self.saveName ? self.worldName + '/load/' + self.saveName : self.worldName,
                    'type': self.saveName ? 'saveState' : 'proto'
                }

                //    let worldCard = document.querySelector('#worldCard');
                //    if(worldCard){
                //        this._worldInfo = worldCard._worldInfo;
                //    } 
            },
            $init: function () {
                if (_LCSUSER.is) {
                    this._refresh();
                }
            },
            $update: function () {

                let desc = this._worldInfo;
                let userGUI = [];

                // if(!desc){
                //     this.$components = [];
                //     return
                // }

                if (_LCSUSER.is) {
                    if (_LCSUSER.is.alias == desc.userAlias) {
                        userGUI.push(
                            {
                                $type: "a",
                                class: "mdc-button mdc-button--raised mdc-card__action actionButton",
                                $text: "Edit info",
                                //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                onclick: function (e) {
                                    //'/:user/:type/:name/edit/:file'
                                    if (desc.type == 'proto') {
                                        window.location.pathname = "/" + desc.userAlias + '/proto/' + desc.worldName + '/edit/info_json'
                                    } else if (desc.type == 'saveState') {
                                        let names = desc.worldName.split('/');
                                        let filename = ('savestate_/' + names[0] + '/' + names[2] + '_info_vwf_json').split('/').join("~");
                                        window.location.pathname = "/" + desc.userAlias + '/state/' + names[0] + '/edit/' + filename;
                                    }
                                    //self.refresh();
                                }
                            }
                        );

                        if (desc.type == 'proto') {
                            userGUI.push(
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--raised mdc-card__action actionButton",
                                    $text: "Edit proto",
                                    //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                    onclick: function (e) {
                                        window.location.pathname = "/" + desc.userAlias + '/proto/' + desc.worldName + '/edit/index_vwf_yaml'
                                    }
                                }
                            );

                            userGUI.push(
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--raised mdc-card__action actionButton",
                                    $text: "Delete",
                                    //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                    onclick: function (e) {
                                        _app.deleteWorld(desc.worldName, 'proto');
                                    }
                                }
                            );
                        }


                        if (desc.type == 'saveState') {
                            userGUI.push(
                                {
                                    $type: "a",
                                    class: "mdc-button mdc-button--raised mdc-card__action actionButton",
                                    $text: "Delete",
                                    //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
                                    onclick: function (e) {
                                        _app.deleteWorld(desc.worldName, 'state');
                                    }
                                }
                            );
                        }


                    }

                    if (desc.type == 'proto') {
                        userGUI.push(
                            {
                                $type: "a",
                                class: "mdc-button mdc-button--raised mdc-card__action actionButton",
                                $text: self.language.t('clone proto'),//"clone",
                                onclick: function (e) {
                                    //console.log('clone');
                                    _app.cloneWorldPrototype(desc.worldName, desc.userAlias);
                                    //self.refresh();
                                }
                            }

                        )
                    } else if (desc.type == 'saveState') {


                        // userGUI.push(
                        //     {
                        //         $type: "a",
                        //         class: "mdc-button mdc-button--compact mdc-card__action mdc-button--outlined",
                        //         $text: "Clone",
                        //         onclick: function (e) {
                        //             //console.log('clone');

                        //             //self.cloneWorldState(desc[0], desc[2]);

                        //             //self.refresh();
                        //         }
                        //     })
                    }

                }



                this.$components = [
                    {
                        $type: "div",
                        $text: "World actions:"
                    }
                ].concat(userGUI)
            }
        }

    
        document.querySelector("#aboutWorld").$cell({
            id: 'aboutWorld',
            $cell: true,
            $type: "div",
            $components: [
                {
                    $type: "div",
                    class: "mdc-layout-grid",
                    $components: [
                        {
                            $type: "div",
                            class: "mdc-layout-grid__inner",
                            $components: [
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        {
                                            $type: "h1",
                                            class: "mdc-typography--headline4",
                                            $text: self.worldName + ' by ' + self.userAlias
                                        }
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
                                    $components: [
                                        worldCardGUI
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                        actionsGUI
                                    ]
                                },
                                {
                                    $type: "div",
                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                    $components: [
                                    ].concat(worldStatesGUI)
                                },
                            ]
                        }
                    ]
                }
            ]
        })


    }

}

export { WorldApp }