Pen Properties
++ Pen Property blocks look into the default pen's properties, or even detach certain functions of the pen. +
++ "stamp pen square" +
+
+Stamps a square using the current pen size and attributes with its own attributes.
++ +
+ "stamp pen square with the texture of [texture]" +
+
+Stamps a square using the current pen size and attributes with its own attributes. With an image attached!
++ +
+ "set pen square's [attribute] to [value]" +
+
++Sets the attribute of a sprite's pen square! Attributes include +
-
+
- Width - a multiplier of the square's width
+ The formula would be (pen size) * (square width)
+
+ - Height - a multiplier of the square's height
+ The formula would be (pen size) * (square height)
+
+ - Rotation - the rotation of the pen square + +
- (T)U-Multiplier - the multiplier for the U coordinates of the pen square
+ Think of it as stretching the image horizontally.
+
+ - (T)U-Offset - the offset for the U coordinates of the pen square
+ Think of it as scrolling the image to the left or right.
+
+ - (T)V-Multiplier - the multiplier for the V coordinates of the pen square
+ Think of it as stretching the image vertically.
+
+ - (T)V-Offset - the offset for the V coordinates of the pen square.
+ Think of it as scrolling the image to the up or down.
+ - Red Tint - +
+ +
+ "set pen square's [attribute] to [value]" +
+
++Gets the attribute of a sprite's pen square! Attributes include +
++ +
+ "tint pen square to [color]" +
+
++Tints the square to be whatever color you put in there +
++ +
+ "reset square attributes" +
+
++Resets the current square's attributes +
+\ No newline at end of file diff --git a/script.js b/script.js index 6f73655..2c3c589 100644 --- a/script.js +++ b/script.js @@ -13,6 +13,34 @@ customElements.define("page-title", titleElement); + class infoBox extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + console.log(this); + + this.innerHTML = `
${this.innerHTML}
`; + + this.style.display = "block"; + this.style.padding = "8px"; + this.style.margin = "8px 0"; + this.style.borderRadius = "8px"; + + if (this.getAttribute("color")) { + this.style.background = `${this.getAttribute("color")}3e`; + this.style.border = `1px solid ${this.getAttribute("color")}9a`; + } + else { + this.style.background = "rgba(0, 149, 255, 0.245)"; + this.style.border = "1px solid rgba(0, 149, 255, 0.604)"; + } + } + } + + customElements.define("info-box", infoBox); + //Get the page path window.penPlusPath = window.location.origin + window.location.pathname;