@xsolla/xui-game-card 0.148.0 → 0.148.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +221 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
# GameCard
|
|
2
|
+
|
|
3
|
+
A cross-platform React card component for displaying game promotions with customizable tags, images, and action buttons. Perfect for game catalogs, reward systems, and promotional content.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xsolla/xui-game-card
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-game-card
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic GameCard
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { GameCard } from '@xsolla/xui-game-card';
|
|
20
|
+
|
|
21
|
+
export default function BasicGameCard() {
|
|
22
|
+
return (
|
|
23
|
+
<GameCard
|
|
24
|
+
image="https://example.com/game.jpg"
|
|
25
|
+
title="Whiteout Survival"
|
|
26
|
+
subtitle="Strategy • Puzzle • Building"
|
|
27
|
+
buttonText="Play"
|
|
28
|
+
/>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### GameCard with Tags
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import * as React from 'react';
|
|
37
|
+
import { GameCard } from '@xsolla/xui-game-card';
|
|
38
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
39
|
+
import { XsollaTicket, XsollaPoint } from '@xsolla/xui-icons-currency';
|
|
40
|
+
|
|
41
|
+
export default function GameCardWithTags() {
|
|
42
|
+
return (
|
|
43
|
+
<GameCard
|
|
44
|
+
image="https://example.com/game.jpg"
|
|
45
|
+
title="Whiteout Survival"
|
|
46
|
+
subtitle="Strategy • Puzzle • Building"
|
|
47
|
+
tagsTopLeft={
|
|
48
|
+
<>
|
|
49
|
+
<Tag size="sm" tone="brand" icon={<XsollaPoint />}>250</Tag>
|
|
50
|
+
<Tag size="sm" tone="secondary" icon={<XsollaTicket />}>5x</Tag>
|
|
51
|
+
</>
|
|
52
|
+
}
|
|
53
|
+
tagsTopRight={<Tag size="sm" tone="secondary">10h left</Tag>}
|
|
54
|
+
buttonText="Activate"
|
|
55
|
+
/>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### GameCard with Custom Trailing
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import * as React from 'react';
|
|
64
|
+
import { GameCard } from '@xsolla/xui-game-card';
|
|
65
|
+
import { Button } from '@xsolla/xui-button';
|
|
66
|
+
import { Badge } from '@xsolla/xui-badge';
|
|
67
|
+
|
|
68
|
+
export default function GameCardCustomTrailing() {
|
|
69
|
+
return (
|
|
70
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
71
|
+
{/* Custom Button */}
|
|
72
|
+
<GameCard
|
|
73
|
+
image="https://example.com/game.jpg"
|
|
74
|
+
title="Epic Adventure"
|
|
75
|
+
subtitle="RPG • Action"
|
|
76
|
+
trailing={
|
|
77
|
+
<Button size="xs" tone="brand">
|
|
78
|
+
Play Now
|
|
79
|
+
</Button>
|
|
80
|
+
}
|
|
81
|
+
/>
|
|
82
|
+
|
|
83
|
+
{/* Price Display */}
|
|
84
|
+
<GameCard
|
|
85
|
+
image="https://example.com/game.jpg"
|
|
86
|
+
title="Premium Bundle"
|
|
87
|
+
subtitle="Action • Adventure"
|
|
88
|
+
trailing={
|
|
89
|
+
<div style={{ textAlign: 'right' }}>
|
|
90
|
+
<div style={{ fontSize: 14, fontWeight: 600 }}>$29.99</div>
|
|
91
|
+
<div style={{ fontSize: 11, textDecoration: 'line-through', opacity: 0.6 }}>$49.99</div>
|
|
92
|
+
</div>
|
|
93
|
+
}
|
|
94
|
+
/>
|
|
95
|
+
|
|
96
|
+
{/* Badge */}
|
|
97
|
+
<GameCard
|
|
98
|
+
image="https://example.com/game.jpg"
|
|
99
|
+
title="Free to Play"
|
|
100
|
+
subtitle="Casual • Puzzle"
|
|
101
|
+
trailing={<Badge size="xl" tone="success">FREE</Badge>}
|
|
102
|
+
/>
|
|
103
|
+
</div>
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### GameCard Sizes
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import * as React from 'react';
|
|
112
|
+
import { GameCard } from '@xsolla/xui-game-card';
|
|
113
|
+
|
|
114
|
+
export default function GameCardSizes() {
|
|
115
|
+
return (
|
|
116
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
|
117
|
+
<div style={{ maxWidth: 366 }}>
|
|
118
|
+
<p>Large (lg)</p>
|
|
119
|
+
<GameCard
|
|
120
|
+
image="https://example.com/game.jpg"
|
|
121
|
+
title="Game Title"
|
|
122
|
+
subtitle="Genre"
|
|
123
|
+
size="lg"
|
|
124
|
+
buttonText="Play"
|
|
125
|
+
/>
|
|
126
|
+
</div>
|
|
127
|
+
<div style={{ maxWidth: 280 }}>
|
|
128
|
+
<p>Medium (md)</p>
|
|
129
|
+
<GameCard
|
|
130
|
+
image="https://example.com/game.jpg"
|
|
131
|
+
title="Game Title"
|
|
132
|
+
subtitle="Genre"
|
|
133
|
+
size="md"
|
|
134
|
+
buttonText="Play"
|
|
135
|
+
/>
|
|
136
|
+
</div>
|
|
137
|
+
<div style={{ maxWidth: 200 }}>
|
|
138
|
+
<p>Small (sm)</p>
|
|
139
|
+
<GameCard
|
|
140
|
+
image="https://example.com/game.jpg"
|
|
141
|
+
title="Game Title"
|
|
142
|
+
subtitle="Genre"
|
|
143
|
+
size="sm"
|
|
144
|
+
buttonText="Play"
|
|
145
|
+
/>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## Anatomy
|
|
153
|
+
|
|
154
|
+
Import the component and use it directly:
|
|
155
|
+
|
|
156
|
+
```jsx
|
|
157
|
+
import { GameCard } from '@xsolla/xui-game-card';
|
|
158
|
+
|
|
159
|
+
<GameCard
|
|
160
|
+
image="..." // Required: Game artwork URL
|
|
161
|
+
title="Game Title" // Required: Game name
|
|
162
|
+
subtitle="Genre" // Optional: Categories/genre
|
|
163
|
+
size="lg" // Size variant
|
|
164
|
+
tagsTopLeft={<Tag />} // Custom top-left content
|
|
165
|
+
tagsTopRight={<Tag />} // Custom top-right content
|
|
166
|
+
trailing={<Button />} // Custom trailing content
|
|
167
|
+
buttonText="Play" // Default button text (if no trailing)
|
|
168
|
+
onButtonClick={() => {}} // Default button handler
|
|
169
|
+
onPress={() => {}} // Card press handler
|
|
170
|
+
/>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
## API Reference
|
|
174
|
+
|
|
175
|
+
### GameCard
|
|
176
|
+
|
|
177
|
+
A card component for displaying game promotions.
|
|
178
|
+
|
|
179
|
+
**GameCard Props:**
|
|
180
|
+
|
|
181
|
+
| Prop | Type | Default | Description |
|
|
182
|
+
| :--- | :--- | :------ | :---------- |
|
|
183
|
+
| image | `string` | required | Game artwork image URL. |
|
|
184
|
+
| title | `string` | required | Game title. |
|
|
185
|
+
| subtitle | `string` | - | Game subtitle (e.g., genre tags). |
|
|
186
|
+
| size | `"lg" \| "md" \| "sm"` | `"lg"` | Size variant of the card. |
|
|
187
|
+
| tagsTopLeft | `ReactNode` | - | Custom content for top-left corner. |
|
|
188
|
+
| tagsTopRight | `ReactNode` | - | Custom content for top-right corner. |
|
|
189
|
+
| trailing | `ReactNode` | - | Custom trailing content (button, price, etc.). |
|
|
190
|
+
| buttonText | `string` | - | Button label text (if trailing not provided). |
|
|
191
|
+
| onButtonClick | `() => void` | - | Button click handler (if trailing not provided). |
|
|
192
|
+
| onPress | `() => void` | - | Card click handler. |
|
|
193
|
+
| imageAlt | `string` | - | Alt text for game image. |
|
|
194
|
+
| className | `string` | - | Custom className for the container. |
|
|
195
|
+
|
|
196
|
+
**Size Dimensions:**
|
|
197
|
+
|
|
198
|
+
| Size | Image Aspect Ratio | Reference Width |
|
|
199
|
+
| :--- | :----------------- | :-------------- |
|
|
200
|
+
| lg | 366:206 (~16:9) | 366px |
|
|
201
|
+
| md | 280:158 (~16:9) | 280px |
|
|
202
|
+
| sm | 200:113 (~16:9) | 200px |
|
|
203
|
+
|
|
204
|
+
## Theming
|
|
205
|
+
|
|
206
|
+
GameCard uses the design system theme for colors:
|
|
207
|
+
|
|
208
|
+
```typescript
|
|
209
|
+
// Colors accessed via theme
|
|
210
|
+
theme.colors.background.primary // Card background
|
|
211
|
+
theme.colors.content.primary // Title text
|
|
212
|
+
theme.colors.content.tertiary // Subtitle text
|
|
213
|
+
theme.shadow.surface // Card shadow
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Accessibility
|
|
217
|
+
|
|
218
|
+
- Uses semantic HTML structure
|
|
219
|
+
- Image includes alt text (defaults to title)
|
|
220
|
+
- Interactive elements are keyboard accessible
|
|
221
|
+
- Supports custom `onPress` for full card interaction
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-game-card",
|
|
3
|
-
"version": "0.148.
|
|
3
|
+
"version": "0.148.1",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.148.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.148.
|
|
17
|
+
"@xsolla/xui-core": "0.148.1",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.148.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|