Introducing HH Village Planner

[nevolia]

Hello, fellow Hearthlings!

I'm excited to share with you the HH Village Planner, a new web application designed specifically for players of Haven and Hearth.
This tool aims to simplify the process of designing and managing your villages. Whether you're a seasoned veteran or a newcomer to the game,
this planner is here to assist you with the basics of village layout. You can access the app here.

What is HH Village Planner?

The HH Village Planner is a web-based application that allows you to create, edit, and manage a grid of cells representing your village layout.
While it currently contains only basic features, it is designed specifically for Haven and Hearth. The tool includes essential functionalities like
color picking, grid line guides, and the ability to save and import your designs. Additionally, it offers a handy dimension display feature, which
is missing from many other alternatives. Please note that this is a work in progress and more features will be added over time.

Features and Functionalities

Here's a detailed rundown of the features available in the HH Village Planner:

1. Color Picker
- Description: The color picker lets you choose colors to fill cells in your village grid. The current color is displayed in the top left corner.
The color picker also stores the history of previously used colors, with a maximum of 15 colors.
- Usage: Select a color from the palette.

2. Color Fill Tool
- Description: Change the color of the selected cells to the current color chosen in the color picker.
- Usage: Select the cells you want to fill and click the Color Fill Tool button.

3. Create A Box
- Description: Fill the edge cells of the selected area with the current color from the color picker.
- Usage: Select the cells you want to outline and click the Create A Box button.

4. Undo
- Description: Revert your last change.
- Usage: Click the Undo button or press Ctrl+Z.
- Hotkey: Ctrl+Z

5. Redo
- Description: Reapply your last reverted change.
- Usage: Click the Redo button or press Ctrl+Shift+Z.
- Hotkey: Ctrl+Shift+Z

6. Save
- Description: Save your current work to your browser's local storage. The page will autosave the progress to the browser storage on every
change to the grid, so most of the time you don’t need to save manually.
- Usage: Click the Save button to save your design. Your progress will be available the next time you visit the site.

7. Toggle Dimensions
- Description: Toggle the display of the selection's dimensions between the bottom center of the screen and following the mouse cursor.
- Usage: Click the Toggle Dimensions button to switch the display mode.

8. Toggle Grid Guide Lines
- Description: Toggle the display of grid line guides that extend from the edges of your selection, providing visual assistance during selection.
- Usage: Click the Toggle Grid Guide Lines button to show or hide the guides.

9. Menu Functionalities
- Menu Access: Click the menu button to access the following functionalities:
- Create New Grid
- Description: Start a new design. Note that this will erase any progress on the current design.
- Export
- Description: Export your design as a JSON file.
- Import
- Description: Import previously saved designs from JSON files.

10. Hotkeys Overview
- Ctrl+C: Copy the selected cells.
- Ctrl+V: Paste the copied cells. If a single cell is copied, it pastes the copied cell's color to all selected cells.
- Ctrl+Z: Undo the last action.
- Ctrl+Shift+Z: Redo the last undone action.

Using the HH Village Planner

Getting Started:
1. Access the App: Visit the HH Village Planner.
2. Create a New Grid: Click on the menu button (hamburger icon) and select "Create New Grid". Enter the desired grid size
(the app limits grids to 300x300, but I do not recommend creating grids bigger than 200x200 due to performance) and click "Create new design".
3. Design Your Village: Use the color picker to select colors and apply them to your grid using the Color Fill Tool or Create A Box function.
4. Zoom and Pan: Use the mouse wheel to zoom in and out of the grid. Click and hold the mouse wheel to pan around the grid.
5. Save Your Work: The app autosaves your progress to your browser's local storage on every change to the grid, so most of the time you
don’t need to save manually.
6. Export and Import Designs: Use the Export and Import functionalities to save your designs as JSON files or load previously saved designs.
7. Accessing Help: Click the question mark in the bottom right corner of the screen to bring up the explanation of all the present functionality.

Feedback and Support

Your feedback is invaluable! If you encounter any issues or have suggestions for improvements, please leave a comment below or contact me directly.

Happy designing!

Privacy and Data Security

It is important to note that none of the data you enter in the HH Village Planner is stored by me anywhere. Everything happens on your PC,
and only you have access to that data. Your designs are saved to your browser's local storage, ensuring complete privacy and security.

[roskuwacz]

Hi,
Nice idea, few things that would be great addition:
* description per color so when sharing that others would know what pink means
* A few objects with range to be added -> Village claim/ Village banners - but I bet this would require layers to be added to the app so you can see if banners cover whole village etc.
* performance improvement

[nevolia]

Description per color should be very easily doable, my idea was to add `tags`. You could, for example, tag a cell as pali or house or field or anything else game related.
Aside from making it obvious to people you share with it would also allow for resource calculations. Based on tags the app could tell you how many logs, rocks, boards and
so on you would need to build the village.

Village claim and village banners are also kind of in the back of my mind.

Yeah, performance... I'm a backend dev, this project is basically me learning front end. I'll see what I can do

Thanks for the feedback!

[Halbertz]

Nice idea, but right now it's just pixel board without preset figures (that represent buildings). Also there are real monsters among us (we are not allowed to really talk a lot about them), that are building stuff "larpy" and even... diagonally. Right now that tool will never satisfy their primal urges.

[nevolia]

I believe when I start adding structures it will not be a big issue to add support for diagonal placement. It's really a matter of adding another layer to the grid and then you can turn the images however you'd like.
Given how rare these monsters are I will be putting off the support for that for quite a while. Traveling the world I've barely ever seen anyone place anything off grid. The biggest concern now is performance.
To me a village has always been a 100x100-250x250 grid. It was only when roskuwacz mentioned Village claim/Village banners that I realized some villages grow way past 1000x1000.

Again, thanks for the feedback, I highly appreciate it.

[Aragnir]

I like it, but can't access to lower part of plan
size 160x160

[nevolia]

Hey Aragnir! What do you mean you can't access the lower part of plan? Does it not allow you to pan around/zoom with the middle mouse button to be able to display the whole grid on your screen?
With your grid size you should be able to have no issues fitting the whole grid on your screen by zooming out all the way. I've attached a pic of 160x160 grid.

[Aragnir]

can't scroll down, it's always stick to uppper part or down, never allow to see entire plan.
i use chrome, i don't have access from firefox

[derkami]

Aragnir try moving the region with middle click.
You can pan you view that way...

[Aragnir]

Aragnir try moving the region with middle click.
You can pan you view that way...

that works, thanks