Docs: Difference between revisions

From Our World of Text Wiki
Jump to navigation Jump to search
m (added more vara)
m (added more vars)
Line 201: Line 201:
"}";
"}";
}
}
</syntaxhighlight>
|-
|styles
|An object which controls the colors used within a world.
|<syntaxhighlight lang="javascript">
//Sets the public tile color to red.
styles.public = "red";
renderTiles(true);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="60">
var styles = defaultStyles();
</syntaxhighlight>
|-
|nextObjId
|An integer used to track edits.
|<syntaxhighlight lang="javascript">
//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++;
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="61">
var nextObjId = 1;
</syntaxhighlight>
</syntaxhighlight>
|}
|}

Revision as of 15:42, 29 August 2023

Our World Of Text

Code Documentation

OWOT.js

Functions:

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 + ";" +
		"}";
}
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;
Retrieved from "https://wiki.ourworldoftext.com/index.php?title=Docs&oldid=2977"