SL2 interactive map construction log

SL2 interactive map construction log - Printable Version

+- NEUS Projects (https://neus-projects.net/forums)
+-- Forum: Sigrogana Legend 2 (OOC) (https://neus-projects.net/forums/forumdisplay.php?fid=8)
+--- Forum: General Discussion (https://neus-projects.net/forums/forumdisplay.php?fid=9)
+--- Thread: SL2 interactive map construction log (/showthread.php?tid=11433)

SL2 interactive map construction log - lalchi - 09-05-2024

Hello everybody.

After asking dev and getting his approval, i'm making a website for a SL2 interactive map.

I'm doing this because this is something i wanted to do for a while now but had other priorities before.
Now that i have free time for myself for a month and i have to present a finished project for my exams. I'm taking this month to finally work on it and hopefully share it once done.

I'm making this thread to post progress on the website in order to show you where i'm at but also to get feedback on my progress.
So don't hesitate to point out what you like or don't. And if you have an idea what i could add or change, propose it and i'll see if i can make it.

------------------

1 DAY

My first day is mostly a schematic and theories on how the website would look, using FigJam as a tool.

A person arriving in the website will directly be given multiple choice for his navigation through the site.
They can choose, without login on, a map (great six or Korvara)
registering or logging in.
Once connected, the user can have access to his own profile which he can edit.

As said, an user can either choose to consult the Great Six map or the Korvara map
After choosing, the world map will open. the user can then select a region (continent for g6) to zoom in.
Then once in a region map, they can select a map of a dungeon, cavern, city, forest, etc... present in the region or continent.

If the user is logged in and has the necessary rights. They can by themselves adds a piece of information or lore in the selected map.
If an user is one of the contributor of one of those pieces of lore, they can edit or delete it.
The same thing goes for both world.

Once a piece of lore has been added by an user, those piece of lore can be read by anyone consulting the map where the lore has been created.

The whole thing making the interactive map a community effort.

This isn't all.

Once a user is connected, by going to their profile, they can create a character sheet to save one of their played character in game or a NPC related to their in game character.
Upon creating the character, they will be noted as the author of said character. This without the need to interact with the map directly.

Then, anyone visiting the website can see the character sheets created by users.
Just like lore, if a user is a contributor or admin. They can edit or delete the character sheet.

A visitor can also consult any entry directly without going by the interactive map.

That's all for the FigJam of the website. A grand simple brief on the purpose of the website and how a user would navigate through it.

I've started to work on the wireframe of the frontend.
There's not much to show (and it's kinda boring). But the wireframe for the index has been made in this same day.

RE: SL2 interactive map construction log - lalchi - 09-06-2024

Day 2 :

I kept working on the wireframe today.
It's not finished but there's quite a lot i can show already.

For those who don't know.
A wireframe is a presentation where no styling is made now.
So don't expect this to be the final result. And prepare fore something really barebone for the moment.

Here we start for the index of the website

Upon entering the site, we have two main choice presented to us :
Sigrogana (to be change into "Great Six") and Korvara

Above we have a navigation bar which also have options to go for the maps. Encyclopedie and Characters have nothing for the moment.
Just under the navigation bar, we can see a user is able to register or login.

A user who register will have to put an username, email and password. Then, they will have to confirm registration with an email they received.
With an account set, they can proceed to log in. A welcome message shows up where they can decide to return in the index or check their user profile.

(click for animation)

A user profile consist of a brief view of their profile picture, username, number of contributions, their rank (based on their contributions), and a direct link to their user profile.

Then, we have a list of the user's characters he created
following on a list of article where the user is a contributor.

If the user is the owner of the profile, they can change their info and password and delete their account as well.
Each requesting a password to confirm the request.

Let's go back to the purpose of this website and see how the map works.

After choosing the great six or Korvara. We have a visual on the map with the name of the regions/continents.

Clicking on a region zoom into the region. Place of interest and lore pins will show on the map.
On the left there's a list of creatures that appears on the region (if there is) and on the right a list of all lore pins existing on the map.

Going into an interest place will show the map of the place in question which also have lore pins and creatures.

Clicking on a lore pins or a creature card. A pop up will show up where the user can read the entry on it entirity.

And that's all for today.

The prototype is available for test.
It's not responsive yet.
Feel free to give it a try.

Prototype here

RE: SL2 interactive map construction log - sirtrex - 09-09-2024

I've been wanting something like this for a long time. If you want the tiles i've stitched together i'll be happy to google drive them to ya. I was working on a more IC version of this, but this would be very helpful to alot of players. https://docs.google.com/document/d/1xPtRUBcbWnd_NtEOJeANqidUHGTWKt2nb3055oFWnR4/edit#heading=h.irte23vldhbm

RE: SL2 interactive map construction log - lalchi - 09-09-2024

(09-09-2024, 01:40 PM)sirtrex Wrote: I've been wanting something like this for a long time. If you want the tiles i've stitched together i'll be happy to google drive them to ya. I was working on a more IC version of this, but this would be very helpful to alot of players. https://docs.google.com/document/d/1xPtRUBcbWnd_NtEOJeANqidUHGTWKt2nb3055oFWnR4/edit#heading=h.irte23vldhbm

Thank you.
Unfortunately, the map visual and in game tiles can't be used.
As said by dev, a lot of it are licensed. Therefore making a website using those directly as a developper would put me at risk.

The initial plan is to redraw the map to its entirety in order to not show direct screenshot of the game.
Which is a part that will come later.

However your maps looks more up to date than those i made a while ago. So that will still be usefull.

Day 3 :

Weekend is off work for me. Therefore i resumed work monday.
Today, marking the third day.

I've worked and finished the wireframe of the website so far.
A bit more has been added.

First, the display of a character sheet has been changed a bit for the relations :

Relations can now about different characters but also Articles in case your character has a deep lore around an event, artifact, location, house, etc...
There's now a description along the relation to explain that relation.

the forms for creating an Article or a Character or rather simple.
For the Character we start with few inputs for the name, race, nation, gender, status and picture. (still thinking if i'll do it through uploads or url)
As you can see, i took away the age fields for characters. Due to how conflicting time is in SL2 between players, i decide to not put a input for it.

Users who want to precise the age can still do it through the description in put.

Description is for the appearance and personallity of the character.
While the story input is for the backstory of the character.

Following by the relation which can be added or deleted, with their description free to be changed.

The Article form works the same way except user has to choose what kind of article it is.

When the user adds a relation, a pop ups comes out.

what the user actually do here, is creating a relation card. Where he choose if the relation is to a character or an article.
Then search for a card based by the name.
Following this, the user can write the description and create the relation.

The navigation has some change and adds too.

The encyclopedy and characters button opens an hamburger menu to the different article type.
leading to a choice of the continents.
Then the different nations of the choosen continent.

The navigation bar now also have a search button with a hamburger menu. But this one asking if you are searching for an article or character.

clicking on one of the search options, a nation or "all" takes to the respective list window

The lists windows, different for the character or article, have search options which can be configured by the user.

Result of the search will display all cards corresponding to the search in an alphabetic order under the parameters.

The prototype for the maquette is still available on the previous log and also over here.

As before, not every functionality is present.

Now the wireframe for the desktop is finished. I wanted to move into making the MCD.
Which means we're going to talk about back end, which may get boring for people not into it.

here the MCD.

If you don't know how a MCD works it may be confusing to read. So let's go bit by bit.

First thing to know is that each entity has an ID. An ID is autogenerated in back end and is used to identify an entity on the back end.
That's about it. In front end, it won't be use by users.

Here are users have a pseudo and a password which are unique for each users, and a password.
It has two link. One going to characters and one going to article. Each link have a verb.
So how does it reads ?

In brief,
Users can own none to multiple characters. (0: none, n: multiple)
Characters are own by one and only one user. (1: one)

So,
Users can write none to multiple articles,
Articles are wrote by one to multiple users.

That means a user can exist with no characters or articles.
But a character and characters can not exist without being associated by a user.

now here, I'm not too sure if that's correctly portrayed and i may be reworking that part.

But the course of thought is basically :
A character can be related by none to multiple relations
and relations can relate none to multiple characters

A character can have none to multiple relation CARDS
and relations CARD can have none to one character.

the same reads for articles

What i mean by that is that a relation card typacally have a description then either ONE character or ONE article.
and this relation card can be distributed to multiple characters or articles.

Anyway. That's all for today.
I feel like there's been good progress today so far.

I'll figure what to work on for the next day.

RE: SL2 interactive map construction log - sirtrex - 09-10-2024

(09-09-2024, 08:07 PM)lalchi Wrote:
(09-09-2024, 01:40 PM)sirtrex Wrote: I've been wanting something like this for a long time. If you want the tiles i've stitched together i'll be happy to google drive them to ya. I was working on a more IC version of this, but this would be very helpful to alot of players. https://docs.google.com/document/d/1xPtRUBcbWnd_NtEOJeANqidUHGTWKt2nb3055oFWnR4/edit#heading=h.irte23vldhbm

Thank you.
Unfortunately, the map visual and in game tiles can't be used.
As said by dev, a lot of it are licensed. Therefore making a website using those directly as a developper would put me at risk.

The initial plan is to redraw the map to its entirety in order to not show direct screenshot of the game.

Copy. Once i finish the symbology, i could provide that to you as its own layer to use as a guide to draw around. at least.

RE: SL2 interactive map construction log - lalchi - 09-10-2024

Day 4

Yesterday i said i finished the wireframe.

But that was the wireframe for the desktop !
Now i present you the wireframe FOR MOBILE USERS !

The functionalities are the same, but interaction and format is different to make it more pratical for mobile users.

Korvara and Great Six are put in vertical rather than horizontaly for mobile.
THe nav bar have a change as well, where the menu is in a burger menu now. You can see the patern to see how the interaction work.

There's a user icon as well, replacing the login bar.
Clicking on it while offline will ask the user to login. When logged on, it will take to the user profile.

User profile change in mobile, where cards are more compact and brief for the page to be more easy to be read.
Just like desktop, cards can be scroll in the horizontal.

When selection Korvara or Great six, displaying the whole continent map would be hard to read for mobile.
So I rather have a list of all nations/regions to be selected.
After this :

The map of the selected region/nation will show and can be dragged around to explore it. Lore pin and places can still be clicked for more details just like desktop.
An action bar appears in the bottom. The right icon to add a creature entry, the left icon to add a lore entry.

the central icon makes this pop up appear so the user can change the map quicker. By selecting the continent then the nation or region.

The two icons above the map are for the lists. Creature and lore.

Clicking on one will open a slide displaying a list of all available entries for the current map.

The creation forms doesn't have most change except to be more easy to use for mobile user. Cards are compacted just like the user profile.

Articles display format are changed for mobile as well. The red cross present for the user to quit at any time.

Last part of this wireframe is on the search list.
As you can see, the cards are also tiny here. The search options are available upon clicking the icon on the top, sliding the options on the sides. The result of the list will change upon changing the parameters.

And that's all for today.
Desktop and mobile wireframe are done.
the schema for my backend needs to be revisited, i will do so with the help of one of my teacher. We have set a meeting for tommorow morning.

With all done on that side, i will be able to start on designing the graphics for the website very soon, hopefully starting day 5.

RE: SL2 interactive map construction log - lalchi - 09-13-2024

Day 5, 6 & 7

Hello.

I have not posted day 5 and 6 in time. That's because the visuals for the protoype took longer than expected.

I didn't wanted to show small progress and instead wait to get everything done to show it all at once. For desktop and mobile.

Today, i finished the visuals for the prototypes. Made the buttons and different graphics for the website.

There's a lot to show. So instead of explaning everything. I'll just give acces to the prototype directly.
If you have feedback or opinion, i'll be glad to read them.

For the protoype to work the best (cause figma is kinda fickery)
follow the instructions :

Then put it in full screen

Prototype for desktop :
Desktop Prototype

Prototype for Mobile :
Mobile Prototype

I still gotta think of a logo, fill the copyright disclaimer for Dev and then actually redraw the map. Which will come in time, i'm sure.

Next is finally the big work.
Week end is off for me, as you may know.
But next week will be focused on building the back end with the admin panel.
I'll be working this on PHP using Symfony and API Plateforme.

RE: SL2 interactive map construction log - lalchi - 09-19-2024

I did it not work this week... Oops.

I got some TEETH HEALTH issues as well as PAPERWORK issues. So I kinda get my mind all in the way.
Hoping I get the mind back into work quick.