@cos-design/slot-machine 3.5.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2021-present jiaxiantao
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./index.css');var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime");var u={slotMachine:`cos-slotMachine-P6FyZ`,machine:`cos-machine-B066r`,reel:`cos-reel-eEpJ3`,strip:`cos-strip-L5Z-a`,item:`cos-item-WYJ6q`,mask:`cos-mask-jdrj3`,spinBtn:`cos-spinBtn-DvDE7`,result:`cos-result-dLN5b`},d=[`🍒`,`🍋`,`🍊`,`🍇`,`⭐`,`7️⃣`],f=e=>1-(1-e)**3,p=({symbols:e=d,onSpinEnd:t})=>{let[n,r]=(0,c.useState)(!1),[i,a]=(0,c.useState)([0,0,0]),[o,s]=(0,c.useState)([]),p=(0,c.useRef)(0),m=(0,c.useRef)(t),h=(0,c.useRef)(null);(0,c.useEffect)(()=>{m.current=t},[t]);let g=(0,c.useCallback)(()=>{let t=[];for(let n=0;n<20;n++)t.push(...e);return t},[e])();return(0,c.useEffect)(()=>()=>{h.current&&(h.current.cancelled=!0),cancelAnimationFrame(p.current)},[]),(0,l.jsxs)(`div`,{className:u.slotMachine,children:[(0,l.jsx)(`div`,{className:u.machine,children:[0,1,2].map(e=>(0,l.jsxs)(`div`,{className:u.reel,style:{height:240},children:[(0,l.jsx)(`div`,{className:u.strip,style:{transform:`translateY(${i[e]}px)`},children:g.map((e,t)=>(0,l.jsx)(`div`,{className:u.item,style:{height:80},children:e},t))}),(0,l.jsx)(`div`,{className:u.mask})]},e))}),(0,l.jsx)(`button`,{type:`button`,className:u.spinBtn,onClick:()=>{if(n)return;r(!0),s([]);let t=[0,1,2].map(()=>Math.floor(Math.random()*e.length)),o=t.map(t=>-(t-1+e.length*10)*80),c=[...i],l=2e3,u=[0,300,600],d=performance.now(),g={cancelled:!1};h.current=g;let _=n=>{if(!g.cancelled){if(a(c.map((e,t)=>{let r=n-d-u[t];if(r<0)return e;let i=f(Math.min(r/l,1));return e+(o[t]-e)*i})),!u.every(e=>n-d-e>=l))p.current=requestAnimationFrame(_);else if(!g.cancelled){let n=t.map(t=>e[t]);s(n),r(!1),m.current?.(n)}}};p.current=requestAnimationFrame(_)},disabled:n,children:n?`旋转中...`:`开始`}),o.length>0&&!n&&(0,l.jsx)(`p`,{className:u.result,children:o[0]===o[1]&&o[1]===o[2]?`🎰 大奖！`:`结果: ${o.join(` `)}`})]})};exports.SlotMachine=p,exports.default=p;

package/dist/index.css

@@ -0,0 +1 @@
+.cos-slotMachine-P6FyZ{flex-direction:column;align-items:center;gap:20px;padding:24px;display:flex}.cos-machine-B066r{background:linear-gradient(#1e293b,#0f172a);border:3px solid #fbbf24;border-radius:16px;gap:8px;padding:16px;display:flex;box-shadow:0 8px 32px #0000004d,inset 0 2px #ffffff1a}.cos-reel-eEpJ3{background:#fff;border-radius:8px;width:80px;position:relative;overflow:hidden}.cos-strip-L5Z-a{transition:none}.cos-item-WYJ6q{justify-content:center;align-items:center;font-size:36px;display:flex}.cos-mask-jdrj3{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 30px 20px #00000026,inset 0 -30px 20px #00000026}.cos-spinBtn-DvDE7{color:#78350f;cursor:pointer;background:linear-gradient(#fbbf24,#f59e0b);border:none;border-radius:50px;padding:12px 40px;font-size:16px;font-weight:700;box-shadow:0 4px 16px #fbbf2466}.cos-spinBtn-DvDE7:disabled{opacity:.6;cursor:not-allowed}.cos-result-dLN5b{color:#fbbf24;margin:0;font-size:16px;font-weight:600}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './src/components/slotMachine/index';
+export { default as SlotMachine } from './src/components/slotMachine/index';
+export type * from './src/components/slotMachine/index';

package/dist/index.js

@@ -0,0 +1,101 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import './index.css';var o = {
+	slotMachine: "cos-slotMachine-P6FyZ",
+	machine: "cos-machine-B066r",
+	reel: "cos-reel-eEpJ3",
+	strip: "cos-strip-L5Z-a",
+	item: "cos-item-WYJ6q",
+	mask: "cos-mask-jdrj3",
+	spinBtn: "cos-spinBtn-DvDE7",
+	result: "cos-result-dLN5b"
+}, s = [
+	"🍒",
+	"🍋",
+	"🍊",
+	"🍇",
+	"⭐",
+	"7️⃣"
+], c = (e) => 1 - (1 - e) ** 3, l = ({ symbols: l = s, onSpinEnd: u }) => {
+	let [d, f] = r(!1), [p, m] = r([
+		0,
+		0,
+		0
+	]), [h, g] = r([]), _ = n(0), v = n(u), y = n(null);
+	t(() => {
+		v.current = u;
+	}, [u]);
+	let b = e(() => {
+		let e = [];
+		for (let t = 0; t < 20; t++) e.push(...l);
+		return e;
+	}, [l])();
+	return t(() => () => {
+		y.current && (y.current.cancelled = !0), cancelAnimationFrame(_.current);
+	}, []), /* @__PURE__ */ a("div", {
+		className: o.slotMachine,
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: o.machine,
+				children: [
+					0,
+					1,
+					2
+				].map((e) => /* @__PURE__ */ a("div", {
+					className: o.reel,
+					style: { height: 240 },
+					children: [/* @__PURE__ */ i("div", {
+						className: o.strip,
+						style: { transform: `translateY(${p[e]}px)` },
+						children: b.map((e, t) => /* @__PURE__ */ i("div", {
+							className: o.item,
+							style: { height: 80 },
+							children: e
+						}, t))
+					}), /* @__PURE__ */ i("div", { className: o.mask })]
+				}, e))
+			}),
+			/* @__PURE__ */ i("button", {
+				type: "button",
+				className: o.spinBtn,
+				onClick: () => {
+					if (d) return;
+					f(!0), g([]);
+					let e = [
+						0,
+						1,
+						2
+					].map(() => Math.floor(Math.random() * l.length)), t = e.map((e) => -(e - 1 + l.length * 10) * 80), n = [...p], r = 2e3, i = [
+						0,
+						300,
+						600
+					], a = performance.now(), o = { cancelled: !1 };
+					y.current = o;
+					let s = (u) => {
+						if (!o.cancelled) {
+							if (m(n.map((e, n) => {
+								let o = u - a - i[n];
+								if (o < 0) return e;
+								let s = c(Math.min(o / r, 1));
+								return e + (t[n] - e) * s;
+							})), !i.every((e) => u - a - e >= r)) _.current = requestAnimationFrame(s);
+							else if (!o.cancelled) {
+								let t = e.map((e) => l[e]);
+								g(t), f(!1), v.current?.(t);
+							}
+						}
+					};
+					_.current = requestAnimationFrame(s);
+				},
+				disabled: d,
+				children: d ? "旋转中..." : "开始"
+			}),
+			h.length > 0 && !d && /* @__PURE__ */ i("p", {
+				className: o.result,
+				children: h[0] === h[1] && h[1] === h[2] ? "🎰 大奖！" : `结果: ${h.join(" ")}`
+			})
+		]
+	});
+};
+//#endregion
+export { l as SlotMachine, l as default };

package/dist/packages/slotMachine/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from '../../../src/components/slotMachine';
+export { default as SlotMachine } from '../../../src/components/slotMachine';
+export type * from '../../../src/components/slotMachine';

package/dist/src/components/slotMachine/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface SlotMachineProps {
+    /** 符号列表 */
+    symbols?: string[];
+    /** 旋转结束回调 */
+    onSpinEnd?: (results: string[]) => void;
+}
+declare const SlotMachine: React.FC<SlotMachineProps>;
+export default SlotMachine;

package/dist/src/vite-env.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="vite/client" />
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import type { FC, SVGProps } from 'react';
+
+  export const ReactComponent: FC<SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@cos-design/slot-machine",
+  "version": "3.5.1",
+  "description": "SlotMachine component from cos-design",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
+  "keywords": [
+    "cos-design",
+    "react",
+    "slotMachine",
+    "SlotMachine"
+  ],
+  "homepage": "https://jiaxiantao.github.io/cos-design/",
+  "bugs": {
+    "url": "https://github.com/jiaxiantao/cos-design/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jiaxiantao/cos-design.git",
+    "directory": "packages/slotMachine"
+  },
+  "author": "jiaxiantao <jiaxiantao@souche.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}