@ freegamestore/ games (英语)

游戏的共享回放( UI) 原始 freegamestore.online 互联网档案馆的存檔,存档日期2013-12-02. 品牌一致布局,卷轴自由取景口锁,触控方便,并合成音效.

版本 : 0.19.0 (中文(简体) )

安装

npm i @freegamestore/games
# or
pnpm add @freegamestore/games

对等依赖:反应19+.

Styling (代号为Tailwind 4)

组件的样式为 平台上的有轨电车 (单位:千美元)ADR-001 (中文(简体) )) (中文(简体) ). 包船的船级名称,不是CSS,所以 您的游戏汇编它们在 游戏 web/src/index.css,直接在 @import "tailwindcss"数字 :

@import "tailwindcss";
@import "@freegamestore/games/theme.css";
@source "../node_modules/@freegamestore/games/dist";

@theme inline {
  --color-paper: var(--paper);
  --color-panel: var(--panel);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-line: var(--line);
  --color-accent: var(--accent);
  --color-danger: var(--danger);
  --font-display: "Fraunces", serif;
}

• @source 让Tailwind扫描这个软件包 dist 课程 组件使用。 没有它,SDK就变得不俗了.
• theme.css 添加符号映射以外的组件: animate-fgs-* 动画及其键框(它取代 CSS 用于注入的部件, accent-ink, (中文(简体) ), accent-soft 编辑 fgs 半径 和文本大小。 期限和放宽改为: --motion-* 标志.
• 这个 @theme inline 块是符号映射 template-game-* 携带. 模板上的游戏已经拥有了它.
• 浮动 UI (Y)GameModal, (中文(简体) ), GameConfirm, (中文(简体) ), StartScreen, (中文(简体) ), GameResultScreen(中文(简体) ) 坐在不透明地上 bg-panel 表面。 只有它的后方是半透明的.
• 没有在运行时注射。 这个 *_CSS 字符串( r)CONFETTI_CSS, (中文(简体) ), SCORE_POP_CSS, (中文(简体) ), RESULT_SCREEN_CSS, (中文(简体) ), START_SCREEN_CSS以0.19.0去除; GAME_TOKENS_CSS 继续作为文件符号帮助者.
• 内入 style 仅保留运行时计算的值( 配置件) 位置、分数弹出坐标、交错指数,每个标记 // Dynamic: …。 。 。 . src/styling.test.ts 别的都失败了.
• 测试和超载的钩子 data-fgs="…" 属性 (单位:千美元)result, (中文(简体) ), confetti, (中文(简体) ), start, (中文(简体) ), start-artwork, (中文(简体) ), score-popup) (中文(简体) ). 旧的 fgs-* 类名已去.

快速启动

import { GameShell, GameTopbar } from '@freegamestore/games'

export default function App() {
  return (
    <GameShell topbar={<GameTopbar title="Chess" />}>
      {/* your game canvas / DOM */}
    </GameShell>
  )
}

构成部分

游戏壳

根布局包装. 锁定游戏到 100svh,防止文档滚动,禁用文本选择和触摸点名。 每款游戏都以此来包装其内容.

<GameShell topbar={<GameTopbar title="Tetris" />}>
  <MyGame />
</GameShell>

游戏Topbar

单曲允许上栏. 每场比赛都有相同的字体,平板字和彩色符号.

// Simple: just the title. The score pill is hidden by default (#348)
<GameTopbar title="Tetris" />

// Opt in to the live score pill
<GameTopbar title="Tetris" score={42} showScore />

// Custom stats + play/pause controls
<GameTopbar
  title="Pac-Man"
  stats={[
    { label: 'Score', value: 1200, accent: true },
    { label: 'Lives', value: 3 },
    { label: 'Level', value: 5 },
  ]}
  rules={<p>Eat all the dots. Avoid ghosts.</p>}
  onPlayPause={togglePause}
  paused={isPaused}
  onRestart={restart}
/>

游戏认证

上边栏的签名/ 相机部件 actions 插槽 。 签出时显示"签入",签入时显示"avatar"+降入.

<GameTopbar title="Chess" actions={<GameAuth />} />

无道具——使用 useAuth 内部.

游戏按钮

触摸友好按钮. min 44px触控目标. 四变相 三相相相相.

<GameButton variant="primary" size="lg" onClick={start}>Play Again</GameButton>
<GameButton variant="secondary" size="sm" onClick={undo}>Undo</GameButton>
<GameButton variant="ghost" size="sm" onClick={flip}>Flip</GameButton>
<GameButton variant="danger" onClick={quit}>Quit</GameButton>

大小 : sm (44个px), md (48个px), lg (56px) (英语).

游戏Modal

全屏模式覆盖. 关闭背景点击或退出 .

<GameModal open={showSettings} onClose={() => setShowSettings(false)} title="Settings">
  <p>Game settings here</p>
</GameModal>

游戏覆盖屏幕

标准游戏覆接有分数,高分,再按下按钮.

<GameOverScreen
  score={1200}
  highScore={1500}
  onPlayAgain={restart}
>
  <Leaderboard {...leaderboard} />
</GameOverScreen>

游戏ResultScreen

完成关卡或游戏的动画结果屏幕. 一个胜利显示 倒下孔雀和口音标题。 丢失的卡片是单独显示的. 屏幕打开时动作会集中. 使用 GameOverScreen 一个简单的游戏过卡. GameResultScreen 是动画版.

<GameResultScreen
  tone={won ? 'win' : 'lose'}
  eyebrow="Level 4"
  title={won ? 'Level 4 cleared!' : 'Game over'}
  message={won ? undefined : 'Your tray filled up.'}
  stats={[
    { label: 'Score', value: score.toLocaleString() },
    { label: 'Moves', value: moves },
  ]}
  badge={newBest ? 'New best!' : undefined}
  action={won ? { label: 'Next level', onClick: next } : { label: 'Play again', onClick: restart }}
>
  <Leaderboard {...leaderboard} />
</GameResultScreen>

屏幕覆盖了视门 并且有 role="dialog"运动是 animate-fgs-* 水电费 theme.css (见 样式, (中文(简体) ), 关闭 prefers-reduced-motion中, 并隐藏给玩家 谁要求少一点运动。 它的颜色来自平台标志 和它的 持续时间 --motion-* 符号在 国家,与 光主题倒计时 theme.css。 。 。 .

Confetti 用于要庆祝的游戏 在别的地方.

游戏确认

在 GameModal 上创建的确认/取消对话框 .

<GameConfirm
  open={showQuit}
  title="Quit Game?"
  message="Your progress will be lost."
  onConfirm={quit}
  onCancel={() => setShowQuit(false)}
  variant="danger"
/>

游戏主题切换

压缩日月主题切换 (28px). 循环系统/轻/暗. 为上行所设计 actions 插槽 .

<GameTopbar title="Chess" actions={<><GameThemeToggle /><GameTextSizeToggle /></>} />

没有道具.

游戏文本化切换

压缩文本大小切换 (28px). 周期默认/ 大/ 小 。 显示 A/A+/A-。 为上行所设计 actions 插槽 .

<GameTopbar title="Chess" actions={<GameTextSizeToggle />} />

没有道具.

领导板

标签页板显示 (Top / 最近) 。 与 useLeaderboard 钩.

const { topScores, recentScores, loading } = useLeaderboard('chess')

<Leaderboard topScores={topScores} recentScores={recentScores} loading={loading} />

钩子

用户

FreeGameStore (通过 Google OAuth) 的认证状态 auth.freegamestore.online) (中文(简体) ).

const { user, loading, signIn, signOut } = useAuth()

回返 { user: User | null, loading: boolean, signIn: () => void, signOut: () => void }。 。 。 .

使用引导板

获取并提交分数到平台领导板.

今天没有领导板服务. 领导板工人被移除(# 491),所以领导板总是空的 submitScore 决定 { ok: false }钩子和 <Leaderboard> 继续导出, 因此已有的游戏会继续构建; 在本地保存高分 localStorage。 。 。 .

const { topScores, recentScores, submitScore, loading, refresh } = useLeaderboard('tetris')

// Submit a score
const { ok, rank } = await submitScore(1200)

过 period (协调世界时的一天, YYYY-MM-DD),用于每天的棋盘,例如每日的谜题. 接受它为全局董事会:

const today = new Date().toISOString().slice(0, 10)
const { topScores, submitScore } = useLeaderboard('tile-match', { period: today })

使用GameSunds 软件

通过Web Audio API合成音效. 0音频文件. 所有的声音自动尊重哑巴切换.

const { playMove, playScore, playError, playGameOver, playLevelUp, playDrop, playClear, playTick } = useGameSounds()

// Play a sound (no-op when muted)
playScore()

声音

SDK的"音效提供"中的低等哑弹状态. 游戏应该检查 muted 在播放自定义音频之前.

const { muted, toggle } = useSound()
if (!muted) myCustomAudio.play()

出口

@freegamestore/games → GameShell, GameTopbar, GameAuth, GameButton, GameModal,
                        GameOverScreen, GameConfirm, GameThemeToggle,
                        GameTextSizeToggle, Leaderboard, useAuth, useLeaderboard,
                        useGameSounds, useSound

许可证

麻省理工学院