Skip to content

Commit 270bc77

Browse files
systemchestersystemchester
committed
feat: add home sample previews
1 parent 55b8e3e commit 270bc77

12 files changed

Lines changed: 244 additions & 79 deletions

‎frontend/public/gempic/RPGMAKERv1.1案例.png‎

32.6 KB
Loading

‎frontend/public/gempic/RPGMAKERv1案例.png‎

37 KB
Loading

‎frontend/public/gempic/v2.3ot案例.gif‎

25.7 KB
Loading

‎frontend/public/gempic/僵尸B1案例1.gif‎

11.5 KB
Loading

‎frontend/public/gempic/僵尸B1案例2.gif‎

10 KB
Loading

‎frontend/public/gempic/僵尸B2案例.gif‎

19.5 KB
Loading

‎frontend/public/gempic/常规角色V2.2案例.gif‎

18 KB
Loading

‎frontend/public/gempic/常规角色V3案例.gif‎

50.5 KB
Loading

‎frontend/public/gempic/常规角色v2案例.gif‎

18.5 KB
Loading

‎frontend/src/components/ModeSelector.tsx‎

Lines changed: 180 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { CSSProperties } from 'react'
2-
import { Card, Row, Col, Typography, Space, Button } from 'antd'
2+
import { Card, Row, Col, Typography, Space, Button, Tooltip } from 'antd'
33
import { ArrowsAltOutlined, AppstoreOutlined, BlockOutlined, BugOutlined, EnvironmentOutlined, FileImageOutlined, PictureOutlined, VideoCameraOutlined, ThunderboltOutlined, BorderOuterOutlined, ScissorOutlined, SafetyOutlined, ShareAltOutlined, ControlOutlined, RocketOutlined } from '@ant-design/icons'
44
import { useAuth } from '../auth/context'
55
import { RONIN_PRO_REQUIRE_NFT } from '../config/features'
@@ -49,6 +49,15 @@ const HOME_DESC_TEXT: CSSProperties = {
4949
alignSelf: 'stretch',
5050
textAlign: 'center',
5151
}
52+
const RPGMAKER_V1_SAMPLE_URL = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('RPGMAKERv1案例.png')}`
53+
const RPGMAKER_V1_1_SAMPLE_URL = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('RPGMAKERv1.1案例.png')}`
54+
const GEM_MONSTER_ZOMBIE_B2_SAMPLE_URL = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('僵尸B2案例.gif')}`
55+
const GEM_MONSTER_ZOMBIE_B1_SAMPLE_URL_1 = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('僵尸B1案例1.gif')}`
56+
const GEM_MONSTER_ZOMBIE_B1_SAMPLE_URL_2 = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('僵尸B1案例2.gif')}`
57+
const GEM_CHAR_V2_SAMPLE_URL = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('常规角色v2案例.gif')}`
58+
const GEM_CHAR_V2_2_SAMPLE_URL = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('常规角色V2.2案例.gif')}`
59+
const GEM_CHAR_V23OT_SAMPLE_URL = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('v2.3ot案例.gif')}`
60+
const GEM_CHAR_V3_SAMPLE_URL = `${import.meta.env.BASE_URL}gempic/${encodeURIComponent('常规角色V3案例.gif')}`
5261

5362
/** 游戏手柄图标 */
5463
function GamepadIcon({ style }: { style?: CSSProperties }) {
@@ -194,13 +203,46 @@ export default function ModeSelector({ onSelect }: Props) {
194203
<div style={{ lineHeight: 1.4 }}>
195204
<Text strong style={{ fontSize: 15 }}>{t('moduleNanobananaRpgmaker')}</Text>
196205
</div>
206+
<Text style={{ display: 'block', marginTop: 4, fontSize: 12, color: '#b55233', fontWeight: 600 }}>
207+
! {t('moduleNanobananaRpgmakerWarn')}
208+
</Text>
197209
<Space size="small" style={{ marginTop: 12, justifyContent: 'center', width: '100%', alignSelf: 'stretch' }} wrap>
198-
<Button type="primary" size="small" onClick={() => window.open(GEM_RPGMAKER_URL_V1, '_blank')}>
199-
{t('moduleNanobananaRpgmakerGemV1')}
200-
</Button>
201-
<Button type="primary" size="small" onClick={() => window.open(GEM_RPGMAKER_URL_V1_1, '_blank')}>
202-
{t('moduleNanobananaRpgmakerGemV1_1')}
203-
</Button>
210+
<Tooltip
211+
placement="bottom"
212+
overlayStyle={{ maxWidth: 240 }}
213+
title={
214+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
215+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
216+
<img
217+
src={RPGMAKER_V1_SAMPLE_URL}
218+
alt="RPGMaker V1 sample"
219+
style={{ width: 180, imageRendering: 'pixelated', borderRadius: 4 }}
220+
/>
221+
</div>
222+
}
223+
>
224+
<Button type="primary" size="small" onClick={() => window.open(GEM_RPGMAKER_URL_V1, '_blank')}>
225+
{t('moduleNanobananaRpgmakerGemV1')}
226+
</Button>
227+
</Tooltip>
228+
<Tooltip
229+
placement="bottom"
230+
overlayStyle={{ maxWidth: 240 }}
231+
title={
232+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
233+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
234+
<img
235+
src={RPGMAKER_V1_1_SAMPLE_URL}
236+
alt="RPGMaker V1.1 sample"
237+
style={{ width: 180, imageRendering: 'pixelated', borderRadius: 4 }}
238+
/>
239+
</div>
240+
}
241+
>
242+
<Button type="primary" size="small" onClick={() => window.open(GEM_RPGMAKER_URL_V1_1, '_blank')}>
243+
{t('moduleNanobananaRpgmakerGemV1_1')}
244+
</Button>
245+
</Tooltip>
204246
<Button type="primary" size="small" onClick={() => window.open(GEM_RPGMAKER_URL_V3, '_blank')}>
205247
{t('moduleNanobananaRpgmakerGemV3')}
206248
</Button>
@@ -220,15 +262,60 @@ export default function ModeSelector({ onSelect }: Props) {
220262
<Text strong style={{ fontSize: 13 }}>{t('moduleGemV2')}</Text>
221263
</div>
222264
<Space size="small" style={{ marginTop: 12, justifyContent: 'center', width: '100%', alignSelf: 'stretch' }}>
223-
<Button type="primary" size="small" onClick={() => window.open(GEM_V2_URL, '_blank')}>
224-
{t('gemV2Link1')}
225-
</Button>
226-
<Button type="primary" size="small" onClick={() => window.open(GEM_V2_URL_2, '_blank')}>
227-
{t('gemV2Link2')}
228-
</Button>
229-
<Button type="primary" size="small" onClick={() => window.open(GEM_V3_URL, '_blank')}>
230-
{t('gemV2Link3')}
231-
</Button>
265+
<Tooltip
266+
placement="bottom"
267+
overlayStyle={{ maxWidth: 240 }}
268+
title={
269+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
270+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
271+
<img
272+
src={GEM_CHAR_V2_SAMPLE_URL}
273+
alt="Pixel character V2 sample"
274+
style={{ height: 96, width: 'auto', objectFit: 'contain', imageRendering: 'pixelated', borderRadius: 4 }}
275+
/>
276+
</div>
277+
}
278+
>
279+
<Button type="primary" size="small" onClick={() => window.open(GEM_V2_URL, '_blank')}>
280+
{t('gemV2Link1')}
281+
</Button>
282+
</Tooltip>
283+
<Tooltip
284+
placement="bottom"
285+
overlayStyle={{ maxWidth: 240 }}
286+
title={
287+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
288+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
289+
<img
290+
src={GEM_CHAR_V2_2_SAMPLE_URL}
291+
alt="Pixel character V2.2 sample"
292+
style={{ height: 96, width: 'auto', objectFit: 'contain', imageRendering: 'pixelated', borderRadius: 4 }}
293+
/>
294+
</div>
295+
}
296+
>
297+
<Button type="primary" size="small" onClick={() => window.open(GEM_V2_URL_2, '_blank')}>
298+
{t('gemV2Link2')}
299+
</Button>
300+
</Tooltip>
301+
<Tooltip
302+
placement="bottom"
303+
overlayStyle={{ maxWidth: 240 }}
304+
title={
305+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
306+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
307+
<img
308+
src={GEM_CHAR_V3_SAMPLE_URL}
309+
alt="Pixel character V3 sample"
310+
style={{ height: 96, width: 'auto', objectFit: 'contain', imageRendering: 'pixelated', borderRadius: 4 }}
311+
/>
312+
</div>
313+
}
314+
>
315+
<Button type="primary" size="small" onClick={() => window.open(GEM_V3_URL, '_blank')}>
316+
{t('gemV2Link3')}
317+
</Button>
318+
</Tooltip>
232319
</Space>
233320
</Card>
234321
</Col>
@@ -246,37 +333,89 @@ export default function ModeSelector({ onSelect }: Props) {
246333
{t('moduleGemV3Desc')}
247334
</Text>
248335
<Space size="small" style={{ marginTop: 12, justifyContent: 'center', width: '100%', alignSelf: 'stretch' }} wrap>
249-
<Button type="primary" size="small" onClick={() => window.open(GEM_MONSTER_ZOMBIE_B1, '_blank')}>
250-
{t('moduleGemMonsterZombieB1')}
251-
</Button>
252-
<Button type="primary" size="small" onClick={() => window.open(GEM_MONSTER_ZOMBIE_B2, '_blank')}>
253-
{t('moduleGemMonsterZombieB2')}
254-
</Button>
336+
<Tooltip
337+
placement="bottom"
338+
overlayStyle={{ maxWidth: 280 }}
339+
title={
340+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
341+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
342+
<div style={{ display: 'flex', gap: 8 }}>
343+
<img
344+
src={GEM_MONSTER_ZOMBIE_B1_SAMPLE_URL_1}
345+
alt="Zombie B1 sample 1"
346+
style={{ height: 96, width: 'auto', objectFit: 'contain', imageRendering: 'pixelated', borderRadius: 4 }}
347+
/>
348+
<img
349+
src={GEM_MONSTER_ZOMBIE_B1_SAMPLE_URL_2}
350+
alt="Zombie B1 sample 2"
351+
style={{ height: 96, width: 'auto', objectFit: 'contain', imageRendering: 'pixelated', borderRadius: 4 }}
352+
/>
353+
</div>
354+
</div>
355+
}
356+
>
357+
<Button type="primary" size="small" onClick={() => window.open(GEM_MONSTER_ZOMBIE_B1, '_blank')}>
358+
{t('moduleGemMonsterZombieB1')}
359+
</Button>
360+
</Tooltip>
361+
<Tooltip
362+
placement="bottom"
363+
overlayStyle={{ maxWidth: 240 }}
364+
title={
365+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
366+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
367+
<img
368+
src={GEM_MONSTER_ZOMBIE_B2_SAMPLE_URL}
369+
alt="Zombie B2 sample"
370+
style={{ width: 150, imageRendering: 'pixelated', borderRadius: 4 }}
371+
/>
372+
</div>
373+
}
374+
>
375+
<Button type="primary" size="small" onClick={() => window.open(GEM_MONSTER_ZOMBIE_B2, '_blank')}>
376+
{t('moduleGemMonsterZombieB2')}
377+
</Button>
378+
</Tooltip>
255379
</Space>
256380
</Card>
257381
</Col>
258382
<Col xs={24} sm={12} md={6} style={{ display: 'flex' }}>
259-
<a
260-
href={GEM_CHAR_V23OT_URL}
261-
target="_blank"
262-
rel="noopener noreferrer"
263-
style={{ textDecoration: 'none', color: 'inherit', flex: 1, minWidth: 0 }}
264-
title={t('moduleCharGenV23OT')}
383+
<Tooltip
384+
placement="bottom"
385+
overlayStyle={{ maxWidth: 240 }}
386+
title={
387+
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
388+
<Text style={{ color: '#fff', fontSize: 12 }}>{t('moduleNanobananaRpgmakerSample')}</Text>
389+
<img
390+
src={GEM_CHAR_V23OT_SAMPLE_URL}
391+
alt="Pixel character V2.3OT sample"
392+
style={{ height: 96, width: 'auto', objectFit: 'contain', imageRendering: 'pixelated', borderRadius: 4 }}
393+
/>
394+
</div>
395+
}
265396
>
266-
<Card
267-
hoverable
268-
styles={{ body: HOME_CARD_BODY_SMALL }}
269-
style={{ textAlign: 'center', cursor: 'pointer', borderColor: '#9a8b78', flex: 1, minHeight: 140, width: '100%' }}
397+
<a
398+
href={GEM_CHAR_V23OT_URL}
399+
target="_blank"
400+
rel="noopener noreferrer"
401+
style={{ textDecoration: 'none', color: 'inherit', flex: 1, minWidth: 0 }}
402+
title={t('moduleCharGenV23OT')}
270403
>
271-
<ThunderboltOutlined style={{ fontSize: 32, color: '#b55233', marginBottom: 8, display: 'block' }} />
272-
<div style={{ lineHeight: 1.4 }}>
273-
<Text strong style={{ fontSize: 13 }}>{t('moduleCharGenV23OT')}</Text>
274-
</div>
275-
<Text type="secondary" style={{ display: 'block', marginTop: 4, fontSize: 11, lineHeight: 1.35, ...HOME_DESC_TEXT }}>
276-
{t('moduleCharGenV23OTDesc')}
277-
</Text>
278-
</Card>
279-
</a>
404+
<Card
405+
hoverable
406+
styles={{ body: HOME_CARD_BODY_SMALL }}
407+
style={{ textAlign: 'center', cursor: 'pointer', borderColor: '#9a8b78', flex: 1, minHeight: 140, width: '100%' }}
408+
>
409+
<ThunderboltOutlined style={{ fontSize: 32, color: '#b55233', marginBottom: 8, display: 'block' }} />
410+
<div style={{ lineHeight: 1.4 }}>
411+
<Text strong style={{ fontSize: 13 }}>{t('moduleCharGenV23OT')}</Text>
412+
</div>
413+
<Text type="secondary" style={{ display: 'block', marginTop: 4, fontSize: 11, lineHeight: 1.35, ...HOME_DESC_TEXT }}>
414+
{t('moduleCharGenV23OTDesc')}
415+
</Text>
416+
</Card>
417+
</a>
418+
</Tooltip>
280419
</Col>
281420
<Col xs={24} sm={12} md={6} style={{ display: 'flex' }}>
282421
<Card

0 commit comments

Comments
 (0)