Thank you for wanting to contribute to the userscript "Blue Marble"! It means a lot to me that someone likes my project enough to want to help it grow. If you haven't already done so, consider joining our Discord. You can ask questions about the userscript there and receive feedback. You can also visit the official Blue Marble website for more information.
Note: If you are using AI, and you want to tell the AI how the codebase files are related to each-other, go to the Class diagram of relationships for Blue Marble diagram in the chart section of this file. Copy the chart, and give it to the AI.
Note: If you are contributing to the documentation of this project, make your fork from the documentation branch. If you are contributing to the code/programming of this project, make your fork from the code branch. If you fork main, and make a PR from main -> main your PR might be rejected. This is because main is not up-to-date, and your changes might conflict with up-to-date changes.
Overlay(), and you want to make a new overlay, you should probably call Overlay() as well.main branch! Fork either code or documentation.Following the guidelines on this page helps everyone. Writing code that follows the guidelines:
Most of the work to be done in this userscript is related to programming. It is helpful to have a background in programming, but not required. If you are looking to learn JavaScript and its syntax, check out this roadmap for learning JavaScript. We strongly recommend that you understand functions, methods, classes, and Object-Oriented-Programming if you plan to implement a brand new feature. More technical knowledge like method chaining and lambda expressions are useful but not required. You can find the documentation for Blue Marble here. Make your code modular when possible. In other words, you should "blackbox" your code by putting it in a function when possible. For example, if you are adding a color filter to remove colors from being displayed on the template, the function should pass in the template information and tile information, and output the filtered template/tile information. This way, other people's code can't interfere with the color filter. For example:
While typically overlooked, translating is a powerful way to contribute to a project. If you can write, there is something you can contribute! From minor grammar mistakes, to translating an entire language, all help is appreciated.
Although userscripts are oriented around coding, there are many ways to contribute! From improving the README file, to making tutorials, you can contribute in many ways that don't require programming skills. For example, if you have an idea for a feature, but you don't have the skills to implement it, submit a feature request! Someone might see it, think it is cool, and implement it.
Please do not use GitHub Issues for asking support questions (e.g. "How do I install this?" or "What does cssMangler do?"). We use the GitHub issue tracker for bug reports and feature requests. If you are having trouble and need help, ask on our Discord. However, you should make a feature request on our issue tracker before starting work on your contribution. Nothing sucks more than working hard on a high-quality contribution just for it to be rejected because it does not align with the mission of the mod. Ask first!
Please contribute in good faith. We will reject pull requests with bad code, comments, or pull requests that damage the mod.
Our "mission" makes up the essence of this userscipt. Without it, this project would not exist.
The mission of this userscript is to provide a well-documented, high-quality, open-source template overlay.
Overlay popup window works.Here lies information that may be of interest to those who wish to modify Blue Marble.
Running npm run build will compile Blue Marble. The compiled files can be found in the dist/ directory. Running npm run patch will increment the patch version, and compile Blue Marble.
Use the arrow and zoom buttons to navigate the charts. Use the ↔️ button to go fullscreen. Use the 🔄 button to reset. All buttons can be found on the chart. Use the "two squares" icon to copy the chart. If you need assistance reading the chart, copy the chart into an AI using the "two squares" button on the chart.
Class diagram of relationships for Blue Marble: (last updated 0.74.0) ```mermaid --- config: class: hideEmptyMembersBox: true --- classDiagram class main { name : string version : string +inject() +observeBlack() +buildOverlayMain() } class utils { +escapeHTML() +serverTPtoDisplayTP() +negativeSafeModulo() +consoleLog() +consoleError() +consoleWarn() +numberToEncoded() +uint8ToBase64() +base64ToUint8() } class apiManager { coordsTilePixel : number[4] +spontaneousResponseListener() } class templateManager { userID : number templatesShouldBeDrawn : boolean +createJSON() +createTemplate() -storeTemplates() +disableTemplate() +drawTemplateOnTile() +importJSON() +parseBlueMarble() +setTemplatesShouldBeDrawn() } class Template { +createTemplateTiles() } class Overlay { +setApiManager() -createElement() +add...() +buildElement() +buildOverlay() +updateInnerHTML() +handleDrag() +handleDisplayStatus() +handleDisplayError() } main o-- apiManager : creates main o-- utils : creates main o-- Overlay : creates main, tabTemplate main o-- templateManager : creates apiManager ..> templateManager : calls drawTemplateOnTiles(), sets userID apiManager ..> utils : calls escapeHTML(), numberToEncoded(), serverTPtoDisplayTP() Overlay ..> apiManager : uses coordsTilePixel Overlay ..> templateManager : calls setTemplatesShouldBeDrawn() templateManager *-- Template : manages templateManager ..> utils : calls base64ToUint8(), numberToEncoded() Template ..> utils : calls uint8ToBase64() ``` Class diagram of relationships for Blue Marble's compiler/builder: (last updated 0.74.0) ```mermaid --- config: class: hideEmptyMembersBox: true --- classDiagram namespace npm_run_patch { class `patch.js` { } class `docs/README.md` { } } namespace npm_run_build { class `build.js` { mapCSS : JSON Object } class `cssMangler.js` { importMap : JSON Object returnMap : JSON Object +mangleSelectors() +escapeRegex() +numberToEncoded() } class `update-version.js` { } class `utils.js` { +consoleStyle() } class esbuild { +build() } class terser { +minify() } class `dist/BlueMarble.user.js` { } class `dist/BlueMarble.user.css` { } class `dist/BlueMarble.user.css.map.json` { } class `src/BlueMarble.meta.js` { } class `src/main.js` { } class `package.json` { } } note for `patch.js` "calls npm_run_build" `build.js` ..> terser : requires `build.js` ..> `utils.js` : calls consoleStyle() `build.js` ..> `update-version.js` : executes `build.js` ..> `src/BlueMarble.meta.js` : reads `build.js` ..> esbuild : calls build() `build.js` ..> `dist/BlueMarble.user.css` : writes esbuild ..> `src/main.js` : reads `build.js` ..> `dist/BlueMarble.user.js` : writes terser ..> `dist/BlueMarble.user.js` : reads & writes `build.js` ..> `cssMangler.js` : calls manglerSelectors() `cssMangler.js` ..> `dist/BlueMarble.user.css.map.json` : reads `cssMangler.js` ..> `dist/BlueMarble.user.js` : reads & writes `cssMangler.js` ..> `dist/BlueMarble.user.css` : reads & writes `build.js` <.. `cssMangler.js` : returns mapCSS `build.js` ..> `dist/BlueMarble.user.css.map.json` : writes mapCSS `patch.js` ..> `docs/README.md` : reads & writes `patch.js` ..> `utils.js` : calls consoleStyle() `update-version.js` ..> `package.json` : reads `update-version.js` ..> `src/BlueMarble.meta.js` : reads & writes `update-version.js` ..> `utils.js` : calls consoleStyle() ```This is what SwingTheVine uses to program Blue Marble. You don't have to use the exact same thing. This is provided for reference.
Version: 1.102.3138.0.7204.184 (Official Build) (64-bit)5.3.3
22H219045.6093Intel Core i7-9750H CPU @ 2.60GHz16.0 GB932 GB SSD Samsung SSD 970 EVO Plus 1TB, 238 GB SSD HFM256GDJTNG-8310ANVIDIA GeForce GTX 1660 Ti (6 GB)64-bit operating system