Tip jar

If you like CaB and wish to support it, you can use PayPal or KoFi. Thank you, and I hope you continue to enjoy the site - Neil.

Buy Me a Coffee at ko-fi.com

Support CaB

Recent

Welcome to Cook'd and Bomb'd. Please login or sign up.

March 28, 2024, 07:46:51 PM

Login with username, password and session length

CODE GENIUSES NEEDED - implementing a simple interactive map for a game

Started by ZoyzaSorris, February 05, 2021, 12:29:22 PM

Previous topic - Next topic

ZoyzaSorris

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

You could probably do something very easily with Leaflet[nb]https://leafletjs.com/examples/crs-simple/crs-simple.html might be a more helpful link[/nb] 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...)

Sebastian Cobb

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

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

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

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

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.

evilcommiedictator

Surely Tabletop Simulator was built for this, but it's not free :(


ZoyzaSorris

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

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

Quote from: ZoyzaSorris on March 03, 2021, 07:44:21 AM
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

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