noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-25 19:59:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Separate stylesheet

Browse Source
This commit is contained in:
Idrees Hassan
2025-08-16 13:51:11 -04:00
parent ec3b4311af
commit 8cde4703aa
5 changed files with 836 additions and 827 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
birb.js
View File

@@ -46,299 +46,7 @@ const DEFAULT_SETTINGS = {
let userSettings = {}; let userSettings = {};
const styles = ` const STYLESHEET = `___STYLESHEET___`;
@font-face {
font-family: Monocraft;
src: url("https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf");
}
:root {
--border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1);
--double-border-size: calc(var(--border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2);
--highlight: #ffa3cb;
--border-color: var(--highlight);
}
#birb {
image-rendering: pixelated;
position: fixed;
bottom: 0;
transform: scale(${CSS_SCALE});
transform-origin: bottom;
z-index: 2147483638 !important;
cursor: pointer;
}
.birb-decoration {
image-rendering: pixelated;
position: fixed;
bottom: 0;
transform: scale(${CSS_SCALE});
transform-origin: bottom;
z-index: 2147483630 !important;
}
.birb-window {
font-family: "Monocraft", monospace !important;
line-height: initial !important;
color: #000000 !important;
z-index: 2147483639 !important;
position: fixed;
background-color: #ffecda;
box-shadow:
var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color),
var(--double-border-size) 0 var(--border-color),
var(--neg-double-border-size) 0 var(--border-color),
0 var(--neg-double-border-size) var(--border-color),
0 var(--double-border-size) var(--border-color),
0 0 0 var(--border-size) var(--border-color),
0 0 0 var(--double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white,
0 var(--neg-double-border-size) 0 var(--border-size) white,
0 var(--double-border-size) 0 var(--border-size) white;
box-sizing: border-box;
display: flex;
flex-direction: column;
animation: pop-in 0.08s;
transition-timing-function: ease-in;
drop-shadow(0 0 0 var(--border-color));
}
#${MENU_ID} {
transition-duration: 0.2s;
transition-timing-function: ease-out;
min-width: 140px;
z-index: 2147483639 !important;
}
#${MENU_EXIT_ID} {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483637 !important;
}
@keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); }
100% { opacity: 1; transform: scale(1); }
}
.birb-window-header {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
padding-right: 30px;
background-color: var(--highlight);
box-shadow:
var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--highlight),
var(--neg-border-size) var(--border-size) var(--border-color),
var(--border-size) var(--border-size) var(--border-color);
color: var(--border-color) !important;
font-size: 16px;
}
.birb-window-title {
text-align: center;
flex-grow: 1;
user-select: none;
color: #ffecda;
}
.birb-window-close {
position: absolute;
top: 1px;
right: 0;
color: #ffecda;
user-select: none;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.birb-window-close:hover {
transform: scale(1.1);
}
.birb-window-content {
box-sizing: border-box;
background-color: #ffecda;
margin-top: var(--border-size);
width: 100%;
flex-grow: 1;
box-shadow:
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
}
.birb-pico-8-content {
background: #111111;
box-shadow: none;
display: flex;
justify-content: center;
overflow: hidden;
border: none;
}
.birb-pico-8-content iframe {
width: 300px;
margin-left: -15px;
margin-right: -30px;
margin-top: -10px;
margin-bottom: -23px;
border:none;
aspect-ratio: 1;
}
.birb-music-player-content {
background: #ffecda;
box-shadow:
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
justify-content: center;
overflow: hidden;
padding: 10px;
}
.birb-window-list-item {
width: 100%;
font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
opacity: 0.7 !important;
user-select: none;
display: flex;
justify-content: space-between;
cursor: pointer;
color: black !important;
}
.birb-window-list-item:hover {
opacity: 1 !important;
}
.birb-window-list-item-arrow {
display: inline-block;
}
.birb-window-separator {
width: 100%;
height: 1.5px;
background-color: #000000;
box-sizing: border-box;
margin-top: 4px;
margin-bottom: 4px;
opacity: 0.4;
}
#${FIELD_GUIDE_ID} {
width: 340px;
}
.birb-grid-content {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
padding-top: 4px;
padding-bottom: 4px;
}
.birb-grid-item {
width: 64px;
height: 64px;
overflow: hidden;
margin-top: 6px;
margin-bottom: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.birb-grid-item canvas {
image-rendering: pixelated;
transform: scale(2);
padding-bottom: var(--border-size);
}
.birb-grid-item, .birb-field-guide-description, .birb-message-content {
border: var(--border-size) solid rgb(255, 207, 144);
box-shadow: 0 0 0 var(--border-size) white;
background: rgba(255, 221, 177, 0.5);
}
.birb-grid-item-locked {
cursor: auto;
filter: grayscale(100%) sepia(30%);
}
.birb-grid-item-locked canvas {
filter: contrast(90%);
}
.birb-grid-item-selected {
border: var(--border-size) solid var(--highlight);
}
.birb-field-guide-description {
box-sizing: border-box;
width: 100%;
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px;
color: rgb(124, 108, 75);
}
#${FEATHER_ID} {
cursor: pointer;
}
.birb-message-content {
box-sizing: border-box;
width: 100%;
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 14px;
color: rgb(124, 108, 75);
}
`;
class Layer { class Layer {
/** /**
@@ -722,7 +430,8 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
}); });
} }
Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels ]) => { Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)])
.then(([birbPixels, decorationPixels, featherPixels]) => {
const SPRITE_SHEET = birbPixels; const SPRITE_SHEET = birbPixels;
const DECORATIONS_SPRITE_SHEET = decorationPixels; const DECORATIONS_SPRITE_SHEET = decorationPixels;
const FEATHER_SPRITE_SHEET = featherPixels; const FEATHER_SPRITE_SHEET = featherPixels;
@@ -1038,7 +747,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
load(); load();
styleElement.innerHTML = styles; styleElement.innerHTML = STYLESHEET;
document.head.appendChild(styleElement); document.head.appendChild(styleElement);
canvas.id = "birb"; canvas.id = "birb";

11
build.js
View File

@@ -16,6 +16,10 @@ const spriteSheets = [
path: "./sprites/decorations.png" path: "./sprites/decorations.png"
} }
]; ];
const STYLESHEET_PATH = "./stylesheet.css";
const STYLESHEET_KEY = "___STYLESHEET___";
const userScriptHeader = const userScriptHeader =
`// ==UserScript== `// ==UserScript==
// @name Browser Bird // @name Browser Bird
@@ -35,12 +39,19 @@ const userScriptHeader =
let birbJs = readFileSync('birb.js', 'utf8'); let birbJs = readFileSync('birb.js', 'utf8');
// Compile and insert sprite sheets
for (const spriteSheet of spriteSheets) { for (const spriteSheet of spriteSheets) {
const dataUri = readFileSync(spriteSheet.path, 'base64'); const dataUri = readFileSync(spriteSheet.path, 'base64');
birbJs = birbJs.replaceAll(spriteSheet.key, `data:image/png;base64,${dataUri}`); birbJs = birbJs.replaceAll(spriteSheet.key, `data:image/png;base64,${dataUri}`);
} }
// Insert stylesheet
const stylesheetContent = readFileSync(STYLESHEET_PATH, 'utf8');
birbJs = birbJs.replace(STYLESHEET_KEY, stylesheetContent);
// Build standard javascript file
writeFileSync('./dist/birb.js', birbJs); writeFileSync('./dist/birb.js', birbJs);
// Build user script
const userScript = userScriptHeader + birbJs; const userScript = userScriptHeader + birbJs;
writeFileSync('./dist/birb.user.js', userScript); writeFileSync('./dist/birb.user.js', userScript);

531
dist/birb.js vendored
View File

@@ -46,299 +46,297 @@ const DEFAULT_SETTINGS = {
let userSettings = {}; let userSettings = {};
const styles = ` const STYLESHEET = `@font-face {
@font-face { font-family: Monocraft;
font-family: Monocraft; src: url("https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf");
src: url("https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf"); }
}
:root { :root {
--border-size: 2px; --border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1); --neg-border-size: calc(var(--border-size) * -1);
--double-border-size: calc(var(--border-size) * 2); --double-border-size: calc(var(--border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2); --neg-double-border-size: calc(var(--neg-border-size) * 2);
--highlight: #ffa3cb; --highlight: #ffa3cb;
--border-color: var(--highlight); --border-color: var(--highlight);
} }
#birb { #birb {
image-rendering: pixelated; image-rendering: pixelated;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
transform: scale(${CSS_SCALE}); transform: scale(var(--birb-scale));
transform-origin: bottom; transform-origin: bottom;
z-index: 2147483638 !important; z-index: 2147483638 !important;
cursor: pointer; cursor: pointer;
} }
.birb-decoration { .birb-decoration {
image-rendering: pixelated; image-rendering: pixelated;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
transform: scale(${CSS_SCALE}); transform: scale(var(--birb-scale));
transform-origin: bottom; transform-origin: bottom;
z-index: 2147483630 !important; z-index: 2147483630 !important;
} }
.birb-window { .birb-window {
font-family: "Monocraft", monospace !important; font-family: "Monocraft", monospace !important;
line-height: initial !important; line-height: initial !important;
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: #ffecda; background-color: #ffecda;
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color), 0 var(--border-size) var(--border-color),
var(--double-border-size) 0 var(--border-color), var(--double-border-size) 0 var(--border-color),
var(--neg-double-border-size) 0 var(--border-color), var(--neg-double-border-size) 0 var(--border-color),
0 var(--neg-double-border-size) var(--border-color), 0 var(--neg-double-border-size) var(--border-color),
0 var(--double-border-size) var(--border-color), 0 var(--double-border-size) var(--border-color),
0 0 0 var(--border-size) var(--border-color), 0 0 0 var(--border-size) var(--border-color),
0 0 0 var(--double-border-size) white, 0 0 0 var(--double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white, var(--double-border-size) 0 0 var(--border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white, var(--neg-double-border-size) 0 0 var(--border-size) white,
0 var(--neg-double-border-size) 0 var(--border-size) white, 0 var(--neg-double-border-size) 0 var(--border-size) white,
0 var(--double-border-size) 0 var(--border-size) white; 0 var(--double-border-size) 0 var(--border-size) white;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
drop-shadow(0 0 0 var(--border-color)); /* drop-shadow(0 0 0 var(--border-color)); */
} }
#${MENU_ID} { #birb-menu {
transition-duration: 0.2s; transition-duration: 0.2s;
transition-timing-function: ease-out; transition-timing-function: ease-out;
min-width: 140px; min-width: 140px;
z-index: 2147483639 !important; z-index: 2147483639 !important;
} }
#${MENU_EXIT_ID} { #birb-menu-exit {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2147483637 !important; z-index: 2147483637 !important;
} }
@keyframes pop-in { @keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); } 0% { opacity: 1; transform: scale(0.1); }
100% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); }
} }
.birb-window-header { .birb-window-header {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 7px; padding: 7px;
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
background-color: var(--highlight); background-color: var(--highlight);
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--highlight), var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--neg-border-size) var(--highlight),
var(--neg-border-size) var(--border-size) var(--border-color), var(--neg-border-size) var(--border-size) var(--border-color),
var(--border-size) var(--border-size) var(--border-color); var(--border-size) var(--border-size) var(--border-color);
color: var(--border-color) !important; color: var(--border-color) !important;
font-size: 16px; font-size: 16px;
} }
.birb-window-title { .birb-window-title {
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
user-select: none; user-select: none;
color: #ffecda; color: #ffecda;
} }
.birb-window-close {
position: absolute;
top: 1px;
right: 0;
color: #ffecda;
user-select: none;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.birb-window-close:hover { .birb-window-close {
transform: scale(1.1); position: absolute;
} top: 1px;
right: 0;
color: #ffecda;
user-select: none;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.birb-window-content { .birb-window-close:hover {
box-sizing: border-box; transform: scale(1.1);
background-color: #ffecda; }
margin-top: var(--border-size);
width: 100%;
flex-grow: 1;
box-shadow:
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
}
.birb-pico-8-content { .birb-window-content {
background: #111111; box-sizing: border-box;
box-shadow: none; background-color: #ffecda;
display: flex; margin-top: var(--border-size);
justify-content: center; width: 100%;
overflow: hidden; flex-grow: 1;
border: none; box-shadow:
} var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
}
.birb-pico-8-content iframe { .birb-pico-8-content {
width: 300px; background: #111111;
margin-left: -15px; box-shadow: none;
margin-right: -30px; display: flex;
margin-top: -10px; justify-content: center;
margin-bottom: -23px; overflow: hidden;
border:none; border: none;
aspect-ratio: 1; }
}
.birb-music-player-content { .birb-pico-8-content iframe {
background: #ffecda; width: 300px;
box-shadow: margin-left: -15px;
var(--border-size) 0 #ffecda, margin-right: -30px;
var(--neg-border-size) 0 #ffecda, margin-top: -10px;
0 var(--border-size) #ffecda, margin-bottom: -23px;
0 var(--neg-border-size) var(--border-color), border:none;
0 var(--border-size) var(--border-color); aspect-ratio: 1;
display: flex; }
justify-content: center;
overflow: hidden;
padding: 10px;
}
.birb-window-list-item { .birb-music-player-content {
width: 100%; background: #ffecda;
font-size: 14px; box-shadow:
padding-top: 4px; var(--border-size) 0 #ffecda,
padding-bottom: 4px; var(--neg-border-size) 0 #ffecda,
opacity: 0.7 !important; 0 var(--border-size) #ffecda,
user-select: none; 0 var(--neg-border-size) var(--border-color),
display: flex; 0 var(--border-size) var(--border-color);
justify-content: space-between; display: flex;
cursor: pointer; justify-content: center;
color: black !important; overflow: hidden;
} padding: 10px;
}
.birb-window-list-item:hover { .birb-window-list-item {
opacity: 1 !important; width: 100%;
} font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
opacity: 0.7 !important;
user-select: none;
display: flex;
justify-content: space-between;
cursor: pointer;
color: black !important;
}
.birb-window-list-item-arrow { .birb-window-list-item:hover {
display: inline-block; opacity: 1 !important;
} }
.birb-window-separator { .birb-window-list-item-arrow {
width: 100%; display: inline-block;
height: 1.5px; }
background-color: #000000;
box-sizing: border-box;
margin-top: 4px;
margin-bottom: 4px;
opacity: 0.4;
}
#${FIELD_GUIDE_ID} { .birb-window-separator {
width: 340px; width: 100%;
} height: 1.5px;
background-color: #000000;
box-sizing: border-box;
margin-top: 4px;
margin-bottom: 4px;
opacity: 0.4;
}
.birb-grid-content { #birb-field-guide {
width: 100%; width: 340px;
display: flex; }
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
padding-top: 4px;
padding-bottom: 4px;
}
.birb-grid-item { .birb-grid-content {
width: 64px; width: 100%;
height: 64px; display: flex;
overflow: hidden; flex-wrap: wrap;
margin-top: 6px; justify-content: space-between;
margin-bottom: 6px; flex-direction: row;
display: flex; padding-top: 4px;
justify-content: center; padding-bottom: 4px;
align-items: center; }
cursor: pointer;
}
.birb-grid-item canvas { .birb-grid-item {
image-rendering: pixelated; width: 64px;
transform: scale(2); height: 64px;
padding-bottom: var(--border-size); overflow: hidden;
} margin-top: 6px;
margin-bottom: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.birb-grid-item, .birb-field-guide-description, .birb-message-content { .birb-grid-item canvas {
border: var(--border-size) solid rgb(255, 207, 144); image-rendering: pixelated;
box-shadow: 0 0 0 var(--border-size) white; transform: scale(2);
background: rgba(255, 221, 177, 0.5); padding-bottom: var(--border-size);
} }
.birb-grid-item-locked { .birb-grid-item, .birb-field-guide-description, .birb-message-content {
cursor: auto; border: var(--border-size) solid rgb(255, 207, 144);
filter: grayscale(100%) sepia(30%); box-shadow: 0 0 0 var(--border-size) white;
} background: rgba(255, 221, 177, 0.5);
}
.birb-grid-item-locked canvas { .birb-grid-item-locked {
filter: contrast(90%); cursor: auto;
} filter: grayscale(100%) sepia(30%);
}
.birb-grid-item-selected { .birb-grid-item-locked canvas {
border: var(--border-size) solid var(--highlight); filter: contrast(90%);
} }
.birb-field-guide-description { .birb-grid-item-selected {
box-sizing: border-box; border: var(--border-size) solid var(--highlight);
width: 100%; }
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px;
color: rgb(124, 108, 75);
}
#${FEATHER_ID} { .birb-field-guide-description {
cursor: pointer; box-sizing: border-box;
} width: 100%;
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px;
color: rgb(124, 108, 75);
}
.birb-message-content { #birb-feather {
box-sizing: border-box; cursor: pointer;
width: 100%; }
margin-top: 10px;
padding: 8px; .birb-message-content {
padding-top: 4px; box-sizing: border-box;
padding-bottom: 4px; width: 100%;
font-size: 14px; margin-top: 10px;
color: rgb(124, 108, 75); padding: 8px;
} padding-top: 4px;
`; padding-bottom: 4px;
font-size: 14px;
color: rgb(124, 108, 75);
}`;
class Layer { class Layer {
/** /**
@@ -722,7 +720,8 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
}); });
} }
Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels ]) => { Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)])
.then(([birbPixels, decorationPixels, featherPixels]) => {
const SPRITE_SHEET = birbPixels; const SPRITE_SHEET = birbPixels;
const DECORATIONS_SPRITE_SHEET = decorationPixels; const DECORATIONS_SPRITE_SHEET = decorationPixels;
const FEATHER_SPRITE_SHEET = featherPixels; const FEATHER_SPRITE_SHEET = featherPixels;
@@ -1038,7 +1037,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
load(); load();
styleElement.innerHTML = styles; styleElement.innerHTML = STYLESHEET;
document.head.appendChild(styleElement); document.head.appendChild(styleElement);
canvas.id = "birb"; canvas.id = "birb";

531
dist/birb.user.js vendored
View File

@@ -59,299 +59,297 @@ const DEFAULT_SETTINGS = {
let userSettings = {}; let userSettings = {};
const styles = ` const STYLESHEET = `@font-face {
@font-face { font-family: Monocraft;
font-family: Monocraft; src: url("https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf");
src: url("https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf"); }
}
:root { :root {
--border-size: 2px; --border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1); --neg-border-size: calc(var(--border-size) * -1);
--double-border-size: calc(var(--border-size) * 2); --double-border-size: calc(var(--border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2); --neg-double-border-size: calc(var(--neg-border-size) * 2);
--highlight: #ffa3cb; --highlight: #ffa3cb;
--border-color: var(--highlight); --border-color: var(--highlight);
} }
#birb { #birb {
image-rendering: pixelated; image-rendering: pixelated;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
transform: scale(${CSS_SCALE}); transform: scale(var(--birb-scale));
transform-origin: bottom; transform-origin: bottom;
z-index: 2147483638 !important; z-index: 2147483638 !important;
cursor: pointer; cursor: pointer;
} }
.birb-decoration { .birb-decoration {
image-rendering: pixelated; image-rendering: pixelated;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
transform: scale(${CSS_SCALE}); transform: scale(var(--birb-scale));
transform-origin: bottom; transform-origin: bottom;
z-index: 2147483630 !important; z-index: 2147483630 !important;
} }
.birb-window { .birb-window {
font-family: "Monocraft", monospace !important; font-family: "Monocraft", monospace !important;
line-height: initial !important; line-height: initial !important;
color: #000000 !important; color: #000000 !important;
z-index: 2147483639 !important; z-index: 2147483639 !important;
position: fixed; position: fixed;
background-color: #ffecda; background-color: #ffecda;
box-shadow: box-shadow:
var(--border-size) 0 var(--border-color), var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color), var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) var(--border-color), 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color), 0 var(--border-size) var(--border-color),
var(--double-border-size) 0 var(--border-color), var(--double-border-size) 0 var(--border-color),
var(--neg-double-border-size) 0 var(--border-color), var(--neg-double-border-size) 0 var(--border-color),
0 var(--neg-double-border-size) var(--border-color), 0 var(--neg-double-border-size) var(--border-color),
0 var(--double-border-size) var(--border-color), 0 var(--double-border-size) var(--border-color),
0 0 0 var(--border-size) var(--border-color), 0 0 0 var(--border-size) var(--border-color),
0 0 0 var(--double-border-size) white, 0 0 0 var(--double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white, var(--double-border-size) 0 0 var(--border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white, var(--neg-double-border-size) 0 0 var(--border-size) white,
0 var(--neg-double-border-size) 0 var(--border-size) white, 0 var(--neg-double-border-size) 0 var(--border-size) white,
0 var(--double-border-size) 0 var(--border-size) white; 0 var(--double-border-size) 0 var(--border-size) white;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
drop-shadow(0 0 0 var(--border-color)); /* drop-shadow(0 0 0 var(--border-color)); */
} }
#${MENU_ID} { #birb-menu {
transition-duration: 0.2s; transition-duration: 0.2s;
transition-timing-function: ease-out; transition-timing-function: ease-out;
min-width: 140px; min-width: 140px;
z-index: 2147483639 !important; z-index: 2147483639 !important;
} }
#${MENU_EXIT_ID} { #birb-menu-exit {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 2147483637 !important; z-index: 2147483637 !important;
} }
@keyframes pop-in { @keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); } 0% { opacity: 1; transform: scale(0.1); }
100% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); }
} }
.birb-window-header { .birb-window-header {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 7px; padding: 7px;
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
background-color: var(--highlight); background-color: var(--highlight);
box-shadow: box-shadow:
var(--border-size) 0 var(--highlight), var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--highlight), var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--highlight), 0 var(--neg-border-size) var(--highlight),
var(--neg-border-size) var(--border-size) var(--border-color), var(--neg-border-size) var(--border-size) var(--border-color),
var(--border-size) var(--border-size) var(--border-color); var(--border-size) var(--border-size) var(--border-color);
color: var(--border-color) !important; color: var(--border-color) !important;
font-size: 16px; font-size: 16px;
} }
.birb-window-title { .birb-window-title {
text-align: center; text-align: center;
flex-grow: 1; flex-grow: 1;
user-select: none; user-select: none;
color: #ffecda; color: #ffecda;
} }
.birb-window-close {
position: absolute;
top: 1px;
right: 0;
color: #ffecda;
user-select: none;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.birb-window-close:hover { .birb-window-close {
transform: scale(1.1); position: absolute;
} top: 1px;
right: 0;
color: #ffecda;
user-select: none;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.birb-window-content { .birb-window-close:hover {
box-sizing: border-box; transform: scale(1.1);
background-color: #ffecda; }
margin-top: var(--border-size);
width: 100%;
flex-grow: 1;
box-shadow:
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
}
.birb-pico-8-content { .birb-window-content {
background: #111111; box-sizing: border-box;
box-shadow: none; background-color: #ffecda;
display: flex; margin-top: var(--border-size);
justify-content: center; width: 100%;
overflow: hidden; flex-grow: 1;
border: none; box-shadow:
} var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
}
.birb-pico-8-content iframe { .birb-pico-8-content {
width: 300px; background: #111111;
margin-left: -15px; box-shadow: none;
margin-right: -30px; display: flex;
margin-top: -10px; justify-content: center;
margin-bottom: -23px; overflow: hidden;
border:none; border: none;
aspect-ratio: 1; }
}
.birb-music-player-content { .birb-pico-8-content iframe {
background: #ffecda; width: 300px;
box-shadow: margin-left: -15px;
var(--border-size) 0 #ffecda, margin-right: -30px;
var(--neg-border-size) 0 #ffecda, margin-top: -10px;
0 var(--border-size) #ffecda, margin-bottom: -23px;
0 var(--neg-border-size) var(--border-color), border:none;
0 var(--border-size) var(--border-color); aspect-ratio: 1;
display: flex; }
justify-content: center;
overflow: hidden;
padding: 10px;
}
.birb-window-list-item { .birb-music-player-content {
width: 100%; background: #ffecda;
font-size: 14px; box-shadow:
padding-top: 4px; var(--border-size) 0 #ffecda,
padding-bottom: 4px; var(--neg-border-size) 0 #ffecda,
opacity: 0.7 !important; 0 var(--border-size) #ffecda,
user-select: none; 0 var(--neg-border-size) var(--border-color),
display: flex; 0 var(--border-size) var(--border-color);
justify-content: space-between; display: flex;
cursor: pointer; justify-content: center;
color: black !important; overflow: hidden;
} padding: 10px;
}
.birb-window-list-item:hover { .birb-window-list-item {
opacity: 1 !important; width: 100%;
} font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
opacity: 0.7 !important;
user-select: none;
display: flex;
justify-content: space-between;
cursor: pointer;
color: black !important;
}
.birb-window-list-item-arrow { .birb-window-list-item:hover {
display: inline-block; opacity: 1 !important;
} }
.birb-window-separator { .birb-window-list-item-arrow {
width: 100%; display: inline-block;
height: 1.5px; }
background-color: #000000;
box-sizing: border-box;
margin-top: 4px;
margin-bottom: 4px;
opacity: 0.4;
}
#${FIELD_GUIDE_ID} { .birb-window-separator {
width: 340px; width: 100%;
} height: 1.5px;
background-color: #000000;
box-sizing: border-box;
margin-top: 4px;
margin-bottom: 4px;
opacity: 0.4;
}
.birb-grid-content { #birb-field-guide {
width: 100%; width: 340px;
display: flex; }
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
padding-top: 4px;
padding-bottom: 4px;
}
.birb-grid-item { .birb-grid-content {
width: 64px; width: 100%;
height: 64px; display: flex;
overflow: hidden; flex-wrap: wrap;
margin-top: 6px; justify-content: space-between;
margin-bottom: 6px; flex-direction: row;
display: flex; padding-top: 4px;
justify-content: center; padding-bottom: 4px;
align-items: center; }
cursor: pointer;
}
.birb-grid-item canvas { .birb-grid-item {
image-rendering: pixelated; width: 64px;
transform: scale(2); height: 64px;
padding-bottom: var(--border-size); overflow: hidden;
} margin-top: 6px;
margin-bottom: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.birb-grid-item, .birb-field-guide-description, .birb-message-content { .birb-grid-item canvas {
border: var(--border-size) solid rgb(255, 207, 144); image-rendering: pixelated;
box-shadow: 0 0 0 var(--border-size) white; transform: scale(2);
background: rgba(255, 221, 177, 0.5); padding-bottom: var(--border-size);
} }
.birb-grid-item-locked { .birb-grid-item, .birb-field-guide-description, .birb-message-content {
cursor: auto; border: var(--border-size) solid rgb(255, 207, 144);
filter: grayscale(100%) sepia(30%); box-shadow: 0 0 0 var(--border-size) white;
} background: rgba(255, 221, 177, 0.5);
}
.birb-grid-item-locked canvas { .birb-grid-item-locked {
filter: contrast(90%); cursor: auto;
} filter: grayscale(100%) sepia(30%);
}
.birb-grid-item-selected { .birb-grid-item-locked canvas {
border: var(--border-size) solid var(--highlight); filter: contrast(90%);
} }
.birb-field-guide-description { .birb-grid-item-selected {
box-sizing: border-box; border: var(--border-size) solid var(--highlight);
width: 100%; }
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px;
color: rgb(124, 108, 75);
}
#${FEATHER_ID} { .birb-field-guide-description {
cursor: pointer; box-sizing: border-box;
} width: 100%;
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px;
color: rgb(124, 108, 75);
}
.birb-message-content { #birb-feather {
box-sizing: border-box; cursor: pointer;
width: 100%; }
margin-top: 10px;
padding: 8px; .birb-message-content {
padding-top: 4px; box-sizing: border-box;
padding-bottom: 4px; width: 100%;
font-size: 14px; margin-top: 10px;
color: rgb(124, 108, 75); padding: 8px;
} padding-top: 4px;
`; padding-bottom: 4px;
font-size: 14px;
color: rgb(124, 108, 75);
}`;
class Layer { class Layer {
/** /**
@@ -735,7 +733,8 @@ function loadSpriteSheetPixels(dataUri, templateColors = true) {
}); });
} }
Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)]).then(([birbPixels, decorationPixels, featherPixels ]) => { Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATIONS_SPRITE_SHEET, false), loadSpriteSheetPixels(FEATHER_SPRITE_SHEET)])
.then(([birbPixels, decorationPixels, featherPixels]) => {
const SPRITE_SHEET = birbPixels; const SPRITE_SHEET = birbPixels;
const DECORATIONS_SPRITE_SHEET = decorationPixels; const DECORATIONS_SPRITE_SHEET = decorationPixels;
const FEATHER_SPRITE_SHEET = featherPixels; const FEATHER_SPRITE_SHEET = featherPixels;
@@ -1051,7 +1050,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
load(); load();
styleElement.innerHTML = styles; styleElement.innerHTML = STYLESHEET;
document.head.appendChild(styleElement); document.head.appendChild(styleElement);
canvas.id = "birb"; canvas.id = "birb";

291
stylesheet.css Normal file
View File

@@ -0,0 +1,291 @@
@font-face {
font-family: Monocraft;
src: url("https://cdn.jsdelivr.net/gh/idreesinc/Monocraft@99b32ab40612ff2533a69d8f14bd8b3d9e604456/dist/Monocraft.otf");
}
:root {
--border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1);
--double-border-size: calc(var(--border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2);
--highlight: #ffa3cb;
--border-color: var(--highlight);
}
#birb {
image-rendering: pixelated;
position: fixed;
bottom: 0;
transform: scale(var(--birb-scale));
transform-origin: bottom;
z-index: 2147483638 !important;
cursor: pointer;
}
.birb-decoration {
image-rendering: pixelated;
position: fixed;
bottom: 0;
transform: scale(var(--birb-scale));
transform-origin: bottom;
z-index: 2147483630 !important;
}
.birb-window {
font-family: "Monocraft", monospace !important;
line-height: initial !important;
color: #000000 !important;
z-index: 2147483639 !important;
position: fixed;
background-color: #ffecda;
box-shadow:
var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color),
var(--double-border-size) 0 var(--border-color),
var(--neg-double-border-size) 0 var(--border-color),
0 var(--neg-double-border-size) var(--border-color),
0 var(--double-border-size) var(--border-color),
0 0 0 var(--border-size) var(--border-color),
0 0 0 var(--double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white,
0 var(--neg-double-border-size) 0 var(--border-size) white,
0 var(--double-border-size) 0 var(--border-size) white;
box-sizing: border-box;
display: flex;
flex-direction: column;
animation: pop-in 0.08s;
transition-timing-function: ease-in;
/* drop-shadow(0 0 0 var(--border-color)); */
}
#birb-menu {
transition-duration: 0.2s;
transition-timing-function: ease-out;
min-width: 140px;
z-index: 2147483639 !important;
}
#birb-menu-exit {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483637 !important;
}
@keyframes pop-in {
0% { opacity: 1; transform: scale(0.1); }
100% { opacity: 1; transform: scale(1); }
}
.birb-window-header {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 30px;
padding-right: 30px;
background-color: var(--highlight);
box-shadow:
var(--border-size) 0 var(--highlight),
var(--neg-border-size) 0 var(--highlight),
0 var(--neg-border-size) var(--highlight),
var(--neg-border-size) var(--border-size) var(--border-color),
var(--border-size) var(--border-size) var(--border-color);
color: var(--border-color) !important;
font-size: 16px;
}
.birb-window-title {
text-align: center;
flex-grow: 1;
user-select: none;
color: #ffecda;
}
.birb-window-close {
position: absolute;
top: 1px;
right: 0;
color: #ffecda;
user-select: none;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.birb-window-close:hover {
transform: scale(1.1);
}
.birb-window-content {
box-sizing: border-box;
background-color: #ffecda;
margin-top: var(--border-size);
width: 100%;
flex-grow: 1;
box-shadow:
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 8px;
padding-bottom: 8px;
}
.birb-pico-8-content {
background: #111111;
box-shadow: none;
display: flex;
justify-content: center;
overflow: hidden;
border: none;
}
.birb-pico-8-content iframe {
width: 300px;
margin-left: -15px;
margin-right: -30px;
margin-top: -10px;
margin-bottom: -23px;
border:none;
aspect-ratio: 1;
}
.birb-music-player-content {
background: #ffecda;
box-shadow:
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
0 var(--neg-border-size) var(--border-color),
0 var(--border-size) var(--border-color);
display: flex;
justify-content: center;
overflow: hidden;
padding: 10px;
}
.birb-window-list-item {
width: 100%;
font-size: 14px;
padding-top: 4px;
padding-bottom: 4px;
opacity: 0.7 !important;
user-select: none;
display: flex;
justify-content: space-between;
cursor: pointer;
color: black !important;
}
.birb-window-list-item:hover {
opacity: 1 !important;
}
.birb-window-list-item-arrow {
display: inline-block;
}
.birb-window-separator {
width: 100%;
height: 1.5px;
background-color: #000000;
box-sizing: border-box;
margin-top: 4px;
margin-bottom: 4px;
opacity: 0.4;
}
#birb-field-guide {
width: 340px;
}
.birb-grid-content {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row;
padding-top: 4px;
padding-bottom: 4px;
}
.birb-grid-item {
width: 64px;
height: 64px;
overflow: hidden;
margin-top: 6px;
margin-bottom: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.birb-grid-item canvas {
image-rendering: pixelated;
transform: scale(2);
padding-bottom: var(--border-size);
}
.birb-grid-item, .birb-field-guide-description, .birb-message-content {
border: var(--border-size) solid rgb(255, 207, 144);
box-shadow: 0 0 0 var(--border-size) white;
background: rgba(255, 221, 177, 0.5);
}
.birb-grid-item-locked {
cursor: auto;
filter: grayscale(100%) sepia(30%);
}
.birb-grid-item-locked canvas {
filter: contrast(90%);
}
.birb-grid-item-selected {
border: var(--border-size) solid var(--highlight);
}
.birb-field-guide-description {
box-sizing: border-box;
width: 100%;
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 6px;
font-size: 14px;
color: rgb(124, 108, 75);
}
#birb-feather {
cursor: pointer;
}
.birb-message-content {
box-sizing: border-box;
width: 100%;
margin-top: 10px;
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
font-size: 14px;
color: rgb(124, 108, 75);
}