Please note I have very little experience with html/js
Path to html/js
stonehearth\ui\shell\embark
I’m just going to go over everything I think is important, again my knowledge is limited.
embark.html is the main view for the embark screen, it sets up the html elements.
embark.js handles most of the interaction with the view, user input, calls to the lua side to get new map data, calls to map.js to redraw the map.
map.js handles most of the drawing, ie the cursor, actual map. It also provides tile colors, if you need to change those.
the .less’s are used to provide information to html elements, like position, background images, color, ect. I am very unfamiliar with less.
embark.js
Where does the map data come from?
this appears to be the call that fills the map data
radiant.call('stonehearth:new_game', 12, 8, seed, self.options)
.done(function(e) {
self._map_info = e.map_info
fn(e);
})
.fail(function(e) {
console.error('new_game failed:', e)
});
stonehearth:new_game
un-aliases to a call in stonehearth\call_handlers\new_game_call_handler.luac
Function you should look for
function NewGameCallHandler:new_game(session,response,num_tiles_x,num_tiles_y,seed,options)
This function actually is the return, if you’re concerned with how the data is populated.
function NewGameCallHandler:_get_overview_map(tile_margin)
As you move the cursor around, data about vegetation and wildlife is populated on the side of the view, this is done through this function.
_updateScroll: function(cell) {
Example call
var map = $('#map').stonehearthMap('getMap');
self._updateScroll(map[cellY][cellX]);
Default map re-roll button action
self.$("#regenerateButton").click(function() {
radiant.call('radiant:play_sound', {'track' : 'stonehearth:sounds:ui:start_menu:reroll'} );
self._clearSelection();
self._newGame(function(e) {
radiant.call('radiant:play_sound', {'track' : 'stonehearth:sounds:ui:start_menu:paper_menu'} );
self.$('#map').stonehearthMap('setMap', e.map);
});
});
Generates a new map through our _newGame call, dicussed above, then sets map data by acessing the map element and calling setMap with our map data.
To start the game
_embark: function(cellX, cellY) {
var self = this;
radiant.call('radiant:play_sound',
{'track' : 'stonehearth:sounds:ui:start_menu:embark'} );
radiant.call('stonehearth:generate_start_location', cellX, cellY, self._map_info);
App.shellView.addView(App.StonehearthLoadingScreenView);
self.destroy();
}
stonehearth:generate_start_location
un-aliases to a call in stonehearth\call_handlers\new_game_call_handler.luac
function NewGameCallHandler:generate_start_location(session,response,feature_cell_x,feature_cell_y,map_info)
If you need me to expand upon how world generation works I will glad to look over it, as of now haven’t had the need too.
Map.js
Everything here is basically straight forward. If you have specific questions let us know.
.less
Again these are both relatively straight forward. If you have specific questions let us know.
Could you elaborate more, I guessing you are looking to have a picture replace what the canvas is drawing from the generated map.
Again, not being versed in html/js I can’t advise the best solution, but I’d do something like this.
inside embark.less
#map {
position: absolute;
background: url('./images/mybackground.png'); -ADD THIS
top: 129px;
left: 65px;
}
I am unsure, you may have to specify width, and height. If this gives you trouble you can always override the default background image.
stonehearth\ui\shell\embark\images\bg.png
with your own image.
From here replace, in map.js
_drawMap: function(context) {
var self = this;
var grid = self.options.mapGrid;
for (var y = 0; y < grid.length; y++) {
for (var x = 0; x < grid[y].length; x++) {
self._drawCell(context, x, y, grid[y][x]);
}
}
},
With
_drawMap: function(context) {
},
That should remove any drawing that is done, other than the cursor that you move around with the mouse.
Just keep in mind the generated map data is a requirement for generating the world.
Please let me know if I got anything wrong, I’ll be glad to revisit this, again I am guessing. If you more questions let us know. 