const SCENES = {
    Init: class{
        constructor() { }
        load() {
            LOAD(SCENES.Offline);
            RECONNECT();
            return true;
        }
    },

    Offline:class{
        constructor() { }
        load() {
            UI.nav([
                UI.button(LANG("reconnect"), () => { RECONNECT(); }),
            ], []);
            return true;
        }
        reconnect() {
            LOAD_URL();
        }
    },

    Register:class{
        constructor() { }
        load() {
            if(sessionStorage.getItem("auth") !== null) return false;
            UI.mainmenu("register");
            UI.mainnav([], [], { auth:true });

            let container = document.createElement("section");
            let form = document.createElement("form");
            form.appendChild(UI.table(null, [
                [ UI.label(LANG("handle"), "handle"), UI.textbox("handle", "") ],
                [ UI.label(LANG("secret"), "secret"), UI.password("secret") ],
                [ UI.label(LANG("invitation"), "code"), UI.password("code") ],
            ]));

            let button = UI.submit(LANG("register"));
            button.setAttribute("id", "submit");
            form.appendChild(button);

            form.addEventListener("submit", (event) => {
                event.preventDefault();
                
                let handle = document.getElementById("handle");
                let secret = document.getElementById("secret");
                let code = document.getElementById("code");

                handle.removeAttribute("class");
                secret.removeAttribute("class");
                code.removeAttribute("class");
                event.target.removeAttribute("class");

                if(handle.value.length > 0 && secret.value.length > 0 && code.value.length > 0) {
                    event.target.setAttribute("disabled", "");

                    let enc = new TextEncoder();
                    let enc_handle = enc.encode(handle.value);
                    let enc_secret = enc.encode(secret.value);
                    let enc_code = enc.encode(code.value);

                    MESSAGE_COMPOSE([
                        PACK.u16(OpCode.Register),
                        PACK.u16(enc_handle.length),
                        enc_handle,
                        PACK.u16(enc_secret.length),
                        enc_secret,
                        PACK.u16(enc_code.length),
                        enc_code,
                    ]);
                } else {
                    if(handle.value.length == 0) { handle.setAttribute("class", "error"); }
                    if(secret.value.length == 0) { secret.setAttribute("class", "error"); }
                    if(code.value.length == 0) { code.setAttribute("class", "error"); }
                }
            });

            container.appendChild(form);
            MAIN.appendChild(container);
            MAIN.setAttribute("class", "form");

            document.getElementById("handle").focus();

            return true;
        }
        message(code, data) {
            if(code == OpCode.Register && data !== null) {
                let submit = document.getElementById("submit");
                switch(data.status) {
                    case Status.Ok: {
                        let b64_token = PACK.base64(data.token);
                        let b64_secret = PACK.base64(data.secret);
                        console.log(b64_token);
                        console.log(b64_secret);

                        sessionStorage.setItem("auth", b64_token);
                        sessionStorage.setItem("auth_secret", b64_secret);
                        LOAD_URL();
                    } break;
                    default: {
                        submit.removeAttribute("disabled");
                        switch(data.status) {
                            case Status.BadHandle: {
                                document.getElementById("handle").setAttribute("class", "error");
                                submit.setAttribute("class", "error");
                            } break;
                            case Status.BadSecret: {
                                document.getElementById("secret").setAttribute("class", "error");
                                submit.setAttribute("class", "error");
                            } break;
                            case Status.BadCode: {
                                document.getElementById("code").setAttribute("class", "error");
                                submit.setAttribute("class", "error");
                            } break;
                        }
                    }
                }
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    Authenticate:class{
        constructor() { }
        load() {
            if(sessionStorage.getItem("auth") !== null) return false;
            UI.mainmenu("authenticate");
            UI.mainnav([], [], { auth:true });

            let container = document.createElement("section");
            let form = document.createElement("form");
            form.appendChild(UI.table(null, [
                [ UI.label(LANG("handle"), "handle"), UI.textbox("handle", "") ],
                [ UI.label(LANG("secret"), "secret"), UI.password("secret") ],
            ]));

            let button = UI.submit(LANG("login"));
            button.setAttribute("id", "submit");
            form.appendChild(button);
            
            form.addEventListener("submit", (event) => {
                event.preventDefault();

                let handle = document.getElementById("handle");
                let secret = document.getElementById("secret");

                handle.removeAttribute("class");
                secret.removeAttribute("class");
                event.target.removeAttribute("class");

                if(handle.value.length > 0 && secret.value.length > 0) {
                    event.target.setAttribute("disabled", "");

                    let enc = new TextEncoder();
                    let enc_handle = enc.encode(handle.value);
                    let enc_secret = enc.encode(secret.value);

                    MESSAGE_COMPOSE([
                        PACK.u16(OpCode.Authenticate),
                        PACK.u16(enc_handle.length),
                        enc_handle,
                        PACK.u16(enc_secret.length),
                        enc_secret,
                    ]);
                } else {
                    if(handle.value.length == 0) { handle.setAttribute("class", "error"); }
                    if(secret.value.length == 0) { secret.setAttribute("class", "error"); }
                }
            });
            
            container.appendChild(form);
            MAIN.appendChild(container);
            MAIN.setAttribute("class", "form");

            document.getElementById("handle").focus();

            return true;
        }
        message(code, data) {
            if(code == OpCode.Authenticate && data !== null) {
                let submit = document.getElementById("submit");
                switch(data.status) {
                    case Status.Ok: {
                        sessionStorage.setItem("auth", PACK.base64(data.token));
                        sessionStorage.setItem("auth_secret", PACK.base64(data.secret));
                        LOAD_URL();
                    } break;
                    case Status.Error: {
                        submit.removeAttribute("disabled");

                        document.getElementById("handle").setAttribute("class", "error");
                        document.getElementById("secret").setAttribute("class", "error");
                        submit.setAttribute("class", "error");
                    }
                }
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    Browse:class{
        constructor() {
            this.page = 1;
            this.pages = 1;
        }
        load() {
            UI.mainmenu("browse");

            let indicator_page = UI.div([]);
            indicator_page.setAttribute("id", "indicator-page");

            UI.mainnav(
                [ ],
                [
                    indicator_page,
                    UI.button("◀", () => {
                        if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
                        SCENE.refresh();
                    }),
                    UI.button("▶", () => {
                        if(SCENE.page > 1) { SCENE.page -= 1; }
                        SCENE.refresh();
                    }),
                    UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
                ],
                { auth:true, session:true }
            );
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            table.setAttribute("class", "list session");
            MAIN.appendChild(table);

            SCENE.refresh();

            history.pushState(null, "Dzura", "/");
            return true;
        }
        refresh() {
            MESSAGE_SESSION_LIST(this.page, 2, false, false);
        }
        message(code, data) {
            switch(code) {
                case OpCode.SessionList: {
                    let table = document.getElementById("content");
                    UI.clear(table);

                    if(data !== null) {
                        UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
                        table.appendChild(UI.session_table(data.records));
                    }
                } break;
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    Continue:class{
        constructor() {
            this.page = 1;
            this.pages = 1;
        }
        load() {
            if(sessionStorage.getItem("auth") === null) return false;

            UI.mainmenu("continue");

            let indicator_page = UI.div([]);
            indicator_page.setAttribute("id", "indicator-page");

            UI.mainnav(
                [ ],
                [
                    indicator_page,
                    UI.button("◀", () => {
                        if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
                        SCENE.refresh();
                    }),
                    UI.button("▶", () => {
                        if(SCENE.page > 1) { SCENE.page -= 1; }
                        SCENE.refresh();
                    }),
                    UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
                ],
                { auth:true, session:true }
            );
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            table.setAttribute("class", "list session-resume");
            MAIN.appendChild(table);

            SCENE.refresh();

            history.pushState(null, "Dzura - Continue", "/continue/");
            return true;
        }
        refresh() {
            MESSAGE_SESSION_LIST(this.page, 2, true, false);
        }
        message(code, data) {
            switch(code) {
                case OpCode.SessionList: {
                    let table = document.getElementById("content");
                    UI.clear(table);

                    if(data !== null) {
                        UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
                        table.appendChild(UI.session_table_resume(data.records));
                    }
                } break;
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    /*Join:{
        load() {
            if(sessionStorage.getItem("auth") === null) return false;
            
            CONTEXT.Data = {
                page:0,
                records:[],
            };

            UI.mainmenu("join");
            UI.mainnav(
                [ ],
                [
                    UI.div([UI.text("0 - 0 of 0")]),
                    UI.button("◀", null),
                    UI.button("▶", null),
                    UI.button("Refresh", null),
                ],
                { auth:true, session:true }
            );
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            table.setAttribute("class", "list");
            MAIN.appendChild(table);

            SCENE.refresh();

            history.pushState(null, "Dzura - Join", "/join/");
            return true;
        },
        refresh() {
            MESSAGE_SESSION_LIST(0, 1, false, false);
        },
        message(code, data) {
            switch(code) {
                case OpCode.SessionList: {
                    let table = document.getElementById("content");
                    UI.clear(table);

                    if(data !== null) {
                        table.appendChild(UI.session_table_join(data.records));
                    }
                } break;
                case OpCode.SessionView: {
                    if(data.status == Status.Ok) {
                        LOAD(SCENES.Game, data);
                    }
                } break;
            }
        },
        disconnect() {
            LOAD(SCENES.Offline);
        },
    },*/

    Live:class{
        constructor() {
            this.page = 1;
            this.pages = 1;
        }
        load() {
            UI.mainmenu("live");

            let indicator_page = UI.div([]);
            indicator_page.setAttribute("id", "indicator-page");

            UI.mainnav(
                [ ],
                [
                    indicator_page,
                    UI.button("◀", () => {
                        if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
                        SCENE.refresh();
                    }),
                    UI.button("▶", () => {
                        if(SCENE.page > 1) { SCENE.page -= 1; }
                        SCENE.refresh();
                    }),
                    UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
                ],
                { auth:true, session:true }
            );
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            table.setAttribute("class", "list session");
            MAIN.appendChild(table);

            SCENE.refresh();

            history.pushState(null, "Dzura - Live", "/live/");
            return true;
        }
        refresh() {
            MESSAGE_SESSION_LIST(this.page, 2, false, true);
        }
        message(code, data) {
            switch(code) {
                case OpCode.SessionList: {
                    let table = document.getElementById("content");
                    UI.clear(table);

                    if(data !== null) {
                        UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
                        table.appendChild(UI.session_table(data.records));
                    }
                } break;
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    History:class{
        constructor() {
            this.page = 1;
            this.pages = 1;
        }
        load() {
            UI.mainmenu("history");

            let indicator_page = UI.div([]);
            indicator_page.setAttribute("id", "indicator-page");

            UI.mainnav(
                [ ],
                [
                    indicator_page,
                    UI.button("◀", () => {
                        if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
                        SCENE.refresh();
                    }),
                    UI.button("▶", () => {
                        if(SCENE.page > 1) { SCENE.page -= 1; }
                        SCENE.refresh();
                    }),
                    UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
                ],
                { auth:true, session:true }
            );
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            table.setAttribute("class", "list session");
            MAIN.appendChild(table);

            SCENE.refresh();

            history.pushState(null, "Dzura - History", "/history/");
            return true;
        }
        refresh() {
            MESSAGE_SESSION_LIST(this.page, 3, false, false);
        }
        message(code, data) {
            switch(code) {
                case OpCode.SessionList: {
                    let table = document.getElementById("content");
                    UI.clear(table);

                    if(data !== null) {
                        UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
                        table.appendChild(UI.session_table_history(data.records));
                    }
                } break;
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    Guide:class{
        constructor() { }
        load() {
            UI.mainmenu("guide");
            UI.mainnav([
                UI.button("Game", () => { SCENE.refresh("game.html"); }),
                UI.button("Pieces", () => { SCENE.refresh("pieces.html"); }),
                UI.button("Interface", () => { SCENE.refresh("interface.html"); }),
            ], []);

            let body = document.createElement("article");
            body.setAttribute("id", "article");
            MAIN.appendChild(body);

            this.refresh("game.html");

            history.pushState(null, "Dzura - Guide", "/guide/");
            return true;
        }
        refresh(page) {
            fetch("/guide/" + page)
                .then((response) => {
                    return response.text();
                })
                .then((text) => {
                    let parser = new DOMParser();
                    let body = parser.parseFromString(text, "text/html");
                    document.getElementById("article").innerHTML = body.body.innerHTML;
                });
        }
    },

    About:class{
        constructor() { }
        load() {
            UI.mainmenu("about");
            UI.mainnav([], []);

            let body = document.createElement("article");
            body.setAttribute("id", "article");
            MAIN.appendChild(body);
            
            this.refresh("main.html");

            history.pushState(null, "Dzura - About", "/about/");
            return true;
        }
        refresh(page) {
            fetch("/about/" + page)
            .then((response) => {
                return response.text();
            })
            .then((text) => {
                let parser = new DOMParser();
                let body = parser.parseFromString(text, "text/html");
                document.getElementById("article").innerHTML = body.body.innerHTML;
            });
        }
    },

    Extras:class{
        constructor() { }
        load() {
            UI.mainmenu("extras");
            UI.mainnav([], []);

            history.pushState(null, "Dzura - About", "/extras/");
            return true;
        }
    },

    Game:class{
        constructor() {
            this.game = null;
        }
        load(data) {
            let buttons_bottom = [ ];
            if(data.mode != INTERFACE.Mode.Review) {
                let button_resign = UI.button(LANG("resign"), () => { INTERFACE.resign(); });
                button_resign.setAttribute("id", "button-resign");
                buttons_bottom.push(button_resign);
            }
            buttons_bottom.push(UI.button(LANG("back"), () => {
                LOAD(SCENES.Browse);
            }));

            let buttons_top = [
                UI.button(LANG("rotate"), () => { INTERFACE.rotate(); }),
                UI.button(LANG("mirror"), () => { INTERFACE.mirror(); }),
            ];

            if(data.player != 0) {
                if(data.mode == INTERFACE.Mode.Review) {
                    let callback_resume = function() {
                        LOAD(SCENES.Game, {
                            token:this.token,
                            player:this.player,
                            turn:-1,
                            mode:INTERFACE.Mode.Player,
                        });
                        MESSAGE_SESSION_VIEW(this.token, true);
                    }
                    callback_resume = callback_resume.bind({
                        token: data.token,
                        player: data.player,
                    });

                    buttons_top.push(UI.button(LANG("resume"), callback_resume));
                } else {
                    let callback_review = function() {
                        LOAD(SCENES.Game, {
                            token:this.token,
                            turn:-1,
                            player:this.player,
                            mode:INTERFACE.Mode.Review,
                        });
                        MESSAGE_SESSION_VIEW(this.token, false);
                    }
                    callback_review = callback_review.bind({
                        token: data.token,
                        player: data.player,
                    });

                    buttons_top.push(UI.button(LANG("review"), callback_review));
                }
            }

            if(data.mode == INTERFACE.Mode.Review) {
                let play_callback = function() {
                    LOAD(SCENES.GamePractice, {
                        token:this.token,
                        player:this.player,
                        history:INTERFACE_DATA.history,
                        turn:INTERFACE_DATA.replay_turn,
                    })
                }
                play_callback = play_callback.bind({
                    token: data.token,
                    player: data.player,
                });
                buttons_top.push(UI.button(LANG("play"), play_callback));
            }
            
            UI.nav(buttons_top, buttons_bottom);

            if(data.mode == INTERFACE.Mode.Review) {
                let ind_turn = UI.div([UI.text("0 / 0")]);
                ind_turn.setAttribute("id", "indicator-turn");

                UI.mainnav(
                    [ ],
                    [
                        UI.button("Auto", () => { INTERFACE.replay_toggle_auto(); }),
                        UI.button("◀", () => { INTERFACE.replay_off(); INTERFACE.replay_first(); }),
                        UI.button("◁", () => { INTERFACE.replay_off(); INTERFACE.replay_prev(); }),
                        ind_turn,
                        UI.button("▷", () => { INTERFACE.replay_off(); INTERFACE.replay_next(true); }),
                        UI.button("▶", () => { INTERFACE.replay_off(); INTERFACE.replay_last(); }),
                    ]
                );

                let slider = UI.slider("turn-slider", (event) => { INTERFACE.replay_off(); INTERFACE.replay_jump(event.target.value, true); });
                slider.setAttribute("min", "0");
                slider.setAttribute("max", "0");
                MAIN.appendChild(UI.div([ slider ], "turn-slider-padding"));
            }

            let canvas = document.createElement("canvas");
            canvas.setAttribute("id", "game");
            MAIN.appendChild(canvas);

            INTERFACE.init(data.token, data.mode);
            console.log(data.turn);
            if(data.turn != -1) {
                INTERFACE_DATA.replay_turn = data.turn;
            }

            history.pushState(null, "Dzura - Game", "/game/" + PACK.base64(data.token).slice(0, -1));
            return true;
        }
        unload() {
            INTERFACE.uninit();
        }
        message(code, data) {
            switch(code) {
                case OpCode.SessionCreate:
                case OpCode.SessionView:
                case OpCode.GameState:
                case OpCode.GamePlay: {
                    INTERFACE.message(code, data);
                } break;
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    GamePractice:class{
        constructor() {
            this.game = null;
        }
        load(data) {
            let buttons_top = [
                UI.button(LANG("rotate"), () => { INTERFACE.rotate(); }),
                UI.button(LANG("mirror"), () => { INTERFACE.mirror(); }),
                UI.button(LANG("auto"), () => { INTERFACE.auto(); }),
            ];

            if(data !== null) {
                if(data.history.length > 0) {
                    let callback_review = function() {
                        LOAD(SCENES.Game, {
                            token:this.token,
                            turn:INTERFACE_DATA.history_begin.length,
                            player:this.player,
                            mode:INTERFACE.Mode.Review,
                        });
                        MESSAGE_SESSION_VIEW(this.token, false);
                    }
                    callback_review = callback_review.bind({
                        token: data.token,
                        player: data.player,
                    });

                    buttons_top.push(UI.button(LANG("review"), callback_review));
                }
            }

            let buttons_bottom = [ ];
            buttons_bottom.push(UI.button(LANG("undo"), () => { INTERFACE.undo(); }));
            buttons_bottom.push(UI.button(LANG("reset"), () => { INTERFACE.reset(); }));
            buttons_bottom.push(UI.button(LANG("back"), () => { LOAD(SCENES.Browse); }));
            
            UI.nav(buttons_top, buttons_bottom);

            let canvas = document.createElement("canvas");
            canvas.setAttribute("id", "game");
            MAIN.appendChild(canvas);

            INTERFACE.init(data, INTERFACE.Mode.Local);
            if(data !== null) {
                for(let i = 0; i < data.turn; ++i) {
                    INTERFACE_DATA.history_begin.push(data.history[i]);
                }
                INTERFACE.reset();
            }

            history.pushState(null, "Dzura - Practice", "/practice/");
            return true;
        }
        unload() {
            INTERFACE.uninit();
        }
    },

    /*Await:{
        load() {
            if(sessionStorage.getItem("auth") === null) return false;
            UI.mainmenu("await");
            UI.mainnav([], [], { session:true });

            let container = document.createElement("section");
            let form = document.createElement("div");
            form.appendChild(UI.text("Await a challenger:"));
            form.appendChild(UI.table(null, [
                [ UI.label("Accepting", "in-accept"), UI.checkbox("in-accept") ],
            ]));

            let button = UI.button("Update", (event) => {
                let accepting = 0;
                if(document.getElementById("in-accept").value == "on") {
                    accepting = 1;
                }

                let flags = 0;
                flags |= accepting;

                MESSAGE_COMPOSE([
                    PACK.u16(OpCode.UserAwait),
                    PACK.u32(flags),
                ]);

                LOAD_URL();
            });
            form.appendChild(button);

            container.appendChild(form);
            MAIN.appendChild(container);
            MAIN.setAttribute("class", "form");

            return true;
        },
        disconnect() {
            LOAD(SCENES.Offline);
        },
    },*/

    Challenge:class{
        constructor() {
            this.page = 0;
        }
        load() {
            if(sessionStorage.getItem("auth") === null) return false;

            CONTEXT.Data = {
                page:0,
                records:[],
            };

            UI.mainmenu("browse");
            UI.mainnav(
                [ ],
                [
                    UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
                    UI.button("◀", null),
                    UI.button("▶", null),
                    UI.button(LANG("refresh"), null),
                ],
                { auth:true, session:true }
            );
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            table.setAttribute("class", "list challenge");
            MAIN.appendChild(table);

            SCENE.refresh();

            history.pushState(null, "Dzura", "/challenge/");
            return true;
        }
        refresh() {
            MESSAGE_COMPOSE([
                PACK.u16(OpCode.UserList),
            ]);
        }
        message(code, data) {
            switch(code) {
                case OpCode.UserList: {
                    let table = document.getElementById("content");
                    UI.clear(table);

                    if(data !== null) {
                        let rows = [ ];

                        for(let r = 0; r < data.users.length; ++r) {
                            let buttons = [ ];

                            let callback = function(event) {
                                MESSAGE_CHALLENGE(this.handle);

                                event.target.innerText = "Sent";
                                event.target.setAttribute("class", "highlight");
                                event.target.setAttribute("disabled", "");
                            };
                            callback = callback.bind({handle: data.users[r].handle});
                            buttons.push(UI.button(LANG("challenge"), callback));

                            rows.push([
                                UI.text(data.users[r].handle),
                                UI.text(LANG("unranked")),
                                buttons,
                            ]);
                        }

                        let tbody = UI.table_content(
                            [ LANG("handle"), LANG("rank"), "" ],
                            rows,
                        );

                        table.appendChild(tbody);
                    }
                } break;
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },

    ChallengeList:class{
        constructor() { }
        load() {
            if(sessionStorage.getItem("auth") === null) return false;

            CONTEXT.Data = {
                page:0,
                records:[],
            };

            UI.mainmenu("browse");
            UI.mainnav(
                [ ],
                [
                    UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
                    UI.button("◀", null),
                    UI.button("▶", null),
                    UI.button(LANG("refresh"), null),
                ],
                { auth:true, session:true }
            );
            
            let table = document.createElement("table");
            table.setAttribute("id", "content");
            table.setAttribute("class", "list challenge");
            MAIN.appendChild(table);

            SCENE.refresh();

            history.pushState(null, "Dzura", "/challenge/");
            return true;
        }
        refresh() {
            MESSAGE_COMPOSE([
                PACK.u16(OpCode.ChallengeList),
            ]);
        }
        message(code, data) {
            switch(code) {
                case OpCode.ChallengeList: {
                    let table = document.getElementById("content");
                    UI.clear(table);

                    if(data !== null) {
                        let rows = [ ];

                        for(let r = 0; r < data.challenges.length; ++r) {
                            let buttons = [ ];

                            let callback_accept = function() {
                                MESSAGE_CHALLENGE_ANSWER(this.handle, true);
                            };
                            callback_accept = callback_accept.bind({handle: data.challenges[r].handle});
                            buttons.push(UI.button(LANG("accept"), callback_accept));

                            let callback_decline = function() {
                                MESSAGE_CHALLENGE_ANSWER(this.handle, false);
                            };
                            callback_decline = callback_decline.bind({handle: data.challenges[r].handle});
                            buttons.push(UI.button(LANG("decline"), callback_decline));

                            rows.push([
                                UI.text(data.challenges[r].handle),
                                UI.text(LANG("unranked")),
                                buttons,
                            ]);
                        }

                        let tbody = UI.table_content(
                            [ LANG("handle"), LANG("rank"), "" ],
                            rows,
                        );

                        table.appendChild(tbody);
                    }
                } break;

                case OpCode.ChallengeAnswer: {
                    if(data.status == Status.Ok) {

                        LOAD(SCENES.Game, {
                            token:data.token,
                            mode:INTERFACE.Mode.Player,
                        });
                        MESSAGE_SESSION_VIEW(data.token, true);
                    } else {
                        SCENE.refresh();
                    }
                } break;
            }
        }
        disconnect() {
            LOAD(SCENES.Offline);
        }
    },
};

function LOAD(scene, data=null) {
    UNLOAD();
    UI.rebuild();
    SCENE = new scene();
    if(!SCENE.load(data)) { LOAD(SCENES.Browse); }

    UI.update_status();
}

function UNLOAD() {
    if(SCENE !== null && SCENE.unload !== undefined) { SCENE.unload(); }
}

function LOAD_URL() {
    let parts = window.location.pathname.split("/");

    if(parts.length > 1) {
        switch(parts[1]) {
            case "continue": LOAD(SCENES.Continue); break;
            case "live": LOAD(SCENES.Live); break;
            case "history": LOAD(SCENES.History); break;
            case "practice": LOAD(SCENES.GamePractice); break;
            case "guide": LOAD(SCENES.Guide); break;
            case "about": LOAD(SCENES.About); break;
            case "challenge": LOAD(SCENES.Challenge); break;

            case "game": {
                if(parts[2]) {
                    let token = UNPACK.base64(parts[2] + "=");
                    LOAD(SCENES.Game, {
                        token:token,
                        player:0,
                        turn:-1,
                        mode:INTERFACE.Mode.Review,
                    });
                    MESSAGE_SESSION_VIEW(token, false);
                } else {
                    LOAD(SCENES.Browse);
                }
            } break;

            default: LOAD(SCENES.Browse);
        }
    } else {
        LOAD(SCENES.Browse);
    }
}