thepaperpilot/Super-Auto-Coots
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Super-Auto-Coots.git synced 2024-11-25 01:41:46 +00:00
Code Issues Releases Activity Actions

Add presence icon

Browse source
This commit is contained in:
thepaperpilot 2023-02-22 10:07:51 -06:00
parent e03963e237
commit 57aafb0538
3 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -15,6 +15,7 @@
<link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/dogica" type="text/css"/> <link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/dogica" type="text/css"/>
<link rel="prefetch" href="heart.png" /> <link rel="prefetch" href="heart.png" />
<link rel="prefetch" href="presence_v2.png" />
<link rel="prefetch" href="Lvl 1_0.png" /> <link rel="prefetch" href="Lvl 1_0.png" />
<link rel="prefetch" href="Lvl 1_1.png" /> <link rel="prefetch" href="Lvl 1_1.png" />
<link rel="prefetch" href="Lvl 2_0.png" /> <link rel="prefetch" href="Lvl 2_0.png" />

BIN
public/presence_v2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

48
src/data/CharacterSlot.vue
View file

@ -68,7 +68,7 @@
<span>{{ character?.relevancy }}</span> <span>{{ character?.relevancy }}</span>
</span> </span>
<span class="presence-display" v-if="character != null"> <span class="presence-display" v-if="character != null">
<span class="material-icons"> extension </span> <img :src="star" />
<span>{{ character?.presence }}</span> <span>{{ character?.presence }}</span>
</span> </span>
<span class="level-display" v-if="character != null"> <span class="level-display" v-if="character != null">
@ -93,6 +93,7 @@ import { Direction } from "util/common";
import { coerceComponent } from "util/vue"; import { coerceComponent } from "util/vue";
import { Component, ref, shallowRef, watch, watchEffect } from "vue"; import { Component, ref, shallowRef, watch, watchEffect } from "vue";
import heart from "../../public/heart.png"; import heart from "../../public/heart.png";
import star from "../../public/presence_v2.png";
import level1_0 from "../../public/Lvl 1_0.png"; import level1_0 from "../../public/Lvl 1_0.png";
import level1_1 from "../../public/Lvl 1_1.png"; import level1_1 from "../../public/Lvl 1_1.png";
import level2_0 from "../../public/Lvl 2_0.png"; import level2_0 from "../../public/Lvl 2_0.png";
@ -214,23 +215,40 @@ watchEffect(() => {
z-index: 100; z-index: 100;
} }
.relevancy-display { .relevancy-display,
.presence-display {
position: absolute; position: absolute;
top: -15%; top: -15%;
left: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.relevancy-display img { .relevancy-display {
left: 0;
}
.presence-display {
right: 0;
}
.relevancy-display img,
.presence-display img {
position: absolute; position: absolute;
transform: translate(-45%, -45%);
z-index: -1; z-index: -1;
width: 10vmin; width: 10vmin;
height: 10vmin; height: 10vmin;
image-rendering: pixelated; image-rendering: pixelated;
} }
.relevancy-display span { .relevancy-display img {
transform: translate(-45%, -45%);
}
.presence-display img {
transform: translate(-50%, -50%);
}
.relevancy-display span,
.presence-display span {
font-size: 1.5vmin; font-size: 1.5vmin;
color: white; color: white;
text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;
@ -240,24 +258,6 @@ watchEffect(() => {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.presence-display {
position: absolute;
top: 0;
right: 0;
transform: translate(-50%, -50%);
color: var(--feature-foreground);
}
.presence-display .material-icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--accent1);
font-size: 2vmin;
z-index: -1;
}
.level-display { .level-display {
position: absolute; position: absolute;
bottom: -5%; bottom: -5%;