Hugging Face's logo

Spaces:
Fraser
/
piclets
Running

App Files Community
piclets
File size: 2,183 Bytes 
4c208f2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<script lang="ts">
  import type { StatusEffect } from '$lib/battle-engine/types';
  
  export let statusEffects: { type: StatusEffect; turnsLeft?: number }[] = [];
  
  function getStatusColor(status: StatusEffect): string {
    switch (status) {
      case 'burn': return '#ff6b6b';
      case 'freeze': return '#74c0fc';
      case 'paralyze': return '#ffd43b';
      case 'poison': return '#9775fa';
      case 'sleep': return '#868e96';
      case 'confuse': return '#ff8cc8';
      default: return '#495057';
    }
  }
  
  function getStatusIcon(status: StatusEffect): string {
    switch (status) {
      case 'burn': return '🔥';
      case 'freeze': return '❄️';
      case 'paralyze': return '⚡';
      case 'poison': return '☠️';
      case 'sleep': return '💤';
      case 'confuse': return '😵';
      default: return '?';
    }
  }
</script>

{#if statusEffects.length > 0}
  <div class="status-effects">
    {#each statusEffects as effect}
      <div 
        class="status-effect" 
        style="background-color: {getStatusColor(effect.type)}"
        title="{effect.type}{effect.turnsLeft ? ` (${effect.turnsLeft} turns)` : ''}"
      >
        <span class="status-icon">{getStatusIcon(effect.type)}</span>
        <span class="status-name">{effect.type.toUpperCase()}</span>
        {#if effect.turnsLeft}
          <span class="turns-left">{effect.turnsLeft}</span>
        {/if}
      </div>
    {/each}
  </div>
{/if}

<style>
  .status-effects {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 4px 0;
  }
  
  .status-effect {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 12px;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    animation: pulse 1.5s infinite;
  }
  
  .status-icon {
    font-size: 0.8rem;
  }
  
  .status-name {
    font-size: 0.6rem;
  }
  
  .turns-left {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 1px 4px;
    font-size: 0.6rem;
    margin-left: 2px;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
</style>