GamePage.astro

GamePage.astro

---
interface Props {
  src: string;
  title: string;
  showToolbar?: boolean;
}

const { src, title, showToolbar = true } = Astro.props;
---

<div class="game-page">
  <div class="game-container">
    <iframe
      id="game-iframe"
      src={src}
      title={title}
      allow="fullscreen"
      allowfullscreen
    >
    </iframe>
  </div>

  {showToolbar && <div class="game-toolbar">
    <button id="fullscreen-btn" class="toolbar-btn" title="Fullscreen">
      <svg class="icon-inactive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M4 2C2.89543 2 2 2.89543 2 4V8C2 8.55228 2.44772 9 3 9C3.55228 9 4 8.55228 4 8V5.41421L7.79289 9.20711C8.18342 9.59763 8.81658 9.59763 9.20711 9.20711C9.59763 8.81658 9.59763 8.18342 9.20711 7.79289L5.41421 4H8C8.55228 4 9 3.55228 9 3C9 2.44772 8.55228 2 8 2H4Z"/>
        <path d="M16 2C15.4477 2 15 2.44772 15 3C15 3.55228 15.4477 4 16 4H18.5858L14.7929 7.79289C14.4024 8.18342 14.4024 8.81658 14.7929 9.20711C15.1834 9.59763 15.8166 9.59763 16.2071 9.20711L20 5.41421V8C20 8.55228 20.4477 9 21 9C21.5523 9 22 8.55228 22 8V4C22 2.89543 21.1046 2 20 2H16Z"/>
        <path d="M16 20L18.5858 20L14.7929 16.2071C14.4024 15.8166 14.4024 15.1834 14.7929 14.7929C15.1834 14.4024 15.8166 14.4024 16.2071 14.7929L20 18.5858V16C20 15.4477 20.4477 15 21 15C21.5523 15 22 15.4477 22 16V20C22 21.1046 21.1046 22 20 22L16 22C15.4477 22 15 21.5523 15 21C15 20.4477 15.4477 20 16 20Z"/>
        <path d="M4 18.5858L7.79289 14.7929C8.18342 14.4024 8.81658 14.4024 9.20711 14.7929C9.59763 15.1834 9.59763 15.8166 9.20711 16.2071L5.41421 20H8C8.55228 20 9 20.4477 9 21C9 21.5523 8.55228 22 8 22H4C2.89543 22 2 21.1046 2 20V16C2 15.4477 2.44772 15 3 15C3.55228 15 4 15.4477 4 16L4 18.5858Z"/>
      </svg>
      <svg class="icon-active" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17 18.4142L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.4142 17L21 17C21.5523 17 22 16.5523 22 16C22 15.4477 21.5523 15 21 15L17 15C15.8954 15 15 15.8954 15 17L15 21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21L17 18.4142Z"/>
        <path d="M7 5.58578V3C7 2.44772 7.44772 2 8 2C8.55229 2 9 2.44772 9 3V7C9 8.10457 8.10457 9 7 9H3C2.44772 9 2 8.55229 2 8C2 7.44772 2.44772 7 3 7H5.58579L2.2929 3.70711C1.90237 3.31658 1.90237 2.68342 2.2929 2.29289C2.68342 1.90237 3.31659 1.90237 3.70711 2.29289L7 5.58578Z"/>
        <path d="M21 9C21.5523 9 22 8.55229 22 8C22 7.44772 21.5523 7 21 7L18.4142 7L21.7071 3.70711C22.0976 3.31658 22.0976 2.68342 21.7071 2.2929C21.3166 1.90237 20.6834 1.90237 20.2929 2.2929L17 5.58579L17 3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3L15 7C15 8.10457 15.8954 9 17 9L21 9Z"/>
        <path d="M3 15C2.44772 15 2 15.4477 2 16C2 16.5523 2.44772 17 3 17H5.58579L2.29289 20.2929C1.90237 20.6834 1.90237 21.3166 2.29289 21.7071C2.68342 22.0976 3.31658 22.0976 3.70711 21.7071L7 18.4142V21C7 21.5523 7.44772 22 8 22C8.55229 22 9 21.5523 9 21V17C9 15.8954 8.10457 15 7 15H3Z"/>
      </svg>
      <span>Fullscreen</span>
    </button>
  </div>}
</div>

<style>
  :global(html), :global(body) {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .game-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    background: #16181e;
  }

  .game-container {
    flex: 1;
    width: 100%;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .game-container iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  .game-toolbar {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #1a1d26;
    border-top: 1px solid #2a2d3a;
  }

  .toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #a0a3b1;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .toolbar-btn:hover {
    background: #2a2d3a;
    color: #fff;
  }

  .toolbar-btn svg {
    width: 20px;
    height: 20px;
  }

  .icon-inactive {
    display: block;
  }

  .icon-active {
    display: none;
  }

  .toolbar-btn:active .icon-inactive {
    display: none;
  }

  .toolbar-btn:active .icon-active {
    display: block;
  }

  @media (max-width: 640px) {
    .toolbar-btn span {
      display: none;
    }

    .toolbar-btn {
      padding: 8px;
    }
  }
</style>

<script>
  const fullscreenBtn = document.getElementById('fullscreen-btn');
  const gamePage = document.querySelector('.game-page');

  fullscreenBtn?.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      gamePage?.requestFullscreen?.();
    } else {
      document.exitFullscreen?.();
    }
  });

  document.addEventListener('fullscreenchange', () => {
    if (fullscreenBtn) {
      if (document.fullscreenElement) {
        fullscreenBtn.classList.add('is-fullscreen');
      } else {
        fullscreenBtn.classList.remove('is-fullscreen');
      }
    }
  });
</script>

zombies-and-luig.md

This is an game template that can embed an external link in iframe.

It is developed first in the Zombies and Luig