Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 17:47:16 +00:00
Code Issues Projects Releases Wiki Activity

Fix click events, and get basic GuiObject animations working

Browse source
This commit is contained in:
Jordan Eldredge 2021-06-30 22:50:32 -07:00
parent 5f7c120f4d
commit 06fc257c30
5 changed files with 82 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
packages/webamp-modern-2/assets/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

5
packages/webamp-modern-2/src/index.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Webamp Modern" />
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico"/>
<title>Webamp Modern</title>
<style>
body {
@ -39,7 +40,9 @@
</style>
</head>
<body>
<div id="app"></div>
<div id="app">
<h1 id="status">Downloading JavaScript...</h1>
</div>
<div id="experimental">Work in Progress</div>
<script type="module" src="./index.js"></script>
</body>

11
packages/webamp-modern-2/src/index.ts
View file

@ -11,20 +11,26 @@ function hack() {
}
async function main() {
const status = document.getElementById("status");
status.innerText = "Downloading skin...";
// const response = await fetch("assets/CornerAmp_Redux.wal");
// const response = await fetch("assets/Default_winamp3_build499.wal");
const response = await fetch("assets/MMD3.wal");
const data = await response.blob();
status.innerText = "Loading .wal archive...";
const zip = await JSZip.loadAsync(data);
status.innerText = "Parsing XML and initializing images...";
const parser = new SkinParser(zip);
await parser.parse();
let node = document.createElement("div");
status.innerText = "Enabling Colors...";
UI_ROOT.enableDefaultGammaSet();
status.innerText = "Rendering skin for the first time...";
for (const container of parser._containers) {
container.draw();
node.appendChild(container.getDiv());
@ -35,7 +41,6 @@ async function main() {
select.style.bottom = "0px";
select.style.left = "0px";
select.addEventListener("change", (e) => {
console.log(e.target.value);
UI_ROOT.enableGammaSet(e.target.value);
});
for (const set of UI_ROOT._gammaSets.keys()) {
@ -51,12 +56,12 @@ async function main() {
document.body.appendChild(div);
document.body.appendChild(node);
console.log("RENDER");
status.innerText = "Initializing Maki...";
for (const container of parser._containers) {
container.init({ containers: parser._containers });
}
console.log("INIT");
status.innerText = "";
}
main();

3
packages/webamp-modern-2/src/skin/Group.ts
View file

@ -125,7 +125,8 @@ export default class Group extends GuiObj {
draw() {
super.draw();
this._div.setAttribute("data-obj-name", "Group");
// this._div.style.pointerEvents = "none";
// It seems Groups are not responsive to click events.
this._div.style.pointerEvents = "none";
this._div.style.overflow = "hidden";
this._div.style.height = Utils.px(this._maximumHeight);
this._div.style.width = Utils.px(this._maximumWidth);

81
packages/webamp-modern-2/src/skin/GuiObj.ts
View file

@ -1,5 +1,5 @@
import { SkinContext } from "../types";
import { assert, num, toBool, px } from "../utils";
import { assert, num, toBool, px, assume } from "../utils";
import Bitmap from "./Bitmap";
import { VM } from "./VM";
import XmlObj from "./XmlObj";
@ -16,6 +16,12 @@ export default class GuiObj extends XmlObj {
_alpha: number = 255;
_ghost: boolean = false;
_tooltip: string = "";
_targetX: number | null = null;
_targetY: number | null = null;
_targetWidth: number | null = null;
_targetHeight: number | null = null;
_targetAlpha: number | null = null;
_targetSpeed: number | null = null;
_div: HTMLDivElement = document.createElement("div");
setXmlAttr(_key: string, value: string): boolean {
@ -240,7 +246,7 @@ export default class GuiObj extends XmlObj {
* @param x The target X position of the object.
*/
settargetx(x: number) {
// TOOD
this._targetX = x;
}
/**
@ -250,7 +256,7 @@ export default class GuiObj extends XmlObj {
* @param y The target Y position of the object.
*/
settargety(y: number) {
// TODO
this._targetY = y;
}
/**
@ -259,7 +265,7 @@ export default class GuiObj extends XmlObj {
* @param w The target width of the object.
*/
settargetw(w: number) {
// TODO
this._targetWidth = w;
}
/**
@ -267,8 +273,8 @@ export default class GuiObj extends XmlObj {
*
* @param h The target height of the object.
*/
settargeth(r: number) {
// TODO
settargeth(h: number) {
this._targetHeight = h;
}
/**
@ -279,7 +285,7 @@ export default class GuiObj extends XmlObj {
* @param alpha The target alpha value.
*/
settargeta(alpha: number) {
// TODO
this._targetAlpha = alpha;
}
/**
@ -289,14 +295,56 @@ export default class GuiObj extends XmlObj {
* @param insecond The number of seconds in which to reach the target.
*/
settargetspeed(insecond: number) {
// TODO
this._targetSpeed = insecond;
}
/**
* Begin transition to previously set target.
*/
gototarget() {
// TODO
const duration = this._targetSpeed * 1000;
const startTime = performance.now();
const changes = {
_x: {
start: this._x,
delta: this._targetX == null ? 0 : this._targetX - this._x,
},
_y: {
start: this._y,
delta: this._targetY == null ? 0 : this._targetY - this._y,
},
_width: {
start: this._width,
delta: this._targetWidth == null ? 0 : this._targetWidth - this._width,
},
_height: {
start: this._height,
delta:
this._targetHeight == null ? 0 : this._targetHeight - this._height,
},
_alpha: {
start: this._alpha,
delta: this._targetAlpha == null ? 0 : this._targetAlpha - this._alpha,
},
};
const update = (time: number) => {
const timeDiff = time - startTime;
const progress = timeDiff / duration;
for (const [key, { start, delta }] of Object.entries(changes)) {
this[key] = start + delta * progress;
}
this._renderDimensions();
if (timeDiff < duration) {
window.requestAnimationFrame(update);
} else {
VM.dispatch(this, "ontargetreached");
}
};
window.requestAnimationFrame(update);
// this._renderDimensions();
}
/**
@ -304,11 +352,11 @@ export default class GuiObj extends XmlObj {
* it's previously set target.
*/
ontargetreached() {
// TODO
assume(false, "Unimplemented");
}
canceltarget() {
// TODO
assume(false, "Unimplemented");
}
/**
@ -319,11 +367,11 @@ export default class GuiObj extends XmlObj {
// modifies the x/y targets so that they compensate for gained width/height. useful to make drawers that open up without jittering
reversetarget(reverse: number) {
// TODO
assume(false, "Unimplemented");
}
onStartup() {
// TODO
assume(false, "Unimplemented");
}
/**
@ -355,6 +403,11 @@ export default class GuiObj extends XmlObj {
_renderVisibility() {
this._div.style.display = this._visible ? "inline-block" : "none";
}
_renderTransate() {
this._div.style.transform = `translate(${px(this._x ?? 0)}, ${px(
this._y ?? 0
)})`;
}
_renderX() {
this._div.style.left = px(this._x ?? 0);
}
@ -402,6 +455,8 @@ export default class GuiObj extends XmlObj {
}
if (this._ghost) {
this._div.style.pointerEvents = "none";
} else {
this._div.style.pointerEvents = "auto";
}
this._renderDimensions();