krh/muuhd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gui

Browse Source
This commit is contained in:
Kim Ravn Hansen
2025-10-04 17:11:05 +02:00
parent 8fb279cdbb
commit 0091a6d9b8
2 changed files with 45 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/ascii_dungeon_crawler.html
View File

@@ -15,49 +15,68 @@
#gameContainer {
text-align: center;
display: grid;
grid-template-areas:
"firstPerson minimap"
"status status"
"mapInput mapInput";
}
#status {
grid-area: status;
}
#viewport {
grid-area: firstPerson;
font-size: 10px;
line-height: 7px;
white-space: pre;
border: 2px solid #0f0;
display: inline-block;
padding: 2px;
border: 5px solid #666;
border-top: 1rem solid #666;
border-bottom: 1rem solid #666;
border-left: 1rem solid #666;
border-right: 1rem solid #666;
font-weight: bold;
}
#minimap {
grid-area: minimap;
font-size: 12px;
line-height: 11.5px;
white-space: pre;
display: inline-block;
padding: 2px;
border: 5px solid #666;
background-color: black;
}
#controls {
margin-top: 20px;
color: #0f0;
border-top: 1rem solid #666;
border-bottom: 1rem solid #666;
border-left: none;
border-right: 1rem solid #666;
font-weight: bold;
}
#mapInput {
grid-area: mapInput;
margin-top: 20px;
overflow-x: scroll;
overflow-x: visible;
overflow-wrap: normal;
}
textarea {
background-color: #001100;
background-color: #222;
color: #ccc;
border: 1px solid #0f0;
font-family: "Courier New", monospace;
padding: 10px;
border: 5px solid #666;
border-top: 1em solid #666;
border-bottom: 1em solid #666;
border-left: 1ch solid #666;
border-right: 1ch solid #666;
scrollbar-width: thin;
width: calc(100% - 1rem);
}
button {
background-color: #001100;
background-color: #222;
color: #0f0;
border: 1px solid #0f0;
padding: 5px 10px;
@@ -66,7 +85,7 @@
}
button:hover {
background-color: #002200;
background-color: #666;
}
</style>
</head>
@@ -75,12 +94,8 @@
<div id="viewport"></div>
<div id="status">orientation</div>
<div id="minimap"></div>
<div id="threejs" style="border: 2px solid green; background-color: #222"></div>
<div id="mapInput">
←→↑↓
<br />
<textarea id="mapText" rows="10" cols="120" wrap="off">
<textarea id="mapText" rows="10" wrap="off">
############################################################
############################################################
############################################################
@@ -123,7 +138,6 @@
############################################################
</textarea
>
<br /><br />
<button onclick="game.loadMap()">Load Map</button>
</div>
</div>

19
frontend/ascii_dungeon_crawler.js
View File

@@ -104,15 +104,20 @@ class DungeonCrawler {
/** @readonly */
this.rendering = {
/** @type {FirstPersonRenderer} */ firstPersonRenderer: null,
/** @type {MiniMap} */ miniMapRenderer: null,
firstPersonWindow: new AsciiWindow(document.getElementById("viewport"), 80, 45), // MAGIC CONSTANTS
minimapWindow: new AsciiWindow(document.getElementById("minimap"), 15, 15), // MAGIC CONSTANT
options: DefaultRendererOptions,
/** @type {FirstPersonRenderer} */ firstPersonRenderer: null,
/** @type {MiniMap} */ miniMapRenderer: null,
/** @type {AsciiWindow} */ firstPersonWindow: null,
/** @type {AsciiWindow} */ minimapWindow: null,
/** @type {DefaultRendererOptions} */ options: DefaultRendererOptions,
};
((this.rendering.firstPersonWindow = new AsciiWindow(document.getElementById("viewport"), 80, 45)), // MAGIC CONSTANTS
(this.rendering.minimapWindow = new AsciiWindow(
document.getElementById("minimap"),
this.rendering.options.viewDistance * 2 + 3,
this.rendering.options.viewDistance * 2 + 3,
)));
this.player = new Player();
this.setupControls();