Docs: Difference between revisions

From Our World of Text Wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 306: Line 306:
return data;
return data;
}
}
</syntaxhighlight>
|-
|images,
keysPressed,
imgPatterns
|Empty, unused objects.
|
|<syntaxhighlight lang="javascript" line="1" start="68">
var images = {};
var keysPressed = {};
</syntaxhighlight>
|-
|previousErase
|An integer of the last date the erase function was utilised.
|<syntaxhighlight lang="javascript">
//Logs the previous erase time in a human-readable way.
function readPreviousErase() {
  if (previousErase == 0) {
    return
  }
  const date = new Date(previousErase);
  const options = {
    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));
}
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="2608">
function event_input(e) {
if(e.inputType == "deleteContentBackward") {
if(getDate() - previousErase > 25 || !previousErase) {
moveCursor("left", true);
writeChar("\x08", true, null, false, 1);
}
previousErase = getDate();
}
}
</syntaxhighlight>
|-
|verticalEnterPos
|A 2D array coordinate of the position to go when pressing enter.
|<syntaxhighlight lang="javascript">
//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]
  }
})
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="2352">
if(noVertPos) {
coords.tileX = 0;
coords.charX = 0;
} else {
coords.tileX = verticalEnterPos[0];
coords.charX = verticalEnterPos[1];
}
</syntaxhighlight>
|-
|textColorOverride
|public-member-owner bitfield used to modify the text color in fields.
|
|<syntaxhighlight lang="javascript" line="1" start="1477">
if(styles.public_text != "#000" && styles.public_text != "#000000") {
textColorOverride |= public;
} else {
textColorOverride &= textColorOverride ^ public;
}
</syntaxhighlight>
|-
|writeBuffer
|An object holding data waiting to be rendered to the canvas.
|<syntaxhighlight lang="javascript">
//Writes the character "█" at the cursorCoords location
const [tileX, tileY, charX, charY] = cursorCoords;
const editArray = [tileY, tileX, charY, charX, getDate(), "█", nextObjId++]
writeBuffer.push(editArray);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="2179">
tellEdit.push(editArray); // track local changes
writeBuffer.push(editArray); // send edits to server
nextObjId++;
</syntaxhighlight>
|-
|highlightFlash
|An object containing cell coordinates of cells to be highlighted.
|<syntaxhighlight lang="javascript">
//Flashes a random color on all visible cells
function flashRandom() {
  const visibleTiles = getVisibleTiles();
  const color = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)];
  const positions = [];
  // Generate the positions array
  for (const [tileX, tileY] of visibleTiles) {
    for (let charY = 0; charY < 8; charY++) {
      for (let charX = 0; charX < 16; charX++) {
        positions.push([tileX, tileY, charX, charY]);
      }
    }
  }
  // Update highlightFlash based on positions
  for (const [tileX, tileY, charX, charY] of positions) {
    const tileKey = `${tileY},${tileX}`;
    highlightFlash[tileKey] ??= {};
    highlightFlash[tileKey][charY] ??= {};
    if (!highlightFlash[tileKey][charY][charX]) {
      highlightFlash[tileKey][charY][charX] = [getDate(), color, [...color]];
      highlightCount++;
    }
  }
}
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="3988">
if(!highlightFlash[tileY + "," + tileX]) {
highlightFlash[tileY + "," + tileX] = {};
}
</syntaxhighlight>
|-
|highlightCount
|An iterator used to limit the amount of highlights rendered to the canvas.
|<syntaxhighlight lang="javascript">
//Prevents the user from seeing highlights
highlightCount = Infinity;
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="3987">
if(highlightCount > highlightLimit && !unlimited) return;
</syntaxhighlight>
|-
|coloredChars
|An object holding all of the highlighted characters.
|
|<syntaxhighlight lang="javascript" line="1" start="4071">
var container = coloredChars[tileY + "," + tileX];
if(!container) {
container = {};
coloredChars[tileY + "," + tileX] = container;
}
</syntaxhighlight>
|-
|shiftOptState
|An object used to store the viewport values
|
|<syntaxhighlight lang="javascript" line="1" start="79">
var shiftOptState = { prevX: 0, prevY: 0, x1: 0, y1: 0, x2: 0, y2: 0, prevZoom: -1 };
</syntaxhighlight>
</syntaxhighlight>
|}
|}

Revision as of 08:29, 30 August 2023

Our World Of Text

Code Documentation

OWOT.js

Functions:

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;
}
images,

keysPressed, imgPatterns

Empty, unused objects. 
var images = {};
var keysPressed = {};
previousErase An integer of the last date the erase function was utilised. 
//Logs the previous erase time in a human-readable way.
function readPreviousErase() {
  if (previousErase == 0) {
    return
  }
  const date = new Date(previousErase);
  const options = {
    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));
}

function event_input(e) {
	if(e.inputType == "deleteContentBackward") {
		if(getDate() - previousErase > 25 || !previousErase) {
			moveCursor("left", true);
			writeChar("\x08", true, null, false, 1);
		}
		previousErase = getDate();
	}
}
verticalEnterPos 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]
  }
})

		if(noVertPos) {
			coords.tileX = 0;
			coords.charX = 0;
		} else {
			coords.tileX = verticalEnterPos[0];
			coords.charX = verticalEnterPos[1];
		}
textColorOverride public-member-owner bitfield used to modify the text color in fields. 
	if(styles.public_text != "#000" && styles.public_text != "#000000") {
		textColorOverride |= public;
	} else {
		textColorOverride &= textColorOverride ^ public;
	}
writeBuffer An object holding data waiting to be rendered to the canvas. 
//Writes the character "█" at the cursorCoords location
const [tileX, tileY, charX, charY] = cursorCoords;
const editArray = [tileY, tileX, charY, charX, getDate(), "█", nextObjId++]
writeBuffer.push(editArray);

	tellEdit.push(editArray); // track local changes
	writeBuffer.push(editArray); // send edits to server
	nextObjId++;
highlightFlash An object containing cell coordinates of cells to be highlighted. 
//Flashes a random color on all visible cells
function flashRandom() {
  const visibleTiles = getVisibleTiles();
  const color = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)];
  const positions = [];

  // Generate the positions array
  for (const [tileX, tileY] of visibleTiles) {
    for (let charY = 0; charY < 8; charY++) {
      for (let charX = 0; charX < 16; charX++) {
        positions.push([tileX, tileY, charX, charY]);
      }
    }
  }

  // Update highlightFlash based on positions
  for (const [tileX, tileY, charX, charY] of positions) {
    const tileKey = `${tileY},${tileX}`;
    highlightFlash[tileKey] ??= {};
    highlightFlash[tileKey][charY] ??= {};

    if (!highlightFlash[tileKey][charY][charX]) {
      highlightFlash[tileKey][charY][charX] = [getDate(), color, [...color]];
      highlightCount++;
    }
  }
}

		if(!highlightFlash[tileY + "," + tileX]) {
			highlightFlash[tileY + "," + tileX] = {};
		}
highlightCount An iterator used to limit the amount of highlights rendered to the canvas. 
//Prevents the user from seeing highlights
highlightCount = Infinity;

		if(highlightCount > highlightLimit && !unlimited) return;
coloredChars An object holding all of the highlighted characters. 
	var container = coloredChars[tileY + "," + tileX];
	if(!container) {
		container = {};
		coloredChars[tileY + "," + tileX] = container;
	}
shiftOptState An object used to store the viewport values 
var shiftOptState = { prevX: 0, prevY: 0, x1: 0, y1: 0, x2: 0, y2: 0, prevZoom: -1 };
Retrieved from "https://wiki.ourworldoftext.com/index.php?title=Docs&oldid=2980"