show border of dungeon map

[freddyb]

Since the user interface does not show the full dungeon map, you can not find out whether the current room you are in is on the far-right, the center or the far-left of the dungeon. If the map was zoomed out, you would see which areas (and which walls of the current rooms) are more likely to contain a hidden door.

The android port tacked this by showing the whole dungeon background in black and surrounding the non-dungeon part (e.g. when scrolled all to the right) in grey. This allowed you to see more correctly where you are in the dungon.

I noticed that browserhack currently only creates <div> elements for the actual tiles that are being rendered. I am not sure how to address this without showing all currently unknown blocks as black tiles. I tried fiddling with background colors in CSS, but did not make any substantial progress.

[coolwanglu]

Probably we can set the background color to grey, then put a 80x24 black rectangle on top of it and below all the tiles.

Another solution, which I prefer, is to create a 3rd zoom mode, which fit the whole dungeon to the map area, and there will be no map scrolling. But maybe normal tile images won't work well.

And how about a minimap, maybe we can draw an ASCII version, or just pure color tiles.

[freddyb]

I just became aware that this black/grey distinction does'nt exist on all ports. It's up to us if we consider it cheating or just a usability enhancement ;)

I'm not too convinced about a minimap, but I think panning (click & drag) would be more interesting. Especially for mobile (touch & drag, obviously)

[coolwanglu]

Not sure if dragging will work well, currently I usually use ; or _ to explore the whole map.

[coolwanglu]

In fact I think that the border is kind of a limit of the original implementation. In modern games, or imagine a real adventure, you wouldn't know the border unless you go through the edges yourself. So the border is merely an advantage of the players.

On the other hand, as I'm still new to NetHack, I wonder if this is a crucial affect for playing, otherwise I'd prefer not showing the borders.

[Tenchi2xh]

Tried a simple and not-too-intrusive solution by giving a size to the #browserhack-map-content div everytime a tileset is applied, and styling it via CSS:

nethack_lib.js, l. 177

      // update whole map size
      nethack.map_win_content.style.width = nethack.tile_width * 80 + 'px';
      nethack.map_win_content.style.height = nethack.tile_height * 24 + 'px';

browserhack.css, l. 92

  background-color: rgba(255, 255, 255, 0.025);
  box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.025);

Result looks like this:

[coolwanglu]

Hi Hamza,

It looks good to me, yet I think border could be more clear (less blur),
but it's your call.

Would you create a PR for this?

In fact one of the reasons that I didn't make the border is that I didn't
know the size is 80x24.

Thanks!

regards,

• Lu

[Tenchi2xh]

Not really sure about the size either! 80x24 appears to be the minimum terminal size requirement, I have seen sources claiming a map is about 78x20. Also, the Big Room has a size of 75x18 so I guess 78x20 looks like a good number. The number doesn't have to be precise anyway since this feature is just a means to tell the player when to stop trying to find more rooms.

I also agree that the blur is too much, I didn't try for a long time.
0 0 10px 0 rgba(255, 255, 255, 0.025); works a lot better.

The 4 lines I provided are the only changes, but I could do a PR. I'm not sure how to do it though: should I simply add the changes and commit to my already altered fork, or checkout the current version on a separate branch ?

[coolwanglu]

Please checkout the 'master' branch, apply the changes, commit and submit a
PR.

On Fri, Aug 14, 2015 at 5:12 PM, Hamza Haiken notifications@github.com
wrote:

Not really sure about the size either! 80x24 appears to be the minimum
terminal size requirement, I have seen sources
https://nethackwiki.com/wiki/NetHack_units claiming a map is about
78x20. Also, the Big Room https://nethackwiki.com/wiki/Big_room has a
size of 75x18 so I guess 78x20 looks like a good number. The number doesn't
have to be precise anyway since this feature is just a means to tell the
player when to stop trying to find more rooms.

I also agree that the blur is too much, I didn't try for a long time.
0 0 10px 0 rgba(255, 255, 255, 0.025); works a lot better.

The 4 lines I provided are the only changes, but I could do a PR. I'm not
sure how to do it though: should I simply add the changes and commit to my
already altered fork, or checkout the current version on a separate branch ?

—
Reply to this email directly or view it on GitHub
#9 (comment)
.

[freddyb]

80x24 is correct, as it is the default amount of columns/rows for a terminal window, e.g. echo $COLUMNS $ROWS in your non-maximized terminal.

[freddyb]

That wasn't completely correct :-) It must be less than 24.
I am not sure if there's a margin above and below the map, but at the very least we "lose" 2 lines for the status at the bottom (lvl, experience, name etc.)

Unknown command ' '.

                                                                ------
                                                                |....|
                        --------------------------------        ..<..|
                        -..............................|        |....|
                        |.------|--------------..-----.|        |....|
                        |.|....|..|...|.   |.....|...|.|        --.---
                        |.|....|..|...|.   |..|..-...|.|          #
                        |.--|-----|...||------|..|...|.|##        #
                        |......|   ...|.|..|..|.-----|[|##        #
                        |.----.|  --|--.|..|.%|)-....|..##        #
                        |.|  + -|--..{..-|-|..|.|.._.|.|#         #
                        |.|  |.........%...-|--d|....|.|#         #
                        |.|---+---.----|--..!.@.|....|.|#         #
                        |.|..|   |.+  |..|--|--------|.|##############
                        |.|..|   |.|  |..| ...|#.|.%.-.-#          +
                        |.|..|   |.---|.[|....|..|.%.|.|
                        |.-|------..{.---------|------.|
                        |........................../...|
                        --------------------------------

freddy the Thaumaturge    St:10 Dx:14 Co:16 In:17 Wi:8 Ch:10  Chaotic
Dlvl:7  $:278 HP:49(49) Pw:43(73) AC:8  Xp:7/767