Fraser commited on
Commit
a519169
·
1 Parent(s): 2531fcd
src/lib/components/Piclets/PicletCard.svelte CHANGED
@@ -24,7 +24,7 @@
24
 
25
  <button
26
  class="piclet-card"
27
- style="width: {size}px; height: {size + 30}px;"
28
  onclick={onClick}
29
  type="button"
30
  >
@@ -66,7 +66,7 @@
66
  background: white;
67
  border-radius: 12px;
68
  border: 2px solid;
69
- border-color: color-mix(in srgb, var(--type-color, #007bff) 30%, transparent);
70
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
71
  padding: 0;
72
  cursor: pointer;
 
24
 
25
  <button
26
  class="piclet-card"
27
+ style="width: {size}px; height: {size + 30}px; --type-color: {typeColor};"
28
  onclick={onClick}
29
  type="button"
30
  >
 
66
  background: white;
67
  border-radius: 12px;
68
  border: 2px solid;
69
+ border-color: var(--type-color, #007bff);
70
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
71
  padding: 0;
72
  cursor: pointer;
src/lib/components/Piclets/PicletDetail.svelte CHANGED
@@ -4,6 +4,7 @@
4
  import { deletePicletInstance } from '$lib/db/piclets';
5
  import { uiStore } from '$lib/stores/ui';
6
  import { downloadPicletCard } from '$lib/services/picletExport';
 
7
 
8
  interface Props {
9
  instance: PicletInstance;
@@ -17,6 +18,11 @@
17
  let expandedMoves = $state(new Set<number>());
18
  let isSharing = $state(false);
19
 
 
 
 
 
 
20
  onMount(() => {
21
  uiStore.openDetailPage();
22
  return () => {
@@ -73,7 +79,7 @@
73
  <div class="content-scroll">
74
  <!-- Header Card -->
75
  <div class="header-card">
76
- <div class="card-background">
77
  <!-- Faded Logo Background -->
78
  <div class="logo-background"></div>
79
 
@@ -119,7 +125,7 @@
119
  </div>
120
 
121
  <!-- Tab Bar -->
122
- <div class="tab-bar">
123
  <button
124
  class="tab-button"
125
  class:active={selectedTab === 'about'}
@@ -264,7 +270,7 @@
264
  }
265
 
266
  .card-background {
267
- background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
268
  padding: 24px;
269
  padding-top: calc(24px + env(safe-area-inset-top, 0));
270
  position: relative;
@@ -277,11 +283,11 @@
277
  right: 5px;
278
  width: 120px;
279
  height: 120px;
280
- background-image: url('/assets/snap_logo.png');
281
  background-size: contain;
282
  background-repeat: no-repeat;
283
  background-position: center;
284
- opacity: 0.1;
285
  pointer-events: none;
286
  z-index: 1;
287
  }
@@ -401,9 +407,9 @@
401
  }
402
 
403
  .tab-button.active {
404
- background: #4CAF50;
405
  color: white;
406
- box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
407
  }
408
 
409
  /* Tab Content */
 
4
  import { deletePicletInstance } from '$lib/db/piclets';
5
  import { uiStore } from '$lib/stores/ui';
6
  import { downloadPicletCard } from '$lib/services/picletExport';
7
+ import { TYPE_DATA } from '$lib/types/picletTypes';
8
 
9
  interface Props {
10
  instance: PicletInstance;
 
18
  let expandedMoves = $state(new Set<number>());
19
  let isSharing = $state(false);
20
 
21
+ // Type-based styling
22
+ const typeData = $derived(TYPE_DATA[instance.primaryType]);
23
+ const typeColor = $derived(typeData.color);
24
+ const typeLogoPath = $derived(`/classes/${instance.primaryType}.png`);
25
+
26
  onMount(() => {
27
  uiStore.openDetailPage();
28
  return () => {
 
79
  <div class="content-scroll">
80
  <!-- Header Card -->
81
  <div class="header-card">
82
+ <div class="card-background" style="--type-color: {typeColor}; --type-logo: url('{typeLogoPath}')">
83
  <!-- Faded Logo Background -->
84
  <div class="logo-background"></div>
85
 
 
125
  </div>
126
 
127
  <!-- Tab Bar -->
128
+ <div class="tab-bar" style="--type-color: {typeColor}">
129
  <button
130
  class="tab-button"
131
  class:active={selectedTab === 'about'}
 
270
  }
271
 
272
  .card-background {
273
+ background: linear-gradient(135deg, var(--type-color, #4CAF50) 0%, color-mix(in srgb, var(--type-color, #4CAF50) 80%, white) 100%);
274
  padding: 24px;
275
  padding-top: calc(24px + env(safe-area-inset-top, 0));
276
  position: relative;
 
283
  right: 5px;
284
  width: 120px;
285
  height: 120px;
286
+ background-image: var(--type-logo);
287
  background-size: contain;
288
  background-repeat: no-repeat;
289
  background-position: center;
290
+ opacity: 0.15;
291
  pointer-events: none;
292
  z-index: 1;
293
  }
 
407
  }
408
 
409
  .tab-button.active {
410
+ background: var(--type-color, #4CAF50);
411
  color: white;
412
+ box-shadow: 0 2px 4px color-mix(in srgb, var(--type-color, #4CAF50) 30%, transparent);
413
  }
414
 
415
  /* Tab Content */