File: templates/dosdoor_play.twig

{% extends "base.twig" %}

{% block title %}{{ door.name }} - {{ t('ui.webdoor_play.page_title_suffix', {}, locale, ['common']) }} - {{ system_name }}{% endblock %}

{% block content %}
<div class="container-fluid mt-2">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="d-flex align-items-center">
            <a href="/games" class="btn btn-outline-secondary btn-sm me-3">
                <i class="fas fa-arrow-left"></i> {{ t('ui.webdoor_play.back_to_doors', {}, locale, ['common']) }}
            </a>
            <h4 class="mb-0"><i class="fas fa-terminal"></i> {{ door.name }}</h4>
        </div>
        <div>
            {% if secondary_url %}
                <a href="{{ secondary_url }}"
                   class="btn btn-outline-secondary btn-sm me-2">
                    <i class="fas fa-sliders-h"></i> {{ t(secondary_label_key, {}, locale, ['common']) }}
                </a>
            {% endif %}
            {% if show_fullscreen_button is not defined or show_fullscreen_button %}
                <button id="fullscreen-btn" class="btn btn-outline-primary btn-sm" title="{{ t('ui.webdoor_play.fullscreen', {}, locale, ['common']) }}">
                    <i class="fas fa-expand"></i>
                </button>
            {% endif %}
        </div>
    </div>

    <div class="game-container">
        <iframe id="game-frame"
                src="{{ player_url }}"
                class="game-frame"
                allowfullscreen
                allow="autoplay *; fullscreen *">
        </iframe>
    </div>
</div>

<style>
.game-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 150px);
    min-height: 500px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

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

/* Fullscreen styles */
.game-container:fullscreen {
    height: 100vh;
}

.game-container:fullscreen .game-frame {
    height: 100vh;
}
</style>

<script>
const fullscreenBtn = document.getElementById('fullscreen-btn');
if (fullscreenBtn) {
    fullscreenBtn.addEventListener('click', function() {
        const container = document.querySelector('.game-container');
        if (container.requestFullscreen) {
            container.requestFullscreen();
        } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
        } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        }
    });
}

// Handle escape key to exit game
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && document.fullscreenElement) {
        document.exitFullscreen();
    }
});

window.addEventListener('message', function(event) {
    if (event.origin !== window.location.origin || !event.data || event.data.type !== 'jsdos-exit') {
        return;
    }

    window.location.href = '/games';
});
</script>
{% endblock %}