//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.constrandomColor=Math.floor(Math.random()*16777215).toString(16).toUpperCase();colorInput.jscolor.fromString(`#${randomColor}`);
A DOM div container used as a color pallet for quick access.
//Randomize all color palette colors.constcolorButtons=colorShortcuts.querySelectorAll('.color_btn');colorButtons.forEach(button=>{if(button.title!=='Random color'){constrandomColor=`#${Math.floor(Math.random()*16777215).toString(16).toUpperCase()}`;button.style.backgroundColor=randomColor;button.title=randomColor;}});
An unused object created to store position and write edits.
//Use enums.position as a template for creating an updatedPosition objectconstnewCoord=[7,5,3,1];constupdatedPosition={...enums.position};for(constkeyinupdatedPosition){if(updatedPosition.hasOwnProperty(key)){constpositionIndex=updatedPosition[key];updatedPosition[key]=newCoord[positionIndex];}}
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)}functionmakeRandom(){returnMath.floor(Math.random()*16777215).toString(16).toUpperCase();}menuStyle=document.createElement("style");constrandomColor=makeRandom();constrandomColorBG=makeRandom();constrandomColorBorder=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);})
An object which controls the colors used within a world.
//Sets the public tile color to red.styles.public="red";renderTiles(true);
varstyles=defaultStyles();
nextObjId
An integer used to track edits.
//Writes the character "█" at the cursorCoords location, then updates the nextObjId idconst[tileX,tileY,charX,charY]=cursorCoords;console.log(currentPosition)consteditArray=[tileY,tileX,charY,charX,getDate(),"█",nextObjId]writeBuffer.push(editArray);nextObjId++;
varnextObjId=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 screenconstcellAmount=Math.floor(owotHeight/cellH*owotWidth/cellW);
A bool stating if the javascript alert window is open.
varjs_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)
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 colorsetInterval(function(){if(chatResizing){styles.public="#"+Math.floor(Math.random()*16777215).toString(16).toUpperCase();w.redraw()}},100)
An integer of the last date the erase function was utilised.
//Logs the previous erase time in a human-readable way.functionreadPreviousErase(){if(previousErase==0){return}constdate=newDate(previousErase);constoptions={year:'numeric',month:'long',day:'numeric',hour:'2-digit',minute:'2-digit',second:'2-digit',timeZoneName:'short'};console.log("last Erased at:",date.toLocaleString(undefined,options));}
A 2D array coordinate of the position to go when pressing enter.
//Stair-step the return position on "enter"textInput.addEventListener("input",function(e){if(e.inputType==="insertLineBreak"){const[X,x]=verticalEnterPos;verticalEnterPos=[X,(x+1)%16]}})
An object holding data waiting to be rendered to the canvas.
//Writes the character "█" at the cursorCoords locationconst[tileX,tileY,charX,charY]=cursorCoords;consteditArray=[tileY,tileX,charY,charX,getDate(),"█",nextObjId++]writeBuffer.push(editArray);
tellEdit.push(editArray);// track local changeswriteBuffer.push(editArray);// send edits to servernextObjId++;
highlightFlash
An object containing cell coordinates of cells to be highlighted.
//Flashes a random color on all visible cellsfunctionflashRandom(){constvisibleTiles=getVisibleTiles();constcolor=[Math.floor(Math.random()*256),Math.floor(Math.random()*256),Math.floor(Math.random()*256)];constpositions=[];// Generate the positions arrayfor(const[tileX,tileY]ofvisibleTiles){for(letcharY=0;charY<8;charY++){for(letcharX=0;charX<16;charX++){positions.push([tileX,tileY,charX,charY]);}}}// Update highlightFlash based on positionsfor(const[tileX,tileY,charX,charY]ofpositions){consttileKey=`${tileY},${tileX}`;highlightFlash[tileKey]??={};highlightFlash[tileKey][charY]??={};if(!highlightFlash[tileKey][charY][charX]){highlightFlash[tileKey][charY][charX]=[getDate(),color,[...color]];highlightCount++;}}}