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

19
frontend/ascii_dungeon_crawler.js
View File

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