badmanners/gallery.badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add platforms to GameLayout

Browse source
This commit is contained in:
Bad Manners 2024-04-12 18:15:03 -03:00
parent 877c02ccfc
commit 837433364d
16 changed files with 144 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/WidthSlotSwitcher.astro Normal file
View file

@ -0,0 +1,36 @@
---
type Props = {
breakpoint: number;
};
const { breakpoint } = Astro.props;
---
<div id="slot-switch" data-breakpoint={breakpoint}></div>
<template id="slot-switch-big">
<slot />
</template>
<template id="slot-switch-small">
<slot />
</template>
<script>
const slotSwitch = document.querySelector("div#slot-switch") as HTMLDivElement;
const breakpointAttribute = slotSwitch.getAttribute("data-breakpoint");
if (breakpointAttribute && !isNaN(parseInt(breakpointAttribute))) {
const breakpoint = parseInt(breakpointAttribute);
const slotSwitchBig = document.querySelector("template#slot-switch-big") as HTMLTemplateElement;
const slotSwitchSmall = document.querySelector("template#slot-switch-small") as HTMLTemplateElement;
let displayBig: boolean | null = null;
function handleResize() {
const newDisplayBig = window.innerWidth >= breakpoint;
if (newDisplayBig !== displayBig) {
displayBig = newDisplayBig;
const template = displayBig ? slotSwitchBig : slotSwitchSmall;
slotSwitch.replaceChildren(template.content.cloneNode(true));
}
}
window.addEventListener("resize", handleResize);
handleResize();
}
</script>