40 lines
No EOL
1.9 KiB
Svelte
40 lines
No EOL
1.9 KiB
Svelte
<script lang="ts">
|
|
// TODO: Design a more _formal_ color system for emotions (>strong = >weight, etc).
|
|
const DEFAULT_COLORS: {[index: string]: string[]} = {
|
|
"__DEFAULT__": ["#0a0a0a", "#fafafa"],
|
|
"afraid": ["#fda4af", "#0a0a0a"],
|
|
"angry": ["#dc2626", "#fafafa"],
|
|
"bad": ["#450a0a", "#fafafa"],
|
|
"bored": ["#d4d4d8", "#0a0a0a"],
|
|
"confused": ["#fef3c7", "#0a0a0a"],
|
|
"excited": ["#f97316", "#fafafa"],
|
|
"fine": ["#bef264", "#0a0a0a"],
|
|
"happy": ["#facc15", "#0a0a0a"],
|
|
"hurt": ["#ff69b4", "#0a0a0a"],
|
|
"in love": ["#ff1493", "#fafafa"],
|
|
"mad": ["#450a0a", "#fafafa"],
|
|
"nervous": ["#7e22ce", "#fafafa"],
|
|
"okay": ["#86efac", "#0a0a0a"],
|
|
"sad": ["#0284c7", "#fafafa"],
|
|
"scared": ["#334155", "#fafafa"],
|
|
"shy": ["#cbd5e1", "#0a0a0a"],
|
|
"sleepy": ["#7dd3fc", "#0a0a0a"],
|
|
"active": ["#059669", "#fafafa"],
|
|
"surprised": ["#fbbf24", "#0a0a0a"],
|
|
"tired": ["#92400e", "#fafafa"],
|
|
"upset": ["#b91c1c", "#fafafa"],
|
|
"worried": ["#d4d4d8", "#0a0a0a"],
|
|
"relaxed": ["#86efac", "#0a0a0a"],
|
|
};
|
|
|
|
export let feeling: "relaxed" | "afraid" | "angry" | "bad" | "bored" | "confused" | "excited" | "fine" | "happy" | "hurt" | "in love" | "mad" | "nervous" | "okay" | "sad" | "scared" | "shy" | "sleepy" | "active" | "surprised" | "tired" | "upset" | "worried" | string
|
|
export let bgColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[0]
|
|
export let textColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[1]
|
|
export let slim = false;
|
|
</script>
|
|
|
|
<div class={`inline-block py-0.5 px-1.5 rounded-full ${slim ? "text-xs" : "text-sm"} font-semibold w-22 text-center`} style={`background-color: ${bgColor}; color: ${textColor}`}>
|
|
<slot name="pre"/>
|
|
|
|
<span>{feeling.charAt(0).toUpperCase() + feeling.slice(1)}</span>
|
|
</div> |