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

Create birb start menu concept

Browse Source
This commit is contained in:
Idrees Hassan
2024-12-24 22:40:58 -05:00
parent 327f5c0b12
commit 62b5cd5c33
2 changed files with 98 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
birb.js
View File

@@ -461,6 +461,41 @@ 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
// Get every .window-header element
// Get its parent element
const windowHeaders = document.querySelectorAll(".window-header");
// Make each window draggable
windowHeaders.forEach((window) => {
makeDraggable(window);
});
}
function makeDraggable(windowHeader) {
let isMouseDown = false;
let offsetX = 0;
let offsetY = 0;
// Get the parent window element
const windowElement = windowHeader.parentElement;
windowHeader.addEventListener("mousedown", (e) => {
isMouseDown = true;
offsetX = e.clientX - windowElement.offsetLeft;
offsetY = e.clientY - windowElement.offsetTop;
});
document.addEventListener("mouseup", () => {
isMouseDown = false;
});
document.addEventListener("mousemove", (e) => {
if (isMouseDown) {
windowElement.style.left = `${e.clientX - offsetX}px`;
windowElement.style.top = `${e.clientY - offsetY}px`;
}
});
} }
/** @type {CanvasRenderingContext2D} */ /** @type {CanvasRenderingContext2D} */

84
index.html
View File

@@ -16,31 +16,34 @@
} }
:root { :root {
--border-size: 3px; --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);
--border-color: #000000;
} }
.window { .window {
font-family: "Monocraft";
z-index: 1000;
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
/* transform: scale(3); */ /* transform: scale(0.8); */
width: 200px; /* width: 200px; */
height: 200px; /* height: 200px; */
background-color: #ffecda; background-color: #ffecda;
box-shadow: box-shadow:
var(--border-size) 0 black, var(--border-size) 0 var(--border-color),
var(--neg-border-size) 0 black, var(--neg-border-size) 0 var(--border-color),
0 var(--neg-border-size) black, 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) black, 0 var(--border-size) var(--border-color),
var(--double-border-size) 0 black, var(--double-border-size) 0 var(--border-color),
var(--neg-double-border-size) 0 black, var(--neg-double-border-size) 0 var(--border-color),
0 var(--neg-double-border-size) black, 0 var(--neg-double-border-size) var(--border-color),
0 var(--double-border-size) black, 0 var(--double-border-size) var(--border-color),
0 0 0 var(--border-size) black, 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,
@@ -52,14 +55,13 @@
} }
.window-header { .window-header {
font-family: "Monocraft";
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: 1px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
@@ -68,9 +70,9 @@
var(--border-size) 0 #ffa3cb, var(--border-size) 0 #ffa3cb,
var(--neg-border-size) 0 #ffa3cb, var(--neg-border-size) 0 #ffa3cb,
0 var(--neg-border-size) #ffa3cb, 0 var(--neg-border-size) #ffa3cb,
var(--neg-border-size) var(--border-size) black, var(--neg-border-size) var(--border-size) var(--border-color),
var(--border-size) var(--border-size) black; var(--border-size) var(--border-size) var(--border-color);
color: black; color: var(--border-color);
} }
.window-title { .window-title {
@@ -78,6 +80,7 @@
flex-grow: 1; flex-grow: 1;
user-select: none; user-select: none;
color: #ffecda; color: #ffecda;
font-size: 16px;
} }
.window-close { .window-close {
@@ -102,8 +105,14 @@
var(--border-size) 0 #ffecda, var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda, var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda, 0 var(--border-size) #ffecda,
0 var(--neg-border-size) black, 0 var(--neg-border-size) var(--border-color),
0 var(--border-size) black; 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 { .window-close {
@@ -111,6 +120,26 @@
padding: none; 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>
@@ -121,7 +150,7 @@
<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">
<div class="window-header"> <div class="window-header">
<div class="window-title">settings</div> <div class="window-title">settings</div>
<div class="window-close">x</div> <div class="window-close">x</div>
@@ -129,6 +158,19 @@
<div class="window-content"> <div class="window-content">
<div class="birb"></div> <div class="birb"></div>
</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>
<div id="spacer"></div> <div id="spacer"></div>
<script src="birb.js"></script> <script src="birb.js"></script>