MetaMaps Simple Mapping

peth-yursick commented 4 years ago

Payout

Up to $500 total

Description

We started building this new world in the cloud, we need to start mapping it or we’re bound to get lost in it.

In MetaGame, we have a few initiatives that seem to require the same basic infrastructure:

Endgame

In MetaGame, we plan on taking the “mapping of what’s going on” to the extreme. At some point, MetaMaps should be able to display not just manually pinned quests & portals, but also load SourceCred initiatives, github repos, etc. Rendering human nodes as players and quest nodes as bosses we’re slaying or buildings we’re building. It will be sick as fuck, I’m telling you. But for now...

Submission Requirements

What we need is a black board with the ability to drag & drop sprites onto it and change the wallpaper.
There should be a few default shapes to use, but the emphasis is on the ability to drag & drop pieces from the outside.
Every piece of the map can be a button, the button either:
- Takes you to another page
- or opens a small pop-up container giving more info & links.
Pieces of the map can be visually connected to others by drawing a line.
One should be able to edit the map by logging in with MetaMask.

For reference on embedded containers, you can check the State of Raids map, and see how each raid has a bubble connected to it. Well, instead of a bubble connected to it, one should be able to press the raid and get a pop-up of the raid description - something like this.

If you have any questions or want to share progress, drop in here.

Submission Deadline

Submit your work here by August 8th, leave your Discord handle.

Winner Announcement Date

August 10th at the closing event.

TheLoneRonin commented 4 years ago

@peth-yursick after investigating the problem further.

I've come to the realization that this issue (instead of #4) is a better starting point. I've created my first commit here. It is not complete.

https://github.com/TheLoneRonin/TheGame/tree/%40TheLoneRonin/metamaps

Before continuing, I do have more questions on how this project will function.

How are images uploaded and managed to the Mapping?
If there is a Solidity contract to manage the state of a map (if not using Solidity, how should maps be implemented). There are inherent limitations to Solidity arrays and size. While I do have a general idea of how it should work. If you have any feedback on how that should work. I am happy to learn more.

Perhaps maybe using a mapping struct with an int counter would be the best approach?

Something like this might be ideal:

struct Sprite {
  int top;
  int left;
  string imageUrl;
}

int counter = 0;

mapping(int => Sprite) map;

I've created a basic Drag and Drop interface here.

However, how this Drag and Drop interface is structured is very important. Are there any other things to be taken into consideration when generating new sprites for a map?

Thank you and awaiting your reply.

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 1 week from now. Please review their action plans below:

1) theloneronin has started work.

Before creating the other UI. It may be more ideal to start with this instead. 2) waninsuarez has started work.

My project is to help and give information to everyone.

Learn more on the Gitcoin Issue Details page.

peth-yursick commented 4 years ago

@peth-yursick after investigating the problem further.

I've come to the realization that this issue (instead of #4) is a better starting point. I've created my first commit here. It is not complete.

https://github.com/TheLoneRonin/TheGame/tree/%40TheLoneRonin/metamaps

Before continuing, I do have more questions on how this project will function.
1. How are images uploaded and managed to the Mapping?

2. If there is a Solidity contract to manage the state of a map (if not using Solidity, how should maps be implemented). There are inherent limitations to Solidity arrays and size. While I do have a general idea of how it should work. If you have any feedback on how that should work. I am happy to learn more.
Perhaps maybe using a mapping struct with an int counter would be the best approach?

Something like this might be ideal:
struct Sprite {
  int top;
  int left;
  string imageUrl;
}

int counter = 0;

mapping(int => Sprite) map;
1. I've created a basic Drag and Drop interface [here](https://github.com/TheLoneRonin/TheGame/tree/%40TheLoneRonin/metamaps).
However, how this Drag and Drop interface is structured is very important. Are there any other things to be taken into consideration when generating new sprites for a map?

Thank you and awaiting your reply.

Instead of this whole interface on the left side, there should be only 3 buttons: A square, a circle & a line. And would it be possible that even those 3 options are not on the side, but come up when you right click on the map? Also I think it's important that the objects can be dynamically resized vs. inputting their size when generating them.

Didn't understand this part: "Before creating the other UI. It may be more ideal to start with this instead." To start with what instead?

There isn't any solidity contract managing it yet, but we plan on using 3Box's Ceramic for state storage afaik. Ethereum would be used just for write privilege verification, if that makes any sense. I'll get someone technical to give you further feedback, but if you have an idea of how it should work I'd say go for it 🤷‍♂️

TheLoneRonin commented 4 years ago

To start with what instead?

Ah, apologies for the confusion. That comment when submitting on the Gitcoin website was redundant.

we plan on using 3Box's Ceramic for state storage afaik.

In terms of 3Box's ceramic. That probably would be more ideal than rolling a completely new smart contract out of the box.

I think I have more than enough information to move forward with a proof of concept.

To recap requirements:

Must be able to draw squares, circles and lines.
Must be able to upload images onto the canvas.
No sidebar and instead, a right-click interface.
Images can be resized dynamically.
Data is stored through 3Box's Ceramic tool.

https://www.ceramic.network/

I'll send you an update when ready.

peth-yursick commented 4 years ago

Yes, sir! Perfect.

peth-yursick commented 4 years ago

Oh, got a few more details in terms of the design. If you could use this color scheme: 1b0d2a for background 261942 for squares 392373 for pop-ups a5b9f6 for text 5a32e6 for circles b72886 for lines
and if it's not too much hassle, make edges of everything round, even the square shape.

Also, not sure if it makes any difference to know this right away, but this map must be easily embeddable into other websites. Eg. our wiki (based on docusaurus, loads React apps)

TheLoneRonin commented 4 years ago

@peth-yursick,

Those color schemes are no problem at all. I'll make sure to have rounded corners at 8px border-radius as well too!

I'll also make sure it can load in an iframe. I'll have a test case specifically for that. Feel free to chime in anything else you may need. I'm working on it and will ideally have something done by early or mid next week!

Cheers!

TheLoneRonin commented 4 years ago

@peth-yursick, here's a progress update for this morning.

Just got the popup menu working with a right click. Right now it only creates squares. But will be working on lines and images too!

TheLoneRonin commented 4 years ago

Also, I need to create the popup menu for resizing. Anyway, will keep you posted.

peth-yursick commented 4 years ago

I messed up with colors, squares were too dark. Let's get rid of squares completely, use their color for popups. Then use the color previously for popups, now for buttons. like so: 261942 for pop-up 392373 for buttons the background still 1b0d2a Instead of text on buttons, have icons & have the third button for upload It should look something like this:

TheLoneRonin commented 4 years ago

Hey @peth-yursick,

I just pushed more updates. Below is a screenshot of the updates I've made.

Let's recap tasks that still need to be done.

Special context menu for objects: Being able to resize and delete them.
The ability to upload images. Same functionality as other objects, resize and deleting them.
Use a graphic context menu instead of text based.
Integration with 3Box Ceramic.

I've also thought about having the ability to create a custom background... Perhaps there should be an additional option in the menu for a custom background? Would love to hear your thoughts on that.

TheLoneRonin commented 4 years ago

Also, the ability to change the colors of objects would be nice too! Also, another thing, being able to add custom text would be great too!

Let me know what you think! I don't think custom text is necessary since you can just upload images... Would be sort of redundant. But customizing object colors would be great imo!

TheLoneRonin commented 4 years ago

Almost done @peth-yursick

Here's a recap of tasks I need to finish.

Upload images with the ability to resize and delete them.
Integration with 3Box Ceramic.

Ideally I can finish this by end of today. I'll keep you posted!

TheLoneRonin commented 4 years ago

On the homestretch @peth-yursick. There is one thing I forgot about...

Popup dialogs and URL linking. Thus.

The tasks remaining are:

Create popup dialogs and URL linking for objects.
Integration with 3Box Ceramic

Below is an image showing uploads work. With base64 encoding. This way we don't need to worry about external file storage services.

peth-yursick commented 4 years ago

Also, the ability to change the colors of objects would be nice too! Also, another thing, being able to add custom text would be great too!

Great thinking, I did want this ability to change colors eventually just left it out for the first version for simplicity.. Text is actually a must-have I just forgot it. 😬 The players & skills (dots) need names. Each dot should have text attached to it from below. Have this font.

I've also thought about having the ability to create a custom background... Perhaps there should be an additional option in the menu for a custom background? Would love to hear your thoughts on that.

Definitely think there should be custom backgrounds, just thinking about them in terms of "an image to drop on", since the plane will be very long & probably doesn't make sense to stretch images to fit it. What matters is that these are always behind all other objects.. Same with lines, lines should always go below the dots & squares and possible lock onto them if not too hard for the first version. Eventually want to be able to select blocks or multiple, and move lines with them, if that makes sense?

Great work so far! 💪

Btw, we're doing a MyMeta raid tomorrow at noon PST / 9PM CET on the DAO Hack Month discord. - Don't have to work on MyMeta to come hack with us & meet some people :)

TheLoneRonin commented 4 years ago

We will improve the project later. There are so many things we can add to this!

Let's limit scope. Get the core deliverables done and later we can improve it more! :) Also, joined Discord. I need to make my own MyMeta profile too!

TheLoneRonin commented 4 years ago

@peth-yursick, final stretch. 3Box Integration.

Both popups and URL linking works now. Just need to get 3Box working.

I've also uploaded a commit with all my changes. Below is a photo of an example popup.

TheLoneRonin commented 4 years ago

@peth-yursick, and we're finally done!

Keep in mind this 3Box implementation needs a few more things... However, I've intentionally left them out for now... Because we need to discuss how MetaMaps will function...

For example here are some things our 3Box integration needs...

Being able to navigate other people's addresses, spaces and maps.
Being able to change the address you're using in metamask.
Some sort of "centralized" Ethereum Address that can be used to store all the spaces used in MyMeta.

Furthermore, there are more things that need to be done... But the scope of this task can get extremely large... Some things we need to consider are.

Loading screens/Loading states
File storage and how it's managed via IPFS (base 64 encoding is a bit finicky with 3Box, which is understandable tbh)
How other people can manage the spaces and write data to spaces.

Anyway, this is ready to be submitted. Below is a screenshot of the additional UI. Let me know if there's anything else we should discuss!

We can pick up the ball again on #4 since we can technically start designing that interface via 3Box now since it persists and saves state now.

TheLoneRonin commented 4 years ago

Also, here is the branch for review: https://github.com/TheLoneRonin/TheGame/tree/%40TheLoneRonin/metamaps/packages/web

Let's chat maybe via Discord about how we can evolve the project? There are some things we need to consider when it comes to 3Box integration and sharing.

Furthermore, I've also been very intrigued in: https://github.com/aragonone/hack-for-freedom/issues/5 And I really think the idea of a dashboard for agent would be super useful.

So while we accumulate the correct project specs for MetaMaps (since there are some unanswered questions we need to solve and figure out). I'll be working on a new dashboard for Aragon in the meantime!

Cheers!

TheLoneRonin commented 4 years ago

Oh and one final thing... @peth-yursick, maybe we should migrate this project to its own separate repo?

Perhaps it should be called MetaFam/MetaMaps?

peth-yursick commented 4 years ago

Oh and one final thing... @peth-yursick, maybe we should migrate this project to its own separate repo?

Perhaps it should be called MetaFam/MetaMaps?

I think @hammadj wanted everything that will be "inside the game" to be in TheGame repo, though I don't know why & what would be the pros/cons of going either way..

I think this Aragon hack has expired with the closing of the HFF part of the hackathon, please check with someone from Aragon before you start working on it. @burrrata might know? If this one is closed already, maybe you could work on the MyMeta Dashboard idea, which is pretty similar.

As for other questions, yeah, don't yet have all the answers myself either. Happy to hop on Discord & discuss ways we could move this forward, so much potential :o

TheLoneRonin commented 4 years ago

I think @hammadj wanted everything that will be "inside the game" to be in TheGame repo, though I don't know why & what would be the pros/cons of going either way..

That's works for me! Let's have an open discussion about this in Discord (or here, doesn't matter)

I think this Aragon hack has expired with the closing of the HFF part of the hackathon, please check with someone from Aragon before you start working on it. @burrrata might know? If this one is closed already, maybe you could work on the MyMeta Dashboard idea, which is pretty similar.

That would be great to know. I'm still interested in the project... Hackathon or not. It's a project intended to make life easier for everyone using Aragon so I really see value in the dashboard. Let me review the MyMeta Dashboard idea in the meantime.

META-DREAMER commented 4 years ago

@TheLoneRonin Just saw your repo and that you created the maps under the "web" package. Would be better to have it as a separate package, maybe just copy paste the folder and rename it to "metamaps"

TheLoneRonin commented 4 years ago

@hammadj, just created a new branch here: https://github.com/TheLoneRonin/TheGame/tree/%40TheLoneRonin/metamaps-base/packages/metamaps

Also fixed some minor structure issues. If you have any questions let me know.

MetaFam / Fork-The-World