Hugging Face's logo

Spaces:
Fraser
/
piclets
Running

App Files Community
piclets
File size: 2,834 Bytes 
00d1c08
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<script lang="ts">
  import type { PicletInstance } from '$lib/db/schema';
  
  interface Props {
    instance: PicletInstance;
    size?: number;
    showDetails?: boolean;
    onClick?: () => void;
  }
  
  let { instance, size = 100, showDetails = true, onClick }: Props = $props();
  
  const hpPercentage = $derived(instance.currentHp / instance.maxHp);
  const hpColor = $derived(
    hpPercentage > 0.5 ? '#34c759' : 
    hpPercentage > 0.25 ? '#ffcc00' : 
    '#ff3b30'
  );
  
  // Default type color - we'll enhance this later with a proper type system
  const typeColor = '#007bff';
</script>

<button 
  class="piclet-card" 
  style="width: {size}px; height: {size + (showDetails ? 40 : 0)}px;"
  onclick={onClick}
  type="button"
>
  <div class="image-container" style="background-color: {typeColor}10;">
    <img 
      src={instance.imageData || instance.imageUrl} 
      alt={instance.nickname || 'Piclet'}
      class="piclet-image"
      style="width: {size * 0.9}px; height: {size * 0.9}px;"
    />
    <div class="level-badge">
      Lv.{instance.level}
    </div>
  </div>
  
  {#if showDetails}
    <div class="details-section">
      <p class="nickname">{instance.nickname || 'Unknown'}</p>
      <div class="hp-bar">
        <div 
          class="hp-fill" 
          style="width: {hpPercentage * 100}%; background-color: {hpColor};"
        ></div>
      </div>
    </div>
  {/if}
</button>

<style>
  .piclet-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    border: 2px solid;
    border-color: color-mix(in srgb, var(--type-color, #007bff) 30%, transparent);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s;
  }
  
  .piclet-card:active {
    transform: scale(0.95);
  }
  
  .image-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }
  
  .piclet-image {
    object-fit: contain;
  }
  
  .level-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: bold;
  }
  
  .details-section {
    height: 40px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .nickname {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .hp-bar {
    height: 3px;
    background: #f0f0f0;
    border-radius: 1.5px;
    margin-top: 2px;
    overflow: hidden;
  }
  
  .hp-fill {
    height: 100%;
    border-radius: 1.5px;
    transition: width 0.3s ease;
  }
</style>