Created on CMS WordPress, but highly customized to create a true interactive platform.

Eelda’s league site is very complex because it comes out of the classic website scheme as it is a real role-playing game. Multiple features are being requested, some of which I will try to show later, which allowed me to create several customizations, with the help of plugins, also created by me, and a lot of PHP, Javascript and Ajax code (theme customization, additions, custom code).  In short, a nice challenge that is giving very good results.

Let’s start with the assumption that we are talking about a fan-made Pokémon game. The goal required of me was to create a real nonprofit role-playing game that would allow for the creation of a real community of players. Just as in Nintendo’s games, users can create their own character by choosing a name, appearance, and an initial team of Pokémon. Following registration they will find themselves in the actual game world, a map of the fictional continent of Eelda. Here they can interact with different areas of the map, opening new discussions within and talking to other players, or responding to discussions already opened by others.

Users can challenge gyms to earn medals, participate in events, earn coins and buy new items. They can interact with each other via private messaging or public chat, or directly in discussions that are displayed as ballons. They can also exchange Pokémon and level them up. I have also created a Fight Arena that allows them to find a player to challenge in real time, making the code from scratch with the help of Ajax.

Explore the site and tell me what you think. As a tourist you can visit the site without registering. The functionality will be limited but you can get a general idea.

Clicking on new game, after a brief introductory slide show, prompts the player to create a username, choose a fictitious region of origin, the Nintendo Switch trainer code, and the gender and appearance of their character, with a slide showing several choices. After that, one is asked to choose a chest, which, as we will see later, will serve to hold the medals the player earns. Then we must choose two teams of Pokemon, 8 and 4 respectively. Note how animated thumbnails appear at the choice and it is not possible to select the same Pokémon in both groups.

Clicking on the animated icon at the top right of the header opens the “Iphione Menu” which looks similar to a smartphone. The icons are the menu items and lead to different sections of the site such as: one’s profile, the message section, the gps that indicates points of interest, the game guide, and the social section. The menu is fully responsive and on smartphones it fits perfectly vertically.

Within their profile, each player can view the information chosen during registration and has one day to edit it. In addition to this, he can access different sections to change passwords, unsubscribe, and see his most recent activities.

The backpack is interactive: clicking on each pocket shows, if in his possession, the items he has found or bought, organized according to their rarity. Available coins are also shown in this section.

The chest is initially empty, but each time the player defeats a taskmaster, his medal will appear inside.

The pokémon in the team are then shown with their relative level starting at 50. If a certain medal is held, some pokémon become multiform, meaning that all of their alternate forms can be used.

Players can also view the profiles of other users and from there they can write a private message or request a Pokémon exchange.

The interactive map of Eeelda is the centerpiece of the game. It consists of many zones that appear highlighted by hovering the mouse over them. Clicking on each zone opens a tooltip that shows the name of the zone, a brief description, and some actions that can be performed within it.

Within each zone you can create a new action, which is to open a discussion. The created discussion will appear within the tooltip of the relevant zone. If there are recent discussions, pointers will appear on the map indicating that there is something new.

If a gym is located in the zone, the action “Challenge Gym” will appear in the tooltip. Then there are other secondary actions, such as access the item store, enter the workshop, etc.

Discussions are a real dialogue between players, as is the case in forums or social. Here, however, the player when writing something can choose from three actions: “Speak, think and narrate.” If he chooses speak or think, his dialogue will appear in the form of a little baloon coming out of the player’s avatar. If he chooses “narrate” instead, what he has written will appear in a text box. This all serves to engage players more in the role-playing context.

Each discussion has a different background, depending on the zone where it was opened.

There are also special discussions, which are called events. They are similar to the previous ones but contain an additional block that contains information about the event, such as the prizes, the date, and the platform where it is held. From the main menu in the header, you can access the “Events” section, which displays the different events as on a bulletin board in the form of post-its. The colors of the post-its are random to always look different.

Inside the store you can sell and buy items with coins, just like in a real game.

Everything happens automatically, so if you sell or buy something, the inventory is updated and you receive/subtract coins. You cannot buy items that cost more than the credit available.

On the site, it is possible to propose a pokémon exchange tracon another player once a day. This is done in a simple and automated way:

The player proposes the exchange to another player by choosing one pokémon of his own and one Pokémon of the other player. The other player receives a message proposing the exchange and can decide whether to accept or reject it.

If he accepts the exchange, the first player will receive the message that the exchange has taken place. On the profiles of both, the pokemon will be updated, as well as the levels.

It is not possible to request a Pokémon you already own in exchange. It is not possible to propose an exchange to a player who already has an exchange pending.

The aim of the game is to challenge and defeat the 8 gym leaders so as to earn all the medals and gain access to Mount Olympus, an otherwise inaccessible area in which to challenge 4 champions and earn the coveted title.

To challenge a gym, you must go to the area of the map where it is located and click on “Challenge Gym.” This will open the gym’s page. However, it is only possible to challenge a particular gym if you meet specified requirements, such as having enough coins, having made X trades, having X points, etc. It is then not possible to challenge the same gym several times consecutively.

If you meet the requirements an intro slide will start and you will be taken to a calendar where you have to choose the day and time to set the challenge appointment. This is because gym leaders are live people, so they have their own schedules and each calendar shows only the times when they are available.

The clash takes place on an external platform. At the end of the clash, if the player has won, they will receive the medal that will be visible in the box within their profile.

The fighting arena is a section of the site where you can search and challenge other players to earn points.

There are two modes:

Showdown, which reports to an external server connected via API
Switch, which is internal to the site and allows you to play via Switch and score your results here.

If you choose Switch, you can search for a player to challenge, with a filter on score level as well. So matchmaking takes place between players in the same bracket.

If mathmaking is successful, a screen will be loaded where the two players appear and a unique code that must be entered into the Nintendo Switch to battle against.

Here on the site, each player must indicate the winner of each round and will be able to chat with their opponent. Everything is done via ajax and PHP, as well as many actions such as:

“You have 1 minute to choose the player, otherwise the victory will go to the opponent.”

“The opponent has surrendered”

“The opponent has left the page. If he does not return within 1 minute the victory will be yours.”

At the end of the round, the winner is automatically declared and points will be awarded.

Category
Web design
Barbecue logo Previous project
ASIT Brochure Next project