gonna keep all my UI mockups in one place for now at least
(https://cdn.discordapp.com/attachments/345966174258855937/1285105647762804767/Screenshot_2024-09-16_at_00.19.39.png?ex=66f6e726&is=66f595a6&hm=6dc7f778a4a3344551e46a44f5e0f9e08ec3a43441cdf0878a8ee19c70cefb36&)
would make it easier to see at a glance whether you'll get your quanta's worth out of a SoB, fractal, etc
several different ideas:
- protected/silenced/singularity tints
- increased the height from 263px to 272px so that they fully cover the card area (and have a 4px buffer on both the top and bottom instead of just the top)
- increased the width from 66px to 70px in all but the "shelves" variant (mostly a personal aesthetic choice. i just think the narrower width looks awkward with a lot of the variants)
- i guess in reality there wouldnt be box shadows on SoB and recoil in the silenced view, but it seemed pointless to remove them from the mockups since the effect tints are just there to show how they affect the visibility of the card slot indicators
- wireframes (matching existing ui)
- corner "cradles" reminiscent of og elements
(https://cdn.discordapp.com/attachments/1288991642161905725/1288994035440287765/Screenshot_2024-09-26_at_16.50.01.png?ex=66f734be&is=66f5e33e&hm=ab958a3b2b86b9ff19b07647740033773c5da4e591f0a945cfc47a66e38dffdf&)
- "trays"
(https://cdn.discordapp.com/attachments/1288991642161905725/1288993917974478960/Screenshot_2024-09-26_at_16.18.18.png?ex=66f734a2&is=66f5e322&hm=6e8f985c29dc56e86544ad3edac90b0f32b9a12476cf51b7a805824e3e558f83&)
- "shelves"
(https://cdn.discordapp.com/attachments/1288991642161905725/1288993988556361840/Screenshot_2024-09-26_at_16.44.55.png?ex=66f734b3&is=66f5e333&hm=7bf84540bc85ae10f60f76c2748c33772719a0e75b6707895f007e87555f6908&)
- skeuomorphic "divots" for the cards to sit in
- abstract (gradient "shadow")
(https://cdn.discordapp.com/attachments/1288991642161905725/1288993820469628970/Screenshot_2024-09-26_at_13.40.26.png?ex=66f7348b&is=66f5e30b&hm=526f93598cc960fb7a287a1802dbab2d62533f0534376b9974155ff07ba63938&)
height: 28px;
background-image: linear-gradient(hsla(30, 5%, 8%, 0), 85%, hsla(30, 5%, 8%, . 8) );
- not sure how to make more realistic-looking ones except by editing the background image and i'm not really up to that task atm
- card "ghosts"
e.g. for the very bottom card slot:
<div class="inst handinst emptyslot" style="left: 100px; top: 500px;">
<div></div>
</div>
.emptyslot {
overflow: hidden;
}
.emptyslot:not([style*="top: 200px"], [style*="top: 500px"]) {
height: 32px;
}
.emptyslot>div {
height: 64px;
}
- i feel like cyan is a good color to represent "theoretical future cards"
(https://cdn.discordapp.com/attachments/1288991642161905725/1288993612905975911/Screenshot_2024-09-25_at_15.35.46.png?ex=66f73459&is=66f5e2d9&hm=760cd533bea8fac24c54ac20391151fe8cc7cecc839636d943a55250f7180a6d&)
.emptyslot>div {
background-image: linear-gradient(rgba(0, 255, 255, 0.4), 15%, rgba(0, 255, 255, 0) 60%);
}
- different style
(https://cdn.discordapp.com/attachments/1288991642161905725/1288993613417549874/Screenshot_2024-09-25_at_15.36.20.png?ex=66f73459&is=66f5e2d9&hm=49f26b8196f1ebbef02a19d88b99b19b543b16dbc570cff98cef0d12a21a145f&)
.emptyslot>div {
box-shadow: inset 0 0 8px rgba(0, 255, 255, .3);
background-image: linear-gradient(rgba(0, 255, 255, .2), 40%, rgba(0, 255, 255, 0));
}
- beige stands out better from the various effect backgrounds and also seems like a good color for "theoretical" cards
(https://cdn.discordapp.com/attachments/1288991642161905725/1288993705172140043/Screenshot_2024-09-25_at_16.15.23.png?ex=66f7346f&is=66f5e2ef&hm=af66133145a16ae02fb9dcd8586c3e4ce6158a4443ff1d2bf2e190c06939e434&)
.emptyslot>div {
background-image: linear-gradient(hsla(45, 40%, 75%, 0.4), 15%, hsla(45, 40%, 75%, 0) 60%);
}
but, any single color is going to have the problem of blending in with certain cards, which is a major reason i think "wireframes" and "divots" work better than "ghosts". not to mention the tangent issue with the card backside art (could be fixed by adjusting the card spacing, but like, why)
(https://cdn.discordapp.com/attachments/1288991642161905725/1288993705654751273/Screenshot_2024-09-25_at_16.17.44.png?ex=66f7346f&is=66f5e2ef&hm=3fdeaedec97db29ed4eec4d1517a8a3b4b5e95697abc07858d1875c4232b3def&)