Docs

Our World Of Text

OWOT.js

Variables:

Name	Description	Example Usage	Code In Use
YourWorld	An object containing the users current text color, cell background color, and chat nick name.	//Sets the users color to a random one. YourWorld.Color = Math.round((Math.random()*16777215));	var YourWorld = { Color: window.localStorage ? +localStorage.getItem("color") : 0, BgColor: -1, Nickname: state.userModel.username };
owot	The DOM canvas element	//Hides the owot canvas. owot.style.opacity = 0;	owot = document.getElementById("owot");
owotCtx	The CanvasRenderingContext2D of the owot canvas	//Clears all the rendered tiles from the view. owotCtx.clearRect(0, 0, owotWidth, owotHeight);	owotCtx = owot.getContext("2d");
textInput	The DOM textarea element used for writing to the owot canvas.	//Paste "hello world" at the current cursor position. textInput.value = `hello world`;	textInput = document.getElementById("textInput");
linkElm	The DOM link element used for user link clicks.	//logs to the console whether or not the link is a javascript link. linkElm.addEventListener(`click`,function(){ console.log(linkParams.protocol === `javascript`); })	linkElm = elm.link_element;
link_div	The DOM link div element used to scale the linkElm to the same size as a cell within the owot canvas.	//Highlights the URL being hovered over. linkDiv.style.background = `rgba(255,255,0,0.5)`	linkDiv = elm.link_div;
colorInput, colorInputBg	The DOM color inputs to select text and cell background color.	//Generate a random color on the text color input field. const randomColor = Math.floor(Math.random()*16777215).toString(16).toUpperCase(); colorInput.jscolor.fromString(`#${randomColor}`);	colorInputBg = modal.addEntry("Cell color", "color").input; colorInput = modal.addEntry("Text color", "color").input;
colorShortcuts, colorShortcutsBg	A DOM div container used as a color pallet for quick access.	//Randomize all color palette colors. const colorButtons = colorShortcuts.querySelectorAll('.color_btn'); colorButtons.forEach(button => { if (button.title !== 'Random color') { const randomColor = `#${Math.floor(Math.random()*16777215).toString(16).toUpperCase()}`; button.style.backgroundColor = randomColor; button.title = randomColor; } });	for(var i = 0; i < colors.length; i++) { var color = colors[i]; colorShortcuts.appendChild(createColorButton(color)); }
enums	An unused object created to store position and write edits.	//Use enums.position as a template for creating an updatedPosition object const newCoord = [7, 5, 3, 1]; const updatedPosition = { ...enums.position }; for (const key in updatedPosition) { if (updatedPosition.hasOwnProperty(key)) { const positionIndex = updatedPosition[key]; updatedPosition[key] = newCoord[positionIndex]; } }	enums.edit = makeEnum(["tileY", "tileX", "charY", "charX", "time", "char", "id", "color"]); enums.position = makeEnum(["tileX", "tileY", "charX", "charY"]);
ws_path	Stores the pages' websocket path.	//Change the socket, refreshing the client ID w.changeSocket(ws_path, true);	var ws_path = createWsPath();
menu, w.menu, Menu	An object containing all of the DOM elements and functions of the menu.	//Adds a button to the menu that alerts "Hello World" when clicked. menu.addOption("alert", function(){alert("Hello World")});	menu = new Menu(elm.menu_elm, elm.nav_elm); w.menu = menu;
menuStyle	A temporary style element created and used to style the menu.	//Generate a random set of colors for the menu each time the menu is hovered over. elm.menu_elm.addEventListener("mouseover", function() { if (menuStyle) { document.head.removeChild(menuStyle) } function makeRandom (){ return Math.floor(Math.random() * 16777215).toString(16).toUpperCase(); } menuStyle = document.createElement("style"); const randomColor = makeRandom(); const randomColorBG = makeRandom(); const randomColorBorder = makeRandom(); menuStyle.innerHTML = ` #menu.hover,#nav {background: #${randomColorBG};border-color: #${randomColorBorder};color: #${randomColor};} #nav li {border-top-color: #${randomColorBorder};} #nav li.hover {background-color: #${randomColorBG};} #coords {background-color: #${randomColorBG};color: #${randomColor};}` document.head.appendChild(menuStyle); })	menuStyle.innerHTML = "#menu.hover, #nav {" + "background: " + color + ";" + "border-color: " + bColor + ";" + "color: " + tColor + ";" + "}\n" + "#nav li {" + "border-top-color: " + bColor + ";" + "}\n" + "#nav li.hover {" + "background-color: " + hColor + ";" + "}\n" + "#coords {" + "background-color: " + bColor + ";" + "color: " + tColor + ";" + "}"; }
styles	An object which controls the colors used within a world.	//Sets the public tile color to red. styles.public = "red"; renderTiles(true);	var styles = defaultStyles();
nextObjId	An integer used to track edits.	//Writes the character "█" at the cursorCoords location, then updates the nextObjId id const [tileX, tileY, charX, charY] = cursorCoords; console.log(currentPosition) const editArray = [tileY, tileX, charY, charX, getDate(),"█", nextObjId] writeBuffer.push(editArray); nextObjId++;	var nextObjId = 1;
owotWidth, owotHeight	The current width and height of the DOM window.	//Estimate the total number of fully visible cells that could exist on the screen const cellAmount = Math.floor(owotHeight/cellH * owotWidth/cellW);	owotWidth = Math.round(window_width * ratio); owotHeight = Math.round(window_height * ratio);
js_alert_active	A bool stating if the javascript alert window is open.		var js_alert_active = false;
worldFocused	A bool stating if the owot canvas is in focus.	//check every 100ms if the owot canvas was last clicked, if it was then randomly change the public tile color. setInterval(function() { if (worldFocused) { styles.public = "#" + Math.floor(Math.random() * 16777215).toString(16).toUpperCase(); w.redraw() } }, 100)	if(closest(target, getChatfield()) || target == elm.chatbar || target == elm.confirm_js_code) { worldFocused = false; } else { worldFocused = true; }
chatResizing	A bool stating if the chat window is being resized.	//check every 100ms if the chat is resizing, if it is, change the public tile color setInterval(function() { if (chatResizing) { styles.public = "#" + Math.floor(Math.random() * 16777215).toString(16).toUpperCase(); w.redraw() } }, 100)	draggable_element(elm.chat_window, null, [ elm.chatbar, elm.chatsend, elm.chat_close, elm.chat_page_tab, elm.chat_global_tab, elm.page_chatfield, elm.global_chatfield ], function() { if(chatResizing) { return -1; } });
tiles	An object containing all the loaded tiles.	//Return any visible links const [X,Y] = cursorCoords; tiles[`${X},${Y}`].properties.cell_props	Tile.set = function(tileX, tileY, data) { var str = tileY + "," + tileX; if(!(str in tiles)) { w.tile.count++; } tiles[str] = data; expandLocalBoundary(tileX, tileY); return data; }