npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sakana-widget

v2.7.0

Published

Sakana widget for Web. | 网页小组件版本的石蒜模拟器。

Downloads

505

Readme

🐟「Sakana! Widget」石蒜模拟器网页小组件

English | 简体中文

NPM License Codacy jsDelivr Upstream Rate this package

https://github.dsrkafuu.net/sakana-widget/

把石蒜模拟器添加到你自己的网页内!支持自定义图片、自动缩放和更多运行参数!

功能

  • 注册并使用你自己的角色
  • 自动缩放适应,最小 120px
  • 按住立牌拖拽,松手后立牌会向反方向弹跳
  • 底座控制栏切换角色和其他功能
  • 自走模式,以随机间隔施加一个大小随机的力
  • CDN/NPM 引入,自定义参数,链式调用

使用

首先需要引入模块,可以使用 CDN 直接引入或者通过 NPM 包的形式安装:

<!-- https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.css -->
<!-- https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.js -->
<!-- https://cdnjs.cloudflare.com/ajax/libs/sakana-widget/2.7.0/sakana.min.css -->
<!-- https://cdnjs.cloudflare.com/ajax/libs/sakana-widget/2.7.0/sakana.min.js -->

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.css"
/>
<div id="sakana-widget"></div>
<script>
  function initSakanaWidget() {
    new SakanaWidget().mount('#sakana-widget');
  }
</script>
<script
  async
  onload="initSakanaWidget()"
  src="https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.js"
></script>
// npm install --save sakana-widget
import 'sakana-widget/lib/index.css';
import SakanaWidget from 'sakana-widget';
new SakanaWidget().mount('#sakana-widget');

本包默认导出一个类 SakanaWidget,通过该类可以初始化一个小组件。上面的代码初始化了一个全默认设置的组件,并将其挂载到了 #sakana-widget 元素上。

你可以继续创建实例并挂载到更多的 DOM 元素上,组件之间除了角色以外,数据是完全独立的,非静态方法支持链式调用。

例如,你可以在挂载组件之前修改一些设置,并获得一个超慢速的永续千束:

new SakanaWidget().setState({ i: 0.001, d: 1 }).mount('#sakana-widget');

又或者,通过 getCharacter 静态方法获取内置的角色对象,修改参数,并创建一个超慢速无阻尼 (永续) 的泷奈作为新角色:

const takina = SakanaWidget.getCharacter('takina');
takina.initialState = {
  ...takina.initialState,
  i: 0.001,
  d: 1,
};
SakanaWidget.registerCharacter('takina-slow', takina);
new SakanaWidget({ character: 'takina-slow' }).mount('#sakana-widget');

当然,你也可以使用自己的图片 (url 或 base64) 作为角色比如 GitHub 的图标:

const github = SakanaWidget.getCharacter('chisato');
github.image = `https://raw.githubusercontent.com/dsrkafuu/sakana-widget/main/docs/github.png`;
SakanaWidget.registerCharacter('github', github);
new SakanaWidget({ character: 'github' }).mount('#sakana-widget');

详细的参数和返回实例请见下文 API 章节。

自动缩放

在初始化组件的时候设置 autoFit: true 即可,组件会自动根据其挂载容器的大小进行缩放,最小 120px。

注意,开启自动缩放时需要确保挂载容器是一个 BFC,最简单的方式就是设置 position: relativeposition: fixed。组件在自动缩放模式下会额外在 app 和挂载容器之间添加一个包裹容器,并将其宽高设置为 100%,通过该包裹容器侦测实际的大小,因此,BFC 是必须的。

API

类型定义

export interface SakanaWidgetState {
  /**
   * 惯性
   */
  i: number;
  /**
   * 粘性
   */
  s: number;
  /**
   * 衰减
   */
  d: number;
  /**
   * 角度
   */
  r: number;
  /**
   * 高度
   */
  y: number;
  /**
   * 垂直速度
   */
  t: number;
  /**
   * 水平速度
   */
  w: number;
}

export interface SakanaWidgetCharacter {
  image: string;
  initialState: SakanaWidgetState;
}

构造函数选项

export interface SakanaWidgetOptions {
  /**
   * 组件大小,默认 `200`
   */
  size?: number;
  /**
   * 自动适应容器大小 (最小 120px),默认 `false`
   */
  autoFit?: boolean;
  /**
   * 角色,默认 `chisato`
   */
  character?: 'chisato' | 'takina';
  /**
   * 控制栏,默认 `true`
   */
  controls?: boolean;
  /**
   * 展示支撑杆,默认 `true`
   */
  rod?: boolean;
  /**
   * 可拖动,默认 `true`
   */
  draggable?: boolean;
  /**
   * canvas 线条设置,默认 `#b4b4b4` & `10`
   */
  stroke?: {
    color?: string;
    width?: number;
  };
  /**
   * 停止动画的阈值,默认 `0.1`
   */
  threshold?: number;
  /**
   * 旋转角度,默认 `0`
   */
  rotate?: number;
  /**
   * 开启 title 属性,默认 `false`
   */
  title?: boolean;
}

返回实例

class SakanaWidget {
  /**
   * 获取某个已注册角色的数据
   */
  static getCharacter(name: string): SakanaWidgetCharacter | null;
  /**
   * 获取所有已注册的角色
   */
  static getCharacters();
  /**
   * 注册一个新角色
   */
  static registerCharacter(name: string, character: SakanaWidgetCharacter);
  /**
   * 设置组件的当前状态
   */
  setState(state: Partial<SakanaWidgetState>);
  /**
   * 设置组件的当前角色
   */
  setCharacter(name: string);
  /**
   * 切换到下一个角色
   */
  nextCharacter();
  /**
   * 切换自走模式
   */
  triggetAutoMode();
  /**
   * 挂载组件
   */
  mount(el: HTMLElement | string);
  /**
   * 移除组件
   */
  unmount();
}

License

本项目代码基于 MIT 协议授权,请注意默认的内置角色图片不可用于任何商业活动。本项目前期是基于 https://github.com/itorr/sakana 的二次开发。

插画来源: 大伏アオ @blue00f4 pixiv