PET & Roleplay table

Hi everyone,

I have added pets to my forum, which are currently only visible as GIFs on the user's profile and message profile. I kindly ask for your help with the following issues:

How can I merge the pets visible in messages with the roleplay game system? The goal is to use them together.

How can I hide the option for users to edit their pet if it is successfully merged with the roleplay game system?

How can I display the different "levels" obtained by the pet in question for the roleplay system on the message profile?

Thank you very much for your help!

What do you mean by Pets? Do you mean awards?

Hi SLGray,
I apologize, I must have expressed myself poorly. Currently, my forum only allows for pets, which is simply a field in the profile where users can insert a link to a GIF to be displayed. Therefore, I would like to ask another question that will hopefully make my intention clearer.

I want the roleplay game system to have the following features:

Users cannot modify the image/GIF link of their character.
Their character is displayed in the message profile along with their stats.

in this way



plus the value of power/hp in roleplay section under the image

How can i do that?

Thank you!

Hi,

Maybe this link will help you out: https://help.forumotion.com/t49004-pets-for-your-forum


I'll be around to gather more info regarding this matter.

Regards,
Sir Chivas. Read the first post totally wrong.



Question: How are you getting these power and hp levels?
I can only think of creating a profile field just for that option, let each member fill it out when creating or getting their "pet". Other than that, I think a script might do the trick, but again I go back into questioning: How do you get these stats? Are they made up or generated via the roleplaying?

Hi Sir Chivas,

Yes, I want to use the roleplay system to generate the "character/pet" image and to generate the various values such as "power" or "MP". The problem is that I would like the image chosen for the roleplay system to be displayed in the message profile as in the screenshot inserted before, and that only moderators/administrators can modify the "image" field.

Update:

Ok, I just noticed that there is already the possibility to show the various statistics in the message profile



so I just need to understand how to add the image of the character chosen for the roleplay like this:



and make sure that forum members cannot change the image autonomously

UP!

Good afternoon!

The fields in the Roleplay game module are not intended for inserting images. You can use a regular profile field to insert an image there.

AP - Users & Groups - Profiles - Create new

Type: Text zone OR An image
Once a field is created, you cannot change its type.
If you select the Text zone field type, you will need to insert the image code, not the image itself.
Display: Profile and Messages
Who can modify the profile field value? Moderators

The Roleplay game module offered by Forumotion is not automated and all the fields that exist here need to be changed manually by administrators or users.
For example, a user wins a battle with the help of his pet. The administrator needs to manually change the received experience from this battle, which can reduce the field that is responsible for health, and so on.

You can read more about the Roleplay game module in our tutorial: The RPG feature
Also, please, read these tutorials:
- Personalized Profile fields / Warning System
- Edit profiles fields browsing through the members profiles
- The advanced profile

If you still have questions, please condense them into one post and describe in as much detail as possible the expected result.

Hi Razor!

Yes you can add a pic for RPG roleplay, in this section



So i Just wanna male that section visibile in messages profile

This is not an RPG field - it's the user's character avatar.
You cannot prevent it from being edited by the user.

Does this work for you? Do you want to show this image in topics?

Hi, ya i would likes to show the image in topics profile, but It isn't the user's avatar, i have another avatar, likes you can see in this screen



Or maybe i didn't understand what you mean

Thank you!

Separately, there is a user avatar (in your case it's an oval image) and there is an RPG character avatar (in your case it's a bird).

The user will be able to put anything they want in the place of the bird - this is not governed by forum settings. Also, the user will be able to change this image.

To have control over the user's pet image, I suggested you create a simple field in the profile: https://help.forumotion.com/t163176-pet-roleplay-table#1146417

Hi Razor,
yes I know they two separate zones, i already added the pet "system" in my forum with just the field in profile section, but in that way users can still add the image for the roleplay system,
so i prefer to hide in css if possibile the field for users, so they cannot edit, or, if possibile, just make it in javascript or css editable only by admin/moderators

If it is not possible, just the "hide" in css function

I'm sorry for my bad english

Thank you a lot

To remove the ability to change a character's avatar:

1) For PC version:

AP - Display - Templates - Profile - rpg_sheet_edit

Find and delete:

Code:

<h1 class="page-title">{L_AVATAR_PANEL}</h1>
         <div class="panel">
            <div class="inner"><span class="corners-top"><span></span></span>

            <fieldset>
               <dl>
                  <dt><label>{L_UPLOAD_AVATAR_URL}</label></dt>
                  <dd><input type="text" name="avatarurl" value="{AVATAR_URL}" class="inputbox" />
                     <br /><span class="italic">{L_UPLOAD_EXPLAIN}</span>
                  </dd>
               </dl>
               <span style="color:red">{L_AVATAR_ERROR}</span>
            </fieldset>

            <span class="corners-bottom"><span></span></span></div>
         </div>

Save. Publish.

Result:



2) For mobile version:

AP - Display - Colors&CSS - CSS Stylesheet

Insert this code:

Code:

form[action*="rpg_sheet"] div.box:first-of-type {
  display: none;
}

Submit

Result:



In this case, only the admin will be able to set and change the image via AP.

-------

Upload a character image to the user's profile:

Only for PC:

1) AP - Display - Templates - Profile - rpg_sheet

Find:

Code:

<p>{POSTER_RANK} {RPG_IMAGE}</p>

Replace by this:

Code:

<p>{POSTER_RANK} <div class='rpg_image'>{RPG_IMAGE}</div></p>

Save. Publish.

2) AP - Display - Templates - General - viewtopic_body

Find:

Code:

{postrow.displayed.POSTER_RPG}

Before this code, insert this:

Code:

<div class='character__container'>
                                                  <div class='character__title'>Pet:</div>
                                                  <div class='character__image'></div>
                                          </div>

At the end of template, insert this code:

Code:

  <script>
    window.addEventListener('DOMContentLoaded', function() {
      const users = document.querySelectorAll('.postprofile');
      users.forEach(item => {
       const address = item.querySelector('a[href$="rpgsheet"]');
        if (address) {
          $.ajax({
            url: address.href,
            method: "GET",
            data: 'image',
            dataType: "html",
            success: function (data) {
              let div = document.createElement('div');
              div.innerHTML = data;
              let findElement = div.querySelector('div.column1 div.rpg_image img');
             item.querySelector('.character__container .character__image').append(findElement);
            },
            error: function (xhr, status, error) {
              console.log("AJAX request error:" + error);
            },
          });
        }
    });
  });
   
  </script>

Save. Publish.

3) AP - Display - Colors&CSS - CSS Stylesheet

Insert this code:

Code:

.character__container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.character__image {
    max-width: 100px;
    max-height: 100px;
}

.character__image img {
    width: 100%;
    height: 100%;
}

Submit.

Result:



And user without character avatar:

Man, i still have little issue with visualization, but i think i'm falling in love with you



Thank you a lot!

Glad to help!

If your request is complete, please mark it as Solved.

Yeah, i thin i'll open another topic for the visualization if i can't do it myself

Still thank you a lot Razor!