1500+ lines of code and 60% the way there. I think I am going beyond the limits set for this challenge, but I don’t mind, and I want to go further! I have some grander ideas to make it a real game.
Some of the story so far…
You find yourself sitting at the Fat Dragon Inn when a tall stranger in dusty robes approaches you. Ooops… wrong story 
The dungeon levels are currently created as caves, using a modified “Conway’s Game of Life” algorithm where the walls are built in an empty space rather than the other way around.
The map view is such that the player is always centered and the dungeon layer moves around below (I am not sure what this effect is called). The Field of View (FOV) is highlighted to 6 squares radius and there is a minimap to the side to show areas already visited. Other status and information panels are also available on the sides of the main viewport. Under normal conditions, monsters and items will not be visible in the minimap, or outside the FOV. I just have that turned on for testing and debugging.
Current selection and placement of monsters and items is purely for testing.
There is some screen refresh delay if you hold down the movement keys continuously and I have not spent any time to debug that yet. It may be that there is too much calculation to be done to place the tiles in the proper location OR the tile object is too big OR my React design is not suitable.
Monster AI has been implemented using dijkstra. Monsters can wander in their range and eventually will be able to track and attack the player independently. Using a dijkstra map in the FOV will also allow for easier melee control, or if the monsters want to flee, etc.
However, in order to get this far I am now in some unfamiliar coding territory.
What I would like is:
-
For any experienced React campers to review my design/code and let me know if I am on the right or wrong path. I have made a concerted effort to keep model/data and view separated but I can’t be sure if I am doing this properly OR if I need to bring more of the model in to the existing React structure OR if I should be investigating any other APIs.
-
Assistance with Drag and Drop. I want the only interaction with the game to be:
a) Move around using arrow keys and y, u, b, or n (for diagonal movement). I also have the design ready to use mouse for moving around in the FOV using dijkstra, but that isn’t implemented yet.
b) Click on Monster to fire distance weapon (such as bow) otherwise moving into monster creates melee attack.
c) Click on Player to bring up Inventory dialog where items can be moved in any ways between player location, inventory, and body using drag and drop (DnD).
I NEED HELP with DnD. I think I should use react-dnd BUT all the examples are in ES6/7 and/or modular. I am not familiar with those techs yet. If anyone would like to mentor me through the DnD stuff, I would be grateful.
The code for my project is available on github, and has some comments. There is also a working version of the current code on codepen. I have been using namespacing, but I think the better way to go is modular. I just need to be more familiar with that first. If you’re reading my code, I use shorthand namespace a lot. For example:
var RL = {} // top level RogueLike object
var RL.Dungeon = {}
var RLD = RL.Dungeon;
var RLD.Monster = {}
var RLDM = RLD.Monster;
var RLDM.Snake = {}
The files are:
- index.html
- roguelike.js (Top level name space)
- dungeon.js (The main dungeon object and support functions. Holds the levels and tiles)
- player.js (Data and support for the main Actor object and Player)
- monsters.js (Data and support functions for Monsters)
-
items.js (Data and support functions for all the Items
stuff) - view.jsx (All the React classes)
Apologies for this long essay and thanks in advance for any code reviews or comments. I really want to be on the right path before proceeding too much further. If any can help me with DnD it would be great.