[WIP] Player map - initial version (closes #8) by foreza · Pull Request #9 · thireven/dmtool

foreza · 2018-08-03T04:10:53Z

Don't merge this in. Wanted your feedback early before I continued on.

This version grabs the image (if it exists) of a player and stuffs a version into the DOM (hidden) so we can just use it there.
I added a 'move' button next to the edit field. This targets the player's image for moving.
The X/Y fields don't update from their default value. When you create a character, you can now specify a beginning loc x / loc y. Again, I'm only using them locally for now.
Big map is hanging on the right with 'absolute' positioning because I couldn't for the life of me figure out where else it should go. Shifted some stuff to the right.

Couple of notes:

Rusty AF with EJS. I'll study up on it. I was able to hammer together what I needed, but not happy at all with how the character object looks (literally threw in a x/y), the serializing is getting me confused. Workshop pls
Drawing is done on a loop. 200ms is when it updates. I emulated a game loop for now, but I think it might be overkill. My initial thought is that this would be nice if we had sprite sheets.
Didn't yet work on the combat. I plan to store the 'combat' items in the gameboard state, and the 'explore' position with the characters. The reasoning behind this is that in combat, the gameboard state itself needs to track much more things (how large the monster might be (ie: 20x20 vs a player who is 5x5), and actually lock down positioning. Will implement this in a tab / toggle above the current 'explore' state.
This is only the 'explore' state, half of it at least. I didn't want to write anything to DB yet in case I need to scrap and try another approach

closes #8

…examples in default.js Just to get things started a bit, added all the relevant stats, classes, etc. Added placeholders for spells, proficiencies, etc. We'll need to find better places to put those but it's easier to visualize it when we have it mocked up Toned down base/maxhp since you never roll that lucky for health! Consulted: https://www.dndbeyond.com/spells https://orcpub2.com/pages/dnd/5e/character-builder https://en.wikipedia.org/wiki/Character_class_(Dungeons_%26_Dragons) http://engl393-dnd5th.wikia.com/wiki/Backgrounds Added alignments because that's always fun Removed mana since DND doesn't use mana

Add styles to enforce negative margin on the character display container to allow for room to show map Add a new region on the DOM (absolute right) for the map Add placeholder images to demonstrate proof of concept Stubbed out sample gamestate object Can click on the placeholder map to drop a monster at a specified location (note: cannot erase anything yet) Implemented basic 'gameloop' stub that will draw every 1 second

Added x/y test ejs template and updated default form so we can track the global location with the character. In-combat location can be tracked in the the mapobject as that is encounter driven Updated style to support a temporary 'move' button that will need to be stubbed out Removed drawing on click for now

…ntil another character is selected for movement Modified characters.ejs to call a utility function to generate an <img> element in the DOM to easily access character images for display Update MapHelper.js to grab locX and locY from the saved X/Y location stored on each character Clicking on the 'move' button next to each character selects them by the UID and indicates that any clicks on the map should move the avatar. This is currently done locally and not yet written back to the DB and progress will be lost when window is refreshed Make use of game loop (currently drawing every 200ms) to do update for first iteration. Later, we will need to either have all clients query for location updates on this loop, or pass an update to all other clients when a value is updated

> > Removed the gameloop > Had to add in a sleep (temp stopper) to call render 1s after in order to get the characters to render on room load > > Known issue: when you add a new character, it doesn't show up right away

Use canvas to draw uniform tiles across a given image (made a utility function util_drawGridOnState that takes in a context, height, width, and scale) Add toggle button to switch based off of what is currently stated in gameBoardState inCombat flag Re-organized DOM in the .ejs to allow for this structural change

Using a 'scale' number, used several util functions to adjust and modify the actual location on the canvas vs the stored location. ie: 5,5 on the character would be translated to something else on the world display coordinatess Known issue: if 2 or more players are on the same 'tile' they will overlap. thinking of introducing some 'variance' number that will shift their locations depending on who is on the tile, but not a big priority right now Another known potential issue: While we can draw a grid and simulate a grid, there is no collision detection or anything like that built in. in addition drawing avatars of different size is not yet supported

foreza · 2018-08-07T07:54:30Z

Pushed a very basic, barebones implementation that I hacked together.
It doesn't support any sort of things a game engine might since we're really only using this to display where the character is.
I'm tracking the current game state locally right now, next step would be to write the gameBoardState to the room's storage alongside the characters so that we can persist the locations for both modes
Movement is stored locally amongst both modes which is nice.

Note: I hardcoded gameBoardState for movementroom2, so use /room/movementroom2/characters

I also created a function to populate which you can enable/disable based off of your needs

thireven · 2018-08-07T17:41:15Z

+                container.text('');
+                characters.forEach((character) => {
+                    container.append(CharacterHelper.generateCharacterHTML(character));
+                    util_createImageRenderDom(character.id, character.Picture) // Adds images to the dom hidden so we can use them later


Is this necessary since you should be reusing the image from the character profile?

Noted. Will try to grab it from the existing DOM element. If that works, I'll nuke my function that adds the picture into a new element.

Resolved that in 2890b85

thireven · 2018-08-07T17:42:25Z

+      { name: 'Class', type: 'options', values: ['Barbarian', 'Bard', 'Cleric', 'Druid', 'Fighter', 'Monk', 'Paladin','Ranger','Rogue','Sorcerer','Warlock','Wizard']},
+      { name: 'HP', type: 'number', default: 10 },
+      { name: 'MaxHP', type: 'number', default: 10 },
+      { name: 'Spells', type: 'spells', values: [


type should be a generic data type/structure so that it can be implemented in a way that would work in all cases (such as text, options, number, etc). Every type would need to have their own custom implementation for the UI in multiple places.

Whoops, my bad. Spells should be text. Will amend.

Leaving location type since I think that needs to have a custom implementation?
Changed spells and proficiencies back to type 'text'.

Resolved in 4d23378

thireven · 2018-08-07T17:43:58Z

    overflow: auto;
    display: block; }

+#characters-container {


Forgot to mention, but the project is using SCSS/SASS to compile the css files. You should run npm run grunt and edit the SCSS files instead. You can copy/paste the new CSS changes into the file if you want.

Realized that. Most of my changes later were on the SCSS file. I'll revert the changes to this one, not sure how I ended up touching this one.

Resolved in 4d23378

Regenerated the file.

…g to util_adjustAndCenterDisplayForCombat Image was formerly being grabbed, and being inserted as a img tag (thus duplicating). Removed that + the helper function, and instead used jquery to grab the element by the attribute, grab the child img element and use that instead for display. Bounds checking was not really being done by the util, therefore allowing a negative input. Adding in a conditional return so that anything less than 0 would bump it back to the center of the 'tile'

…e with rendering when no profile pic is supplied, create a populate test mode Hardcoded locations in MapHelper made it impossible for anybody else to test. Added a test function to generate a set of test data no matter what room this is created in. Without uploading an image, last commit would cause a crash when it tried to render a character without a photo. Added in a condition so it would draw a default instead. Added a function to trigger a redraw of the mapview. Adding a character will now also cause it to render right away. Some formatting

thireven · 2018-08-09T01:20:13Z

      { name: 'HP', type: 'number', default: 10 },
      { name: 'MaxHP', type: 'number', default: 10 },
-      { name: 'Spells', type: 'spells', values: [
+      { name: 'Spells', type: 'text', values: [


values is pointless here since the text type is just an input box.

thireven · 2018-08-09T01:20:30Z

      { name: 'Proficiencies', 
-        type: 'proficiencies',
+        type: 'text',
        skills: [


skills here should also be pointless here

thireven · 2018-08-09T01:23:02Z

-    // Render on a timeout (temporary fix)
-    setTimeout(function () { renderAllPlayerLocation() }, 2000);
+    // Render + init on a timeout (temporary fix)
+    setTimeout(function () {


You shouldn't need to re-render on a timer. You should just need to draw once per change.

…, minor bug fixes / refactor Removed location.ejs and the include from characterform; using numbers.ejs on the characterform is sufficient Fixed another issue with the default rendering of the placholder sprite; it's redrawing too many times on the canvas and is wasteful Moving the character will now use axios to call the patch for character/:character id with the new updated x/y value so that the session persists even after death Updated the default.js config to better represent what the stucture on the form now actually is (was doing a duplicate because of the include of location.ejs

…aracter is added

foreza added 6 commits July 6, 2018 13:41

Pull from upstream

f49bd1a

Update MapHelper to better center drawable image on pointer click

b81fdc7

thireven changed the title ~~Player map - initial version~~ [WIP] Player map - initial version Aug 3, 2018

thireven changed the title ~~[WIP] Player map - initial version~~ [WIP] Player map - initial version (closes #8) Aug 3, 2018

foreza added 4 commits August 6, 2018 18:47

Remove game loop and support drawing only when an action is taken

531409d

> > Removed the gameloop > Had to add in a sleep (temp stopper) to call render 1s after in order to get the characters to render on room load > > Known issue: when you add a new character, it doesn't show up right away

Update gitignore to exclude .DS_Store

e339db7

thireven reviewed Aug 7, 2018

View reviewed changes

foreza added 4 commits August 7, 2018 22:40

Changed spells and proficiencies back to type 'text'

5fc212e

Regenerated characters.css file based off of SCSS/SASS file provided

4d23378

thireven requested changes Aug 9, 2018

View reviewed changes

foreza added 2 commits August 8, 2018 19:55

Comment cleanup, quick temp fix to allow image to render after new ch…

3ac2f80

…aracter is added

Navigation Menu

[WIP] Player map - initial version (closes #8) - #9

[WIP] Player map - initial version (closes #8)#9
foreza wants to merge 16 commits into
thireven:masterfrom
foreza:player-map

foreza commented Aug 3, 2018 •

edited by thireven

Loading

Uh oh!

foreza commented Aug 7, 2018

Uh oh!

thireven Aug 7, 2018

Uh oh!

foreza Aug 8, 2018

Uh oh!

foreza Aug 8, 2018

Uh oh!

thireven Aug 7, 2018

Uh oh!

foreza Aug 8, 2018

Uh oh!

foreza Aug 8, 2018 •

edited

Loading

Uh oh!

thireven Aug 7, 2018

Uh oh!

foreza Aug 8, 2018

Uh oh!

foreza Aug 8, 2018

Uh oh!

thireven Aug 9, 2018

Uh oh!

thireven Aug 9, 2018

Uh oh!

thireven Aug 9, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

foreza commented Aug 3, 2018 • edited by thireven Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

foreza commented Aug 7, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

foreza Aug 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

foreza commented Aug 3, 2018 •

edited by thireven

Loading

foreza Aug 8, 2018 •

edited

Loading