Collection quests without images have confusing text formatting

[hairlessbear]

EDIT FROM ADMIN

Many of the collection quests are missing illustrations, which is causing some weird formatting in the quest modals (see below for screenshots). The following need art:

• [x] Find the Cub (fixed in #5545)
• [x] Find the Lair of the Wyrm - common/img/sprites/spritesmith/quests/quest_vice2.png
• [x] Egg Hunt - common/img/sprites/spritesmith/quests/quest_egg.png
• [x] The Moonstone Chain - common/img/sprites/spritesmith/quests/quest_moonstone1.png
• [x] A Stern Talking To - common/img/sprites/spritesmith/quests/quest_goldenknight1.png
• [x] Message in a Bottle - common/img/sprites/spritesmith/quests/quest_dilatoryDistress1.png

---

The quest summary and collection goal aren't clearly separated, making the goal appear to be part of the quest summary. This is most prevalent in the Egg Hunt quest, but it's an issue in any collection quest without an image.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[TheHollidayInn]

It seems like this issue is being fixed on the development version. Here are some images to show:

[hairlessbear]

That doesn't necessarily indicate that the issue is being fixed. The collection quests with images are formatted perfectly; the problem is with collection quests without images. Although if you mean that it seems like all the collection quests are having images added to them, than the above point is moot.

[TheHollidayInn]

I apologize. I did mean to indicate that images are being added to fix the formatting. I'm unsure of the exact plan, but I figured I would give you a progress update of what I saw when trying to fix your issue.

[Alys]

The Egg Hunt image has disappeared from develop now (as well as production). There were spritesheet image changes recently, so maybe that is what broke it. Perhaps other quests too; I haven't tested others. @SabreCat, any idea?

[crookedneighbor]

@Alys what did the eqq quest image look like? I don't recall the quest having an image for the quest, just for the scroll and the items to be collected.

[TheHollidayInn]

@crookedneighbor I believe the Egg Quest image is included in my comment above.

[crookedneighbor]

Which was still present on the site when I checked half an hour ago.

[SabreCat]

I'm not sure that image was ever used as a quest header, just the graphic for the collection item. We could certainly re-use it as the quest header if we don't have an actual quest image.

[SabreCat]

And if it is the case that we didn't have a separate quest image, it sounds like an opportunity to give some Pixelists a quick task!

[crookedneighbor]

Having a header image for collection quests will solve the issue, since the problem is that we included the stats for the quest (boss hp and strength/collection goals) as some text underneath the image. Since most collection quests don't have a header image, it's resulting in the weird floating behavior noticed by @hairlessbear.

Note: this affects only the modals that pop up when selecting a quest scroll, not the popovers that appear when hovering over them, or the quest progress on the party page.

[Alys]

I'm finding this more confusing than usual for the Dilatory Distress, Part 1 quest because the quest description and collection items seem to run together as single lines:

I'm wondering if the fastest solution to this is to have a blank image that we copy for each collection quest that doesn't have artwork yet. A more "correct" solution would be to adjust the CSS so that the layout looked good with or without an image, but a blank image of an appropriate size would be faster (at least if I was doing the work). If no one's objected in the next couple of days or has offered to adjust the CSS, I'll upload a blank image for all quests that need it. When artwork becomes available for them later, we can simply replace the images with the correct ones, using the same file names.

[hairlessbear]

@Alys: If you're going the blank image route, it might be a good idea to include some sort of explanatory text in that space (e.g., "Art coming soon!") If it's just a blank space, it'll seem like an image has failed to load, which might cause confusion/bug reports.

[Alys]

@hairlessbear I understand about a large amount of blank space looking like a failed image, but I want just a small space for a bit of padding. I'd rather not include a message because I think the concept of "coming soon" is worse than "does not exist" - it's like we intended to make an image but never got around to it, which might well be true but let's not advertise it. :) Also the text in the image wouldn't be translatable (and I don't want to put actual text on the page when an image doesn't exist because that's a whole lot of extra effort - I want to do something simple and very quick to improve the current situation a bit).

This is what I have on my local install:

The lack of a gap at the bottom of the collection items is slightly undesirable, but I'm wiling to live with it. The gap above and to the left means that you no longer try to read the collection items as part of the description. It's not perfect, but it's better than the current appearance.

@lemoness, is this okay?

[hairlessbear]

@Alys That all makes sense, and the example image looks much better than I was imagining. There will likely still be some confusion/bug reports, but probably not that many. And regardless, this is still much better than the current display.

[lemoness]

I think that looks very good for the interim!

On Fri, Jul 17, 2015 at 9:49 PM, hairlessbear notifications@github.com wrote:

@Alys https://github.com/Alys That all makes sense, and the example image looks much better than I was imagining. There will likely still be some confusion/bug reports, but probably not that many. And regardless, this is still much better than the current display.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4936#issuecomment-122483589.

[crookedneighbor]

Could also do something like this:

[SabreCat]

Ooh, nice. Something like that might not be bad even when we have images.

[lemoness]

Hear, hear!

On Tue, Jul 21, 2015 at 5:14 PM, Sabe Jones notifications@github.com wrote:

Ooh, nice. Something like that might not be bad even when we have images.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4936#issuecomment-123514240.

[Alys]

Placeholder images submitted: https://github.com/HabitRPG/habitrpg/commit/02cccb01ef1ade15b4eba816148314726e2efb30 I've updated the first post in this thread with the names of the files to overwrite when artwork is available. I expect we'll have a better solution before the next collection quest is released, but if not, a dummy collection quest image can be created by copying common/img/sprites/spritesmith/quests/quest_TEMPLATE_FOR_MISSING_IMAGE.png

[TheHollidayInn]

Sweet. I like where this is. Is anyone else working on the commit? If not, I can do it tomorrow.

[TheHollidayInn]

Hello,

Images not loaded within 1200 seconds. Timing out script.

I tried running grunt sprite today to complete this, but I am getting timeout errors. They seem to look similar to these:

• https://github.com/Ensighten/grunt-spritesmith/issues/66
• https://github.com/Ensighten/spritesmith/issues/30

So, I increased the timeout

sprite[''+i] = {
      src: sliced,
      dest: 'common/dist/sprites/spritesmith'+i+'.png',
      destCss: 'common/dist/sprites/spritesmith'+i+'.css',
      engine: 'phantomjssmith',
      algorithm: 'binary-tree',
      padding:1,
      cssTemplate: 'common/css/css.template.mustache',
      imgOpts: {
        timeout: 240000
      },

But, it doesn't seem to help. When I remove some sprites, I am able to get the script to run without timing out. Any ideas?

Also, can someone help me with my quest query. I am trying to add all the above quests to my test user, but it isn't working. I keep overwriting the data. Here is what I am working with:

db.users.update({"_id":"b9ebe58f-6ddc-4567-b941-96c5cc28ba31"}, { "$push": { "items": { "quests": [ {"vice2": 2} ] } } })
db.users.update({"_id":"b9ebe58f-6ddc-4567-b941-96c5cc28ba31"}, { "$set": { "items": { "quests": [ {"vice2": 2} ] } } })

[Alys]

Try (from memory): db.users.update({"_id":"b9ebe58f-6ddc-4567-b941-96c5cc28ba31"}, { "$set": { "items.quests.vice2": 2}})

[crookedneighbor]

@TheHollidayInn I've started getting those timeout errors too. Looking into it.

[lemoness]

The art for Find the Lair of the Wyrm is done! It was made by @ricecake2.

[crookedneighbor]

Vice2 image added.

[SabreCat]

So awesome! Props to ricecake2!

[librarianmage]

What's the progress on this? From my experience, it seems to have been fixed...

[Alys]

Looks like we still need Egg Hunt and A Stern Talking To (Golden Knight 1). I've updated the checklist in the top post.

I'd guess there's no progress made yet on the images needed (unless you find them in another issue!)

[lemoness]

Yes, we are still waiting on the art assets for those two quests! However, I'm willing to close this and open new tickets when they are available. Should we do that?

On Saturday, March 5, 2016, Alys notifications@github.com wrote:

Looks like we still need Egg Hunt and A Stern Talking To (Golden Knight 1). I've updated the checklist in the top post.

I'd guess there's no progress made yet on the images needed (unless you find them in another issue!)

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4936#issuecomment-192787402.

[Alys]

I think in this particular case, it's worth leaving this issue open. The comments explain the placeholder workaround we put in place, and so should make it obvious to coders that when new images appear, they should overwrite the existing placeholders.

[lemoness]

The art for Egg Hunt has been completed by tigerurke!

[lemoness]

The art for A Stern Talking-To has been completed by khdarkwolf!

Once this is in the game, all our collection quests will have art, and we can close this ticket.

[crookedneighbor]

:heart:

[mdakan]

Is help still welcome on this? I was able to view the temporary solution on Egg Hunt and A Stern Talking-To. If the art is done, how does that get incorporated?

[Alys]

@mylesdakan Yes! If you'd like to add that final image, that would be great. From memory, you just need to overwrite the placeholder image with the new one (images are in website/assets/sprites/spritesmith/quests/bosses/ ), but if you need to, you can check what's been done for the other quests, and you can see how the image replacement works in your local install. Please include a screenshot in your PR.

I'm marking this as in progress, but if you decide you'd rather not work on it, just comment here and we'll open it up again. Also comment if you have questions.

[mdakan]

Hm, I replaced the images locally but I'm not seeing any change in how those quests display. I'll keep trying to figure it out, but I'm open to any helpful hints.

[SabreCat]

@mylesdakan: After making any change to image files, run gulp sprites:compile (edit: or npm run sprites methinks) to build those edits into the spritesheets loaded by the site.

[mdakan]

@SabreCat Thanks for the help! Is there documentation about how habitica uses gulp that I could look at?

[SabreCat]

@mylesdakan: Hmm, I don't know that we have a dedicated resource for gulp. It's used for a number of our automated tasks, like tests and browserify, in addition to spritesmithing. All the gulp tasks are collected here in the repo: https://github.com/HabitRPG/habitica/tree/develop/gulp