File: templates/webdoor_play.twig

{% extends "base.twig" %}

{% block title %}{{ game.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-gamepad"></i> {{ game.name }}</h4>
        </div>
        <div>
            <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>
        </div>
    </div>

    <div class="game-container">
        <iframe id="game-frame"
                src="{{ game_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>
document.getElementById('fullscreen-btn').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();
    }
});

// Refocus input inside the iframe when the WebDoor requests it (e.g. Tab completion).
// Same-origin iframes allow direct DOM access, so we can focus the element directly.
window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'mrc:keepFocus') {
        const frame = document.getElementById('game-frame');
        if (frame && frame.contentDocument) {
            const input = frame.contentDocument.getElementById('message-input');
            if (input) {
                input.focus();
            }
        }
    }
});
</script>
{% endblock %}