diff --git a/css/styles.scss b/css/styles.scss index 75b051143..e6e4bbfe6 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -391,21 +391,18 @@ a:visited { @-webkit-keyframes status-text{ from{ opacity: 1; - top: 0; } to{ opacity: 0; - top: 0; } } .status-text{ - display: inline; - position: fixed; - top: 0; - -webkit-animation: status-text 3s 1; - background-color: transparent; + display: inline-block; height: 15%; + position: fixed; + z-index: 2; + -webkit-animation: status-text 3s 1; } #status-text-container { @@ -413,14 +410,14 @@ a:visited { } #status-text { - font-size: $defaultFontSize * 1.25; - color: #fff; - right: 0; - bottom: 0; - padding: 4px; - margin-right: 14px; background-color: transparent; - z-index: 2; + font-size: $defaultFontSize * 1.25; + bottom: 0; + color: #fff; + margin-right: 14px; + padding: 4px; + right: 0; + top: 0; width: auto; } diff --git a/src/SaveObject.js b/src/SaveObject.js index 715ffd515..44dc5e254 100644 --- a/src/SaveObject.js +++ b/src/SaveObject.js @@ -23,6 +23,7 @@ import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; import {createElement} from "../utils/uiHelpers/createElement"; import {createPopup} from "../utils/uiHelpers/createPopup"; +import {createStatusText} from "./ui/createStatusText"; import {formatNumber} from "../utils/StringHelperFunctions"; import {removeElementById} from "../utils/uiHelpers/removeElementById"; @@ -97,7 +98,7 @@ BitburnerSaveObject.prototype.saveGame = function(db) { //console.log("Saved game to LocalStorage!"); } catch(e) { if (e.code == 22) { - Engine.createStatusText("Save failed for localStorage! Check console(F12)"); + createStatusText("Save failed for localStorage! Check console(F12)"); console.log("Failed to save game to localStorage because the size of the save file " + "is too large. However, the game will still be saved to IndexedDb if your browser " + "supports it. If you would like to save to localStorage as well, then " + @@ -106,7 +107,7 @@ BitburnerSaveObject.prototype.saveGame = function(db) { } } - Engine.createStatusText("Game saved!"); + createStatusText("Game saved!"); } function loadGame(saveString) { @@ -581,7 +582,7 @@ BitburnerSaveObject.prototype.deleteGame = function(db) { request.onerror = function(e) { console.log("Failed to delete save from indexedDb: " + e); } - Engine.createStatusText("Game deleted!"); + createStatusText("Game deleted!"); } function createNewUpdateText() { diff --git a/src/engine.js b/src/engine.js index 3d82e37fe..f7be961ff 100644 --- a/src/engine.js +++ b/src/engine.js @@ -1222,23 +1222,6 @@ let Engine = { } }, - _prevTimeout: null, - createStatusText: function(txt) { - if (Engine._prevTimeout != null) { - clearTimeout(Engine._prevTimeout); - Engine._prevTimeout = null; - } - var statusText = document.getElementById("status-text") - statusText.style.display = "inline-block"; - statusText.setAttribute("class", "status-text"); - statusText.innerHTML = txt; - Engine._prevTimeout = setTimeout(function() { - statusText.style.display = "none"; - statusText.removeAttribute("class"); - statusText.innerHTML = ""; - }, 3000); - }, - //Used when initializing a game //elems should be an array of all DOM elements under the header closeMainMenuHeader: function(elems) { diff --git a/src/types.ts b/src/types.ts index 42703772f..b3c2d7433 100644 --- a/src/types.ts +++ b/src/types.ts @@ -9,3 +9,8 @@ export type EqualityFunc = (a: T, b: T) => boolean; export interface IMap { [key: string]: T; } + +/** + * Performs some action, with no returned value. + */ +export type Action = () => void; diff --git a/src/ui/createStatusText.ts b/src/ui/createStatusText.ts new file mode 100644 index 000000000..b0a8c1d91 --- /dev/null +++ b/src/ui/createStatusText.ts @@ -0,0 +1,27 @@ +import { getElementById } from "../../utils/uiHelpers/getElementById"; +import { Action } from "../types"; + +const threeSeconds: number = 3000; +let x: number | undefined; + +/** + * Displays a status message to the player for approximately 3 seconds. + * @param text The status text to display + */ +export function createStatusText(text: string) { + if (x !== undefined) { + clearTimeout(x); + // Likely not needed due to clearTimeout, but just in case... + x = undefined; + } + + const statusElement: HTMLElement = getElementById("status-text"); + statusElement.classList.add("status-text"); + statusElement.innerText = text; + const handler: Action = () => { + statusElement.classList.remove("status-text"); + statusElement.innerText = ""; + }; + + x = setTimeout(handler, threeSeconds); +}