starred/virtualtabletop

Fork 0

mirror of https://github.com/ArnoldSmith86/virtualtabletop.git synced 2026-03-02 22:57:02 -05:00

Improve access to images on cardTypes #599

New issue

Open

opened 2026-02-20 10:19:03 -05:00 by deekerman · 7 comments

deekerman commented

2026-02-20 10:19:03 -05:00

Owner

Originally created by @96LawDawg on GitHub (Nov 14, 2022).

While building a complex deck that had a bunch of individual cards, I found myself reusing the same images over and over. It would be nice to have an internal reference on the deck for those images. This would help in 2 areas. First, it would allow for an easy reference by a readable name rather than a bunch of numbers. Second if you want to replace an image (because there was an error or the color isn't just quite right) after you've built a bunch of cards, you only need to replace it in one place rather than 170.

Examples.

Current cardType:

  "species": "/assets/1967530648_212077",
    "points": 5,
    "nest": "/assets/-1177660470_1251",
    "eggs": "/assets/-636695754_820",
    "span": "46cm",
    "forest": "/assets/1667296930_2604",
    "food1": "/assets/-2039093533_1156",
    "food2": "/assets/-2039093533_1156",
    "food3": "/assets/-2039093533_1156",

Proposed cardType:

   "species": "${PROPERTY bird}",
    "points": 5,
    "nest": "${PROPERTY nest}",
    "eggs": "${PROPERTY eggs}",
    "span": "46cm",
    "forest": "${PROPERTY forest}",
    "food1": "${PROPERTY food1}",
    "food2": "${PROPERTY food2}",
    "food3": "${PROPERTY food3}",

Then, in the second example, the deck would contain properties that contain the information for the image to be used. Change the property and it changes all the cards at once.

Originally created by @96LawDawg on GitHub (Nov 14, 2022). While building a complex deck that had a bunch of individual cards, I found myself reusing the same images over and over. It would be nice to have an internal reference on the deck for those images. This would help in 2 areas. First, it would allow for an easy reference by a readable name rather than a bunch of numbers. Second if you want to replace an image (because there was an error or the color isn't just quite right) after you've built a bunch of cards, you only need to replace it in one place rather than 170. Examples. Current cardType: ``` "species": "/assets/1967530648_212077", "points": 5, "nest": "/assets/-1177660470_1251", "eggs": "/assets/-636695754_820", "span": "46cm", "forest": "/assets/1667296930_2604", "food1": "/assets/-2039093533_1156", "food2": "/assets/-2039093533_1156", "food3": "/assets/-2039093533_1156", ``` Proposed cardType: ``` "species": "${PROPERTY bird}", "points": 5, "nest": "${PROPERTY nest}", "eggs": "${PROPERTY eggs}", "span": "46cm", "forest": "${PROPERTY forest}", "food1": "${PROPERTY food1}", "food2": "${PROPERTY food2}", "food3": "${PROPERTY food3}", ``` Then, in the second example, the deck would contain properties that contain the information for the image to be used. Change the property and it changes all the cards at once.

deekerman added the

enhancement

widget properties

labels

2026-02-20 10:19:03 -05:00

deekerman commented

2026-02-20 10:19:04 -05:00

Author

Owner

@flackr commented on GitHub (Nov 14, 2022):

Sounds like a good idea. We'll have to make sure there's no infinite loops of property references (which shouldn't be too hard, just need to track if we ever visit the same node twice in the same recursive expansion of properties. I'm torn about whether this should be ${PROPERTY food1} or ${food1} given that in this context there is no access to local variables. This is why in my PR #1407 I just used ${propertyName} to refer to other properties from the value property.

@flackr commented on GitHub (Nov 14, 2022): Sounds like a good idea. We'll have to make sure there's no infinite loops of property references (which shouldn't be too hard, just need to track if we ever visit the same node twice in the same recursive expansion of properties. I'm torn about whether this should be `${PROPERTY food1}` or `${food1}` given that in this context there is no access to local variables. This is why in my PR #1407 I just used `${propertyName}` to refer to other properties from the `value` property.

deekerman commented

2026-02-20 10:19:04 -05:00

Author

Owner

@96LawDawg commented on GitHub (Nov 14, 2022):

I'm torn about whether this should be ${PROPERTY food1} or ${food1} given that in this context there is no access to local variables.

${food1} is even better. You know how many times I'm mistyped "PROPERTY"?

@96LawDawg commented on GitHub (Nov 14, 2022): > I'm torn about whether this should be `${PROPERTY food1}` or `${food1}` given that in this context there is no access to local variables. `${food1}` is even better. You know how many times I'm mistyped "PROPERTY"?

deekerman commented

2026-02-20 10:19:04 -05:00

Author

Owner

@96LawDawg commented on GitHub (Nov 14, 2022):

One thing that we would have to be careful about is other widgets looking at that property.

For example, if you had a “dropTaget”: “${food1}” the holder probably would not be able to look into the deck to see what that actually is. So the dropTarget would need to still list the specific asset/123456 etc location.

That doesn’t mean we shouldn’t do this. It is just a limitation of the engine that we will have to be aware of.

@96LawDawg commented on GitHub (Nov 14, 2022): One thing that we would have to be careful about is other widgets looking at that property. For example, if you had a “dropTaget”: “${food1}” the holder probably would not be able to look into the deck to see what that actually is. So the dropTarget would need to still list the specific asset/123456 etc location. That doesn’t mean we shouldn’t do this. It is just a limitation of the engine that we will have to be aware of.

deekerman commented

2026-02-20 10:19:04 -05:00

Author

Owner

@ArnoldSmith86 commented on GitHub (Nov 14, 2022):

Yes.
You can put a default for food1 into cardDefaults. (I realize that that only solves a fraction of the use cases.)
#1203

@ArnoldSmith86 commented on GitHub (Nov 14, 2022): 1. Yes. 2. You can put a default for `food1` into `cardDefaults`. (I realize that that only solves a fraction of the use cases.) 3. #1203

deekerman commented

2026-02-20 10:19:04 -05:00

Author

Owner

@96LawDawg commented on GitHub (Jul 10, 2023):

Possible (complicated) work-around using css ::after demonstrated at https://discord.com/channels/770758631146782780/793626590848352306/1128131279095857232

@96LawDawg commented on GitHub (Jul 10, 2023): Possible (complicated) work-around using css ::after demonstrated at https://discord.com/channels/770758631146782780/793626590848352306/1128131279095857232

deekerman commented

2026-02-20 10:19:04 -05:00

Author

Owner

@mousewax commented on GitHub (Jul 11, 2023):

I did proof of concept based on the conversation @96LawDawg linked.
https://virtualtabletop.io/8t5h

It has a corner that uses images, one that uses plain text, one that uses emoji, and one that uses material icons.

@mousewax commented on GitHub (Jul 11, 2023): I did proof of concept based on the conversation @96LawDawg linked. https://virtualtabletop.io/8t5h It has a corner that uses images, one that uses plain text, one that uses emoji, and one that uses material icons.

deekerman commented

2026-02-20 10:19:04 -05:00

Author

Owner

@96LawDawg commented on GitHub (Jul 11, 2023):

Thank you! I added this (calling it Card Images with CSS Classes) to https://virtualtabletop.io/DemoLibrary. If there is anything in the explanation you want to add or clarify, let me know.

@96LawDawg commented on GitHub (Jul 11, 2023): Thank you! I added this (calling it Card Images with CSS Classes) to https://virtualtabletop.io/DemoLibrary. If there is anything in the explanation you want to add or clarify, let me know.