Guide/Walkthough on how to download this project for local development

[warrenbreedlove]

Im fairly new to coding and JS in general. Im trying to use this project to help understand leaflet and i like the game. When i download the files and open the html file it just says. "requires javascript......." Im also not seeing any map images in the folder either. That could be useful to me if someone could help me out. Maybe write a quick guide for this or provide me with a download that would meet these problems. Thanks.

[Istador]

https://github.com/Istador/pine-interactive-map#set-up-the-project-for-local-development

https://github.com/Istador/pine-interactive-map/blob/3c5e8e080a3281ce632afdba8478be3db3d8156d/README.md#L47-L65

And after that you have a index.html file that you can open in a web browser.

The index.template.html is only a template for the real index.html file which is build by webpack by calling npm run build.

If you want to modify the files to stumble arround with it, you might also be interested in the command npm run watch which does rebuild automatically on file changes (when you save the source files).

[warrenbreedlove]

Im getting "command not found: npm" Here is a screenshot of my config.

thank you for the reply btw

[warrenbreedlove]

I probably node.js installed right? I cant actually install that on this specific computer. Is there any other way to do this without node.js?

[Istador]

No, there is no other way. This is a node project. All dependencies required to build the final html, css and js files are installed via npm (which ships with node) and building it is done with node (wrapped by npm run) in a JavaScript environment.

I'm still using node version 14.15.5 with this project, but newer versions should also work fine. https://nodejs.org/en/download/

Instead of installing node on your computer natively you could also use the docker image, if you have docker installed already. An alternative to npm could be yarn, but you'd still need node.

[warrenbreedlove]

So i installed node.js on another computer and got this working. I ran npm run build and i now have the index.html

So i wanted to use this project kind of as a template for another map for a different game. Just kinda getting my feet wet and what not.

What my folder looks like right now

If i wanted to do that and change the icons, map, markers etc. What files or folders should i be focusing on editing. And if i make some changes and want to see them will it just auto update the index.html? Or is there a command i would need to run to kinda like rebundle the changes? Sorry im not super fluent in coding so hopefully this makes sense and you understand what im tryin to do. Thank you again.

Not showing marker atm.

[Istador]

Any change in the source files requires a rebuild.

• npm run build does that once.
• npm run watch does that as long as it is running automatically when it detects a file change (changes to some files require it to be restarted).

---

I'm also currently working on a fork of this project for another game. Likely I'll work on better mobile support in the near future in this project first before I continue with that project.

It's definitely one of my goals to make this project better adaptable for other games as well. And make a lot of Pine-specific things more customizable/configurable.

---

The games map is in the tiles submodule (directory). It contains a lot of small images in different zoom levels to optimize the amount of data that needs downloading (otherwise the map would be one huge image of about 20 MB, which despite a long loading time may cause other problems in some browsers).

But likely for starting, you'd want to start with a simple image as a background. You could define baseLayers alternatively in src/js/layers.js like so:

const baseLayers = {
  '2D' : L.imageOverlay('your-map-image.png', bounds),
 }

If you know the in-game coordinates of the game and it differs from -1024 to 1024 you'll likely want to change these in the same file. To display and use correct coordinates.

---

In the img submodule (directory) are all other image files, mostly for UI elements and map marker icons.

The map marker icons are coupled with the css (because the individual icons are all builded with spritesmith into one image file, CSS is needed to position the background exactly) and js (to position the anchors individually per icon), so likely you'll want to change multiple places at once.

---

Regarding no markers shown:

Some browsers disable loading local files in some way or another.

In Firefox there's the about:config setting privacy.file_unique_origin. Setting it to false instead of true should allow access.

For Google Chrome I use a shortcut to launch Chrome without that restriction:

• "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --args --allow-file-access-from-files --user-data-dir="d:\tmp\chrome" "file:///D:/Projects/pine-interactive-map/index.html"

Don't use these settings while browsing on the internet, but only when you develop locally.

---

For my next project I'm currently using a DATAMODE with json as a value in the .env (which loads the data from a local file then). But I haven't merged/implemented that feature here yet. The only two datamodes currently available are wiki or spreadsheet.

wiki means the data is loaded from a wiki page. And also has some nice wiki integrations, like screenshots and linking to other wiki pages.

Whereas spreadsheet loads the data from a Google docs spreadsheet (which must be publicly accessible, but write access rights could be restricted - keep in mind that vandalism might become a thing without any restrictions - which was one of the main reasons for me to move away from spreadsheets).

Example .env for spreadsheet mode:

DATAMODE="spreadsheet"
SOURCE="https://docs.google.com/spreadsheets/d/SOMEID/edit"
JSON="https://spreadsheets.google.com/feeds/cells/SOMEID/od6/public/basic?alt=json"

---

If you want to mess around with datamode json, here's what I currently have added to src/js/datasource.js (very simple):

// [...]
const fetch = {
  json: () => window.axios.get(`${__JSON__}`),
// [...]
}

const transform = {
  json: ({data}) => data,
// [...]

[Istador]

The green UI colors are defined here: https://github.com/Istador/pine-interactive-map/blob/3c5e8e080a3281ce632afdba8478be3db3d8156d/src/css/green.scss#L1-L17

I always wanted to offer multiple themes, that the user could select via the browsers Page Style feature, but I haven't found a good solution/plugin yet to inject the different themes into the html.

For example I made the following change to get a dark blue color scheme instead (the other colors still need to be changed, e.g. the partly-green font colors aren't fitting together with that):

-$green1: rgb(131, 171, 125); $green1_transp: rgba($green1, 0.975);
-$green2: rgb(101, 136,  96);
-$green3: rgb( 98, 132,  93); $green3_transp: rgba($green3, 0.800);
-$green4: rgb( 82,  99,  69);
-$green5: rgb( 72,  99,  68); $green5_transp: rgba($green5, 0.700);
+$hue1: 210;
+$hue2: $hue1 - 18;
+$green1: hsl($hue1, 21%, 58%); $green1_transp: rgba($green1, 0.975);
+$green2: hsl($hue1, 17%, 45%);
+$green3: hsl($hue1, 17%, 44%); $green3_transp: rgba($green3, 0.800);
+$green4: hsl($hue2, 18%, 33%);
+$green5: hsl($hue1, 19%, 33%); $green5_transp: rgba($green5, 0.700);