146 lines
5.6 KiB
HTML
146 lines
5.6 KiB
HTML
<!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;
|
|
}
|
|
|
|
#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-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: 14px;
|
|
line-height: 13px;
|
|
white-space: pre;
|
|
display: inline-block;
|
|
padding: 2px;
|
|
border: 5px solid #666;
|
|
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: visible;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
textarea {
|
|
background-color: #222;
|
|
color: #ccc;
|
|
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: #222;
|
|
color: #0f0;
|
|
border: 1px solid #0f0;
|
|
padding: 5px 10px;
|
|
font-family: "Courier New", monospace;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #666;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="gameContainer">
|
|
<div id="viewport"></div>
|
|
<div id="status">orientation</div>
|
|
<div id="minimap"></div>
|
|
<div id="mapInput">
|
|
<textarea id="mapText" rows="10" wrap="off">
|
|
#########################################################
|
|
# ################# ######################
|
|
### # ################### # ## ######################
|
|
# P _Z###############Z_ # ## ############## ::: P(east) _(portalA,west) Z(portalB) Z(portalA) _(portalB,west)
|
|
# ######################## # ## #### ##
|
|
## E ################# # # ## # #### # # ## ::: E(gnoll)
|
|
### ################## ## #### # ##
|
|
#### ################### # ## # # #### ##
|
|
#####E#################### # ## ::: E(skelebones)
|
|
##### #################### ########## #### ##
|
|
##### #################### ########## # # #### # # ##
|
|
##### #################### ########## #### # # ##
|
|
##### #################### #################### ##
|
|
##### #################### ##########################
|
|
##### #################### # ##########################
|
|
#####E#################### # ########################## ::: E(gnoll)
|
|
##### ###############_#### # ########################## ::: _(portalC, south)
|
|
##### ## ##### ## ########################## :::
|
|
##### ## Z#### ## # # ########################## ::: Z(portalC)
|
|
##### ## _####Z ## ######## ########## ::: _(portalD, west) Z(portalD)
|
|
##### ## ## # ########### ## ######## ##########
|
|
#####E## # #E ########## ::: E(Dwarves, gnoll) E(Gelatinous_Cube, gnoll)
|
|
##### # # # ##########
|
|
######## # ## ########### # ######### # ##########
|
|
######## # # ########### # ######### # # ##########
|
|
######## ########### # ######### ##########
|
|
##########Z############### # ######### #### ############# ::: Z(portalE)
|
|
########################## # ######### #### #############
|
|
########################## # ######### #### #############
|
|
########################## # ######### #### #############
|
|
########################## # #### #############
|
|
######################## # #### # # # ######## #
|
|
#######################_ # # ######## # # ::: _e(portalE, east)
|
|
######################## # ##### # # # # ######## #
|
|
######################## # # #
|
|
######################## ####################### # #
|
|
#################################################### #
|
|
#########################################################
|
|
</textarea
|
|
>
|
|
<button onclick="game.loadMap()">Load Map</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="./ascii_dungeon_crawler.js"></script>
|
|
</body>
|
|
</html>
|