Jump to content

Docs: Difference between revisions

← Older edit
VisualWikitext
Poopman (talk | contribs)
editor
40 edits
Dat Hack3r (talk | contribs)
editor
1,336 edits
m Added page to Documentation category.
 
(32 intermediate revisions by 4 users not shown)
Line 1: Line 1:
=Our World Of Text=
=Our World Of Text=
This page contains documentation of the OWOT codebase, examples, and code locations.
If you want to talk about this page, go to [[Talk:Docs]]
If you want to talk about this page, go to [[Talk:Docs]]
===Code Documentation===
===Code Documentation===
Line 5: Line 7:
==OWOT.js==
==OWOT.js==


===Functions:===
=== Event Listeners: ===
{| class="wikitable"
{| class="wikitable"
|+
|+
!Name
!Object
!Description
!Listen Event
!Functions/Events Fired
!Emits
!Example Usage
!Example Usage
!Code In Use
!Related Code
|-
|-
|init_dom()
|window
|
|load
|
|
|"clientLoaded"
|
|
|<syntaxhighlight lang="javascript" line="1" start="187">
window.addEventListener("load", function() {
w.emit("clientLoaded");
});
</syntaxhighlight>
|-
|-
|getWndWidth()
|
|
|
|hash change
|manageCoordHash();
|
|
|https://ourworldoftext.com/#x:10,y:20
|<syntaxhighlight lang="javascript" line="1" start="5639">
window.onhashchange = function(e) {
manageCoordHash();
}
</syntaxhighlight>
|-
|-
|getWndHeight()
|
|
|before unload
|if(writeBuffer.length) flushWrites();
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="5643">
window.onbeforeunload = function() {
if(writeBuffer.length) flushWrites();
}
</syntaxhighlight>
|-
|-
|decimal(percentage)
|
|
|
|resize
|event_resize
|("resize", ratio)
|
|
|<syntaxhighlight lang="javascript" line="1" start="1192">
window.addEventListener("resize", event_resize);
</syntaxhighlight>
|-
|-
|normFontSize(size)
|document
|
|select start
|self
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="5647">
document.onselectstart = function(e) {
var target = e.target;
if(closest(target, getChatfield()) || target == elm.chatbar || closest(target, elm.confirm_js_code) || closest(target, elm.announce_text)) {
return true;
}
return Modal.isOpen;
}
</syntaxhighlight>
|-
|-
|deviceRatio()
|
|
|
|
|-
|key down
|makeEnum(vars)
|
|
* keydown_regionSelect
* event_keydown_copy_char
* event_keydown_copy_color
* event_keydown
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="525">
document.addEventListener("keydown", keydown_regionSelect);
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="1344">
document.addEventListener("keydown", event_keydown_copy_char);
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="1371">
document.addEventListener("keydown", event_keydown_copy_color);
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="2955">
document.addEventListener("keydown", event_keydown);
</syntaxhighlight>
|-
|-
|setRGBColorPicker(r, g, b)
|
|
|
|key up
|event_keyup
|("keyUp", e);
|
|
|<syntaxhighlight lang="javascript" line="1" start="2957">
function event_keyup(e) {
w.emit("keyUp", e);
}
</syntaxhighlight>
|-
|-
|setRGBBgColorPicker(r, g, b)
|
|
|mouse move
|
|
* mousemove_tileProtectAuto
* mousemove_linkAuto
* event_mousemove
|("mouseMove", {
tileX: tileX,
tileY: tileY,
charX: charX,
charY: charY,
pageX: pageX,
pageY: pageY
})
|
|
|<syntaxhighlight lang="javascript" line="1" start="945">
document.addEventListener("mousemove", mousemove_tileProtectAuto);
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="1075">
document.addEventListener("mousemove", mousemove_linkAuto);
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="3321">
document.addEventListener("mousemove", event_mousemove);
</syntaxhighlight>
|-
|-
|setColorPickerRandom()
|
|
|
|mouse down
|event_mousedown
|("mouseDown", {
tileX: pos[0],
tileY: pos[1],
charX: pos[2],
charY: pos[3],
pageX: pageX,
pageY: pageY
});
|
|
|<syntaxhighlight lang="javascript" line="1" start="1771">
document.addEventListener("mousedown", event_mousedown);
</syntaxhighlight>
|-
|-
|updateColorPicker()
|
|
|mouse up
|event_mouseup
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="1947">
document.addEventListener("mouseup", event_mouseup);
</syntaxhighlight>
|-
|-
|updateBgColorPicker()
|
|
|
|mouse enter
|event_mouseenter
|("mouseEnter", e)
|
|
|<syntaxhighlight lang="javascript" line="1" start="1958">
document.addEventListener("mouseenter", event_mouseenter);
</syntaxhighlight>
|-
|-
|updateCoordDisplay()
|
|
|touch start
|event_touchstart
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="3452">
document.addEventListener("touchstart", event_touchstart);
</syntaxhighlight>
|-
|-
|createColorButton(color, isHighlight)
|
|
|touch end
|event_touchend
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="3453">
document.addEventListener("touchend", event_touchend);
</syntaxhighlight>
|-
|-
|addColorShortcuts()
|
|
|touch move
|event_touchmove
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="3454">
document.addEventListener("touchmove", event_touchmove, { passive: false });
</syntaxhighlight>
|-
|-
|draggable_element(dragger, dragged, exclusions, onDrag)
|
|
|wheel
|
|
* event_wheel
* event_wheel_zoom
|("scroll", {
deltaX: -deltaX,
deltaY: -deltaY
});
|
|
|<syntaxhighlight lang="javascript" line="1" start="3487">
document.addEventListener("wheel", event_wheel);
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="3537">
document.addEventListener("wheel", event_wheel_zoom, {
passive: false
});
</syntaxhighlight>
|-
|-
|resizeChat(width, height)
|document.body
|key down
|
|
* keydown_tileProtectAuto
* keydown_linkAuto
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="1012">
document.body.addEventListener("keydown", keydown_tileProtectAuto);
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="1138">
document.body.addEventListener("keydown", keydown_linkAuto);
</syntaxhighlight>
|-
|-
|getStoredNickname()
|
|
|key up
|onKeyUp
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="1164">
document.body.addEventListener("keyup", onKeyUp);
</syntaxhighlight>
|-
|-
|storeNickname()
|w
|
|cursor Move
|updateCoordDisplay
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="280">
w.on("cursorMove", updateCoordDisplay);
</syntaxhighlight>
|-
|-
|getStoredConfig()
|
|
|cursor Hide
|updateCoordDisplay
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="281">
w.on("cursorHide", updateCoordDisplay);
</syntaxhighlight>
|-
|-
|storeConfig()
|
|
|tiles Rendered
|self
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="4747">
w.on("tilesRendered", function() {
for(var i = 0; i < regionSelections.length; i++) {
var reg = regionSelections[i];
if(reg.regionCoordA && reg.regionCoordB) reg.setSelection(reg.regionCoordA, reg.regionCoordB);
}
});
</syntaxhighlight>
|-
|-
|loadBackgroundData(cb, timeout_cb)
|
|
|cursor Move
|setClientGuestCursorPosition
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="4754">
w.on("cursorMove", function(pos) {
setClientGuestCursorPosition(pos.tileX, pos.tileY, pos.charX, pos.charY);
});
</syntaxhighlight>
|-
|-
|keydown_regionSelect(e)
|
|
|cursor Hide
|setClientGuestCursorPosition
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="4758">
w.on("cursorHide", function() {
setClientGuestCursorPosition(0, 0, 0, 0, true);
});
</syntaxhighlight>
|-
|-
|handleRegionSelection(coordA, coordB, regWidth, regHeight)
|elm.textInput
|
|
* keydown
* input
|
|
|
* stabilizeTextInput
|-
* event_input
|buildFontTemplate(set)
|
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="2618">
elm.textInput.addEventListener("keydown", stabilizeTextInput);
elm.textInput.addEventListener("input", event_input);
</syntaxhighlight>
|-
|-
|rebuildFontTemplates()
|elm.owot
|
|context menu
|self
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="5628">
elm.owot.oncontextmenu = function() {
if(ignoreCanvasContext) {
ignoreCanvasContext = false;
elm.owot.style.pointerEvents = "none";
setTimeout(function() {
ignoreCanvasContext = true;
elm.owot.style.pointerEvents = "";
}, 1);
}
}
</syntaxhighlight>
|-
|-
|updateScaleConsts()
|elm.coords
|click
|self
|
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="283">
|-
elm.coords.onclick = function() {
|setupTextRenderCtx()
showCursorCoordinates = !showCursorCoordinates;
|
if(showCursorCoordinates) {
elm.cursor_coords.style.display = "";
updateCoordDisplay();
} else {
elm.cursor_coords.style.display = "none";
updateCoordDisplay();
}
}
</syntaxhighlight>
|}
 
===Functions:===
{| class="wikitable"
|+
!Name
!Description
!Example Usage
!Code In Use
|-
|init_dom()
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="11">
function init_dom() {
owot = document.getElementById("owot");
owot.style.display = "block";
owot.style.cursor = defaultCursor;
owotCtx = owot.getContext("2d");
textInput = document.getElementById("textInput");
textInput.value = "";
linkElm = elm.link_element;
linkDiv = elm.link_div;
updateCoordDisplay();
initTextDecoBar();
defineElements({
owot: owot,
textInput: textInput
});
}
</syntaxhighlight>
|-
|-
|reloadRenderer()
|getWndWidth()
|
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="27">
function getWndWidth() {
return document.body.clientWidth || window.innerWidth;
}
</syntaxhighlight>
|-
|-
|updateRendererZoom(percentage)
|getWndHeight()
|
|
|
|
|
|
|-
|-
|zoomGarbageCollect()
|decimal(percentage)
|
|
|
|
|
|
|-
|-
|changeZoom(percentage, isPartial)
|normFontSize(size)
|
|
|
|
|
|
|-
|-
|setZoombarValue()
|deviceRatio()
|
|
|
|
|
|
|-
|-
|fromLogZoom(val)
|makeEnum(vars)
|
|
|
|
|
|
|-
|-
|toLogZoom(val)
|setRGBColorPicker(r, g, b)  
|
|
|
|
|
|
|-
|-
|browserZoomAdjust(initial)
|setRGBBgColorPicker(r, g, b)
|
|
|
|
|
|
|-
|-
|updateAutoProg()
|setColorPickerRandom()
|
|
|
|
|
|
|-
|-
|mousemove_tileProtectAuto()
|updateColorPicker()
|
|
|
|
|
|
|-
|-
|keydown_tileProtectAuto(e)
|updateBgColorPicker()
|
|
|
|
|
|
|-
|-
|mousemove_linkAuto()
|updateCoordDisplay()
|
|
|
|
|
|
|-
|-
|keydown_linkAuto(e)
|createColorButton(color, isHighlight)
|
|
|
|
|
|
|-
|-
|onKeyUp(e)
|addColorShortcuts()
|
|
|
|
|
|
|-
|-
|adjust_scaling_DOM(ratio)
|draggable_element(dragger, dragged, exclusions, onDrag)
|
|
|
|
|
|
|-
|-
|event_resize()
|resizeChat(width, height)
|
|
|
|
|
|
|-
|-
|getChar(tileX, tileY, charX, charY)
|getStoredNickname()
|
|
|
|
|
|
|-
|-
|getCharColor(tileX, tileY, charX, charY)
|storeNickname()
|
|
|
|
|
|
|-
|-
|getCharBgColor(tileX, tileY, charX, charY)
|getStoredConfig()
|
|
|
|
|
|
|-
|-
|getCharProtection(tileX, tileY, charX, charY)
|storeConfig()
|
|
|
|
|
|
|-
|-
|getCharDecoration(tileX, tileY, charX, charY)
|loadBackgroundData(cb, timeout_cb)
|
|
|
|
|
|
|-
|-
|getCharInfo(tileX, tileY, charX, charY)  
|keydown_regionSelect(e)
|
|
|
|
|
|
|-
|-
|getCharInfoXY(x, y)
|handleRegionSelection(coordA, coordB, regWidth, regHeight)  
|
|
|
|
|
|
|-
|-
|getLink(tileX, tileY, charX, charY)
|buildFontTemplate(set)
|
|
|
|
|
|
|-
|-
|getLinkXY(x, y)
|rebuildFontTemplates()
|
|
|
|
|
|
|-
|-
|event_keydown_copy_char(e)
|updateScaleConsts()
|
|
|
|
|
|
|-
|-
|event_keydown_copy_color(e)
|setupTextRenderCtx()
|
|
|
|
|
|
|-
|-
|resolveColorValue(val)
|reloadRenderer()
|
|
|
|
|
|
|-
|-
|isTileStale(tileX, tileY)
|updateRendererZoom(percentage)
|
|
|
|
|
|
|-
|-
|checkTextColorOverride()
|zoomGarbageCollect()
|
|
|
|
|
|
|-
|-
|menu_color(color)
|changeZoom(percentage, isPartial)
|
|
|
|
|
|
|-
|-
|defaultStyles()
|setZoombarValue()
|
|
|
|
|
|
|-
|-
|manageCoordHash()
|fromLogZoom(val)
|
|
|
|
|
|
|-
|-
|getWorldProps(world, type, cb)  
|toLogZoom(val)
|
|
|
|
|
|
|-
|-
|stopLinkUI()
|browserZoomAdjust(initial)
|
|
|
|
|
|
|-
|-
|removeTileProtectHighlight()
|updateAutoProg()
|
|
|
|
|
|
|-
|-
|stopTileUI()
|mousemove_tileProtectAuto()
|
|
|
|
|
|
|-
|-
|doLink()
|keydown_tileProtectAuto(e)
|
|
|
|
|
|
|-
|-
|doProtect()
|mousemove_linkAuto()
|
|
|
|
|
|
|-
|-
|triggerUIClick()
|keydown_linkAuto(e)
|
|
|
|
|
|
|-
|-
|event_mousedown(e, arg_pageX, arg_pageY)  
|onKeyUp(e)
|
|
|
|
|
|
|-
|-
|renderCursor(coords)
|adjust_scaling_DOM(ratio)
|
|
|
|
|
|
|-
|-
|removeCursor()
|event_resize()
|
|
|
|
|
|
|-
|-
|stopDragging()
|getChar(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|event_mouseup(e, arg_pageX, arg_pageY)
|getCharColor(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|event_mouseleave(e)
|getCharBgColor(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|event_mouseenter(e)
|getCharProtection(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|is_link(tileX, tileY, charX, charY)
|getCharDecoration(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|flushWrites()
|getCharInfo(tileX, tileY, charX, charY)  
|
|
|
|
|
|
|-
|-
|setWriteInterval()
|getCharInfoXY(x, y)
|
|
|
|
|
|
|-
|-
|moveCursor(direction, preserveVertPos, amount)
|getLink(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|markCharacterAsUndoable(tileX, tileY, charX, charY)
|getLinkXY(x, y)
|
|
|
|
|
|
|-
|-
|isCharLatestInUndoBuffer(tileX, tileY, charX, charY)  
|event_keydown_copy_char(e)
|
|
|
|
|
|
|-
|-
|writeCharTo(char, charColor, tileX, tileY, charX, charY, undoFlags, undoOffset, charBgColor, dB, dI, dU, dS)
|event_keydown_copy_color(e)
|
|
|
|
|
|
|-
|-
|undoWrite()
|resolveColorValue(val)
|
|
|
|
|
|
|-
|-
|redoWrite()
|isTileStale(tileX, tileY)
|
|
|
|
|
|
|-
|-
|writeCharToXY(char, charColor, x, y, charBgColor, dB, dI, dU, dS)
|checkTextColorOverride()
|
|
|
|
|
|
|-
|-
|writeChar(char, doNotMoveCursor, color, noNewline, undoCursorOffset, bgColor, dB, dI, dU, dS)
|menu_color(color)
|
|
|
|
|
|
|-
|-
|coordinateAdd(tileX1, tileY1, charX1, charY1, tileX2, tileY2, charX2, charY2)  
|defaultStyles()
|
|
|
|
|
|
|-
|-
|propagatePosition(coords, char, noEnter, noVertPos)
|manageCoordHash()
|
|
|
|
|
|
|-
|-
|textcode_parser(value, coords, defaultColor, defaultBgColor)
|getWorldProps(world, type, cb)  
|
|
|
|
|
|
|-
|-
|stabilizeTextInput()
|stopLinkUI()
|
|
|
|
|
|
|-
|-
|event_input(e)
|removeTileProtectHighlight()
|
|
|
|
|
|
|-
|-
|
|stopTileUI()
|
|
|
|
|
|
|-
|-
|
|doLink()
|
|
|
|
|
|
|-
|-
|
|doProtect()
|
|
|
|
|
|
|-
|-
|
|triggerUIClick()
|
|
|
|
|
|
|-
|-
|
|event_mousedown(e, arg_pageX, arg_pageY)
|
|
|
|
|
|
|-
|-
|
|renderCursor(coords)
|
|
|
|
|
|
|-
|-
|
|removeCursor()
|
|
|
|
|
|
|-
|-
|
|stopDragging()
|
|
|
|
|
|
|-
|-
|
|event_mouseup(e, arg_pageX, arg_pageY)
|
|
|
|
|
|
|-
|-
|
|event_mouseleave(e)
|
|
|
|
|
|
|-
|-
|
|event_mouseenter(e)
|
|
|
|
|
|
|-
|-
|
|is_link(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|
|flushWrites()
|
|
|
|
|
|
|-
|-
|
|setWriteInterval()
|
|
|
|
|
|
|-
|-
|
|moveCursor(direction, preserveVertPos, amount)
|
|
|
|
|
|
|-
|-
|
|markCharacterAsUndoable(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|
|isCharLatestInUndoBuffer(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|
|writeCharTo(char, charColor, tileX, tileY, charX, charY, undoFlags, undoOffset, charBgColor, dB, dI, dU, dS)
|
|
|
|
|
|
|-
|-
|
|undoWrite()
|
|
|
|
|
|
|-
|-
|
|redoWrite()
|
|
|
|
|
|
|-
|-
|
|writeCharToXY(char, charColor, x, y, charBgColor, dB, dI, dU, dS)
|
|
|
|
|
|
|-
|-
|
|writeChar(char, doNotMoveCursor, color, noNewline, undoCursorOffset, bgColor, dB, dI, dU, dS)
|
|
|
|
|
|
|-
|-
|
|coordinateAdd(tileX1, tileY1, charX1, charY1, tileX2, tileY2, charX2, charY2)
|
|
|
|
|
|
|-
|-
|
|propagatePosition(coords, char, noEnter, noVertPos)
|
|
|
|
|
|
|-
|-
|
|textcode_parser(value, coords, defaultColor, defaultBgColor)
|
|
|
|
|
|
|-
|-
|
|stabilizeTextInput()
|
|
|
|
|
|
|-
|-
|
|event_input(e)
|
|
|
|
|
|
|-
|-
|
|stopPasting()
|
|
|
|
|
|
|-
|-
|
|autoArrowKeyMoveStart(dir)
|
|
|
|
|
|
|-
|-
|
|autoArrowKeyMoveStop(dir)
|
|
|
|
|
|
|-
|-
|
|event_keydown(e)
|
|
|
|
|
|
|-
|-
|
|event_keyup(e)
|
|
|
|
|
|
|-
|-
|
|isMainPage()
|
|
|
|
|
|
|-
|-
|
|alertJS(data, restrict)
|
|
|
|
|
|
|-
|-
|
|closeJSAlert()
|
|
|
|
|
|
|-
|-
|
|executeJS(code)
|
|
|
|
|
|
|-
|-
|
|confirmRunJSLink(data)
|
|
|
|
|
|
|-
|-
|
|runJSLink(data, restrict)
|
|
|
|
|
|
|-
|-
|
|coord_link_click(evt)
|
|
|
|
|
|
|-
|-
|
|url_link_click(evt)
|
|
|
|
|
|
|-
|-
|
|updateHoveredLink(mouseX, mouseY, evt, safe)
|
|
|
|
|
|
|-
|-
|
|event_mousemove(e, arg_pageX, arg_pageY)
|
|
|
|
|
|
|-
|-
|
|getCenterTouchPosition(touches)
|
|
|
|
|
|
|-
|-
|
|event_touchstart(e)
|
|
|
|
|
|
|-
|-
|
|event_touchend(e)
|
|
|
|
|
|
|-
|-
|
|event_touchmove(e)
|
|
|
|
|
|
|-
|-
|
|touch_pagePos(e)
|
|
|
|
|
|
|-
|-
|
|event_wheel(e)
|
|
|
|
|
|
|-
|-
|
|event_wheel_zoom(e)
|
|
|
|
|
|
|-
|-
|
|convertKeyCode(key)
|
|
|
|
|
|
|-
|-
|
|checkKeyPress(e, combination)
|
|
|
|
|
|
|-
|-
|
|checkKeyPatterns(combination)
|
|
|
|
|
|
|-
|-
|
|createWsPath()
|
|
|
|
|
|
|-
|-
|
|createSocket(getChatHist)
|
|
|
|
|
|
|-
|-
|
|cullRanges(map, width, height)
|
|
|
|
|
|
|-
|-
|
|updateRemoteBoundary()
|
|
|
|
|
|
|-
|-
|
|clearRemoteBoundary()
|
|
|
|
|
|
|-
|-
|
|expandLocalBoundary(x, y)
|
|
|
|
|
|
|-
|-
|
|getAndFetchTiles()
|
|
|
|
|
|
|-
|-
|
|clearTiles(all)
|
|
|
|
|
|
|-
|-
|
|clearVisibleTiles()
|
|
|
|
|
|
|-
|-
|
|highlight(positions, unlimited, color)
|
|
|
|
|
|
|-
|-
|
|blankTile()
|
|
|
|
|
|
|-
|-
|
|colorChar(tileX, tileY, charX, charY, colorClass)
|
|
|
|
|
|
|-
|-
|
|uncolorChar(tileX, tileY, charX, charY, colorClass)
|
|
|
|
|
|
|-
|-
|
|decodeCharProt(str)
|
|
|
|
|
|
|-
|-
|
|encodeCharProt(array, encoding)
|
|
|
|
|
|
|-
|-
|
|getCharTextDecorations(char)
|
|
|
|
|
|
|-
|-
|
|setCharTextDecorations(char, bold, italic, under, strike)
|
|
|
|
|
|
|-
|-
|
|resolveCharEmojiCombinations(char)
|
|
|
|
|
|
|-
|-
|
|detectCharEmojiCombinations(char)
|
|
|
|
|
|
|-
|-
|
|clearCharTextDecorations(char)
|
|
|
|
|
|
|-
|-
|
|clearAllGuestCursors()
|
|
|
|
|
|
|-
|-
|
|renderLoop()
|
|
|
|
|
|
|-
|-
|
|protectPrecisionOption(option)
|
|
|
|
|
|
|-
|-
|
|toggleTextDecoBar()
|
|
|
|
|
|
|-
|-
|
|initTextDecoBar()
|
|
|
|
|
|
|-
|-
|
|protectSelectionStart(start, end, width, height)
|
|
|
|
|
|
|-
|-
|
|protectSelectionCancel()
|
|
|
|
|
|
|-
|-
|
|protectSelection()
|
|
|
|
|
|
|-
|-
|
|buildMenu()
|
|
|
|
|
|
|-
|-
|
|updateMenuEntryVisiblity()
|
|
|
|
|
|
|-
|-
|
|regionSelectionsActive()
|
|
|
|
|
|
|-
|-
|
|RegionSelection()
|
|
|
|
|
|
|-
|-
|
|setClientGuestCursorPosition(tileX, tileY, charX, charY, hidden)
|
|
|
|
|
|
|-
|-
|
|sendCursorPosition()
|
|
|
|
|
|
|-
|-
|
|disableBgColorPicker()
|
|
|
|
|
|
|-
|-
|
|enableBgColorPicker()
|
|
|
|
|
|
|-
|-
|
|makeCoordLinkModal()
|
|
|
|
|
|
|-
|-
|
|makeCoordGotoModal()
|
|
|
|
|
|
|-
|-
|
|makeURLModal()
|
|
|
|
|
|
|-
|-
|
|buildBackgroundColorModal(modal)
|
|
|
|
|
|
|-
|-
|
|resetColorModalVisibility()
|
|
|
|
|
|
|-
|-
|
|makeColorModal()
|
|
|
|
|
|
|-
|-
|
|makeSelectionModal()
|
|
|
|
|
|
|-
|-
|
|searchTellEdit(tileX, tileY, charX, charY)
|
|
|
|
|
|
|-
|-
|
|tile_offset_object(data, tileOffX, tileOffY)
|
|
|
|
|
|
|-
|-
|begin()
|
|
|
|
|
|
|
|}
 
===Variables:===
{| class="wikitable mw-collapsible"
|+
!Name
!Description
!Example Usage
!Code In Use
|-
|-
|
|YourWorld
|
|An object containing the users current text color, cell background color, and chat nick name.
|
|<syntaxhighlight lang="javascript">
|
//Sets the users color to a random one.
|-
YourWorld.Color = Math.round((Math.random()*16777215));
|
</syntaxhighlight>
|
|<syntaxhighlight lang="javascript" line="1">
|
var YourWorld = {
|
Color: window.localStorage ? +localStorage.getItem("color") : 0,
BgColor: -1,
Nickname: state.userModel.username
};
</syntaxhighlight>
|-
|-
|
|owot
|
|The DOM canvas element
|
|<syntaxhighlight lang="javascript">
|
//Hides the owot canvas.
owot.style.opacity = 0;
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="12">
owot = document.getElementById("owot");
</syntaxhighlight>
|-
|-
|
|owotCtx
|
|The CanvasRenderingContext2D of the owot canvas
|
|<syntaxhighlight lang="javascript">
|
//Clears all the rendered tiles from the view.
|-
owotCtx.clearRect(0, 0, owotWidth, owotHeight);
|
</syntaxhighlight>
|
|<syntaxhighlight lang="javascript" line="1" start="15">
|
owotCtx = owot.getContext("2d");
|
</syntaxhighlight>
|-
|-
|
|textInput
|
|The DOM textarea element used for writing to the owot canvas.
|
|<syntaxhighlight lang="javascript">
|
//Paste "hello world" at the current cursor position.
textInput.value = `hello world`;
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="16">
textInput = document.getElementById("textInput");
</syntaxhighlight>
|-
|-
|
|linkElm
|
|The DOM link element used for user link clicks.
|
|<syntaxhighlight lang="javascript">
|
//logs to the console whether or not the link is a javascript link.
linkElm.addEventListener(`click`,function(){
console.log(linkParams.protocol === `javascript`);                 
})
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="18">
linkElm = elm.link_element;
</syntaxhighlight>
|-
|-
|
|link_div
|
|The DOM link div element used to scale the linkElm to the same size as a cell within the owot canvas.
|
|<syntaxhighlight lang="javascript">
|
//Highlights the URL being hovered over.
linkDiv.style.background = `rgba(255,255,0,0.5)`
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="19">
linkDiv = elm.link_div;
</syntaxhighlight>
|-
|-
|
|colorInput, colorInputBg
|
|The DOM color inputs to select text and cell background color.
|
|<syntaxhighlight lang="javascript">
|
//Generate a random color on the text color input field.
const randomColor = Math.floor(Math.random()*16777215).toString(16).toUpperCase();
colorInput.jscolor.fromString(`#${randomColor}`);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="5718">
colorInputBg = modal.addEntry("Cell color", "color").input;
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="5766">
colorInput = modal.addEntry("Text color", "color").input;
</syntaxhighlight>
|-
|-
|
|colorShortcuts, colorShortcutsBg
|
|A DOM div container used as a color pallet for quick access.
|
|<syntaxhighlight lang="javascript">
|
//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;
    }
  });
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="330">
for(var i = 0; i < colors.length; i++) {
var color = colors[i];
colorShortcuts.appendChild(createColorButton(color));
}
</syntaxhighlight>
|-
|-
|
|enums
|
|An unused object created to store position and write edits.
|
|<syntaxhighlight lang="javascript">
|
//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];
|
  }
|
}
|
</syntaxhighlight>
|
|<syntaxhighlight lang="javascript" line="1" start="54">
enums.edit = makeEnum(["tileY", "tileX", "charY", "charX", "time", "char", "id", "color"]);
enums.position = makeEnum(["tileX", "tileY", "charX", "charY"]);
</syntaxhighlight>
|-
|-
|
|ws_path
|
|Stores the pages' websocket path.
|
|<syntaxhighlight lang="javascript">
|
//Change the socket, refreshing the client ID
w.changeSocket(ws_path, true);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="57">
var ws_path = createWsPath();
 
</syntaxhighlight>
|-
|-
|
|menu,
|
w.menu,
|
Menu
|
|An object containing all of the DOM elements and functions of the menu.
|-
|<syntaxhighlight lang="javascript">
|
//Adds a button to the menu that alerts "Hello World" when clicked.
|
menu.addOption("alert", function(){alert("Hello World")});
|
</syntaxhighlight>
|
|<syntaxhighlight lang="javascript" line="1" start="4490">
menu = new Menu(elm.menu_elm, elm.nav_elm);
w.menu = menu;
</syntaxhighlight>
|-
|-
|
|menuStyle
|
|A temporary style element created and used to style the menu.
|
|<syntaxhighlight lang="javascript">
|
//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);
})
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="1529">
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 + ";" +
"}";
}
</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>
|-
|-
|
|owotWidth,
|
owotHeight
|
|The current width and height of the DOM window.
|
|<syntaxhighlight lang="javascript">
|-
//Estimate the total number of fully visible cells that could exist on the screen
|
const cellAmount = Math.floor(owotHeight/cellH * owotWidth/cellW);
|
</syntaxhighlight>
|
|<syntaxhighlight lang="javascript" line="1" start="1170">
|
owotWidth = Math.round(window_width * ratio);
owotHeight = Math.round(window_height * ratio);
</syntaxhighlight>
|-
|-
|js_alert_active
|A bool stating if the javascript alert window is open.
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="64">
|
var js_alert_active = false;
|
</syntaxhighlight>
|-
|-
|
|worldFocused
|
|A bool stating if the owot canvas is in focus.
|
|<syntaxhighlight lang="javascript">
|
//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)
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="1737">
if(closest(target, getChatfield()) || target == elm.chatbar || target == elm.confirm_js_code) {
worldFocused = false;
} else {
worldFocused = true;
}
</syntaxhighlight>
|-
|-
|
|chatResizing
|
|A bool stating if the chat window is being resized.
|
|<syntaxhighlight lang="javascript">
|
//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)
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="441">
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;
}
});
</syntaxhighlight>
|-
|-
|
|tiles
|
|An object containing all the loaded tiles.
|
|<syntaxhighlight lang="javascript">
|
//Return any visible links
const [X,Y] = cursorCoords;
tiles[`${X},${Y}`].properties.cell_props
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="1416">
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;
}
</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>
|-
|backgroundImage
|
|
|
|
|
|
|-
|-
|backgroundPattern
|
|
|
|
Line 1,153: Line 1,651:
|
|
|-
|-
|
|backgroundPatternSize
|
|
|
|
|
|
|-
|-
|guestCursorsByTile
|
|
|
|
Line 1,163: Line 1,662:
|
|
|-
|-
|
|guestCursors
|
|
|
|
|
|
|-
|-
|clientGuestCursorPos
|
|
|
|
Line 1,173: Line 1,673:
|
|
|-
|-
|
|disconnectTimeout
|
|
|
|
|
|
|-
|-
|menuOptions
|
|
|
|
Line 1,183: Line 1,684:
|
|
|-
|-
|
|undoBuffer
|
|
|
|
|
|
|-
|-
|textDecorationOffset
|
|
|
|
Line 1,193: Line 1,695:
|
|
|-
|-
|
|textDecorationModes
|
|
|
|
|
|
|-
|-
|fontTemplate
|
|
|
|
Line 1,203: Line 1,706:
|
|
|-
|-
|
|specialFontTemplate
|
|
|
|
|
|
|-
|-
|fontOrder
|
|
|
|
Line 1,213: Line 1,717:
|
|
|-
|-
|
|specialFontOrder
|
|
|
|
|
|
|-
|-
|initiallyFetched
|
|
|
|
Line 1,223: Line 1,728:
|
|
|-
|-
|
|lastLinkHover
|
|
|
|
|
|
|-
|-
|lastTileHover
|
|
|
|
Line 1,233: Line 1,739:
|
|
|-
|-
|
|regionSelections
|
|
|
|
|
|
|-
|-
|specialClientHooks
|
|
|
|
Line 1,243: Line 1,750:
|
|
|-
|-
|
|specialClientHookMap
|
|
|
|
|
|
|-
|-
|bgImageHasChanged
|
|
|
|
Line 1,253: Line 1,761:
|
|
|-
|-
|
|remoteBoundary
|
|
|
|
|
|
|-
|-
|boundaryStatus
|
|
|
|
Line 1,263: Line 1,772:
|
|
|-
|-
|
|positionX
|
|
|
|
|
|
|-
|-
|positionY
|
|
|
|
Line 1,273: Line 1,783:
|
|
|-
|-
|
|coordSizeX
|
|
|
|
|
|
|-
|-
|coordSizeY
|
|
|
|
Line 1,283: Line 1,794:
|
|
|-
|-
|
|gridEnabled
|
|
|
|
|
|
|-
|-
|subgridEnabled
|
|
|
|
Line 1,293: Line 1,805:
|
|
|-
|-
|
|linksEnabled
|
|
|
|
|
|
|-
|-
|linksRendered
|
|
|
|
Line 1,303: Line 1,816:
|
|
|-
|-
|
|colorsEnabled
|
|
|
|
|
|
|-
|-
|backgroundEnabled
|
|
|
|
Line 1,313: Line 1,827:
|
|
|-
|-
|
|scrollingEnabled
|
|
|
|
|
|
|-
|-
|
|zoomRatio
|
|
|
|
|
|
|-
|-
|
|protectPrecision
|
|
|
|
|
|
|-
|-
|checkTileFetchInterval
|
|
|
|
Line 1,333: Line 1,848:
|
|
|-
|-
|
|zoom
|
|
|
|
|
|
|-
|-
|
|userZoom
|
|
|
|
|
|
|-
|-
|unloadTilesAuto
|
|
|
|
Line 1,348: Line 1,864:
|
|
|-
|-
|
|useHighlight
|
|
|
|
|
|
|-
|-
|
|highlightLimit
|
|
|
|
|
|
|-
|-
|ansiBlockFill
|
|
|
|
Line 1,363: Line 1,880:
|
|
|-
|-
|
|colorizeLinks
|
|
|
|
|
|
|-
|-
|
|brBlockFill
|
|
|
|
|
|
|-
|-
|tileFetchOffsetX
|
|
|
|
Line 1,378: Line 1,896:
|
|
|-
|-
|
|tileFetchOffsetY
|
|
|
|
|
|
|-
|-
|
|ignoreCanvasContext
|
|
|
|
|
|
|-
|-
|elementSnapApprox
|
|
|
|
Line 1,393: Line 1,912:
|
|
|-
|-
|
|mSpecRendering
|
|
|
|
|
|
|-
|-
|
|combiningCharsEnabled
|
|
|
|
|
|
|-
|-
|surrogateCharsEnabled
|
|
|
|
Line 1,408: Line 1,928:
|
|
|-
|-
|
|defaultCoordLinkColor
|
|
|
|
|
|
|-
|-
|
|defaultURLLinkColor
|
|
|
|
|
|
|-
|-
|defaultHighlightColor
|
|
|
|
Line 1,423: Line 1,944:
|
|
|-
|-
|
|secureJSLink
|
|
|
|
|
|
|-
|-
|
|secureLink
|
|
|
|
|
|
|-
|-
|pasteDirRight
|
|
|
|
Line 1,438: Line 1,960:
|
|
|-
|-
|
|pasteDirDown
|
|
|
|
|
|
|-
|-
|
|defaultCursor
|
|
|
|
|
|
|-
|-
|defaultDragCursor
|
|
|
|
Line 1,453: Line 1,976:
|
|
|-
|-
|
|fetchClientMargin
|
|
|
|
|
|
|-
|-
|
|classicTileProcessing
|
|
|
|
|
|
|-
|-
|unloadedPatternPanning
|
|
|
|
Line 1,468: Line 1,992:
|
|
|-
|-
|
|cursorRenderingEnabled
|
|
|
|
|
|
|-
|-
|
|guestCursorsEnabled
|
|
|
|
|
|
|-
|-
|showMyGuestCursor
|
|
|
|
Line 1,483: Line 2,008:
|
|
|-
|-
|
|unobstructCursor
|
|
|
|
|
|
|-
|-
|
|shiftOptimization
|
|
|
|
|
|
|-
|-
|transparentBackground
|
|
|
|
Line 1,498: Line 2,024:
|
|
|-
|-
|
|writeFlushRate
|
|
|
|
|
|
|-
|-
|
|bufferLargeChars
|
|
|
|
|
|
|-
|-
|
|cursorOutlineEnabled
|
|
|
|
|
|
|-
|-
|
|showCursorCoordinates
|
|
|
|
|
|
|-
|-
|
|textDecorationsEnabled
|
|
|
|
|
|
|-
|-
|
|keyConfig
|
|
|
|
|
|
|-
|-
|
|draggable_element_mousemove
|
|
|
|
|
|
|-
|-
|draggable_element_mouseup
|
|
|
|
Line 1,538: Line 2,065:
|
|
|-
|-
|defaultSizes
|
|
|
|
Line 1,543: Line 2,071:
|
|
|-
|-
|cellWidthPad
|
|
|
|
Line 1,548: Line 2,077:
|
|
|-
|-
|tileW
|
|
|
|
Line 1,553: Line 2,083:
|
|
|-
|-
|tileH
|
|
|
|
Line 1,558: Line 2,089:
|
|
|-
|-
|cellW
|
|
|
|
Line 1,563: Line 2,095:
|
|
|-
|-
|cellH
|
|
|
|
Line 1,568: Line 2,101:
|
|
|-
|-
|font
|
|
|
|
Line 1,573: Line 2,107:
|
|
|-
|-
|specialCharFont
|
|
|
|
Line 1,578: Line 2,113:
|
|
|-
|-
|tileC
|
|
|
|
Line 1,583: Line 2,119:
|
|
|-
|-
|tileR
|
|
|
|
Line 1,588: Line 2,125:
|
|
|-
|-
|tileArea
|
|
|
|
Line 1,593: Line 2,131:
|
|
|-
|-
|tileWidth
|
|
|
|
Line 1,598: Line 2,137:
|
|
|-
|-
|tileHeight
|
|
|
|
Line 1,603: Line 2,143:
|
|
|-
|-
|dTileW
|
|
|
|
Line 1,608: Line 2,149:
|
|
|-
|-
|dTileH
|
|
|
|
Line 1,613: Line 2,155:
|
|
|-
|-
|textRenderCanvas
|
|
|
|
Line 1,618: Line 2,161:
|
|
|-
|-
|textRenderCtx
|
|
|
|
Line 1,623: Line 2,167:
|
|
|-
|-
|tileProtectAuto
|
|
|
|
Line 1,628: Line 2,173:
|
|
|-
|-
|linkAuto
|
|
|
|
Line 1,633: Line 2,179:
|
|
|-
|-
|autoTotal
|
|
|
|
Line 1,638: Line 2,185:
|
|
|-
|-
|cursorCoords
|
|
|
|
Line 1,643: Line 2,191:
|
|
|-
|-
|cursorCoordsCurrent
|
|
|
|
Line 1,648: Line 2,197:
|
|
|-
|-
|currentPosition
|
|
|
|
Line 1,653: Line 2,203:
|
|
|-
|-
|currentPositionInitted
|
|
|
|
Line 1,658: Line 2,209:
|
|
|-
|-
|currentMousePosition
|
|
|
|
Line 1,663: Line 2,215:
|
|
|-
|-
|Tile
|
|
|
|
Line 1,668: Line 2,221:
|
|
|-
|-
|poolCleanupInterval
|
|
|
|
Line 1,673: Line 2,227:
|
|
|-
|-
|dragStartX
|
|
|
|
Line 1,678: Line 2,233:
|
|
|-
|-
|dragStartY
|
|
|
|
Line 1,683: Line 2,239:
|
|
|-
|-
|dragPosX
|
|
|
|
Line 1,688: Line 2,245:
|
|
|-
|-
|dragPosY
|
|
|
|
Line 1,693: Line 2,251:
|
|
|-
|-
|isDragging
|
|
|
|
Line 1,698: Line 2,257:
|
|
|-
|-
|hasDragged
|
|
|
|
Line 1,703: Line 2,263:
|
|
|-
|-
|draggingEnabled
|
|
|
|
Line 1,708: Line 2,269:
|
|
|-
|-
|cursorEnabled
|
|
|
|
Line 1,713: Line 2,275:
|
|
|-
|-
|writeInterval
|
|
|
|
Line 1,718: Line 2,281:
|
|
|-
|-
|write_busy
|
|
|
|
Line 1,723: Line 2,287:
|
|
|-
|-
|pasteInterval
|
|
|
|
Line 1,728: Line 2,293:
|
|
|-
|-
|linkQueue
|
|
|
|
Line 1,733: Line 2,299:
|
|
|-
|-
|autoArrowKeyMoveInterval
|
|
|
|
Line 1,738: Line 2,305:
|
|
|-
|-
|autoArrowKeyMoveActive
|
|
|
|
Line 1,743: Line 2,311:
|
|
|-
|-
|autoArrowKeyMoveState
|
|
|
|
Line 1,748: Line 2,317:
|
|
|-
|-
|linkParams
|
|
|
|
Line 1,753: Line 2,323:
|
|
|-
|-
|currentSelectedLink
|
|
|
|
Line 1,758: Line 2,329:
|
|
|-
|-
|currentSelectedLinkCoords
|
|
|
|
Line 1,763: Line 2,335:
|
|
|-
|-
|touchInitZoom
|
|
|
|
Line 1,768: Line 2,341:
|
|
|-
|-
|touchInitDistance
|
|
|
|
Line 1,773: Line 2,347:
|
|
|-
|-
|touchPrev
|
|
|
|
Line 1,778: Line 2,353:
|
|
|-
|-
|fetchInterval
|
|
|
|
Line 1,783: Line 2,359:
|
|
|-
|-
|timesConnected
|
|
|
|
Line 1,788: Line 2,365:
|
|
|-
|-
|colorClasses
|
|
|
|
Line 1,793: Line 2,371:
|
|
|-
|-
|isTileLoaded
|
|
|
|
Line 1,798: Line 2,377:
|
|
|-
|-
|isTileVisible
|
|
|
|
Line 1,803: Line 2,383:
|
|
|-
|-
|networkHTTP
|
|
|
|
Line 1,808: Line 2,389:
|
|
|-
|-
|network
|
|
|
|
Line 1,813: Line 2,395:
|
|
|-
|-
|w
|
|
|
|
Line 1,818: Line 2,401:
|
|
|-
|-
|tellEdit
|
|
|
|
Line 1,823: Line 2,407:
|
|
|-
|-
|ws_functions
|
|
|
|
|
|
|
|
|}
== chat.js ==
=== Event listeners ===
{| class="wikitable"
!Object
!Listen Event
!Functions/Events Fired
!Emits
!Example Usage
!Related Code
|-
|-
|elm.chatsend
|click
|sendChat()
|
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="260">
|
elm.chatsend.addEventListener("click", function() {
sendChat();
});
</syntaxhighlight>
|-
|-
|elm.chatbar
|keypress
|var keyCode = e.keyCode;
if(keyCode == 13) {
sendChat();
}
|
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="264">
|
elm.chatbar.addEventListener("keypress", function(e) {
|-
var keyCode = e.keyCode;
|
if(keyCode == 13) { // Enter
|
sendChat();
|
}
|
});
|-
</syntaxhighlight>
|
|
|
|
|-
|
|
|
|
|-
|-
|elm.chatbar
|keydown
|var keyCode = e.keyCode;
// scroll through chat history that the client sent
if(keyCode == 38) { // up
// history modified
if(chatWriteHistoryIdx > -1 && elm.chatbar.value != chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1]) {
chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1] = elm.chatbar.value;
}
if(chatWriteHistoryIdx == -1 && elm.chatbar.value) {
chatWriteTmpBuffer = elm.chatbar.value;
}
chatWriteHistoryIdx++;
if(chatWriteHistoryIdx >= chatWriteHistory.length) chatWriteHistoryIdx = chatWriteHistory.length - 1;
var upVal = chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1];
if(!upVal) return;
elm.chatbar.value = upVal;
// pressing up will move the cursor all the way to the left by default
e.preventDefault();
moveCaretEnd(elm.chatbar);
} else if(keyCode == 40) { // down
// history modified
if(chatWriteHistoryIdx > -1 && elm.chatbar.value != chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1]) {
chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1] = elm.chatbar.value;
}
chatWriteHistoryIdx--;
if(chatWriteHistoryIdx < -1) {
chatWriteHistoryIdx = -1;
return;
}
var str = "";
if(chatWriteHistoryIdx != -1) {
str = chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1];
} else {
if(chatWriteTmpBuffer) {
str = chatWriteTmpBuffer;
e.preventDefault();
moveCaretEnd(elm.chatbar);
}
}
elm.chatbar.value = str;
e.preventDefault();
moveCaretEnd(elm.chatbar);
}
|
|
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="283">
|
elm.chatbar.addEventListener("keydown", function(e) {
var keyCode = e.keyCode;
// scroll through chat history that the client sent
if(keyCode == 38) { // up
// history modified
if(chatWriteHistoryIdx > -1 && elm.chatbar.value != chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1]) {
chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1] = elm.chatbar.value;
}
if(chatWriteHistoryIdx == -1 && elm.chatbar.value) {
chatWriteTmpBuffer = elm.chatbar.value;
}
chatWriteHistoryIdx++;
if(chatWriteHistoryIdx >= chatWriteHistory.length) chatWriteHistoryIdx = chatWriteHistory.length - 1;
var upVal = chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1];
if(!upVal) return;
elm.chatbar.value = upVal;
// pressing up will move the cursor all the way to the left by default
e.preventDefault();
moveCaretEnd(elm.chatbar);
} else if(keyCode == 40) { // down
// history modified
if(chatWriteHistoryIdx > -1 && elm.chatbar.value != chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1]) {
chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1] = elm.chatbar.value;
}
chatWriteHistoryIdx--;
if(chatWriteHistoryIdx < -1) {
chatWriteHistoryIdx = -1;
return;
}
var str = "";
if(chatWriteHistoryIdx != -1) {
str = chatWriteHistory[chatWriteHistory.length - chatWriteHistoryIdx - 1];
} else {
if(chatWriteTmpBuffer) {
str = chatWriteTmpBuffer;
e.preventDefault();
moveCaretEnd(elm.chatbar);
}
}
elm.chatbar.value = str;
e.preventDefault();
moveCaretEnd(elm.chatbar);
}
});
</syntaxhighlight>
|-
|-
|elm.chat_close
|click
|w.emit("chatClose");
elm.chat_window.style.display = "none";
elm.chat_open.style.display = "";
chatOpen = false;
|"chatClose"
|
|
|
|<syntaxhighlight lang="javascript" line="1" start="328">
|
elm.chat_close.addEventListener("click", function() {
|
w.emit("chatClose");
|-
elm.chat_window.style.display = "none";
|
elm.chat_open.style.display = "";
|
chatOpen = false;
|
});
|
</syntaxhighlight>
|-
|
|
|
|
|-
|-
|elm.chat_open
|click
|elm.chat_window.style.display = "";
elm.chat_open.style.display = "none";
chatOpen = true;
if(selectedChatTab == 0) {
chatPageUnread = 0;
updateUnread();
if(!initPageTabOpen) {
initPageTabOpen = true;
elm.page_chatfield.scrollTop = elm.page_chatfield.scrollHeight;
}
} else {
chatGlobalUnread = 0;
updateUnread();
if(!initGlobalTabOpen) {
initGlobalTabOpen = true;
elm.global_chatfield.scrollTop = elm.global_chatfield.scrollHeight;
}
}
var chatWidth = chat_window.offsetWidth - 2;
var chatHeight = chat_window.offsetHeight - 2;
var screenRatio = window.devicePixelRatio;
if(!screenRatio) screenRatio = 1;
var virtWidth = owotWidth / screenRatio;
if(chatWidth > virtWidth) {
resizeChat(virtWidth - 2, chatHeight);
}
|"chatOpen"
|
|
|<syntaxhighlight lang="javascript" line="1" start="335">
elm.chat_open.addEventListener("click", function() {
w.emit("chatOpen");
elm.chat_window.style.display = "";
elm.chat_open.style.display = "none";
chatOpen = true;
if(selectedChatTab == 0) {
chatPageUnread = 0;
updateUnread();
if(!initPageTabOpen) {
initPageTabOpen = true;
elm.page_chatfield.scrollTop = elm.page_chatfield.scrollHeight;
}
} else {
chatGlobalUnread = 0;
updateUnread();
if(!initGlobalTabOpen) {
initGlobalTabOpen = true;
elm.global_chatfield.scrollTop = elm.global_chatfield.scrollHeight;
}
}
var chatWidth = chat_window.offsetWidth - 2;
var chatHeight = chat_window.offsetHeight - 2;
var screenRatio = window.devicePixelRatio;
if(!screenRatio) screenRatio = 1;
var virtWidth = owotWidth / screenRatio;
if(chatWidth > virtWidth) {
resizeChat(virtWidth - 2, chatHeight);
}
});
</syntaxhighlight>
|-
|elm.chat_page_tab
|click
|elm.chat_page_tab.classList.add("chat_tab_selected");
elm.chat_global_tab.classList.remove("chat_tab_selected");
elm.global_chatfield.style.display = "none";
elm.page_chatfield.style.display = "";
selectedChatTab = 0;
chatPageUnread = 0;
updateUnread();
if(!initPageTabOpen) {
initPageTabOpen = true;
elm.page_chatfield.scrollTop = elm.page_chatfield.scrollHeight;
}
|
|
|
|
|
|<syntaxhighlight lang="js" line="1" start="365">
elm.chat_page_tab.addEventListener("click", function() {
elm.chat_page_tab.classList.add("chat_tab_selected");
elm.chat_global_tab.classList.remove("chat_tab_selected");
 
elm.global_chatfield.style.display = "none";
elm.page_chatfield.style.display = "";
selectedChatTab = 0;
chatPageUnread = 0;
updateUnread();
if(!initPageTabOpen) {
initPageTabOpen = true;
elm.page_chatfield.scrollTop = elm.page_chatfield.scrollHeight;
}
});
</syntaxhighlight>
|-
|-
|elm.chat_global_tab
|click
|elm.chat_global_tab.classList.add("chat_tab_selected");
elm.chat_page_tab.classList.remove("chat_tab_selected");
elm.global_chatfield.style.display = "";
elm.page_chatfield.style.display = "none";
selectedChatTab = 1;
chatGlobalUnread = 0;
updateUnread();
if(!initGlobalTabOpen) {
initGlobalTabOpen = true;
elm.global_chatfield.scrollTop = elm.global_chatfield.scrollHeight;
}
|
|
|
|
|
|<syntaxhighlight lang="js" line="1" start="380">
|
elm.chat_global_tab.addEventListener("click", function() {
elm.chat_global_tab.classList.add("chat_tab_selected");
elm.chat_page_tab.classList.remove("chat_tab_selected");
 
elm.global_chatfield.style.display = "";
elm.page_chatfield.style.display = "none";
selectedChatTab = 1;
chatGlobalUnread = 0;
updateUnread();
if(!initGlobalTabOpen) {
initGlobalTabOpen = true;
elm.global_chatfield.scrollTop = elm.global_chatfield.scrollHeight;
}
});
</syntaxhighlight>
|-
|-
|chat_window
|mousemove
|if(isDown) return;
var posX = e.pageX - chat_window.offsetLeft;
var posY = e.pageY - chat_window.offsetTop;
var top = (posY) <= 4;
var left = (posX) <= 3;
var right = (chat_window.offsetWidth - posX) <= 4;
var bottom = (chat_window.offsetHeight - posY) <= 5;
var cursor = "";
if(left || right) cursor = "ew-resize";
if(top || bottom) cursor = "ns-resize";
if((top && left) || (right && bottom)) cursor = "nwse-resize";
if((bottom && left) || (top && right)) cursor = "nesw-resize";
chat_window.style.cursor = cursor;
state = bottom << 3 | right << 2 | left << 1 | top;
|
|
|
|
|
|<syntaxhighlight lang="js" line="1" start="404">
|
chat_window.addEventListener("mousemove", function(e) {
if(isDown) return;
var posX = e.pageX - chat_window.offsetLeft;
var posY = e.pageY - chat_window.offsetTop;
var top = (posY) <= 4;
var left = (posX) <= 3;
var right = (chat_window.offsetWidth - posX) <= 4;
var bottom = (chat_window.offsetHeight - posY) <= 5;
var cursor = "";
if(left || right) cursor = "ew-resize";
if(top || bottom) cursor = "ns-resize";
if((top && left) || (right && bottom)) cursor = "nwse-resize";
if((bottom && left) || (top && right)) cursor = "nesw-resize";
chat_window.style.cursor = cursor;
state = bottom << 3 | right << 2 | left << 1 | top;
});
</syntaxhighlight>
|-
|-
|chat_window
|mousedown
|downX = e.pageX;
downY = e.pageY;
if(state) {
// subtract 2 for the borders
chatWidth = chat_window.offsetWidth - 2;
chatHeight = chat_window.offsetHeight - 2;
elmX = chat_window.offsetLeft;
elmY = chat_window.offsetTop;
isDown = true;
chatResizing = true;
}
|
|
|
|
|
|<syntaxhighlight lang="js" line="1" start="420">
|
chat_window.addEventListener("mousedown", function(e) {
downX = e.pageX;
downY = e.pageY;
if(state) {
// subtract 2 for the borders
chatWidth = chat_window.offsetWidth - 2;
chatHeight = chat_window.offsetHeight - 2;
elmX = chat_window.offsetLeft;
elmY = chat_window.offsetTop;
isDown = true;
chatResizing = true;
}
});
</syntaxhighlight>
|-
|-
|document
|mouseup
|isDown = false;
chatResizing = false;
|
|
|
|
|
|<syntaxhighlight lang="js" line="1" start="433">
|
document.addEventListener("mouseup", function() {
|-
isDown = false;
|
chatResizing = false;
|
});
|
</syntaxhighlight>
|
|-
|
|
|
|
|-
|-
|document
|mousemove
|if(!isDown) return;
var offX = e.pageX - downX;
var offY = e.pageY - downY;
var resize_bottom = state >> 3 & 1;
var resize_right = state >> 2 & 1;
var resize_left = state >> 1 & 1;
var resize_top = state & 1;
var width_delta = 0;
var height_delta = 0;
var abs_top = chat_window.offsetTop;
var abs_left = chat_window.offsetLeft;
var snap_bottom = chat_window.style.bottom == "0px";
var snap_right = chat_window.style.right == "0px";
if(resize_top) {
height_delta = -offY;
} else if(resize_bottom) {
height_delta = offY;
}
if(resize_left) {
width_delta = -offX;
} else if(resize_right) {
width_delta = offX;
}
var res = resizeChat(chatWidth + width_delta, chatHeight + height_delta);
if(resize_top && !snap_bottom) {
chat_window.style.top = (elmY + (chatHeight - res[1])) + "px";
}
if(resize_bottom && snap_bottom) {
chat_window.style.bottom = "";
chat_window.style.top = abs_top + "px";
}
if(resize_right && snap_right) {
chat_window.style.right = "";
chat_window.style.left = abs_left + "px";
}
if(resize_left && !snap_right) {
chat_window.style.left = (elmX + (chatWidth - res[0])) + "px";
}
|
|
|
|
|
|<syntaxhighlight lang="js" line="1" start="437">
|
document.addEventListener("mousemove", function(e) {
if(!isDown) return;
var offX = e.pageX - downX;
var offY = e.pageY - downY;
var resize_bottom = state >> 3 & 1;
var resize_right = state >> 2 & 1;
var resize_left = state >> 1 & 1;
var resize_top = state & 1;
 
var width_delta = 0;
var height_delta = 0;
var abs_top = chat_window.offsetTop;
var abs_left = chat_window.offsetLeft;
var snap_bottom = chat_window.style.bottom == "0px";
var snap_right = chat_window.style.right == "0px";
 
if(resize_top) {
height_delta = -offY;
} else if(resize_bottom) {
height_delta = offY;
}
if(resize_left) {
width_delta = -offX;
} else if(resize_right) {
width_delta = offX;
}
var res = resizeChat(chatWidth + width_delta, chatHeight + height_delta);
if(resize_top && !snap_bottom) {
chat_window.style.top = (elmY + (chatHeight - res[1])) + "px";
}
if(resize_bottom && snap_bottom) {
chat_window.style.bottom = "";
chat_window.style.top = abs_top + "px";
}
if(resize_right && snap_right) {
chat_window.style.right = "";
chat_window.style.left = abs_left + "px";
}
if(resize_left && !snap_right) {
chat_window.style.left = (elmX + (chatWidth - res[0])) + "px";
}
});
</syntaxhighlight>
|}
 
=== Functions ===
{| class="wikitable"
!Name
!Description
!Example usage
!Related code
|-
|-
|
|api_chat_send(message,opts)
|
|Sends a chat message from the user running code
|
|<syntaxhighlight lang="js">
|
api_chat_send("Hello!",{nick:"nickname"});
</syntaxhighlight>
|<syntaxhighlight lang="js" line="1" start="75">
function api_chat_send(message, opts) {
if(!message) return;
if(!opts) opts = {};
var exclude_commands = opts.exclude_commands;
var nick = opts.nick || YourWorld.Nickname || state.userModel.username;
var location = opts.location ? opts.location : (selectedChatTab == 0 ? "page" : "global");
 
var msgLim = state.userModel.is_staff ? 3030 : 400;
 
message = message.trim();
if(!message.length) return;
message = message.slice(0, msgLim);
chatWriteHistory.push(message);
if(chatWriteHistory.length > chatWriteHistoryMax) {
chatWriteHistory.shift();
}
chatWriteHistoryIdx = -1;
chatWriteTmpBuffer = "";
 
var chatColor;
if(!opts.color) {
if(!YourWorld.Color) {
chatColor = assignColor(nick);
} else {
chatColor = "#" + ("00000" + YourWorld.Color.toString(16)).slice(-6);
}
} else {
chatColor = opts.color;
}
 
if(!exclude_commands && message.startsWith("/")) {
var args = message.substr(1).split(" ");
var command = args[0].toLowerCase();
args.shift();
if(client_commands.hasOwnProperty(command)) {
client_commands[command](args);
return;
}
}
 
network.chat(message, location, nick, chatColor);
}
</syntaxhighlight>
|-
|-
|
|clientChatResponse(message)
|
|Creates a client-side message only visible to you
|
|<syntaxhighlight lang="js">
|
clientChatResponse("This is a client message.");
</syntaxhighlight>
|<syntaxhighlight lang="js" line="1" start="118">
function clientChatResponse(message) {
addChat(null, 0, "user", "[ Client ]", message, "Client", false, false, false, null, getDate());
}
</syntaxhighlight>
|-
|-
|
|sendChat()
|
|Sends whatever is in the chat textbox to chat.
|
|<syntaxhighlight lang="js">
|
sendChat();
</syntaxhighlight>
|<syntaxhighlight lang="js" line="1" start="216">
function sendChat() {
var chatText = elm.chatbar.value;
elm.chatbar.value = "";
var opts = {};
if(defaultChatColor != null) {
opts.color = "#" + ("00000" + defaultChatColor.toString(16)).slice(-6);
}
api_chat_send(chatText, opts);
}
</syntaxhighlight>
|-
|-
|updateUnread()
|Updates the unread messages counter when chat is closed.
|
|
|
|<syntaxhighlight lang="js" line="1" start="226">
|
function updateUnread() {
|
var total = elm.total_unread;
var page = elm.page_unread;
var global = elm.global_unread;
var totalCount = chatPageUnread + chatGlobalUnread;
total.style.display = "none";
global.style.display = "none";
page.style.display = "none";
if(totalCount) {
total.style.display = "";
total.innerText = totalCount > 99 ? "99+" : "(" + totalCount + ")";
}
if(chatPageUnread) {
page.style.display = "";
page.innerText = chatPageUnread > 99 ? "99+" : "(" + chatPageUnread + ")";
}
if(chatGlobalUnread) {
global.style.display = "";
global.innerText = chatGlobalUnread > 99 ? "99+" : "(" + chatGlobalUnread + ")";
}
}
</syntaxhighlight>
|-
|-
|event_on_chat(data)
|Updates the unread messages counter for either global chat or the current page.
|
|
|
|<syntaxhighlight lang="js" line="1" start="248">
|
function event_on_chat(data) {
|
if((!chatOpen || selectedChatTab == 1) && data.location == "page") {
chatPageUnread++;
}
if((!chatOpen || selectedChatTab == 0) && data.location == "global" && !state.worldModel.no_chat_global) {
chatGlobalUnread++;
}
updateUnread();
addChat(data.location, data.id, data.type,
data.nickname, data.message, data.realUsername, data.op, data.admin, data.staff, data.color, data.date || Date.now(), data.dataObj);
}
</syntaxhighlight>
|-
|-
|moveCaretEnd(elm)
|Moves the text cursor to the end of the chat message you want to type in the textbox.
|
|
|
|<syntaxhighlight lang="js" line="1" start="271">
|
function moveCaretEnd(elm) {
|
if(elm.selectionStart != void 0) {
elm.selectionStart = elm.value.length;
elm.selectionEnd = elm.value.length;
} else if(elm.createTextRange != void 0) {
elm.focus();
var range = elm.createTextRange();
range.collapse(false);
range.select();
}
}
</syntaxhighlight>
|-
|-
|resizable_chat()
|Makes the chat resize on grabbing of corners or edges.
|
|
|
|<syntaxhighlight lang="js" line="1" start="395">
|
function resizable_chat() {
|
var state = 0;
var isDown = false;
var downX = 0;
var downY = 0;
var elmX = 0;
var elmY = 0;
var chatWidth = 0;
var chatHeight = 0;
chat_window.addEventListener("mousemove", function(e) {
if(isDown) return;
var posX = e.pageX - chat_window.offsetLeft;
var posY = e.pageY - chat_window.offsetTop;
var top = (posY) <= 4;
var left = (posX) <= 3;
var right = (chat_window.offsetWidth - posX) <= 4;
var bottom = (chat_window.offsetHeight - posY) <= 5;
var cursor = "";
if(left || right) cursor = "ew-resize";
if(top || bottom) cursor = "ns-resize";
if((top && left) || (right && bottom)) cursor = "nwse-resize";
if((bottom && left) || (top && right)) cursor = "nesw-resize";
chat_window.style.cursor = cursor;
state = bottom << 3 | right << 2 | left << 1 | top;
});
chat_window.addEventListener("mousedown", function(e) {
downX = e.pageX;
downY = e.pageY;
if(state) {
// subtract 2 for the borders
chatWidth = chat_window.offsetWidth - 2;
chatHeight = chat_window.offsetHeight - 2;
elmX = chat_window.offsetLeft;
elmY = chat_window.offsetTop;
isDown = true;
chatResizing = true;
}
});
document.addEventListener("mouseup", function() {
isDown = false;
chatResizing = false;
});
document.addEventListener("mousemove", function(e) {
if(!isDown) return;
var offX = e.pageX - downX;
var offY = e.pageY - downY;
var resize_bottom = state >> 3 & 1;
var resize_right = state >> 2 & 1;
var resize_left = state >> 1 & 1;
var resize_top = state & 1;
 
var width_delta = 0;
var height_delta = 0;
var abs_top = chat_window.offsetTop;
var abs_left = chat_window.offsetLeft;
var snap_bottom = chat_window.style.bottom == "0px";
var snap_right = chat_window.style.right == "0px";
 
if(resize_top) {
height_delta = -offY;
} else if(resize_bottom) {
height_delta = offY;
}
if(resize_left) {
width_delta = -offX;
} else if(resize_right) {
width_delta = offX;
}
var res = resizeChat(chatWidth + width_delta, chatHeight + height_delta);
if(resize_top && !snap_bottom) {
chat_window.style.top = (elmY + (chatHeight - res[1])) + "px";
}
if(resize_bottom && snap_bottom) {
chat_window.style.bottom = "";
chat_window.style.top = abs_top + "px";
}
if(resize_right && snap_right) {
chat_window.style.right = "";
chat_window.style.left = abs_left + "px";
}
if(resize_left && !snap_right) {
chat_window.style.left = (elmX + (chatWidth - res[0])) + "px";
}
});
}
</syntaxhighlight>
|}
 
=== Variables ===
 
== permissions.js ==
 
=== Variables ===
{| class="wikitable"
|+
!Name
!Description
!Related code
|-
|-
|
|PERM
|
|Defines permission numbers for easier use instead of writing "Admin"
|
|<syntaxhighlight lang="js" line="1" start="1">
|
var PERM = {
ADMIN: 2,
MEMBERS: 1,
PUBLIC: 0
};
</syntaxhighlight>
|}
 
==== Permissions ====
Since <code>Permissions</code> is a very long dictionary variable, this table is divided into specific definitions in it.
{| class="wikitable"
|+
!Name
!Description
!Related definition
|-
|-
|
|can_admin
|
|Checks if user is an admin.
|
|<syntaxhighlight lang="js" line="1" start="7">
|
can_admin: function(user) {
return user.is_owner;
},
</syntaxhighlight>
|-
|-
|
|can_coordlink
|
|Checks if user can create coordinate links in the world they're in.
|
|<syntaxhighlight lang="js" line="1" start="10">
|
can_coordlink: function(user, world) {
return Permissions.user_matches_perm(user, world, world.feature_coord_link);
},
</syntaxhighlight>
|-
|can_edit_tile
|Checks if user can write in a tile / character (protections).
|<syntaxhighlight lang="js" line="1" start="13">
can_edit_tile: function(user, world, tile, charX, charY) {
if(!tile) {
throw new Error("Can't check perms on un-initted tile");
}
if(!Permissions.can_read(user, world)) {
return false;
}
var targetWritability;
if(tile.char) {
targetWritability = tile.char[charY * tileC + charX];
if(targetWritability == null) targetWritability = tile.writability; // inherit from tile
if(targetWritability == null) targetWritability = world.writability; // inherit from world
} else {
targetWritability = tile.writability;
if(targetWritability == null) targetWritability = world.writability;
}
return Permissions.user_matches_perm(user, world, targetWritability);
},
</syntaxhighlight>
|-
|-
|
|can_go_to_coord
|
|Checks if user can teleport.
|
|<syntaxhighlight lang="js" line="1" start="31">
|
can_go_to_coord: function(user, world) {
return Permissions.user_matches_perm(user, world, world.feature_go_to_coord);
},
</syntaxhighlight>
|-
|-
|
|can_paste
|
|Checks if user can paste.
|
|<syntaxhighlight lang="js" line="1" start="34">
|
can_paste: function(user, world) {
return Permissions.user_matches_perm(user, world, world.feature_paste);
},
</syntaxhighlight>
|-
|-
|
|can_copy
|
|Checks if user can copy.
|
|<syntaxhighlight lang="js" line="1" start="37">
|
can_copy: function(user, world) {
if(user.is_owner || user.is_member) return true;
return !world.no_copy;
},
</syntaxhighlight>
|-
|-
|
|can_protect_tiles
|
|Checks if user can protect tiles.
|
|<syntaxhighlight lang="js" line="1" start="41">
|
can_protect_tiles: function(user, world) {
if(user.is_owner) return true;
return world.feature_membertiles_addremove && user.is_member;
},
</syntaxhighlight>
|-
|-
|
|can_erase
|
|Checks if user can use the built-in eraser.
|
|<syntaxhighlight lang="js" line="1" start="45">
|
can_erase: function(user, world) {
if(user.is_owner) return true;
return Permissions.user_matches_perm(user, world, world.quick_erase);
},
</syntaxhighlight>
|-
|-
|
|can_read
|
|Checks if user can view the world.
|
|<syntaxhighlight lang="js" line="1" start="49">
|
can_read: function(user, world) {
return Permissions.user_matches_perm(user, world, world.readability);
},
</syntaxhighlight>
|-
|-
|
|can_urllink
|
|Checks if user can create links leading to other URL's.
|
|<syntaxhighlight lang="js" line="1" start="52">
|
can_urllink: function(user, world) {
return Permissions.user_matches_perm(user, world, world.feature_url_link);
},
</syntaxhighlight>
|-
|-
|
|can_write
|
|Checks if user can write on the world.
|
|<syntaxhighlight lang="js" line="1" start="55">
|
can_write: function(user, world) {
if(!Permissions.can_read(user, world)) {
return false;
}
return Permissions.user_matches_perm(user, world, world.writability);
},
</syntaxhighlight>
|-
|-
|
|can_chat
|
|Checks if user can chat.
|
|<syntaxhighlight lang="js" line="1" start="61">
|
can_chat: function(user, world) {
return Permissions.user_matches_perm(user, world, world.chat_permission);
},
</syntaxhighlight>
|-
|-
|
|can_show_cursor
|
|Checks if showing cursors is enabled for a user.
|
|<syntaxhighlight lang="js" line="1" start="64">
|
can_show_cursor: function(user, world) {
return Permissions.user_matches_perm(user, world, world.show_cursor);
},
</syntaxhighlight>
|-
|-
|
|can_color_text
|
|Checks if user can change their text colour.
|
|<syntaxhighlight lang="js" line="1" start="67">
|
can_color_text: function(user, world) {
return Permissions.user_matches_perm(user, world, world.color_text);
},
</syntaxhighlight>
|-
|-
|
|can_color_cell
|
|Checks if user can change their cell colour.
|
|<syntaxhighlight lang="js" line="1" start="70">
|
can_color_cell: function(user, world) {
return Permissions.user_matches_perm(user, world, world.color_cell);
},
</syntaxhighlight>
|-
|-
|
|user_matches_perm
|
|Gets users permissions.
|
|<syntaxhighlight lang="js" line="1" start="73">
|
user_matches_perm: function(user, world, perm) {
|-
if(perm == -1) { // no one
|
return false;
|
}
|
if(perm == PERM.PUBLIC) { // anyone
|
return true;
|-
}
|
if(user.is_owner) {
|
return true;
|
}
|
if(perm == PERM.ADMIN) {
|-
return false;
|
}
|
if(perm == PERM.MEMBERS && user.is_member) {
|
return true;
|
}
|-
return false;
|
}
|
};
|
</syntaxhighlight>
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|-
|
|
|
|
|}
 
===Variables:===
{| class="wikitable mw-collapsible"
|+
!Name
!Description
!Example Usage
!Code In Use
|-
|YourWorld
|An object containing the users current text color, cell background color, and chat nick name.
|<syntaxhighlight lang="javascript">
//Sets the users color to a random one.
YourWorld.Color = Math.round((Math.random()*16777215));
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1">
var YourWorld = {
Color: window.localStorage ? +localStorage.getItem("color") : 0,
BgColor: -1,
Nickname: state.userModel.username
};
</syntaxhighlight>
|-
|owot
|The DOM canvas element
|<syntaxhighlight lang="javascript">
//Hides the owot canvas.
owot.style.opacity = 0;
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="12">
owot = document.getElementById("owot");
</syntaxhighlight>
|-
|owotCtx
|The CanvasRenderingContext2D of the owot canvas
|<syntaxhighlight lang="javascript">
//Clears all the rendered tiles from the view.
owotCtx.clearRect(0, 0, owotWidth, owotHeight);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="15">
owotCtx = owot.getContext("2d");
</syntaxhighlight>
|-
|textInput
|The DOM textarea element used for writing to the owot canvas.
|<syntaxhighlight lang="javascript">
//Paste "hello world" at the current cursor position.
textInput.value = `hello world`;
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="16">
textInput = document.getElementById("textInput");
</syntaxhighlight>
|-
|linkElm
|The DOM link element used for user link clicks.
|<syntaxhighlight lang="javascript">
//logs to the console whether or not the link is a javascript link.
linkElm.addEventListener(`click`,function(){
console.log(linkParams.protocol === `javascript`);                 
})
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="18">
linkElm = elm.link_element;
</syntaxhighlight>
|-
|link_div
|The DOM link div element used to scale the linkElm to the same size as a cell within the owot canvas.
|<syntaxhighlight lang="javascript">
//Highlights the URL being hovered over.
linkDiv.style.background = `rgba(255,255,0,0.5)`
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="19">
linkDiv = elm.link_div;
</syntaxhighlight>
|-
|colorInput, colorInputBg
|The DOM color inputs to select text and cell background color.
|<syntaxhighlight lang="javascript">
//Generate a random color on the text color input field.
const randomColor = Math.floor(Math.random()*16777215).toString(16).toUpperCase();
colorInput.jscolor.fromString(`#${randomColor}`);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="5718">
colorInputBg = modal.addEntry("Cell color", "color").input;
</syntaxhighlight><syntaxhighlight lang="javascript" line="1" start="5766">
colorInput = modal.addEntry("Text color", "color").input;
</syntaxhighlight>
|-
|colorShortcuts, colorShortcutsBg
|A DOM div container used as a color pallet for quick access.
|<syntaxhighlight lang="javascript">
//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;
    }
  });
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="330">
for(var i = 0; i < colors.length; i++) {
var color = colors[i];
colorShortcuts.appendChild(createColorButton(color));
}
</syntaxhighlight>
|-
|enums
|An unused object created to store position and write edits.
|<syntaxhighlight lang="javascript">
//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];
  }
}
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="54">
enums.edit = makeEnum(["tileY", "tileX", "charY", "charX", "time", "char", "id", "color"]);
enums.position = makeEnum(["tileX", "tileY", "charX", "charY"]);
</syntaxhighlight>
|-
|ws_path
|Stores the pages' websocket path.
|<syntaxhighlight lang="javascript">
//Change the socket, refreshing the client ID
w.changeSocket(ws_path, true);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="57">
var ws_path = createWsPath();
 
</syntaxhighlight>
|-
|menu,
w.menu,
Menu
|An object containing all of the DOM elements and functions of the menu.
|<syntaxhighlight lang="javascript">
//Adds a button to the menu that alerts "Hello World" when clicked.
menu.addOption("alert", function(){alert("Hello World")});
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="4490">
menu = new Menu(elm.menu_elm, elm.nav_elm);
w.menu = menu;
</syntaxhighlight>
|-
|menuStyle
|A temporary style element created and used to style the menu.
|<syntaxhighlight lang="javascript">
//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);
})
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="1529">
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 + ";" +
"}";
}
</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>
|-
|owotWidth,
owotHeight
|The current width and height of the DOM window.
|<syntaxhighlight lang="javascript">
//Estimate the total number of fully visible cells that could exist on the screen
const cellAmount = Math.floor(owotHeight/cellH * owotWidth/cellW);
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="1170">
owotWidth = Math.round(window_width * ratio);
owotHeight = Math.round(window_height * ratio);
</syntaxhighlight>
|-
|js_alert_active
|A bool stating if the javascript alert window is open.
|
|<syntaxhighlight lang="javascript" line="1" start="64">
var js_alert_active = false;
</syntaxhighlight>
|-
|worldFocused
|A bool stating if the owot canvas is in focus.
|<syntaxhighlight lang="javascript">
//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)
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="1737">
if(closest(target, getChatfield()) || target == elm.chatbar || target == elm.confirm_js_code) {
worldFocused = false;
} else {
worldFocused = true;
}
</syntaxhighlight>
|-
|chatResizing
|A bool stating if the chat window is being resized.
|<syntaxhighlight lang="javascript">
//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)
 
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="441">
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;
}
});
</syntaxhighlight>
|-
|tiles
|An object containing all the loaded tiles.
|<syntaxhighlight lang="javascript">
//Return any visible links
const [X,Y] = cursorCoords;
tiles[`${X},${Y}`].properties.cell_props
</syntaxhighlight>
|<syntaxhighlight lang="javascript" line="1" start="1416">
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;
}
</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>
|-
|backgroundImage
|
|
|
|-
|backgroundPattern
|
|
|
|
|-
|backgroundPatternSize
|
|
|
|-
|guestCursorsByTile
|
|
|
|
|-
|guestCursors
|
|
|
|-
|clientGuestCursorPos
|
|
|
|
|-
|disconnectTimeout
|
|
|
|-
|menuOptions
|
|
|
|
|-
|undoBuffer
|
|
|
|-
|textDecorationOffset
|
|
|
|
|-
|textDecorationModes
|
|
|
|-
|fontTemplate
|
|
|
|
|-
|specialFontTemplate
|
|
|
|-
|fontOrder
|
|
|
|
|-
|specialFontOrder
|
|
|
|-
|initiallyFetched
|
|
|
|
|-
|lastLinkHover
|
|
|
|-
|lastTileHover
|
|
|
|
|-
|regionSelections
|
|
|
|-
|specialClientHooks
|
|
|
|
|-
|specialClientHookMap
|
|
|
|-
|bgImageHasChanged
|
|
|
|
|-
|remoteBoundary
|
|
|
|-
|boundaryStatus
|
|
|
|
|-
|positionX
|
|
|
|-
|positionY
|
|
|
|
|-
|coordSizeX
|
|
|
|-
|coordSizeY
|
|
|
|
|-
|gridEnabled
|
|
|
|-
|subgridEnabled
|
|
|
|
|-
|linksEnabled
|
|
|
|-
|linksRendered
|
|
|
|
|-
|colorsEnabled
|
|
|
|-
|backgroundEnabled
|
|
|
|
|-
|scrollingEnabled
|
|
|
|-
|zoomRatio
|
|
|
|-
|protectPrecision
|
|
|
|-
|checkTileFetchInterval
|
|
|
|
|-
|zoom
|
|
|
|-
|userZoom
|
|
|
|-
|unloadTilesAuto
|
|
|
|
|-
|useHighlight
|
|
|
|-
|highlightLimit
|
|
|
|-
|ansiBlockFill
|
|
|
|
|-
|colorizeLinks
|
|
|
|-
|brBlockFill
|
|
|
|-
|tileFetchOffsetX
|
|
|
|
|-
|tileFetchOffsetY
|
|
|
|-
|ignoreCanvasContext
|
|
|
|-
|elementSnapApprox
|
|
|
|
|-
|mSpecRendering
|
|
|
|-
|combiningCharsEnabled
|
|
|
|-
|surrogateCharsEnabled
|
|
|
|
|-
|defaultCoordLinkColor
|
|
|
|-
|defaultURLLinkColor
|
|
|
|-
|defaultHighlightColor
|
|
|
|
|-
|secureJSLink
|
|
|
|-
|secureLink
|
|
|
|-
|pasteDirRight
|
|
|
|
|-
|pasteDirDown
|
|
|
|-
|defaultCursor
|
|
|
|-
|defaultDragCursor
|
|
|
|
|-
|fetchClientMargin
|
|
|
|-
|classicTileProcessing
|
|
|
|-
|unloadedPatternPanning
|
|
|
|
|-
|cursorRenderingEnabled
|
|
|
|-
|guestCursorsEnabled
|
|
|
|-
|showMyGuestCursor
|
|
|
|
|-
|unobstructCursor
|
|
|
|-
|shiftOptimization
|
|
|
|-
|transparentBackground
|
|
|
|
|-
|writeFlushRate
|
|
|
|-
|bufferLargeChars
|
|
|
|-
|cursorOutlineEnabled
|
|
|
|-
|showCursorCoordinates
|
|
|
|-
|textDecorationsEnabled
|
|
|
|-
|keyConfig
|
|
|
|-
|draggable_element_mousemove
|
|
|
|-
|draggable_element_mouseup
|
|
|
|
|-
|defaultSizes
|
|
|
|
|-
|cellWidthPad
|
|
|
|
|-
|tileW
|
|
|
|
|-
|tileH
|
|
|
|
|-
|cellW
|
|
|
|
|-
|cellH
|
|
|
|
|-
|font
|
|
|
|
|-
|specialCharFont
|
|
|
|
|-
|tileC
|
|
|
|
|-
|tileR
|
|
|
|
|-
|tileArea
|
|
|
|
|-
|tileWidth
|
|
|
|
|-
|tileHeight
|
|
|
|
|-
|dTileW
|
|
|
|
|-
|dTileH
|
|
|
|
|-
|textRenderCanvas
|
|
|
|
|-
|textRenderCtx
|
|
|
|
|-
|tileProtectAuto
|
|
|
|
|-
|linkAuto
|
|
|
|
|-
|autoTotal
|
|
|
|
|-
|cursorCoords
|
|
|
|
|-
|cursorCoordsCurrent
|
|
|
|
|-
|currentPosition
|
|
|
|
|-
|currentPositionInitted
|
|
|
|
|-
|currentMousePosition
|
|
|
|
|-
|Tile
|
|
|
|
|-
|poolCleanupInterval
|
|
|
|
|-
|dragStartX
|
|
|
|
|-
|dragStartY
|
|
|
|
|-
|dragPosX
|
|
|
|
|-
|dragPosY
|
|
|
|
|-
|isDragging
|
|
|
|
|-
|hasDragged
|
|
|
|
|-
|draggingEnabled
|
|
|
|
|-
|cursorEnabled
|
|
|
|
|-
|writeInterval
|
|
|
|
|-
|write_busy
|
|
|
|
|-
|pasteInterval
|
|
|
|
|-
|linkQueue
|
|
|
|
|-
|autoArrowKeyMoveInterval
|
|
|
|
|-
|autoArrowKeyMoveActive
|
|
|
|
|-
|autoArrowKeyMoveState
|
|
|
|
|-
|linkParams
|
|
|
|
|-
|currentSelectedLink
|
|
|
|
|-
|currentSelectedLinkCoords
|
|
|
|
|-
|touchInitZoom
|
|
|
|
|-
|touchInitDistance
|
|
|
|
|-
|touchPrev
|
|
|
|
|-
|fetchInterval
|
|
|
|
|-
|timesConnected
|
|
|
|
|-
|colorClasses
|
|
|
|
|-
|isTileLoaded
|
|
|
|
|-
|isTileVisible
|
|
|
|
|-
|networkHTTP
|
|
|
|
|-
|network
|
|
|
|
|-
|w
|
|
|
|
|-
|tellEdit
|
|
|
|
|-
|ws_functions
|
|
|
|
|}
|}
[[Category:Articles nominated by Guest-1052]]
[[Category:Documentation]]
Retrieved from "https://wiki.ourworldoftext.com/wiki/Docs"