mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-05-06 11:39:27 +00:00
Fix some issues with the README (#124)
* Added ignore files to stop popular code formatters from messing with the code style * Change transform easing to 0s * Added a translucent gray checkerboard render for #deface * Added workflow to check what branch PR came from * v0.81.0; Merge branch 'code' into main * Update README.md Fix some issues with the readme * Added version Shield back --------- Co-authored-by: SwingTheVine <swingthevine@gmail.com> Co-authored-by: AloeSapling <aloesapling@gmail.com> Co-authored-by: Endrik Tombak <littleendu@gmail.com> Co-authored-by: KrunchyKrisp <m.damidavicius@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
windbus
GitHub
parent
453b4139de
commit
5f3d4bdfc6
10 changed files with 63 additions and 39 deletions
1
.eslintignore
Normal file
1
.eslintignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
*
|
||||
18
.github/workflows/pr-branch-check.yml
vendored
Normal file
18
.github/workflows/pr-branch-check.yml
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
name: Enforce allowed branches for PRs to main
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
check-branch:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check PR source branch
|
||||
run: |
|
||||
echo "Source branch: ${{ github.head_ref }}"
|
||||
if [[ "${{ github.head_ref }}" != "documentation" && "${{ github.head_ref }}" != "code" ]]; then
|
||||
echo "Error: PRs to main must come from 'documentation' or 'code' branches only."
|
||||
exit 1
|
||||
fi
|
||||
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
*
|
||||
2
dist/BlueMarble.user.css
vendored
2
dist/BlueMarble.user.css
vendored
|
|
@ -1 +1 @@
|
|||
#bm-n{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease;max-width:300px;width:auto;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}#bm-4,#bm-n hr,#bm-3,#bm-1{transition:opacity .2s ease,height .2s ease}div#bm-n{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-i{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-i.dragging{cursor:grabbing}#bm-n:has(#bm-i.dragging){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#bm-i.dragging{pointer-events:auto}#bm-7{margin-bottom:.5em}#bm-7[style*="text-align: center"]{display:flex;flex-direction:column;align-items:center;justify-content:center}#bm-n[style*="padding: 5px"]{width:auto!important;max-width:300px;min-width:200px}#bm-n 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-i{transition:margin-bottom .2s ease}#bm-n 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-q{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-d{vertical-align:middle}#bm-d 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-2,input[type=file][id*=template]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}#bm-b{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-1{display:flex;justify-content:space-between}#bm-n small{font-size:x-small;color:#d3d3d3}#bm-4,#bm-3,#bm-8,#bm-0,div:has(>#bm-2),#bm-b{margin-top:.5em}#bm-n button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-n button:hover,#bm-n button:focus-visible{background-color:#1061e5}#bm-n button:active,#bm-n button:disabled{background-color:#2e97ff}#bm-n button:disabled{text-decoration:line-through}
|
||||
#bm-n{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;max-width:300px;width:auto;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}#bm-4,#bm-n hr,#bm-3,#bm-1{transition:opacity .2s ease,height .2s ease}div#bm-n{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-i{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-i.dragging{cursor:grabbing}#bm-n:has(#bm-i.dragging){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#bm-i.dragging{pointer-events:auto}#bm-7{margin-bottom:.5em}#bm-7[style*="text-align: center"]{display:flex;flex-direction:column;align-items:center;justify-content:center}#bm-n[style*="padding: 5px"]{width:auto!important;max-width:300px;min-width:200px}#bm-n 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-i{transition:margin-bottom .2s ease}#bm-n 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-q{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-d{vertical-align:middle}#bm-d 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-2,input[type=file][id*=template]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}#bm-b{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-1{display:flex;justify-content:space-between}#bm-n small{font-size:x-small;color:#d3d3d3}#bm-4,#bm-3,#bm-8,#bm-0,div:has(>#bm-2),#bm-b{margin-top:.5em}#bm-n button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-n button:hover,#bm-n button:focus-visible{background-color:#1061e5}#bm-n button:active,#bm-n button:disabled{background-color:#2e97ff}#bm-n button:disabled{text-decoration:line-through}
|
||||
|
|
|
|||
8
dist/BlueMarble.user.js
vendored
8
dist/BlueMarble.user.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -42,8 +42,8 @@
|
|||
</table>
|
||||
|
||||
<h1>Blue Marble</h1>
|
||||
<a href="https://wplacestatus.sobakintech.xyz" target="_blank" rel="noopener noreferrer"><img alt="Wplace Status" src="https://wplacestatus.sobakintech.xyz/api/badge/15/status"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Latest Version" src="https://img.shields.io/badge/Latest_Version-0.80.0-lightblue?style=flat"></a>
|
||||
<a href="https://status.wplace.lol" target="_blank" rel="noopener noreferrer"><img alt="Wplace Status" src="https://status.wplace.lol/api/badge/15/status"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Latest Version" src="https://img.shields.io/badge/Latest_Version-0.81.0-lightblue?style=flat"></a>
|
||||
<a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank" rel="noopener noreferrer"><img alt="Latest Release" src="https://img.shields.io/github/v/release/SwingTheVine/Wplace-BlueMarble?sort=semver&style=flat&label=Latest%20Release&color=blue"></a>
|
||||
<a href="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/LICENSE.txt" target="_blank" rel="noopener noreferrer"><img alt="Software License: MPL-2.0" src="https://img.shields.io/badge/Software_License-MPL--2.0-slateblue?style=flat"></a>
|
||||
<a href="https://discord.gg/tpeBPy46hf" target="_blank" rel="noopener noreferrer"><img alt="Contact Me" src="https://img.shields.io/badge/Contact_Me-gray?style=flat&logo=Discord&logoColor=white&logoSize=auto&labelColor=cornflowerblue"></a>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-494-black?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Lines of Code" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=code"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Comments" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=comments"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-74.82%25-blue"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-74.77%25-blue"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Repo Size" src="https://img.shields.io/github/repo-size/SwingTheVine/Wplace-BlueMarble"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Visitors" src="https://img.shields.io/badge/Visitors-84_851-gainsboro?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Downloads" src="https://img.shields.io/github/downloads/SwingTheVine/Wplace-BlueMarble/total.svg"></a>
|
||||
|
|
@ -126,43 +126,42 @@
|
|||
Installation instructions for Blue Marble are below. Click the arrows to expand the instructions you want to see. Blue text is a link.
|
||||
<details>
|
||||
<summary>
|
||||
<b>Install Chrome</b> <sup>(Click to Expand)</sup>
|
||||
<b>Install Chrome</b> <sup>(Click to expand)</sup>
|
||||
</summary>
|
||||
<a href="https://www.youtube.com/watch?v=gg5oiJcftEc" target="_blank" rel="noopener noreferrer"><img alt="Install Tutorial" src="https://img.shields.io/badge/Install_Tutorial-gray?style=flat&logo=YouTube&logoColor=white&logoSize=auto&labelColor=darkred"></a>
|
||||
<ol>
|
||||
<li>Install the <a href="https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo" target="_blank" rel="noopener noreferrer">TamperMonkey</a> plugin for Chrome.
|
||||
<li>Install the <a href="https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo" target="_blank" rel="noopener noreferrer">TamperMonkey</a> extension for Chrome.
|
||||
<br>
|
||||
<img alt="Click the 'Add extention' button" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerChromeInstall1.png"></li>
|
||||
<li>Right-click the extention.
|
||||
<img alt="Click the 'Add extension' button" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerChromeInstall1.png"></li>
|
||||
<li>Right-click the extension.
|
||||
<br>
|
||||
<img alt="Enter the 'Manage Extention' menu" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerChromeInstall2.png"></li>
|
||||
<img alt="Enter the 'Manage Extension' menu" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerChromeInstall2.png"></li>
|
||||
<li>Left-click "Manage Extension."</li>
|
||||
<li>Enable "Developer Mode."
|
||||
<br>
|
||||
<img alt="Enable 'Developer Mode' and 'Allow user scripts'" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerChromeInstall3.png"></li>
|
||||
<li>Enable "Allow user scripts."</li>
|
||||
<li><strong>One-click install:</strong> Click this link to install Blue Marble directly: <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases/download/pre/BlueMarble.user.js" target="_blank" rel="noopener noreferrer"><strong>Install Blue Marble</strong></a>
|
||||
<br>
|
||||
TamperMonkey will automatically detect the userscript and prompt you to install it.</li>
|
||||
<li><strong>One-click install:</strong> Click this link to Install Blue Marble directly: <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases/download/pre/BlueMarble.user.js" target="_blank" rel="noopener noreferrer"><strong>Install Blue Marble</strong></a><br>
|
||||
TamperMonkey will automatically detect the userscript and prompt you to Install it.</li>
|
||||
<li>Refresh the <a href="https://wplace.live/" target="_blank" rel="noopener noreferrer">wplace.live</a> webpage.</li>
|
||||
</ol>
|
||||
</details>
|
||||
<details>
|
||||
<summary>
|
||||
<b>Install Edge</b> <sup>(Click to Expand)</sup>
|
||||
<b>Install on Microsoft Edge</b> <sup>(Click to expand)</sup>
|
||||
</summary>
|
||||
<ol>
|
||||
<li>Install the <a href="https://microsoftedge.microsoft.com/addons/detail/iikmkjmpaadaobahmlepeloendndfphd" target="_blank" rel="noopener noreferrer">TamperMonkey</a> plugin for Microsoft Edge.
|
||||
<br>
|
||||
<img alt="Click the 'Get' button" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerEdgeInstall1.png"></li>
|
||||
<li>Right-click the extention.
|
||||
<li>Right-click the extension.
|
||||
<br>
|
||||
<img alt="Enter the 'Manage Extention' menu" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerEdgeInstall2.png"></li>
|
||||
<img alt="Enter the 'Manage Extension' menu" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerEdgeInstall2.png"></li>
|
||||
<li>Left-click "Manage Extension."</li>
|
||||
<li>Enable "Developer Mode."
|
||||
<br>
|
||||
<img alt="Enable 'Developer Mode'" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerEdgeInstall3.png"></li>
|
||||
<li>Download the <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank" rel="noopener noreferrer">BlueMarble.user.js</a> file in the "assets" of the latest release.</li>
|
||||
<li>Download the <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank" rel="noopener noreferrer">BlueMarble.user.js</a> file in the "Assets" of the latest release.</li>
|
||||
<li>Open the TamperMonkey Dashboard.
|
||||
<br>
|
||||
<img alt="Enter the TamperMonkey 'Dashboard'" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerEdgeInstall4.png"></li>
|
||||
|
|
@ -180,13 +179,13 @@
|
|||
</details>
|
||||
<details>
|
||||
<summary>
|
||||
<b>Install Firefox</b> <sup>(Click to Expand)</sup>
|
||||
<b>Install on Firefox</b> <sup>(Click to expand)</sup>
|
||||
</summary>
|
||||
<ol>
|
||||
<li>Install the <a href="https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/" target="_blank" rel="noopener noreferrer">TamperMonkey</a> plugin for Firefox.
|
||||
<br>
|
||||
<img alt="Click the 'Add to Firefox' button" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerFirefoxInstall1.png"></li>
|
||||
<li><strong>One-click install:</strong> Click this link to install Blue Marble directly: <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases/download/pre/BlueMarble.user.js" target="_blank" rel="noopener noreferrer"><strong>Install Blue Marble</strong></a>
|
||||
<img alt="Click the 'Add to Firefox' button" src="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/docs/assets/ComputerFireFoxInstall1.png"></li>
|
||||
<li><strong>One-click install:</strong> Click this link to Install Blue Marble directly: <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases/download/pre/BlueMarble.user.js" target="_blank" rel="noopener noreferrer"><strong>Install Blue Marble</strong></a>
|
||||
<br>
|
||||
TamperMonkey will automatically detect the userscript and prompt you to install it.</li>
|
||||
<li>Refresh the <a href="https://wplace.live/" target="_blank" rel="noopener noreferrer">wplace.live</a> webpage.</li>
|
||||
|
|
@ -267,7 +266,7 @@
|
|||
<p><b>A:</b> Blue Marble does not contain malicious code. The Blue Marble code can be found in the <code>src/</code> folder. If you worry about Blue Marble being malware, you can read the code, then bundle it yourself using the tools in <code>build/</code>.
|
||||
|
||||
<h3>How can Blue Marble place pixels for me?</h3>
|
||||
<p><b>A:</b> Unfortunatly, Blue Marble will not support the automatic placement of pixels without user interaction.
|
||||
<p><b>A:</b> Unfortunately, Blue Marble will not support the automatic placement of pixels without user interaction because it is not allowed by Wplace.
|
||||
|
||||
<h3>How do I hide the overlay?</h3>
|
||||
<p><b>A:</b> Turn the userscript off and refresh the page.</p>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.80.0",
|
||||
"version": "0.81.0",
|
||||
"type": "module",
|
||||
"homepage": "https://bluemarble.camilledaguin.fr/",
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// ==UserScript==
|
||||
// @name Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.80.0
|
||||
// @version 0.81.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.
|
||||
// @author SwingTheVine
|
||||
// @license MPL-2.0
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
// @grant GM_addStyle
|
||||
// @grant GM.setValue
|
||||
// @grant GM_getValue
|
||||
// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/f3ee47c55505d29255b29e320891453884f13369/dist/BlueMarble.user.css
|
||||
// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/a3b4a288514dc48a9232b1aeeb6b377af6fdfe7c/dist/BlueMarble.user.css
|
||||
// ==/UserScript==
|
||||
|
||||
// Wplace --> https://wplace.live
|
||||
|
|
|
|||
|
|
@ -129,18 +129,23 @@ export default class Template {
|
|||
for (let y = 0; y < canvasHeight; y++) {
|
||||
for (let x = 0; x < canvasWidth; x++) {
|
||||
// For every pixel...
|
||||
|
||||
// ... Make it transparent unless it is the "center"
|
||||
if (x % shreadSize !== 1 || y % shreadSize !== 1) {
|
||||
const pixelIndex = (y * canvasWidth + x) * 4; // Find the pixel index in an array where every 4 indexes are 1 pixel
|
||||
const pixelIndex = (y * canvasWidth + x) * 4; // Find the pixel index in an array where every 4 indexes are 1 pixel
|
||||
// If the pixel is the color #deface, draw a translucent gray checkerboard pattern
|
||||
if (
|
||||
imageData.data[pixelIndex] === 222 &&
|
||||
imageData.data[pixelIndex + 1] === 250 &&
|
||||
imageData.data[pixelIndex + 2] === 206
|
||||
) {
|
||||
if ((x + y) % 2 === 0) { // Formula for checkerboard pattern
|
||||
imageData.data[pixelIndex] = 0;
|
||||
imageData.data[pixelIndex + 1] = 0;
|
||||
imageData.data[pixelIndex + 2] = 0;
|
||||
imageData.data[pixelIndex + 3] = 32; // Translucent black
|
||||
} else { // Transparent negative space
|
||||
imageData.data[pixelIndex + 3] = 0;
|
||||
}
|
||||
} else if (x % shreadSize !== 1 || y % shreadSize !== 1) { // Otherwise only draw the middle pixel
|
||||
imageData.data[pixelIndex + 3] = 0; // Make the pixel transparent on the alpha channel
|
||||
|
||||
// if (!!imageData.data[pixelIndex + 3]) {
|
||||
// imageData.data[pixelIndex + 3] = 50; // Alpha
|
||||
// imageData.data[pixelIndex] = 30; // Red
|
||||
// imageData.data[pixelIndex + 1] = 30; // Green
|
||||
// imageData.data[pixelIndex + 2] = 30; // Blue
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
z-index: 9000;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.3s ease, transform 0s;
|
||||
max-width: 300px;
|
||||
width: auto;
|
||||
/* Performance optimizations for smooth dragging */
|
||||
|
|
|
|||
Loading…
Reference in a new issue