Snake Mod Loader
${modSelectorRadioOptions}
Advanced options
Apply
Close
`;
//Insert html for custom preset export dialogue box.
let modSelectorModalContainer = document.createElement('div');
modSelectorModalContainer.innerHTML = modSelectorModal;
modSelectorModalContainer.id = 'mod-selector-dialogue-container';
modSelectorModalContainer.style = 'display:none; position:fixed; width:100%; height:100%; z-index: 999999; left:0; top:0';
document.body.appendChild(modSelectorModalContainer);
//Tick the currently selected mod choice according to localStorage. Also, set the mod name in the indicator
const currentlySelectedMod = localStorage.getItem('snakeChosenMod');
let newlySelectedMod = currentlySelectedMod;
if(modsConfig.hasOwnProperty(currentlySelectedMod) && currentlySelectedMod !== null && currentlySelectedMod !== 'none') {
document.querySelector(`input[name="mod-selector"][value="${currentlySelectedMod}"]`).checked = true;
document.getElementById('mod-name-span').textContent = modsConfig[currentlySelectedMod].displayName;
} else {
document.querySelector('input[name="mod-selector"][value="none"]').checked = true;
document.getElementById('mod-name-span').textContent = 'None';
}
//save the mod selected when clicking on any of the radio buttons
[...document.querySelectorAll('input[type="radio"][name="mod-selector"]')].forEach(radioEl=>{
radioEl.addEventListener('click', function(){
newlySelectedMod = this.value;
});
});
//Load advanced settings
let advancedSettings = JSON.parse(localStorage.getItem('snakeAdvancedSettings')) ?? {};
let advancedSettingsOriginal = {...advancedSettings};//Shallow copy, but it's ok as nothing is nested.
//Make sure the inputs are set the right values when starting up the mod
updateAdvancedSettingInputs();
//Event listeners for advanced settings
document.getElementById('advanced-options-toggle').addEventListener('click', (event)=>{
document.getElementById('advanced-options').style.display = (document.getElementById('advanced-options').style.display === 'none' ? 'block':'none');
event.preventDefault();
});
document.getElementById('use-custom-theme').addEventListener('change', function() {
document.getElementById('custom-theme-pickers').style.display = (this.checked ? 'block' : 'none');
updateAdvancedSetting('useCustomTheme', this.checked);
});
document.getElementById('fbx-centered-checkbox').addEventListener('change', function() {
updateAdvancedSetting('fbxCentered', this.checked);
});
document.getElementById('timer-starts-on').addEventListener('change', function() {
updateAdvancedSetting('timerStartsOn', this.checked);
});
document.getElementById('background-color-picker').addEventListener('input', function() {
updateAdvancedSetting('backgroundColor', this.value);
});
document.getElementById('custom-theme-col1').addEventListener('input', function() {
updateAdvancedSetting('themeCol1', this.value);
});
document.getElementById('custom-theme-col2').addEventListener('input', function() {
updateAdvancedSetting('themeCol2', this.value);
});
document.getElementById('custom-theme-col3').addEventListener('input', function() {
updateAdvancedSetting('themeCol3', this.value);
});
document.getElementById('custom-theme-col4').addEventListener('input', function() {
updateAdvancedSetting('themeCol4', this.value);
});
document.getElementById('custom-theme-col5').addEventListener('input', function() {
updateAdvancedSetting('themeCol5', this.value);
});
document.getElementById('custom-theme-col6').addEventListener('input', function() {
updateAdvancedSetting('themeCol6', this.value);
});
document.getElementById('custom-theme-col7').addEventListener('input', function() {
updateAdvancedSetting('themeCol7', this.value);
});
if(IS_DEVELOPER_MODE) {
document.getElementById('custom-mod-name').addEventListener('input', function() {
updateAdvancedSetting('customModName', this.value);
});
document.getElementById('custom-url').addEventListener('input', function() {
updateAdvancedSetting('customUrl', this.value);
});
}
//Hide mod selector dialogue when clicking close button
document.getElementById('close-mod-selector').addEventListener('click', function() {
document.getElementById('mod-selector-dialogue-container').style.display = 'none';
});
//Apply button should save settings and refresh page
document.getElementById('apply-mod').addEventListener('click', function(event) {
//Figure out if advanced settings have been changed.
let shallowEquality = true;
for(let setting in advancedSettings) {
if(advancedSettings[setting] !== advancedSettingsOriginal?.[setting]) {
shallowEquality = false;
break;
}
}
//Skip if settings/mod chosen are the same as before.
if(shallowEquality && newlySelectedMod === currentlySelectedMod) {
alert('Settings are the same as before!')
return;
}
//Save new settings and refresh to run with the new settings
localStorage.setItem('snakeChosenMod', newlySelectedMod);
localStorage.setItem('snakeAdvancedSettings',JSON.stringify(advancedSettings));
location.reload();
});
//Set up CSS
const css = `
.mod-sel-btn:hover {
background-color: #fefcfb !important;
}
.mod-sel-btn:active {
background-color: #f0e9e5 !important;
}
`;
document.getElementsByTagName('style')[0].innerHTML = document.getElementsByTagName('style')[0].innerHTML + css;
let attemptsApplyingAdvancedSettings = 0;
setTimeout(applyAdvancedSettingsToGame, 300);//Small delay to give the game more time to load.
function updateAdvancedSettingInputs() {
if(advancedSettings.hasOwnProperty('fbxCentered')) {
document.getElementById('fbx-centered-checkbox').checked = advancedSettings.fbxCentered;
}
if(advancedSettings.hasOwnProperty('timerStartsOn')) {
document.getElementById('timer-starts-on').checked = advancedSettings.timerStartsOn;
}
if(advancedSettings.hasOwnProperty('useCustomTheme')) {
document.getElementById('use-custom-theme').checked = advancedSettings.useCustomTheme;
document.getElementById('custom-theme-pickers').style.display = (advancedSettings.useCustomTheme ? 'block' : 'none');
} else {
document.getElementById('custom-theme-pickers').style.display = 'none';
}
if(advancedSettings.hasOwnProperty('backgroundColor')) {
document.getElementById('background-color-picker').value = advancedSettings.backgroundColor;
}
if(advancedSettings.hasOwnProperty('themeCol1')) {
document.getElementById('custom-theme-col1').value = advancedSettings.themeCol1;
}
if(advancedSettings.hasOwnProperty('themeCol2')) {
document.getElementById('custom-theme-col2').value = advancedSettings.themeCol2;
}
if(advancedSettings.hasOwnProperty('themeCol3')) {
document.getElementById('custom-theme-col3').value = advancedSettings.themeCol3;
}
if(advancedSettings.hasOwnProperty('themeCol4')) {
document.getElementById('custom-theme-col4').value = advancedSettings.themeCol4;
}
if(advancedSettings.hasOwnProperty('themeCol5')) {
document.getElementById('custom-theme-col5').value = advancedSettings.themeCol5;
}
if(advancedSettings.hasOwnProperty('themeCol6')) {
document.getElementById('custom-theme-col6').value = advancedSettings.themeCol6;
}
if(advancedSettings.hasOwnProperty('themeCol7')) {
document.getElementById('custom-theme-col7').value = advancedSettings.themeCol7;
}
if(IS_DEVELOPER_MODE) {
if(advancedSettings.hasOwnProperty('customModName')) {
document.getElementById('custom-mod-name').value = advancedSettings.customModName;
}
if(advancedSettings.hasOwnProperty('customUrl')) {
document.getElementById('custom-url').value = advancedSettings.customUrl;
}
}
}
function updateAdvancedSetting(settingName, settingValue) {
advancedSettings[settingName] = settingValue;
}
function applyAdvancedSettingsToGame() {
if(attemptsApplyingAdvancedSettings > 10) {
//Stop trying to apply advanced setting if we've tried this much and the game still isn't ready
console.log('window.snake is still not available after retrying many times. Skipping applying advanced settings');
} else if(!window.snake) {
//Game not ready. Wait a bit and then try again.
console.log('window.snake not ready for when we apply advanced settings. Will retry again after waiting.');
attemptsApplyingAdvancedSettings++;
setTimeout(applyAdvancedSettingsToGame, 300);
} else {
if(advancedSettings.fbxCentered && window.location.href.includes('fbx?fbx=snake_arcade')) {
//Copied from GoogleSnakeCenteredFBX mod
document.getElementsByTagName('div')[0].style = 'position:relative;top:50%;transform:translate(0%,-50%);margin:auto;';
}
if(advancedSettings.timerStartsOn) {
window.snake.speedrun();
}
if(advancedSettings.useCustomTheme) {
window.snake.setCustomTheme(
advancedSettings.themeCol1 ?? '#aad751',
advancedSettings.themeCol2 ?? '#a2d149',
advancedSettings.themeCol3 ?? '#94bd46',
advancedSettings.themeCol4 ?? '#578a34',
advancedSettings.themeCol5 ?? '#38630d',
advancedSettings.themeCol6 ?? '#4a752c',
advancedSettings.themeCol7 ?? '#4dc1f9'
);
}
if(window.location.href.includes('fbx?fbx=snake_arcade')) {
document.body.style.backgroundColor = advancedSettings.backgroundColor;
}
}
}
}
window.testMod = {};
window.testMod.runCodeBefore = function() {
}
window.testMod.alterSnakeCode = function(code) {
code = code.replaceAll('.66','.36')
return code;
}
window.testMod.runCodeAfter = function() {
}
function loadAndRunCodeSynchronous(url) {
let req = new XMLHttpRequest();
req.open('GET', url, false);
req.onload = function() {
if(this.status === 200) {
(1,eval)(this.responseText);
} else {
console.log(`Loading selected mod returned non-200 status. Received: ${this.status}`);
}
};
req.error = function(event) {
console.error(`Error when attempting to retrieve mod code from ${url}`);
console.log(event);
};
req.send();
}
window.addEventListener('load', addModSelectorPopup);
////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Utility functions below
////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.swapInMainClassPrototype = function(mainClass, functionText) {
if(/^[$a-zA-Z0-9_]{0,6}=function/.test(functionText)) {
throw new Error("Error, function is of form abc=function(), but this only works for stuff like s_.abc=function()");
}
functionText = assertReplace(functionText, /^[$a-zA-Z0-9_]{0,6}/,`${mainClass}.prototype`);
return functionText;
}
/*
This function will search for a function/method in some code and return this function as a string
code will usually be the snake source code
functionSignature will be regex matching the beginning of the function/method (must end in $),
for example if we are trying to find a function like s_xD = function(a, b, c, d, e) {......}
then put functionSignature = /[$a-zA-Z0-9_]{0,6}=function\(a,b,c,d,e\)$/
somethingInsideFunction will be regex matching something in the function
for example if we are trying to find a function like s_xD = function(a, b, c, d, e) {...a.Xa&&10!==a.Qb...}
then put somethingInsideFunction = /a\.[$a-zA-Z0-9_]{0,6}&&10!==a\.[$a-zA-Z0-9_]{0,6}/
*/
window.findFunctionInCode = function(code, functionSignature, somethingInsideFunction, logging = false) {
let functionSignatureSource = functionSignature.source;
let functionSignatureFlags = functionSignature.flags;//Probably empty string
/*Check functionSignature ends in $*/
if (functionSignatureSource[functionSignatureSource.length - 1] !== "$") {
throw new Error("functionSignature regex should end in $");
}
/*Allow line breaks after commas or =. This is bit sketchy, but should be ok as findFunctionInCode is used in a quite limited way*/
functionSignatureSource.replaceAll(/,|=/g,'$&\\n?');
functionSignature = new RegExp(functionSignatureSource, functionSignatureFlags);
/*get the position of somethingInsideFunction*/
let indexWithinFunction = code.search(somethingInsideFunction);
if (indexWithinFunction == -1) {
console.log("%cCouldn't find a match for somethingInsideFunction", "color:red;");
diagnoseRegexError(code, somethingInsideFunction);
}
/*expand outwards from somethingInsideFunction until we get to the function signature, then count brackets
to find the end of the function*/
let startIndex = 0;
for (let i = indexWithinFunction; i >= 0; i--) {
let startOfCode = code.substring(0, i);
startIndex = startOfCode.search(functionSignature);
if (startIndex !== -1) {
break;
}
if (i == 0) {
throw new Error("Couldn't find function signature");
}
}
let bracketCount = 0;
let foundFirstBracket = false;
let endIndex = 0;
/*Use bracket counting to find the whole function*/
let codeLength = code.length;
for (let i = startIndex; i <= codeLength; i++) {
if (!foundFirstBracket && code[i] == "{") {
foundFirstBracket = true;
}
if (code[i] == "{") {
bracketCount++;
}
if (code[i] == "}") {
bracketCount--;
}
if (foundFirstBracket && bracketCount == 0) {
endIndex = i;
break;
}
if (i == codeLength) {
throw new Error("Couldn't pair up brackets");
}
}
let fullFunction = code.substring(startIndex, endIndex + 1);
/*throw error if fullFunction doesn't contain something inside function - i.e. function signature was wrong*/
if (fullFunction.search(somethingInsideFunction) === -1) {
throw new Error("Function signature does not belong to the same function as somethingInsideFunction");
}
if (logging) {
console.log(fullFunction);
}
return fullFunction;
}
/*
Same as replace, but throws an error if nothing is changed
*/
window.assertReplace = function(baseText, regex, replacement) {
if (typeof baseText !== 'string') {
throw new Error('String argument expected for assertReplace');
}
let outputText = baseText.replace(regex, replacement);
//Throw warning if nothing is replaced
if (baseText === outputText) {
diagnoseRegexError(baseText, regex);
}
return outputText;
}
/*
Same as replaceAll, but throws an error if nothing is changed
*/
window.assertReplaceAll = function(baseText, regex, replacement) {
if (typeof baseText !== 'string') {
throw new Error('String argument expected for assertReplace');
}
let outputText = baseText.replaceAll(regex, replacement);
//Throw warning if nothing is replaced
if (baseText === outputText) {
diagnoseRegexError(baseText, regex);
}
return outputText;
}
//Alternate way to use assertReplace. Example: code = code.assertReplace('Thing to change', 'New thing');
String.prototype.assertReplace = function(regex, replacement) {
return assertReplace(this.toString(), regex, replacement);
};
//Same as above for assertReplaceAll.
String.prototype.assertReplaceAll = function(regex, replacement) {
return assertReplaceAll(this.toString(), regex, replacement);
};
window.diagnoseRegexError = function(baseText, regex) {
if(!(regex instanceof RegExp)) {
throw new Error('Failed to find match using string argument. No more details available');
}
//see if removing line breaks works - in that case we can give a more useful error message
let oneLineText = baseText.replaceAll(/\n/g,'');
let res = regex.test(oneLineText);
//If line breaks don't solve the issue then throw a general error
if (!res) {
throw new Error('Failed to find match for regex.');
}
//Try to suggest correct regex to use for searching
let regexSource = regex.source;
let regexFlags = regex.flags;
//Look at all the spots where line breaks might occur and try adding \n? there to see if it makes a difference
//It might be easier to just crudely brute force putting \n? at each possible index?
for(let breakableChar of ["%","&","\\*","\\+",",","-","\\/",":",";","<","=",">","\\?","{","\\|","}"]) {
for(let pos = regexSource.indexOf(breakableChar); pos !== -1; pos = regexSource.indexOf(breakableChar, pos + 1)) {
//Remake the regex with a new line at the candidate position
let candidateRegexSource = `${regexSource.slice(0,pos + breakableChar.length)}\\n?${regexSource.slice(pos + breakableChar.length)}`;
let candidateRegex;
try{
candidateRegex = new RegExp(candidateRegexSource, regexFlags);
} catch(err) {
continue;
}
//See if the new regex works
let testReplaceResult = candidateRegex.test(baseText);
if(testReplaceResult) {
//Success we found the working regex! Give descriptive error message to user and log suggested regex with new line in correct place
console.log(`Suggested regex improvement:
${candidateRegex}`);
throw new Error('Suggested improvement found! Error with line break, failed to find match for regex. See logged output for regex to use instead that should hopefully fix this.');
}
}
}
throw new Error('Line break error! Failed to failed to find match for regex - most likely caused by a new line break. No suggestions provided');
}
window.appendCodeWithinSnakeModule = function(snakeCode, codeToAdd, addSemicolonAfter) {
if(addSemicolonAfter) {
codeToAdd += ';';
}
var newSnakeCode = snakeCode.replace(/}\)\(this\._s\);\n\/\/ Google Inc\./, codeToAdd + '$&');
return newSnakeCode;
}
//Turns _.abc into _s.abc
window.swapInSnakeGlobal = function(text) {
return assertReplace(text, /^_\./, '_s.');
}