cpp
/
AtomicGameEngine-Examples


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Editor</title>
</head>

<body>

    <h1>Custom Editor Instance</h1>
    <p>This is an example of creating a custom editor. You can edit the elements below and if you hit save, it will update the source file.</p>

    <div>
        <div style="float:left">
            <select style="width:190px;height:400px" id="npc_list" size="10"></select>
        </div>
        <div style="margin-left:200px">
            <p>Name
                <br/>
                <input type="text" id="npc_name" />
            </p>
            <p>Conversation Text
                <br/>
                <textarea id="convo_text" rows="10" cols="80"></textarea>
            </p>

            <div>
                <label>
                    <input type="checkbox" value="quest_giver" id="quest">&nbsp;Quest Giver?
                </label>
            </div>
        </div>
    </div>

    <script>
        var filename;
        var structure;
        var currentObject;

        //get a reference to the elements
        var controls = {
            list: document.getElementById("npc_list"),
            npcName: document.getElementById("npc_name"),
            convoText: document.getElementById("convo_text"),
            questCheck: document.getElementById("quest")
        };

        controls.convoText.addEventListener("input", (event) => {
            if (currentObject) {
                atomicQueryPromise("editorChange");
                currentObject.convo = controls.convoText.value;
            }
            event.stopPropagation();
        });

        controls.npcName.addEventListener("input", (event) => {
            if (currentObject) {
                atomicQueryPromise("editorChange");
                currentObject.name = controls.npcName.value;
                controls.list.options[controls.list.selectedIndex].text = currentObject.name;
            }
            event.stopPropagation();
        });

        controls.questCheck.addEventListener("click", (event) => {
            if (currentObject) {
                atomicQueryPromise("editorChange");
                currentObject.quest_giver = event.currentTarget.checked;
            }
            event.stopPropagation();
        });

        controls.list.addEventListener("change", (event) => {
            var selName = controls.list.options[controls.list.selectedIndex].text;

            currentObject = structure.npclist.find((el) => el.name == selName);
            if (currentObject) {
                controls.convoText.value = currentObject.convo;
                controls.npcName.value = currentObject.name;
                controls.questCheck.checked = currentObject.quest_giver;
            }
            event.stopPropagation();

        });

        /**
         * Promise version of atomic query
         * @param  {string} message the query to use to pass to atomicQuery.  If there is no payload, this will be passed directly, otherwise it will be passed in a data object
         * @param  {any} payload optional data to send
         * @return {Promise}
         */
        function atomicQueryPromise(message) {
            return new Promise(function(resolve, reject) {
                var queryMessage = message;

                // if message is coming in as an object then let's stringify it
                if (typeof(message) != "string") {
                    queryMessage = JSON.stringify(message);
                }

                window.atomicQuery({
                    request: queryMessage,
                    persistent: false,
                    onSuccess: resolve,
                    onFailure: (error_code, error_message) => reject({
                        error_code: error_code,
                        error_message: error_message
                    })
                });
            });
        }

        /**
         * Queries the host for a particular resource and returns it in a promise
         * @param  {string} codeUrl
         * @return {Promise}
         */
        function getResource(codeUrl) {
            return new Promise(function(resolve, reject) {
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.onreadystatechange = () => {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        resolve(xmlHttp.responseText);
                    }
                };
                xmlHttp.open("GET", codeUrl, true); // true for asynchronous
                xmlHttp.send(null);
            });
        }

        // Functions exposed to the host editor.  These
        // are hooked in here so that they are available immediately from the host
        function HOST_loadCode(codeUrl) {

            // preferences are available on the window object as stringified JSON strings
            // in case they are needed
            var projectPrefs = JSON.parse(window.HOST_Preferences.ProjectPreferences);
            var applicationPrefs = JSON.parse(window.HOST_Preferences.ApplicationPreferences);

            filename = codeUrl.replace("atomic://", "");
            getResource(codeUrl).then((code) => {
                structure = JSON.parse(code);
                for (var i = 0; i < structure.npclist.length; i++) {
                    var opt = document.createElement("OPTION");
                    controls.list.options.add(opt);
                    opt.text = structure.npclist[i].name;
                }
            });
        }

        function HOST_saveCode() {
            atomicQueryPromise({
                message: "editorSaveCode",
                payload: JSON.stringify(structure, null, 2)
            });
        }

        function HOST_resourceRenamed(path, newPath) {
            alert("Resource Renamed: " + path + "->" + newPath);
        }

        function HOST_resourceDeleted(path) {
            alert("Resource Deleted: " + path);
        }

        function HOST_preferencesChanged() {

            // Updated preferences are available on the window object as stringified JSON strings
            var projectPrefs = JSON.parse(window.HOST_Preferences.ProjectPreferences);
            var applicationPrefs = JSON.parse(window.HOST_Preferences.ApplicationPreferences);
            alert("Prefs Changed.");
        }
    </script>

</body>

</html>