Docs

Our World Of Text

OWOT.js

Variables:

Name	Description	Example Usage	Code
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 + ";" + "}"; }