Author Topic: CODE GENIUSES NEEDED - implementing a simple interactive map for a game  (Read 1065 times)

ZoyzaSorris

  • Brimming with innards
Hi software developer geniuses,

As I said in the thread on Discord I am trying to help run a traditional pen-and-paper type strategy game for an organisation using virtual tools, and programming simple Discord bots with Python has achieved a lot of what I need as regards custom tools...

But what I'd love to be able to do is have an online facility accessible by all players of a simple world map on which people can move their counters around. So basically just needs a background map image (preferably zoomable and so you can scroll around it) and counter icons that can be dragged around with the mouse in the browser by anyone who is playing. And that's it basically, really simple. Is this the sort of thing that could be knocked up quite easily with some library or other? I have a basic but far from expert experience with Javascript and Python, and development environments set up for these... or alternatively could this be done with some existing online collaboration tool?

Cheers!   


Zetetic

  • I wasn't supposed to be around this long, so…
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #1 on: February 05, 2021, 01:20:06 PM »
You could probably do something very easily with Leaflet[1] at the frontend and Python on the back.

(I think this would take an hour or three for me to put together with RShiny and Leaflet, depending on how much I could remember what I was doing, so long as you had a server to run it on and no interest in scalability. I might be being optimistic there…)
 1. https://leafletjs.com/examples/crs-simple/crs-simple.html might be a more helpful link

Sebastian Cobb

  • bad opinion haver
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #2 on: February 05, 2021, 01:30:15 PM »
For low-scale I'd sack server management off and store the front-end in aws s3 and handle the read/write in aws lambda for something this simple (in fact if it's just a 'few' players you could use s3 to store a json representation of the player's co-ordinates rather than setting up a proper database).

Zappa is quite good, it lets you throw small flask and django api's into lambda.

ZoyzaSorris

  • Brimming with innards
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #3 on: February 05, 2021, 03:02:03 PM »
Thanks guys, I'm realising from your answers that I'm pretty clueless and have a lot of homework to do :)
The game will only have about 10-20 players so no issues on scaleability.
That all looks great but may be overkill - all I suppose I need is the ability to display an image and to have user-draggable graphics on top. Is this the sort of thing Flash would have been good for back in the day?

Consignia

  • Deviant
  • Silver Member
  • ****
  • 저는 사과예요
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #4 on: February 05, 2021, 03:37:42 PM »
I wouldn't have thought flash would have been particularly good for this. You biggest hurdle is maintaining shared state, which is a backend issue rather than a front end which flash be. Everyone's browser needs to keep track of where the counters would be, and whenever one is moved, it reflected on others.

I few years ago, I wrote an application on top of bing maps (or whatever it was at the time) which displayed realtime measurements of instruments placed on schematics of power stations. The map API was really quite trivial to consume, and I can only assume they have become better in the intervening years.

However, I really don't think this is something you need a bespoke solution for. The surely must exist services that do this already to allow people to play online board games and what have you.

Consignia

  • Deviant
  • Silver Member
  • ****
  • 저는 사과예요
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #5 on: February 05, 2021, 03:43:47 PM »
Something like this for example: https://www.freetech4teachers.com/2020/07/how-to-create-your-own-online-board-game.html https://flippity.net/BoardGame.htm

I don't know if it exactly fits, but it's using google spreadsheets to emulate what you want.

We also use mural, a collobrative white board app. You could easily put a map background on it, and use it as a board.

touchingcloth

  • Member
  • **
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #6 on: February 08, 2021, 10:01:09 PM »
I was going to suggest a virtual whiteboard. Something like Metro Retro where you can put an image of your choice as the background and people just shuffle their own icons and post-its around the place. Assuming there’s no issue of people playing the cunt and moving other people’s stuff there’s no need to get overly bespoke.

Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #7 on: February 09, 2021, 12:57:53 AM »
Surely Tabletop Simulator was built for this, but it's not free :(

Sebastian Cobb

  • bad opinion haver
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #8 on: February 09, 2021, 06:25:57 PM »
Surely Tabletop Simulator was built for this, but it's not free :(

This is free though http://www.vassalengine.org/

ZoyzaSorris

  • Brimming with innards
So we just went with Miro in the end which is OK but not ideal for our needs in many ways (why doesn't the damn thing have photoshop-style layers for one thing?). I was considering embarking on a side-project to develop my own collaborative map gameboard web app, as such a thing would be immensely helpful and make me look like a genius in the eyes of my colleagues, but how on earth does one start out on such a project? 

MojoJojo

  • Member
  • **
  • Between a cow college and a MetaLab.
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #10 on: March 03, 2021, 11:05:10 AM »
Ah I was going to suggest a collaborative Google Drawing like what this person has done for a game https://docs.google.com/drawings/d/1fgmN9hQhHYPnGdOgsHfcGcHTdYrrxnJeNssG1TgEmkU/edit?usp=sharing

But that's pretty much the same as miro.

Sebastian Cobb

  • bad opinion haver
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #11 on: March 03, 2021, 06:11:55 PM »
but how on earth does one start out on such a project?

If this were me I'd find a good front-end map library, that does the UI stuff for me (allows some setting of some sort of background image and allows setting of markers through the UI and code, and getting the position of them again), because that's way outside my area of expertise and allows me to focus on building a relatively simple storage/retrieval api for the player positioning.


Consignia

  • Deviant
  • Silver Member
  • ****
  • 저는 사과예요
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #12 on: March 03, 2021, 06:56:04 PM »
I'd personally start with a long requirements gathering phase, to specify a grand UML diagram will set my direction for the next 2-3 years. 3 million please.

ZoyzaSorris

  • Brimming with innards
Re: CODE GENIUSES NEEDED - implementing a simple interactive map for a game
« Reply #13 on: March 04, 2021, 08:00:37 AM »
Thanks for all the input guys, serious and otherwise

Tags: