SR5-FoundryVTT / Foundry-SR5-Hud

MIT License
1 stars 0 forks source link

Rewrite this code to place the initial content based on the viewport #26

Closed shadows-eye closed 7 months ago

shadows-eye commented 8 months ago

static get defaultOptions() { return { ...super.defaultOptions, id: "sr5hud", title: "SR5-Hud", template: "modules/sr5-hud/templates/sr-hud.hbs", popOut: true, top: 632, left: 5, resizable: false, dragDrop: [{dragSelector: null, dropSelector: null}], classes: ["sr5-hud"] } } Hud.js

Stexinator commented 8 months ago

You need to supply me the calculation

Stexinator commented 8 months ago

Alternatively you can do it via CSS you just need an !important

shadows-eye commented 8 months ago

Not sure about the calculation, current setup I have tried is the following: ` static get defaultOptions() { const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight;

    // Example calculation - adjust these to position your HUD as needed
    const calculatedTop = viewportHeight * 0.609; // Position at Based on the viewport height
    const calculatedLeft = viewportWidth * 0.004; // Position at Left based on the viewport width

    return {
        ...super.defaultOptions,
        id: "sr5hud",
        title: "SR5-Hud",
        template: "modules/sr5-hud/templates/sr-hud.hbs",
        popOut: true,
        top: calculatedTop,
        left: calculatedLeft,
        resizable: false,
        dragDrop: [{dragSelector: null, dropSelector: null}],
        classes: ["sr5-hud"]
    };
}`
However the percentage don´t work if the height is different, the left alignment works now independantly of the total pixel screen size, even up to 8K. 60.9% for the height does not fit in all cases, the more height you have the % will need to increase slightly to sit at the same position... this is frustrating, same for the list-container...
shadows-eye commented 8 months ago

The only approach to positioning our window on initialisation is if we place it in relation to a element on the foundry canvas, I am writing a code to get the top position of the ui-bottom foundry id element and place our window 5px above it. CSS cal can't help as it can only calculate fixed values, that is good but I have not been able to solve this. I will have a look how the argon hud does this to get an idea on how to solve this.