diff --git a/src/shell.html b/src/shell.html
index 366b5b5..87b81b5 100644
--- a/src/shell.html
+++ b/src/shell.html
@@ -235,6 +235,60 @@
@keyframes spin {
to { transform: rotate(360deg); }
}
+ /* Click-to-run overlay */
+ .game-panel {
+ position: relative;
+ }
+ .click-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.85);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 10;
+ }
+ .click-overlay.hidden {
+ display: none;
+ }
+ .click-overlay h2 {
+ color: #e94560;
+ margin: 0 0 10px 0;
+ font-size: 32px;
+ }
+ .click-overlay p {
+ color: #888;
+ margin: 5px 15px;
+ text-align: center;
+ }
+ .click-overlay p a {
+ color: #667eea;
+ }
+ .click-overlay .start-btn {
+ margin-top: 20px;
+ padding: 15px 40px;
+ font-size: 18px;
+ background: #4ecca3;
+ color: #1a1a2e;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: bold;
+ transition: transform 0.2s, background 0.2s;
+ }
+ .click-overlay .start-btn:hover {
+ background: #3db892;
+ transform: scale(1.05);
+ }
+ .click-overlay .start-btn:disabled {
+ background: #666;
+ cursor: not-allowed;
+ transform: none;
+ }
@media (max-width: 900px) {
.main-content {
flex-direction: column;
@@ -341,6 +395,14 @@
@@ -492,6 +554,9 @@
var clearBtn = document.getElementById('clearBtn');
var interpreterStatus = document.getElementById('interpreterStatus');
var sourceIndicator = document.getElementById('sourceIndicator');
+ var clickOverlay = document.getElementById('clickOverlay');
+ var startBtn = document.getElementById('startBtn');
+ var overlayStatus = document.getElementById('overlayStatus');
var shareModal = document.getElementById('shareModal');
var shareUrlInput = document.getElementById('shareUrl');
var shareSizeEl = document.getElementById('shareSize');
@@ -676,6 +741,11 @@
appendToOutput('Python REPL ready. Enter code and click Run (or Ctrl+Enter).', 'success');
appendToOutput('Tip: Use Ctrl+Up/Down to navigate command history.', 'input');
+ // Enable the click overlay start button
+ overlayStatus.textContent = 'Engine ready!';
+ startBtn.textContent = 'Click to Run';
+ startBtn.disabled = false;
+
setTimeout(function() {
canvasElement.focus();
window.dispatchEvent(new Event('resize'));
@@ -876,6 +946,15 @@
resetBtn.addEventListener('click', resetEnvironment);
clearBtn.addEventListener('click', clearOutput);
+ // Click overlay start button - runs editor code and dismisses overlay
+ startBtn.addEventListener('click', function() {
+ clickOverlay.classList.add('hidden');
+ canvasElement.focus();
+ if (window.runPython) {
+ runCode();
+ }
+ });
+
// ===========================================
// Initialize
// ===========================================