180 lines
6.9 KiB
HTML
Executable File
180 lines
6.9 KiB
HTML
Executable File
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>ASCII Dungeon Crawler</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #000;
|
||
color: #ccc;
|
||
font-family: "Courier New", monospace;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#gameContainer {
|
||
text-align: center;
|
||
}
|
||
|
||
#viewport,
|
||
#minimap {
|
||
font-size: 10px;
|
||
line-height: 10px;
|
||
white-space: pre;
|
||
border: 2px solid #0f0;
|
||
display: inline-block;
|
||
background-color: #000;
|
||
padding: 10px;
|
||
overflor: ignore;
|
||
}
|
||
|
||
#controls {
|
||
margin-top: 20px;
|
||
color: #0f0;
|
||
}
|
||
|
||
#mapInput {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#minimap .player {
|
||
position: relative; /* anchor */
|
||
color: #000; /* text blends into background */
|
||
/* background-color: red; */
|
||
}
|
||
#minimap .player.north::before {
|
||
content: "↑";
|
||
/* content: "★"; */
|
||
position: absolute;
|
||
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
|
||
display: flex; /* center it */
|
||
align-items: center;
|
||
justify-content: center;
|
||
pointer-events: none; /* don’t block clicks */
|
||
font-size: 1.5em; /* bigger if you want */
|
||
color: red;
|
||
}
|
||
#minimap .player.south::before {
|
||
content: "↓";
|
||
/* content: "★"; */
|
||
position: absolute;
|
||
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
|
||
display: flex; /* center it */
|
||
align-items: center;
|
||
justify-content: center;
|
||
pointer-events: none; /* don’t block clicks */
|
||
font-size: 1.5em; /* bigger if you want */
|
||
color: red;
|
||
}
|
||
#minimap .player.east::before {
|
||
content: "→";
|
||
/* content: "★"; */
|
||
position: absolute;
|
||
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
|
||
display: flex; /* center it */
|
||
align-items: center;
|
||
justify-content: center;
|
||
pointer-events: none; /* don’t block clicks */
|
||
font-size: 1.5em; /* bigger if you want */
|
||
color: red;
|
||
}
|
||
#minimap .player.west::before {
|
||
content: "←";
|
||
/* content: "★"; */
|
||
position: absolute;
|
||
inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
|
||
display: flex; /* center it */
|
||
align-items: center;
|
||
justify-content: center;
|
||
pointer-events: none; /* don’t block clicks */
|
||
font-size: 1.5em; /* bigger if you want */
|
||
color: red;
|
||
}
|
||
|
||
textarea {
|
||
background-color: #001100;
|
||
color: #ccc;
|
||
border: 1px solid #0f0;
|
||
font-family: "Courier New", monospace;
|
||
padding: 10px;
|
||
}
|
||
|
||
button {
|
||
background-color: #001100;
|
||
color: #0f0;
|
||
border: 1px solid #0f0;
|
||
padding: 5px 10px;
|
||
font-family: "Courier New", monospace;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: #002200;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="gameContainer">
|
||
<div id="viewport"></div>
|
||
|
||
<div id="minimap"></div>
|
||
|
||
<div id="compass">orientation</div>
|
||
|
||
<div id="mapInput">
|
||
<div>Load your map (# = walls, space = floor):</div>
|
||
<br />
|
||
<textarea id="mapText" rows="10" cols="50">
|
||
############################################################
|
||
############################################################
|
||
############################################################
|
||
## ################# ########################
|
||
## # # ################# # ## ########################
|
||
## # ################# # ## ################
|
||
## # # ################# # ## #### ####
|
||
## # # ## # #### # # ####
|
||
###### #################### ## #### # ####
|
||
###### #################### # ## # # #### ####
|
||
###### #################### # ####
|
||
###### #################### ########## #### ####
|
||
###### #################### ########## # # #### # # ####
|
||
###### #################### ########## #### # # ####
|
||
###### #################### #################### ####
|
||
###### #################### ############################
|
||
###### #################### # ############################
|
||
###### #################### # ############################
|
||
###### #################### # ############################
|
||
###### ## ########### ############################
|
||
###### ## ########### # # ############################
|
||
###### ## ########### ######## ############
|
||
###### ## ## # ########### ## ######## ############
|
||
###### ## # # ############
|
||
###### # # # ############
|
||
######### # ## ########### # ######### # ############
|
||
######### # # ########### # ######### # # ############
|
||
######### ########### # ######### ############
|
||
########################### # ######### #### ###############
|
||
########################### # ######### #### ###############
|
||
########################### # ######### #### ###############
|
||
########################### # ######### #### ###############
|
||
########################### # #### ###############
|
||
######################### # #### # # # ######## ###
|
||
######################### # # ######## # ###
|
||
######################### # ##### # # # # ######## ###
|
||
######################### # # ###
|
||
######################### ####################### # ###
|
||
##################################################### ###
|
||
############################################################
|
||
</textarea
|
||
>
|
||
<br /><br />
|
||
<button onclick="game.loadMap()">Load Map</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="./ascii_dungeon_crawler.js"></script>
|
||
</body>
|
||
</html>
|