mirror of
https://github.com/NohamR/Pocket-Bird.git
synced 2026-05-25 19:59:38 +00:00
Insert start menu programmatically
This commit is contained in:
Idrees Hassan
187
birb.js
187
birb.js
@@ -48,6 +48,115 @@ const styles = `
|
|||||||
z-index: 999999999;
|
z-index: 999999999;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.birb-window {
|
||||||
|
font-family: "Monocraft";
|
||||||
|
z-index: 1000;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.birb-window-header {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 7px;
|
||||||
|
padding-top: 4px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
background-color: #ffa3cb;
|
||||||
|
box-shadow:
|
||||||
|
var(--border-size) 0 #ffa3cb,
|
||||||
|
var(--neg-border-size) 0 #ffa3cb,
|
||||||
|
0 var(--neg-border-size) #ffa3cb,
|
||||||
|
var(--neg-border-size) var(--border-size) var(--border-color),
|
||||||
|
var(--border-size) var(--border-size) var(--border-color);
|
||||||
|
color: var(--border-color);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.birb-window-title {
|
||||||
|
text-align: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
user-select: none;
|
||||||
|
color: #ffecda;
|
||||||
|
}
|
||||||
|
|
||||||
|
.birb-window-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 5px;
|
||||||
|
opacity: 0.35;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.birb-window-close:hover {
|
||||||
|
opacity: 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;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.birb-window-list-item {
|
||||||
|
font-size: 14px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
opacity: 0.6;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.birb-window-list-item:hover {
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.birb-window-separator {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #000000;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class Layer {
|
class Layer {
|
||||||
@@ -461,15 +570,63 @@ if (window === window.top) {
|
|||||||
canvas.width = sharedFrames.base.pixels[0].length * CANVAS_PIXEL_SIZE;
|
canvas.width = sharedFrames.base.pixels[0].length * CANVAS_PIXEL_SIZE;
|
||||||
canvas.height = MAX_HEIGHT * CANVAS_PIXEL_SIZE;
|
canvas.height = MAX_HEIGHT * CANVAS_PIXEL_SIZE;
|
||||||
document.body.appendChild(canvas);
|
document.body.appendChild(canvas);
|
||||||
|
}
|
||||||
|
|
||||||
// Make window elements draggable
|
function insertStartMenu() {
|
||||||
// Get every .window-header element
|
if (document.querySelector(".birb-window")) {
|
||||||
// Get its parent element
|
return;
|
||||||
const windowHeaders = document.querySelectorAll(".window-header");
|
}
|
||||||
// Make each window draggable
|
let html = `
|
||||||
windowHeaders.forEach((window) => {
|
<div class="birb-window">
|
||||||
makeDraggable(window);
|
<div class="birb-window-header">
|
||||||
});
|
<div class="birb-window-title">birbOS</div>
|
||||||
|
</div>
|
||||||
|
<div class="birb-window-content">
|
||||||
|
<div class="birb-window-list-item">Pet Birb</div>
|
||||||
|
<div class="birb-window-list-item">Field Guide</div>
|
||||||
|
<div class="birb-window-list-item">Decorations</div>
|
||||||
|
<div class="birb-window-list-item">Programs</div>
|
||||||
|
<div class="birb-window-separator"></div>
|
||||||
|
<div class="birb-window-list-item">Settings</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
// Insert the start menu into the body
|
||||||
|
document.body.insertAdjacentHTML("beforeend", html);
|
||||||
|
// Make the start menu draggable
|
||||||
|
makeDraggable(document.querySelector(".birb-window-header"));
|
||||||
|
|
||||||
|
// Position the start menu
|
||||||
|
const startMenu = document.querySelector(".birb-window");
|
||||||
|
if (!(startMenu instanceof HTMLElement)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let x = birdX;
|
||||||
|
let y = window.innerHeight - birdY;
|
||||||
|
const offset = 30;
|
||||||
|
if (x < window.innerWidth / 2) {
|
||||||
|
// Left side
|
||||||
|
x += offset;
|
||||||
|
} else {
|
||||||
|
// Right side
|
||||||
|
x -= startMenu.offsetWidth + offset;
|
||||||
|
}
|
||||||
|
if (y > window.innerHeight / 2) {
|
||||||
|
// Top side
|
||||||
|
y -= startMenu.offsetHeight + offset;
|
||||||
|
} else {
|
||||||
|
// Bottom side
|
||||||
|
y += offset;
|
||||||
|
}
|
||||||
|
startMenu.style.left = `${x}px`;
|
||||||
|
startMenu.style.top = `${y}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeStartMenu() {
|
||||||
|
const startMenu = document.querySelector(".birb-window");
|
||||||
|
if (startMenu) {
|
||||||
|
startMenu.remove();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function makeDraggable(windowHeader) {
|
function makeDraggable(windowHeader) {
|
||||||
@@ -559,6 +716,9 @@ window.addEventListener("scroll", () => {
|
|||||||
|
|
||||||
document.addEventListener("click", (e) => {
|
document.addEventListener("click", (e) => {
|
||||||
timeOfLastAction = Date.now();
|
timeOfLastAction = Date.now();
|
||||||
|
if (e.target instanceof Node && !canvas.contains(e.target) && !document.querySelector(".birb-window")?.contains(e.target)) {
|
||||||
|
removeStartMenu();
|
||||||
|
}
|
||||||
// const x = e.clientX;
|
// const x = e.clientX;
|
||||||
// const y = window.innerHeight - e.clientY;
|
// const y = window.innerHeight - e.clientY;
|
||||||
// flyTo(x, y);
|
// flyTo(x, y);
|
||||||
@@ -566,10 +726,11 @@ document.addEventListener("click", (e) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
canvas.addEventListener("click", () => {
|
canvas.addEventListener("click", () => {
|
||||||
focusOnElement();
|
insertStartMenu();
|
||||||
if (focusedElement === null && currentState === States.IDLE) {
|
// focusOnElement();
|
||||||
setAnimation(Animations.HEART)
|
// if (focusedElement === null && currentState === States.IDLE) {
|
||||||
}
|
// setAnimation(Animations.HEART)
|
||||||
|
// }
|
||||||
});
|
});
|
||||||
|
|
||||||
canvas.addEventListener("mouseover", () => {
|
canvas.addEventListener("mouseover", () => {
|
||||||
@@ -808,7 +969,7 @@ function roundToPixel(value) {
|
|||||||
* @param {number} x
|
* @param {number} x
|
||||||
*/
|
*/
|
||||||
function setX(x) {
|
function setX(x) {
|
||||||
x = x - getCanvasWidth() - WINDOW_PIXEL_SIZE / 2;
|
x = x - getCanvasWidth() / 2 - WINDOW_PIXEL_SIZE / 2;
|
||||||
canvas.style.left = `${x}px`;
|
canvas.style.left = `${x}px`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
140
index.html
140
index.html
@@ -22,124 +22,6 @@
|
|||||||
--neg-double-border-size: calc(var(--neg-border-size) * 2);
|
--neg-double-border-size: calc(var(--neg-border-size) * 2);
|
||||||
--border-color: #000000;
|
--border-color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.window {
|
|
||||||
font-family: "Monocraft";
|
|
||||||
z-index: 1000;
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
/* transform: scale(0.8); */
|
|
||||||
/* width: 200px; */
|
|
||||||
/* height: 200px; */
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-header {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 7px;
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-right: 10px;
|
|
||||||
background-color: #ffa3cb;
|
|
||||||
box-shadow:
|
|
||||||
var(--border-size) 0 #ffa3cb,
|
|
||||||
var(--neg-border-size) 0 #ffa3cb,
|
|
||||||
0 var(--neg-border-size) #ffa3cb,
|
|
||||||
var(--neg-border-size) var(--border-size) var(--border-color),
|
|
||||||
var(--border-size) var(--border-size) var(--border-color);
|
|
||||||
color: var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-title {
|
|
||||||
text-align: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
user-select: none;
|
|
||||||
color: #ffecda;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-close {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: var(--double-border-size);
|
|
||||||
opacity: 0.35;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-close:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-close {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-list-item {
|
|
||||||
font-size: 14px;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-list-item:hover {
|
|
||||||
opacity: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-separator {
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
background-color: #000000;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-top: 6px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -150,28 +32,6 @@
|
|||||||
<img src="./images/bird-2.jpg" alt="Bird 2" style="width: 300px; height: auto; margin: 10px;">
|
<img src="./images/bird-2.jpg" alt="Bird 2" style="width: 300px; height: auto; margin: 10px;">
|
||||||
<img src="./images/bird-3.jpg" alt="Bird 3" style="width: 300px; height: auto; margin: 10px;">
|
<img src="./images/bird-3.jpg" alt="Bird 3" style="width: 300px; height: auto; margin: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="window">
|
|
||||||
<div class="window-header">
|
|
||||||
<div class="window-title">settings</div>
|
|
||||||
<div class="window-close">x</div>
|
|
||||||
</div>
|
|
||||||
<div class="window-content">
|
|
||||||
<div class="birb"></div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="window">
|
|
||||||
<div class="window-header">
|
|
||||||
<div class="window-title">birbOS</div>
|
|
||||||
</div>
|
|
||||||
<div class="window-content">
|
|
||||||
<div class="window-list-item">Field Guide</div>
|
|
||||||
<div class="window-list-item">Decorations</div>
|
|
||||||
<div class="window-list-item">Programs</div>
|
|
||||||
<!-- <div class="window-list-item">Decorations</div> -->
|
|
||||||
<div class="window-separator"></div>
|
|
||||||
<div class="window-list-item">Settings</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="spacer"></div>
|
<div id="spacer"></div>
|
||||||
<script src="birb.js"></script>
|
<script src="birb.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user