Skip to main content
Glama

MCPGame

index.html3.99 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MCP Game - Virtual House</title> <style> body { margin: 0; overflow: hidden; background-color: #333; color: #eee; font-family: sans-serif; } canvas { display: block; } #instructions { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.5); padding: 8px 15px; border-radius: 5px; font-size: 1em; transition: background-color 0.3s; } #instructions:hover { background-color: rgba(0, 0, 0, 0.8); } #terminalUi { display: none; /* Hidden by default, will be set to flex when open */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 600px; height: 70%; max-height: 500px; background-color: rgba(0, 0, 0, 0.85); border: 2px solid #0f0; border-radius: 5px; color: #0f0; font-family: 'Courier New', Courier, monospace; padding: 15px; box-sizing: border-box; flex-direction: column; /* Arrange children vertically */ z-index: 100; } #terminalStatus { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #0f0; font-size: 0.9em; max-height: 100px; /* Limit the height */ min-height: 3em; /* Ensure space for status lines */ overflow-y: auto; /* Make it scrollable if too much content */ white-space: pre-wrap; /* Allow wrapping */ } #terminalMessages { flex-grow: 1; /* Take remaining vertical space */ overflow-y: auto; /* Scroll if content overflows */ margin-bottom: 10px; font-size: 0.95em; line-height: 1.3; white-space: pre-wrap; /* Wrap long lines */ } #terminalInputArea { display: flex; /* Align input and prompt */ align-items: center; } #terminalInputArea span { padding-right: 5px; /* Space after prompt */ } #terminalInput { flex-grow: 1; background-color: transparent; border: none; color: #0f0; font-family: inherit; font-size: 1em; outline: none; } #tvRemoteUi { color: #fff; } .help-text { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 5px; font-size: 0.8em; } </style> </head> <body> <div id="instructions"> Click to enable controls | WASD to move | Mouse to look around </div> <canvas id="gameCanvas"></canvas> <!-- Terminal UI Overlay --> <div id="terminalUi"> <div id="terminalStatus">MCP TERMINAL</div> <div id="terminalMessages"></div> <div id="terminalInputArea"> <span>></span> <input type="text" id="terminalInput" autocomplete="off" spellcheck="false"> </div> </div> <div class="help-text"> Press ESC to exit mouse lock or close interface | ENTER to interact </div> <!-- Import Three.js --> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.164.1/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.164.1/examples/jsm/" } } </script> <!-- Your Game Logic --> <script type="module" src="main.js"></script> </body> </html>

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/AllAboutAI-YT/mcpgame'

If you have feedback or need assistance with the MCP directory API, please join our Discord server