index.html•3.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>