Add a simple note function to matches
// ==UserScript==
// @name AWBW game notes
// @namespace https://awbw.amarriner.com/
// @version 1.06
// @description Add a simple note function to matches
// @author Truniht
// @match https://awbw.amarriner.com/*?games_id=*
// @match https://awbw.amarriner.com/*?replays_id=*
// @icon https://awbw.amarriner.com/favicon.ico
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addValueChangeListener
// @license MIT
// ==/UserScript==
(function() {
var displayNote = GM_getValue('AWBWNoteOverlay') ? 1 : 0;
var isMovePlanner = window.location.href.indexOf('moveplanner.php') > 0;
var gameID = window.location.href.match(/_id=([0-9]+)/)[1];
var noteValue = GM_getValue('AWBWNote' + gameID) || '';
var ele = document.createElement('textarea');
ele.style.width = '100%';
ele.style.maxWidth = '94%';
ele.style.background = 'rgb(250, 250, 221)';
ele.style.color = '#000000';
ele.style.marginTop = '4px';
ele.spellcheck = false;
function resizeEle() {
if (ele.clientHeight + 10 < ele.scrollHeight) ele.style.height = ele.scrollHeight + 'px';
}
if (noteValue) ele.value = noteValue;
var saveTimeout = 0;
function saveText() {
GM_setValue('AWBWNote' + gameID, ele.value);
}
ele.oninput = function(e) {
clearTimeout(saveTimeout);
saveTimeout = setTimeout(saveText, 500);
resizeEle();
updateOverlay(ele.value);
}
var noteEle;
var currentNote = '';
function createNoteEle() {
if (noteEle) return;
noteEle = document.createElement('div');
noteEle.style = "pointer-events: none; position: fixed; z-index: 9999; top: 50vh; left: 40vw; color: red; opacity: 0.6; transform: translate(-50%, -50%); font-size: 64px; font-weight: bold; text-shadow: 1px 1px 2px black, 1px 1px 2px black; white-space: pre;";
}
function updateOverlay(v) {
if (isMovePlanner) return;
if (!displayNote) {
if (noteEle && noteEle.parentElement) document.body.removeChild(noteEle);
return;
}
createNoteEle();
if (currentNote != v) {
currentNote = v;
if (v) noteEle.textContent = currentNote;
else if (noteEle.parentElement) document.body.removeChild(noteEle);
}
if (v && !noteEle.parentElement) document.body.appendChild(noteEle);
}
GM_addValueChangeListener('AWBWNote' + gameID, function(name, old_value, new_value, remote) {
if (remote) {
ele.value = new_value;
updateOverlay(new_value);
}
});
//Stop default keybindings
function preventK(e) {
e.stopPropagation();
}
ele.addEventListener('keydown', preventK);
ele.addEventListener('keyup', preventK);
ele.addEventListener('keypress', preventK);
function updateDisplaySetting() {
displayNote = this.value * 1;
GM_setValue('AWBWNoteOverlay', displayNote);
updateOverlay(ele.value);
}
var settingsButton;
function addSettingsButton() {
if (settingsButton) return;
settingsButton = document.createElement('tr');
var AWBWNoteOverlaySetting = displayNote ? ' selected="selected"' : '';
settingsButton.innerHTML = `<td class="borderwhite" style="border-top: 0"><table style="width: 100%;">
<tr>
<td colspan="2" style="padding-bottom: 2px;"><span class="small_text">
<b style="padding-right:2px;">Note settings</b>
</span></td>
</tr>
<tr>
<td width="80" style="padding-left: 2px; padding-bottom: 2px;"><span class="small_text">
<b style="padding-right:2px;">Overlay:</b>
</span></td>
<td width="80" style="padding-right: 2px; padding-bottom: 2px;">
<select style="width:100%;" align="right" name="AWBWNoteOverlaySetting">
<option value="0">Off</option>
<option value="1"${AWBWNoteOverlaySetting}>On</option>
</select>
</td>
</tr>
</table></td>`;
document.querySelector('#showview tbody').appendChild(settingsButton);
settingsButton.querySelector('select').onchange = updateDisplaySetting;
}
function loadNotes() {
var mainEle = (
document.querySelector('.game-player-info') ||
document.querySelector('.awbwenhancements-sidebar-contents') ||
document.querySelector('.reverse-info-box').parentElement.parentElement.parentElement
);
if (!mainEle) return false;
mainEle.appendChild(ele);
mainEle.style.height = '';
resizeEle();
const observer = new MutationObserver(function() {
observer.disconnect();
if (mainEle.lastChild !== ele) mainEle.appendChild(ele);
mainEle.style.height = '';
observer.observe(mainEle, { childList: true, attributes: true});
});
observer.observe(mainEle, { childList: true, attributes: true});
//Try to copy the background style
ele.style.background = getComputedStyle(document.getElementById('outer')).background;
//Make some adjustements for the moveplanner
var awbweContainer = document.getElementById('awbwenhancements-sidebar-container');
if (awbweContainer) {
awbweContainer.style.width = 'auto';
ele.style.width = 'calc(100% - 24px)';
ele.style.margin = '0 12px';
}
updateOverlay(ele.value);
addSettingsButton();
return true;
}
window.addEventListener('load', loadNotes);
})();