noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-26 04:07:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scale mobile UI

Browse Source
This commit is contained in:
Idrees Hassan
2025-08-16 20:07:05 -04:00
parent 027a78b43c
commit 54ab24d119
5 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
birb.js
View File

@@ -2,7 +2,8 @@
// @ts-ignore // @ts-ignore
const SHARED_CONFIG = { const SHARED_CONFIG = {
cssScale: 1, birbCssScale: 1,
uiCssScale: 1,
canvasPixelSize: 1, canvasPixelSize: 1,
hopSpeed: 0.07, hopSpeed: 0.07,
hopDistance: 45, hopDistance: 45,
@@ -14,6 +15,7 @@ const DESKTOP_CONFIG = {
}; };
const MOBILE_CONFIG = { const MOBILE_CONFIG = {
uiCssScale: 0.9,
flySpeed: 0.125, flySpeed: 0.125,
}; };
@@ -21,9 +23,10 @@ const CONFIG = { ...SHARED_CONFIG, ...isMobile() ? MOBILE_CONFIG : DESKTOP_CONFI
let debugMode = location.hostname === "127.0.0.1"; let debugMode = location.hostname === "127.0.0.1";
const CSS_SCALE = CONFIG.cssScale; const BIRB_CSS_SCALE = CONFIG.birbCssScale;
const UI_CSS_SCALE = CONFIG.uiCssScale;
const CANVAS_PIXEL_SIZE = CONFIG.canvasPixelSize; const CANVAS_PIXEL_SIZE = CONFIG.canvasPixelSize;
const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * CSS_SCALE; const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * BIRB_CSS_SCALE;
const HOP_SPEED = CONFIG.hopSpeed; const HOP_SPEED = CONFIG.hopSpeed;
const FLY_SPEED = CONFIG.flySpeed; const FLY_SPEED = CONFIG.flySpeed;
const HOP_DISTANCE = CONFIG.hopDistance; const HOP_DISTANCE = CONFIG.hopDistance;
@@ -586,6 +589,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
new MenuItem("Field Guide", insertFieldGuide), new MenuItem("Field Guide", insertFieldGuide),
// new MenuItem("Decorations", insertDecoration), // new MenuItem("Decorations", insertDecoration),
new DebugMenuItem("Applications", () => switchMenuItems(otherItems), false), new DebugMenuItem("Applications", () => switchMenuItems(otherItems), false),
new MenuItem("Sticky Note", newStickyNote),
new MenuItem(`Hide ${birdBirb()}`, hideBirb), new MenuItem(`Hide ${birdBirb()}`, hideBirb),
new DebugMenuItem("Reset Data", resetSaveData), new DebugMenuItem("Reset Data", resetSaveData),
new DebugMenuItem("Unlock All", () => { new DebugMenuItem("Unlock All", () => {
@@ -596,7 +600,6 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
new DebugMenuItem("Disable Debug", () => { new DebugMenuItem("Disable Debug", () => {
debugMode = false; debugMode = false;
}), }),
new MenuItem("Add Sticky Note", newStickyNote),
new Separator(), new Separator(),
new MenuItem("Settings", () => switchMenuItems(settingsItems), false), new MenuItem("Settings", () => switchMenuItems(settingsItems), false),
]; ];
@@ -1637,11 +1640,11 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
} }
function getCanvasWidth() { function getCanvasWidth() {
return canvas.width * CSS_SCALE return canvas.width * BIRB_CSS_SCALE
} }
function getCanvasHeight() { function getCanvasHeight() {
return canvas.height * CSS_SCALE return canvas.height * BIRB_CSS_SCALE
} }
function hop() { function hop() {

2
build.js
View File

@@ -24,7 +24,7 @@ const userScriptHeader =
`// ==UserScript== `// ==UserScript==
// @name Browser Bird // @name Browser Bird
// @namespace https://idreesinc.com // @namespace https://idreesinc.com
// @version 2025-08-16-4 // @version 2025-08-16-5
// @description birb // @description birb
// @author Idrees // @author Idrees
// @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js // @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js

21
dist/birb.js vendored
View File

@@ -2,7 +2,8 @@
// @ts-ignore // @ts-ignore
const SHARED_CONFIG = { const SHARED_CONFIG = {
cssScale: 1, birbCssScale: 1,
uiCssScale: 1,
canvasPixelSize: 1, canvasPixelSize: 1,
hopSpeed: 0.07, hopSpeed: 0.07,
hopDistance: 45, hopDistance: 45,
@@ -14,6 +15,7 @@ const DESKTOP_CONFIG = {
}; };
const MOBILE_CONFIG = { const MOBILE_CONFIG = {
uiCssScale: 0.9,
flySpeed: 0.125, flySpeed: 0.125,
}; };
@@ -21,9 +23,10 @@ const CONFIG = { ...SHARED_CONFIG, ...isMobile() ? MOBILE_CONFIG : DESKTOP_CONFI
let debugMode = location.hostname === "127.0.0.1"; let debugMode = location.hostname === "127.0.0.1";
const CSS_SCALE = CONFIG.cssScale; const BIRB_CSS_SCALE = CONFIG.birbCssScale;
const UI_CSS_SCALE = CONFIG.uiCssScale;
const CANVAS_PIXEL_SIZE = CONFIG.canvasPixelSize; const CANVAS_PIXEL_SIZE = CONFIG.canvasPixelSize;
const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * CSS_SCALE; const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * BIRB_CSS_SCALE;
const HOP_SPEED = CONFIG.hopSpeed; const HOP_SPEED = CONFIG.hopSpeed;
const FLY_SPEED = CONFIG.flySpeed; const FLY_SPEED = CONFIG.flySpeed;
const HOP_DISTANCE = CONFIG.hopDistance; const HOP_DISTANCE = CONFIG.hopDistance;
@@ -58,7 +61,8 @@ const STYLESHEET = `@font-face {
--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-scale: ${CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE};
} }
#birb { #birb {
@@ -105,6 +109,7 @@ const STYLESHEET = `@font-face {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: scale(var(--ui-scale));
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
@@ -127,7 +132,7 @@ const STYLESHEET = `@font-face {
@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(var(--ui-scale)); }
} }
.birb-window-header { .birb-window-header {
@@ -904,6 +909,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
new MenuItem("Field Guide", insertFieldGuide), new MenuItem("Field Guide", insertFieldGuide),
// new MenuItem("Decorations", insertDecoration), // new MenuItem("Decorations", insertDecoration),
new DebugMenuItem("Applications", () => switchMenuItems(otherItems), false), new DebugMenuItem("Applications", () => switchMenuItems(otherItems), false),
new MenuItem("Sticky Note", newStickyNote),
new MenuItem(`Hide ${birdBirb()}`, hideBirb), new MenuItem(`Hide ${birdBirb()}`, hideBirb),
new DebugMenuItem("Reset Data", resetSaveData), new DebugMenuItem("Reset Data", resetSaveData),
new DebugMenuItem("Unlock All", () => { new DebugMenuItem("Unlock All", () => {
@@ -914,7 +920,6 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
new DebugMenuItem("Disable Debug", () => { new DebugMenuItem("Disable Debug", () => {
debugMode = false; debugMode = false;
}), }),
new MenuItem("Add Sticky Note", newStickyNote),
new Separator(), new Separator(),
new MenuItem("Settings", () => switchMenuItems(settingsItems), false), new MenuItem("Settings", () => switchMenuItems(settingsItems), false),
]; ];
@@ -1955,11 +1960,11 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
} }
function getCanvasWidth() { function getCanvasWidth() {
return canvas.width * CSS_SCALE return canvas.width * BIRB_CSS_SCALE
} }
function getCanvasHeight() { function getCanvasHeight() {
return canvas.height * CSS_SCALE return canvas.height * BIRB_CSS_SCALE
} }
function hop() { function hop() {

23
dist/birb.user.js vendored
View File

@@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name Browser Bird // @name Browser Bird
// @namespace https://idreesinc.com // @namespace https://idreesinc.com
// @version 2025-08-16-4 // @version 2025-08-16-5
// @description birb // @description birb
// @author Idrees // @author Idrees
// @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js // @downloadURL https://github.com/IdreesInc/Browser-Bird/raw/refs/heads/main/dist/birb.user.js
@@ -16,7 +16,8 @@
// @ts-ignore // @ts-ignore
const SHARED_CONFIG = { const SHARED_CONFIG = {
cssScale: 1, birbCssScale: 1,
uiCssScale: 1,
canvasPixelSize: 1, canvasPixelSize: 1,
hopSpeed: 0.07, hopSpeed: 0.07,
hopDistance: 45, hopDistance: 45,
@@ -28,6 +29,7 @@ const DESKTOP_CONFIG = {
}; };
const MOBILE_CONFIG = { const MOBILE_CONFIG = {
uiCssScale: 0.9,
flySpeed: 0.125, flySpeed: 0.125,
}; };
@@ -35,9 +37,10 @@ const CONFIG = { ...SHARED_CONFIG, ...isMobile() ? MOBILE_CONFIG : DESKTOP_CONFI
let debugMode = location.hostname === "127.0.0.1"; let debugMode = location.hostname === "127.0.0.1";
const CSS_SCALE = CONFIG.cssScale; const BIRB_CSS_SCALE = CONFIG.birbCssScale;
const UI_CSS_SCALE = CONFIG.uiCssScale;
const CANVAS_PIXEL_SIZE = CONFIG.canvasPixelSize; const CANVAS_PIXEL_SIZE = CONFIG.canvasPixelSize;
const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * CSS_SCALE; const WINDOW_PIXEL_SIZE = CANVAS_PIXEL_SIZE * BIRB_CSS_SCALE;
const HOP_SPEED = CONFIG.hopSpeed; const HOP_SPEED = CONFIG.hopSpeed;
const FLY_SPEED = CONFIG.flySpeed; const FLY_SPEED = CONFIG.flySpeed;
const HOP_DISTANCE = CONFIG.hopDistance; const HOP_DISTANCE = CONFIG.hopDistance;
@@ -72,7 +75,8 @@ const STYLESHEET = `@font-face {
--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-scale: ${CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE};
} }
#birb { #birb {
@@ -119,6 +123,7 @@ const STYLESHEET = `@font-face {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: scale(var(--ui-scale));
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
@@ -141,7 +146,7 @@ const STYLESHEET = `@font-face {
@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(var(--ui-scale)); }
} }
.birb-window-header { .birb-window-header {
@@ -918,6 +923,7 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
new MenuItem("Field Guide", insertFieldGuide), new MenuItem("Field Guide", insertFieldGuide),
// new MenuItem("Decorations", insertDecoration), // new MenuItem("Decorations", insertDecoration),
new DebugMenuItem("Applications", () => switchMenuItems(otherItems), false), new DebugMenuItem("Applications", () => switchMenuItems(otherItems), false),
new MenuItem("Sticky Note", newStickyNote),
new MenuItem(`Hide ${birdBirb()}`, hideBirb), new MenuItem(`Hide ${birdBirb()}`, hideBirb),
new DebugMenuItem("Reset Data", resetSaveData), new DebugMenuItem("Reset Data", resetSaveData),
new DebugMenuItem("Unlock All", () => { new DebugMenuItem("Unlock All", () => {
@@ -928,7 +934,6 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
new DebugMenuItem("Disable Debug", () => { new DebugMenuItem("Disable Debug", () => {
debugMode = false; debugMode = false;
}), }),
new MenuItem("Add Sticky Note", newStickyNote),
new Separator(), new Separator(),
new MenuItem("Settings", () => switchMenuItems(settingsItems), false), new MenuItem("Settings", () => switchMenuItems(settingsItems), false),
]; ];
@@ -1969,11 +1974,11 @@ Promise.all([loadSpriteSheetPixels(SPRITE_SHEET), loadSpriteSheetPixels(DECORATI
} }
function getCanvasWidth() { function getCanvasWidth() {
return canvas.width * CSS_SCALE return canvas.width * BIRB_CSS_SCALE
} }
function getCanvasHeight() { function getCanvasHeight() {
return canvas.height * CSS_SCALE return canvas.height * BIRB_CSS_SCALE
} }
function hop() { function hop() {

6
stylesheet.css
View File

@@ -10,7 +10,8 @@
--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-scale: ${CSS_SCALE}; --birb-scale: ${BIRB_CSS_SCALE};
--ui-scale: ${UI_CSS_SCALE};
} }
#birb { #birb {
@@ -57,6 +58,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: scale(var(--ui-scale));
animation: pop-in 0.08s; animation: pop-in 0.08s;
transition-timing-function: ease-in; transition-timing-function: ease-in;
} }
@@ -79,7 +81,7 @@
@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(var(--ui-scale)); }
} }
.birb-window-header { .birb-window-header {