final changes for monac

css/scripteditor.scss

@@ -9,19 +9,6 @@
     background-color: transparent;
 }
 
-#ace-editor {
-    margin: 10px;
-    height: 80%;
-    width: 100%;
-    margin-left: 6px;
-    padding-left: 6px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    border: 2px solid var(--my-highlight-color);
-    z-index: 1;
-    font-family: $fontFamily;
-}
-
 /* This temp element is used for auto adjusting filename field */
 .tmp-element {
     visibility: hidden;
@@ -107,17 +94,14 @@
     }
 }
 
-/* Specific overrides for Ace Editor */
+.editor-options-container {
-.ace_line,
+    display: flex;
-.ace_line * {
+    flex-flow: column;
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
 }
 
-.ace_text-input {
+.editor-options-line {
-    font-size: $defaultFontSize;
+    display: flex;
-    background-color: transparent;
+    flex: row nowrap;
+    align-items: center;
+    justify-content: start;
 }
-
-/* Specified overrides for Code mirror Editor are defined in codemirror-override.scss */

dist/engineStyle.bundle.js

@@ -1,2 +1,2 @@
-!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],p=0,s=[];p<f.length;p++)i=f[p],u[i]&&s.push(u[i][0]),u[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(a&&a(t);s.length;)s.shift()();return r.push.apply(r,l||[]),o()}function o(){for(var n,t=0;t<r.length;t++){for(var o=r[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==u[c]&&(e=!1)}e&&(r.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},u={1:0},r=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var a=c;r.push([855,0]),o()}({792:function(n,t,o){},794:function(n,t,o){},796:function(n,t,o){},798:function(n,t,o){},800:function(n,t,o){},802:function(n,t,o){},804:function(n,t,o){},806:function(n,t,o){},808:function(n,t,o){},810:function(n,t,o){},812:function(n,t,o){},814:function(n,t,o){},816:function(n,t,o){},818:function(n,t,o){},820:function(n,t,o){},822:function(n,t,o){},824:function(n,t,o){},826:function(n,t,o){},828:function(n,t,o){},830:function(n,t,o){},832:function(n,t,o){},834:function(n,t,o){},836:function(n,t,o){},838:function(n,t,o){},840:function(n,t,o){},842:function(n,t,o){},844:function(n,t,o){},846:function(n,t,o){},848:function(n,t,o){},850:function(n,t,o){},852:function(n,t,o){},855:function(n,t,o){"use strict";o.r(t);o(854),o(852),o(850),o(848),o(846),o(844),o(842),o(840),o(838),o(836),o(834),o(832),o(830),o(828),o(826),o(824),o(822),o(820),o(818),o(816),o(814),o(812),o(810),o(808),o(806),o(804),o(802),o(800),o(798),o(796),o(794),o(792)}});
+!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],p=0,s=[];p<f.length;p++)i=f[p],u[i]&&s.push(u[i][0]),u[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(a&&a(t);s.length;)s.shift()();return r.push.apply(r,l||[]),o()}function o(){for(var n,t=0;t<r.length;t++){for(var o=r[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==u[c]&&(e=!1)}e&&(r.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},u={1:0},r=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var a=c;r.push([862,0]),o()}({799:function(n,t,o){},801:function(n,t,o){},803:function(n,t,o){},805:function(n,t,o){},807:function(n,t,o){},809:function(n,t,o){},811:function(n,t,o){},813:function(n,t,o){},815:function(n,t,o){},817:function(n,t,o){},819:function(n,t,o){},821:function(n,t,o){},823:function(n,t,o){},825:function(n,t,o){},827:function(n,t,o){},829:function(n,t,o){},831:function(n,t,o){},833:function(n,t,o){},835:function(n,t,o){},837:function(n,t,o){},839:function(n,t,o){},841:function(n,t,o){},843:function(n,t,o){},845:function(n,t,o){},847:function(n,t,o){},849:function(n,t,o){},851:function(n,t,o){},853:function(n,t,o){},855:function(n,t,o){},857:function(n,t,o){},859:function(n,t,o){},862:function(n,t,o){"use strict";o.r(t);o(861),o(859),o(857),o(855),o(853),o(851),o(849),o(847),o(845),o(843),o(841),o(839),o(837),o(835),o(833),o(831),o(829),o(827),o(825),o(823),o(821),o(819),o(817),o(815),o(813),o(811),o(809),o(807),o(805),o(803),o(801),o(799)}});
 //# sourceMappingURL=engineStyle.bundle.js.map

dist/engineStyle.css

@@ -1342,18 +1342,6 @@ button {
 #script-editor-container {
   background-color: transparent; }
 
-#ace-editor {
-  margin: 10px;
-  height: 80%;
-  width: 100%;
-  margin-left: 6px;
-  padding-left: 6px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  border: 2px solid var(--my-highlight-color);
-  z-index: 1;
-  font-family: "Lucida Console", "Lucida Sans Unicode", "Fira Mono", "Consolas", "Courier New", Courier, monospace, "Times New Roman"; }
-
 /* This temp element is used for auto adjusting filename field */
 .tmp-element {
   visibility: hidden;
@@ -1375,7 +1363,6 @@ button {
 
 #script-editor-filename-wrapper {
   background-color: #555;
-  margin-left: 6px;
   margin-right: 0;
   padding-left: 6px;
   width: 100%;
@@ -1428,18 +1415,15 @@ button {
   #script-editor-options-panel fieldset input {
     margin: 2px; }
 
-/* Specific overrides for Ace Editor */
+.editor-options-container {
-.ace_line,
+  display: flex;
-.ace_line * {
+  flex-flow: column; }
-  background-color: transparent;
-  margin: 0;
-  padding: 0; }
 
-.ace_text-input {
+.editor-options-line {
-  font-size: 16px;
+  display: flex;
-  background-color: transparent; }
+  flex: row nowrap;
-
+  align-items: center;
-/* Specified overrides for Code mirror Editor are defined in codemirror-override.scss */
+  justify-content: start; }
 
 /* COLORS */
 /* Attributes */

index.html

@@ -123,11 +123,8 @@
             <input id="script-editor-filename" type="text" maxlength="100" tabindex="1"/>
         </div>
 
-        <div id="ace-editor"></div>
+        <div id="monaco-editor"></div>
-        <form id="codemirror-form-wrapper"><textarea id="codemirror-editor"></textarea></form>
+
-        <div id="codemirror-vim-command-display-wrapper">
-            Key Buffer: <span id="codemirror-vim-command-display"></span>
-        </div>
 
         <div id="script-editor-buttons-wrapper"></div> <!-- Buttons below script editor -->
         </div> <!-- End wrapper -->
@@ -173,6 +170,14 @@
             <fieldset id="script-editor-option-flex4-fieldset"></fieldset>
 
         </div> <!-- End script editor options panel -->
+
+
+        <!-- TODO(hydroflame): remove this once Monaco is implemented -->
+        <div id="ace-editor" style="display: none"></div>
+        <form id="codemirror-form-wrapper" style="display: none"><textarea id="codemirror-editor"></textarea></form>
+        <div id="codemirror-vim-command-display-wrapper" style="display: none">
+            Key Buffer: <span id="codemirror-vim-command-display"></span>
+        </div>
 	</div>
 
 	<!-- Terminal page -->

src/NetscriptFunctions.d.ts

@@ -0,0 +1,2 @@
+import { WorkerScript } from "./Netscript/WorkerScript";
+export declare function NetscriptFunctions(workerScript: WorkerScript): any;

src/SaveObject.jsx

@@ -82,6 +82,7 @@ BitburnerSaveObject.prototype.getSaveString = function() {
     this.GlobalAliasesSave          = JSON.stringify(GlobalAliases);
     this.MessagesSave               = JSON.stringify(Messages);
     this.StockMarketSave            = JSON.stringify(StockMarket);
+    console.log(JSON.stringify(Settings));
     this.SettingsSave               = JSON.stringify(Settings);
     this.FconfSettingsSave          = JSON.stringify(FconfSettings);
     this.VersionSave                = JSON.stringify(CONSTANTS.Version);

src/ScriptEditor/ui/Options.ts

@@ -1,3 +1,4 @@
+
 export interface Options {
     theme: string;
     insertSpaces: boolean;

src/ScriptEditor/ui/OptionsPopup.tsx

@@ -10,26 +10,30 @@ interface IProps {
 }
 
 export function OptionsPopup(props: IProps): React.ReactElement {
-    const [options, setOptions] = useState<Options>(props.options);
+    const [theme, setTheme] = useState(props.options.theme);
+    const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
+
     function save() {
-        props.save(options);
+        props.save({
+            theme: theme,
+            insertSpaces: insertSpaces,
+        });
         removePopup(props.id);
     }
 
-    function setTheme(event: React.ChangeEvent<HTMLSelectElement>): void {
+    return (<div className="editor-options-container noselect">
-        setOptions(old => {
+        <div className="editor-options-line">
-            old.theme = event.target.value;
+            <p>Theme: </p>
-            return old;
+            <select className="dropdown" onChange={event => setTheme(event.target.value)} defaultValue={theme}>
-        });
-    }
-
-    return (<>
-        <p>Theme</p>
-        <select className="dropdown" onChange={setTheme} defaultValue={options.theme}>
                 <option value="vs-dark">vs-dark</option>
                 <option value="light">light</option>
             </select>
+        </div>
+        <div className="editor-options-line">
+            <p>Use whitespace over tabs: </p>
+            <input type="checkbox" onChange={event => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
+        </div>
         <br />
-        <StdButton text={"Save"} onClick={save} />
+        <StdButton style={{width: '50px'}} text={"Save"} onClick={save} />
-    </>);
+    </div>);
 }

src/ScriptEditor/ui/Root.tsx

@@ -20,6 +20,30 @@ import { RamCalculationErrorCode } from "../../Script/RamCalculationErrorCodes";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { CursorPositions } from "../../ScriptEditor/CursorPositions";
 import { libSource } from "../NetscriptDefinitions";
+import { NetscriptFunctions } from "../../NetscriptFunctions";
+import { WorkerScript } from "../../Netscript/WorkerScript";
+import { Settings } from "../../Settings/Settings";
+
+let symbols: string[] = [];
+(function() {
+    const ns = NetscriptFunctions(({} as WorkerScript));
+
+    function populate(ns: any): string[] {
+        let symbols: string[] = [];
+        const keys = Object.keys(ns);
+        for(const key of keys) {
+            if(typeof ns[key] === 'object') {
+                symbols.push(key);
+                symbols = symbols.concat(populate(ns[key]));
+            }
+            if(typeof ns[key] === 'function') {
+                symbols.push(key);
+            }
+        }
+        return symbols;
+    }
+    symbols = populate(ns);
+})();
 
 interface IProps {
     filename: string;
@@ -40,7 +64,10 @@ export function Root(props: IProps): React.ReactElement {
     const [filename, setFilename] = useState(props.filename);
     const [code, setCode] = useState<string>(props.code);
     const [ram, setRAM] = useState('');
-    const [options, setOptions] = useState<Options>({theme: 'vs-dark', insertSpaces: false});
+    const [options, setOptions] = useState<Options>({
+        theme: Settings.MonacoTheme,
+        insertSpaces: Settings.MonacoInsertSpaces,
+    });
 
     function save(): void {
         if(editorRef.current !== null) {
@@ -148,13 +175,19 @@ export function Root(props: IProps): React.ReactElement {
 
     function openOptions(): void {
         const id="script-editor-options-popup";
+        const newOptions = {
+            theme: '',
+            insertSpaces: false,
+        };
+        Object.assign(newOptions, options);
         createPopup(id, OptionsPopup, {
             id: id,
-            options: {
+            options: newOptions,
-                theme: options.theme,
+            save: (options: Options) => {
-                insertSpaces: options.insertSpaces,
+                setOptions(options);
-            },
+                Settings.MonacoTheme = options.theme;
-            save: (options: Options) => setOptions(options),
+                Settings.MonacoInsertSpaces = options.insertSpaces;
+            }
         });
     }
 
@@ -204,27 +237,23 @@ export function Root(props: IProps): React.ReactElement {
     function beforeMount(monaco: any): void {
         monaco.languages.registerCompletionItemProvider('javascript', {
             provideCompletionItems: () => {
-                return { suggestions: [
+                const suggestions = [];
-                    {
+                 for(const symbol of symbols) {
-                        label: 'upgradeHomeRam',
+                    suggestions.push({
+                        label: symbol,
                         kind: monaco.languages.CompletionItemKind.Function,
-                        insertText: 'upgradeHomeRam()',
+                        insertText: symbol,
-                        documentation: 'Hello javascript documentation',
-                    },
-                    {
-                        label: 'connect',
-                        kind: monaco.languages.CompletionItemKind.Function,
-                        insertText: 'connect(${1:server})',
                         insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
-                        documentation: 'Hello javascript documentation',
+                    });
-                    },
+                }
-                ] };
+                return { suggestions: suggestions };
             }
         });
         monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, 'netscript.d.ts');
         monaco.languages.typescript.typescriptDefaults.addExtraLib(libSource, 'netscript.d.ts');
     }
 
+    console.log(options);
     return (<div id="script-editor-wrapper">
         <div id="script-editor-filename-wrapper">
             <p id="script-editor-filename-tag" className="noselect"> <strong style={{backgroundColor:'#555'}}>Script name: </strong></p>
@@ -240,7 +269,7 @@ export function Root(props: IProps): React.ReactElement {
             defaultValue={code}
             value={code}
             onChange={updateCode}
-            theme="vs-dark"
+            theme={options.theme}
             options={options}
         />
         <div id="script-editor-buttons-wrapper">

src/Settings/Settings.ts

@@ -85,23 +85,6 @@ interface IDefaultSettings {
  * Represents all possible settings the player wants to customize to their play style.
  */
 interface ISettings extends IDefaultSettings {
-    /**
-     * Which editor should be used (CodeMirror or Ace)?
-     */
-    Editor: EditorSetting;
-
-    /**
-     * The keybinding to use in the script editor.
-     * TODO: This should really be an enum of allowed values.
-     */
-    EditorKeybinding: AceKeybindingSetting | CodeMirrorKeybindingSetting;
-
-    /**
-     * The theme used in the script editor.
-     * TODO: This should really be an enum of allowed values.
-     */
-    EditorTheme: string | CodeMirrorThemeSetting;
-
     /**
      * What order the player's owned Augmentations/Source Files should be displayed in
      */
@@ -112,35 +95,10 @@ interface ISettings extends IDefaultSettings {
      */
     PurchaseAugmentationsOrder: PurchaseAugmentationsOrderSetting;
 
-    /**
+    MonacoTheme: string;
-     * Editor settings to highlight active line.
-     */
-    EditorHighlightActiveLine: boolean;
 
-    /**
+    MonacoInsertSpaces: boolean;
-     * Editor settings to show spaces and tabs.
-     */
-    EditorShowInvisibles: boolean;
 
-    /**
-     * Editor settings to use tabs or 4 spaces.
-     */
-    EditorUseSoftTab: boolean;
-    
-    /**
-     * Editor settings to add matching bracket.
-     */
-    EditorAutoCloseBrackets: boolean;
-    
-    /**
-     * Editor settings to show linting (like missing semicolons)
-     */
-    EditorEnableLinting: boolean;
-    
-    /**
-     * Editor settings to add extra * when entering new line inside a /* comment.
-     */
-    EditorContinueComments: boolean;
 }
 
 const defaultSettings: IDefaultSettings = {
@@ -170,9 +128,6 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
     DisableASCIIArt:                     defaultSettings.DisableASCIIArt,
     DisableHotkeys:                      defaultSettings.DisableHotkeys,
     DisableTextEffects:                  defaultSettings.DisableTextEffects,
-    Editor:                              EditorSetting.CodeMirror,
-    EditorKeybinding:                    CodeMirrorKeybindingSetting.Default,
-    EditorTheme:                         "Monokai",
     Locale:                              "en",
     MaxLogCapacity:                      defaultSettings.MaxLogCapacity,
     MaxPortCapacity:                     defaultSettings.MaxPortCapacity,
@@ -184,16 +139,13 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
     SuppressMessages:                    defaultSettings.SuppressMessages,
     SuppressTravelConfirmation:          defaultSettings.SuppressTravelConfirmation,
     SuppressBladeburnerPopup:            defaultSettings.SuppressBladeburnerPopup,
-    EditorHighlightActiveLine:           true,
+    MonacoTheme:                         'vs-dark',
-    EditorShowInvisibles:                false,
+    MonacoInsertSpaces:                  false,
-    EditorUseSoftTab:                    true,
-    EditorAutoCloseBrackets:             true,
-    EditorEnableLinting:                 true,
-    EditorContinueComments:              true,
     init() {
         Object.assign(Settings, defaultSettings);
     },
     load(saveString: string) {
+        console.log(saveString);
         Object.assign(Settings, JSON.parse(saveString));
     },
 };