Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-03-11 17:15:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add minimize/maximize functionality to overlay UI

Browse source 
Introduces a minimize/maximize toggle for the Blue Marble overlay via the icon, updating layout and visibility of UI elements accordingly. Updates CSS for smooth transitions and responsive sizing. Also adds debugging and logging improvements in the userscript, and updates the script name in metadata.
This commit is contained in:
Nicholas 2025-08-04 19:01:33 -03:00
parent 5a0087927f
commit a0df44e746
6 changed files with 165 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
BlueMarble.zip Normal file
View file

Binary file not shown.

2
dist/BlueMarble.user.css vendored
View file

@ -1 +1 @@
#bm-l{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000}div#bm-l{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-g{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-g.dragging{cursor:grabbing}#bm-7{margin-bottom:.5em}#bm-l img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}#bm-l h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-3 input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-3 label{margin-right:.5ch}.bm-p{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-c{vertical-align:middle}#bm-c svg{width:50%;margin:0 auto;fill:#111}div:has(>#bm-button-teleport){display:flex;gap:.5ch}#bm-button-favorite svg,#bm-button-template svg{height:1em;margin:2px auto 0;text-align:center;line-height:1em;vertical-align:bottom}#bm-8 input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-8 input[type=number]::-webkit-outer-spin-button,#bm-8 input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-0{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-2)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-a{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-1{display:flex;justify-content:space-between}#bm-l small{font-size:x-small;color:#d3d3d3}#bm-4,#bm-3,#bm-8,#bm-0,div:has(>#bm-2),#bm-a{margin-top:.5em}#bm-l button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-l button:hover,#bm-l button:focus-visible{background-color:#1061e5}#bm-l button:active,#bm-l button:disabled{background-color:#2e97ff}#bm-l button:disabled{text-decoration:line-through}
#bm-l{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease;max-width:300px;width:auto}#bm-4,#bm-l hr,#bm-3,#bm-1{transition:opacity .2s ease,height .2s ease}div#bm-l{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-g{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-g.dragging{cursor:grabbing}#bm-7{margin-bottom:.5em}#bm-7[style*="text-align: center"]{display:flex;flex-direction:column;align-items:center;justify-content:center}#bm-l[style*="padding: 5px"]{width:auto!important;max-width:300px;min-width:200px}#bm-l img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle;transition:opacity .2s ease}#bm-7[style*="text-align: center"] img{display:block;margin:0 auto}#bm-g{transition:margin-bottom .2s ease}#bm-l h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-3 input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-3 label{margin-right:.5ch}.bm-p{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-c{vertical-align:middle}#bm-c svg{width:50%;margin:0 auto;fill:#111}div:has(>#bm-button-teleport){display:flex;gap:.5ch}#bm-button-favorite svg,#bm-button-template svg{height:1em;margin:2px auto 0;text-align:center;line-height:1em;vertical-align:bottom}#bm-8 input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-8 input[type=number]::-webkit-outer-spin-button,#bm-8 input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-0{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-2)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-a{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-1{display:flex;justify-content:space-between}#bm-l small{font-size:x-small;color:#d3d3d3}#bm-4,#bm-3,#bm-8,#bm-0,div:has(>#bm-2),#bm-a{margin-top:.5em}#bm-l button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-l button:hover,#bm-l button:focus-visible{background-color:#1061e5}#bm-l button:active,#bm-l button:disabled{background-color:#2e97ff}#bm-l button:disabled{text-decoration:line-through}

4
dist/BlueMarble.user.js vendored
View file

File diff suppressed because one or more lines are too long

2
src/BlueMarble.meta.js
View file

@ -1,5 +1,5 @@
// ==UserScript==
// @name Blue Marble
// @name Blue Marble.
// @namespace https://github.com/SwingTheVine/
// @version 0.69.0
// @description A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.

122
src/main.js
View file

@ -234,10 +234,130 @@ function observeBlack() {
* @since 0.58.3
*/
function buildOverlayMain() {
let isMinimized = false; // Estado do overlay (false = maximizado, true = minimizado)
overlay.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'})
.addDiv({'id': 'bm-contain-header'})
.addDiv({'id': 'bm-bar-drag'}).buildElement()
.addImg({'alt': 'Blue Marble Icon', 'src': 'https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png'}).buildElement()
.addImg({'alt': 'Blue Marble Icon - Click to minimize/maximize', 'src': 'https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png', 'style': 'cursor: pointer;'},
(instance, img) => {
img.addEventListener('click', () => {
isMinimized = !isMinimized;
const overlay = document.querySelector('#bm-overlay');
const header = document.querySelector('#bm-contain-header');
const dragBar = document.querySelector('#bm-bar-drag');
const coordsContainer = document.querySelector('#bm-contain-coords');
const coordsButton = document.querySelector('#bm-button-coords');
const enableButton = document.querySelector('#bm-button-enable');
const coordInputs = document.querySelectorAll('#bm-contain-coords input');
// Restaura o tamanho original ao maximizar
if (!isMinimized) {
overlay.style.width = "auto";
overlay.style.maxWidth = "300px";
overlay.style.minWidth = "200px";
overlay.style.padding = "10px";
}
const elementsToToggle = [
'#bm-overlay h1', // Título "Blue Marble"
'#bm-contain-userinfo', // Informações do usuário
'#bm-overlay hr', // Linhas separadoras
'#bm-contain-automation > *:not(#bm-contain-coords)', // Seção de automação exceto coordenadas
'#bm-input-file-template', // Upload de arquivo
'#bm-contain-buttons-action', // Botões de ação
`#${instance.outputStatusId}` // Log de status (textarea)
];
elementsToToggle.forEach(selector => {
const elements = document.querySelectorAll(selector);
elements.forEach(element => {
element.style.display = isMinimized ? 'none' : '';
});
});
// Controla especificamente o container de coordenadas e botões
if (isMinimized) {
// Configura o container de coords para mostrar apenas o botão (esconde inputs)
if (coordsContainer) {
coordsContainer.style.display = 'flex';
coordsContainer.style.flexDirection = 'row';
coordsContainer.style.justifyContent = 'center';
coordsContainer.style.alignItems = 'center';
coordsContainer.style.gap = '0.5em';
coordsContainer.style.margin = '0.5em 0';
}
if (coordsButton) {
coordsButton.style.display = '';
}
// Move o botão Enable para o container de coordenadas para ficar na mesma linha
if (enableButton && coordsContainer) {
coordsContainer.appendChild(enableButton);
enableButton.style.display = '';
enableButton.style.marginTop = '0';
}
coordInputs.forEach(input => {
input.style.display = 'none';
});
overlay.style.padding = '5px';
header.style.textAlign = 'center';
header.style.margin = '0';
header.style.marginBottom = '0';
if (dragBar) {
dragBar.style.display = '';
dragBar.style.marginBottom = '0.25em';
}
} else {
// Restaura o layout normal
if (coordsContainer) {
coordsContainer.style.display = '';
coordsContainer.style.flexDirection = '';
coordsContainer.style.justifyContent = '';
coordsContainer.style.alignItems = '';
coordsContainer.style.gap = '';
coordsContainer.style.textAlign = '';
coordsContainer.style.margin = '';
}
if (coordsButton) {
coordsButton.style.display = '';
}
// Move o botão Enable de volta para seu container original
if (enableButton) {
const enableContainer = document.querySelector('#bm-contain-buttons-template');
if (enableContainer) {
enableContainer.appendChild(enableButton);
}
enableButton.style.display = '';
enableButton.style.marginTop = '';
}
coordInputs.forEach(input => {
input.style.display = '';
});
overlay.style.padding = '10px';
header.style.textAlign = '';
header.style.margin = '';
header.style.marginBottom = '';
if (dragBar) {
dragBar.style.marginBottom = '0.5em';
}
// Remove dimensões fixas para permitir redimensionamento automático
overlay.style.width = '';
overlay.style.height = '';
}
// Atualiza o alt text do ícone para refletir o estado atual
img.alt = isMinimized ?
'Blue Marble Icon - Minimized (Click to maximize)' :
'Blue Marble Icon - Maximized (Click to minimize)';
// Atualiza a mensagem de status apenas quando maximizado (para não aparecer quando minimizado)
if (!isMinimized) {
const statusMessage = 'Overlay maximizado';
instance.handleDisplayStatus(statusMessage);
}
});
}
).buildElement()
.addHeader(1, {'textContent': name}).buildElement()
.buildElement()

40
src/overlay.css
View file

@ -8,6 +8,17 @@
padding: 10px;
border-radius: 8px;
z-index: 9000;
transition: all 0.3s ease;
max-width: 300px;
width: auto;
}
/* Smooth transitions for minimize/maximize functionality */
#bm-contain-userinfo,
#bm-overlay hr,
#bm-contain-automation,
#bm-contain-buttons-action {
transition: opacity 0.2s ease, height 0.2s ease;
}
/* The entire overlay BUT it is cascading */
@ -43,12 +54,41 @@ div#bm-overlay {
margin-bottom: 0.5em;
}
/* When minimized, adjust header container */
#bm-contain-header[style*="text-align: center"] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Ensure overlay maintains consistent width when minimized */
#bm-overlay[style*="padding: 5px"] {
width: auto !important;
max-width: 300px;
min-width: 200px;
}
/* The Blue Marble image */
#bm-overlay img {
display: inline-block;
height: 2.5em;
margin-right: 1ch;
vertical-align: middle;
transition: opacity 0.2s ease;
}
/* When overlay is minimized, adjust image styling */
#bm-contain-header[style*="text-align: center"] img {
margin-right: 0;
margin-left: 0;
display: block;
margin: 0 auto;
}
/* Ensure drag bar remains functional when minimized */
#bm-bar-drag {
transition: margin-bottom 0.2s ease;
}
/* The Blue Marble header */