star-canvas 0.1.5 → 0.1.6
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/PROMPT.md +9 -11
- package/dist/index.cjs +2 -2
- package/dist/index.mjs +2 -2
- package/dist/legacy.cjs +2 -2
- package/dist/legacy.mjs +2 -2
- package/package.json +11 -1
package/PROMPT.md
CHANGED
|
@@ -60,24 +60,22 @@ game(({ ctx, width, height, on, loop, ui, canvas }) => {
|
|
|
60
60
|
});
|
|
61
61
|
|
|
62
62
|
// 2. Render HTML to the safe UI overlay
|
|
63
|
-
// UI is interactive by default (scroll, buttons work)
|
|
64
|
-
// Adding canvas.addEventListener makes UI click-through automatically
|
|
65
63
|
ui.render(`
|
|
66
64
|
<div class="absolute top-4 left-4 text-white">
|
|
67
|
-
<button id="start-btn" class="px-4 py-2 bg-blue-500 rounded
|
|
65
|
+
<button id="start-btn" class="px-4 py-2 bg-blue-500 rounded">
|
|
68
66
|
Click Me
|
|
69
67
|
</button>
|
|
70
68
|
</div>
|
|
71
69
|
`);
|
|
72
70
|
|
|
73
|
-
// 3. Listen for button clicks
|
|
71
|
+
// 3. Listen for button clicks — on() auto-enables pointer-events for the target
|
|
74
72
|
on('click', '#start-btn', () => {
|
|
75
73
|
console.log('Button clicked!');
|
|
76
74
|
});
|
|
77
75
|
|
|
78
76
|
// 4. For canvas games: listen for taps on canvas
|
|
79
|
-
//
|
|
80
|
-
//
|
|
77
|
+
// Taps pass through the UI overlay to the canvas layer
|
|
78
|
+
// Elements targeted by on() are automatically interactive
|
|
81
79
|
canvas.addEventListener('pointerdown', (e) => {
|
|
82
80
|
console.log('Canvas/screen tapped!', e);
|
|
83
81
|
});
|
|
@@ -142,7 +140,7 @@ A safe manager for your HTML overlay, stacked on top of the canvas.
|
|
|
142
140
|
- `ui.el(selector)`: Scoped `querySelector` for the UI root.
|
|
143
141
|
- `ui.all(selector)`: Scoped `querySelectorAll` for the UI root.
|
|
144
142
|
|
|
145
|
-
**Auto-detection:** When you add `canvas.addEventListener('pointerdown', ...)`, the SDK automatically makes UI click-through so taps reach the canvas.
|
|
143
|
+
**Auto-detection:** When you add `canvas.addEventListener('pointerdown', ...)`, the SDK automatically makes UI click-through so taps reach the canvas. Elements targeted by `on()` are automatically interactive — no extra CSS classes needed. Native `<button>` and `<a>` elements are also always interactive.
|
|
146
144
|
|
|
147
145
|
### Cursor Management
|
|
148
146
|
|
|
@@ -353,7 +351,7 @@ game(({ ctx, width, height, loop, toStagePoint, canvas }) => {
|
|
|
353
351
|
import { game } from 'star-canvas';
|
|
354
352
|
import { createLeaderboard } from 'star-leaderboard';
|
|
355
353
|
|
|
356
|
-
const leaderboard = createLeaderboard({ gameId: '
|
|
354
|
+
const leaderboard = createLeaderboard({ gameId: '<gameId from .starrc>' });
|
|
357
355
|
|
|
358
356
|
game(({ ctx, width, height, loop, ui, on, canvas, toStagePoint }) => {
|
|
359
357
|
let score = 0;
|
|
@@ -370,13 +368,13 @@ game(({ ctx, width, height, loop, ui, on, canvas, toStagePoint }) => {
|
|
|
370
368
|
// 1. Listen for screen taps - this makes UI click-through automatically
|
|
371
369
|
canvas.addEventListener('pointerdown', handleTap);
|
|
372
370
|
|
|
373
|
-
// 2. Listen for button clicks
|
|
371
|
+
// 2. Listen for button clicks — on() auto-enables pointer-events for the selector
|
|
374
372
|
on('click', '#leaderboard-btn', (e) => {
|
|
375
373
|
e.stopPropagation();
|
|
376
374
|
leaderboard.show();
|
|
377
375
|
});
|
|
378
376
|
|
|
379
|
-
// 3. Render UI
|
|
377
|
+
// 3. Render UI — elements targeted by on() are automatically interactive
|
|
380
378
|
let lastState = null;
|
|
381
379
|
let lastScore = -1;
|
|
382
380
|
|
|
@@ -403,7 +401,7 @@ game(({ ctx, width, height, loop, ui, on, canvas, toStagePoint }) => {
|
|
|
403
401
|
<div class="h-full flex flex-col items-center justify-center text-white">
|
|
404
402
|
<div class="text-3xl mb-4">GAME OVER</div>
|
|
405
403
|
<div class="text-6xl mb-4">\${score}</div>
|
|
406
|
-
<button id="leaderboard-btn" class="px-6 py-3 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl font-bold shadow-lg shadow-blue-500/20
|
|
404
|
+
<button id="leaderboard-btn" class="px-6 py-3 mb-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl font-bold shadow-lg shadow-blue-500/20">
|
|
407
405
|
VIEW LEADERBOARD
|
|
408
406
|
</button>
|
|
409
407
|
<div class="text-xl animate-pulse">TAP TO RESTART</div>
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var A=Object.defineProperty;var
|
|
1
|
+
"use strict";var A=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var J=(a,o)=>{for(var l in o)A(a,l,{get:o[l],enumerable:!0})},K=(a,o,l,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of U(o))!V.call(a,s)&&s!==l&&A(a,s,{get:()=>o[s],enumerable:!(t=N(o,s))||t.enumerable});return a};var Q=a=>K(A({},"__esModule",{value:!0}),a);var ne={};J(ne,{createDragState:()=>$,game:()=>te,version:()=>Z});module.exports=Q(ne);var Z="0.8.0",X={landscape:{width:640,height:360},portrait:{width:360,height:640},responsive:{}};function $(a){let o=null,l=0,t=0;return{point(s){return a(s)},grab(s,c){let{x:b,y:T}=a(s);o=c,l=b-c.x,t=T-c.y},move(s){if(o){let{x:c,y:b}=a(s);o.x=c-l,o.y=b-t}},release(){let s=o;return o=null,s},get dragging(){return o}}}function W(){return typeof window<"u"&&typeof document<"u"}function ee(){if(!W()||document.getElementById("star-canvas-base"))return;let a=document.createElement("style");a.id="star-canvas-base",a.textContent=`
|
|
2
2
|
html, body { height: 100%; }
|
|
3
3
|
body {
|
|
4
4
|
margin: 0; min-height: 100dvh; overflow: hidden; background: #000;
|
|
@@ -29,4 +29,4 @@
|
|
|
29
29
|
.star-ui textarea, .star-ui [data-interactive] {
|
|
30
30
|
pointer-events: auto;
|
|
31
31
|
}
|
|
32
|
-
`,document.head.appendChild(a)}function te(a,
|
|
32
|
+
`,document.head.appendChild(a)}function te(a,o={}){W()&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>q(a,o),{once:!0}):queueMicrotask(()=>q(a,o)))}function q(a,o){if(ee(),window.__STAR_DOM__?.destroy)try{window.__STAR_DOM__.destroy()}catch{}document.querySelectorAll(".star-ui, .star-canvas, .star-input").forEach(e=>e.remove());let l=document.createElement("div");l.className="star-ui",document.body.appendChild(l);let t=document.createElement("canvas");t.className="star-canvas",document.body.appendChild(t);let s=t.getContext("2d",o.contextAttributes??{alpha:!0});if(!s)throw new Error("[star-canvas] Failed to get 2D context");if(o.preventContextMenu!==!1){let e=n=>n.preventDefault();t.addEventListener("contextmenu",e)}let c=document.createElement("div");c.className="star-input",document.body.appendChild(c);let b=[],T=[],O=[],R=null,w=null;Object.defineProperty(t,"onclick",{get:()=>R,set:e=>{w&&(c.removeEventListener("click",w),w=null),R=e,e&&(w=n=>e.call(t,n),c.addEventListener("click",w))}});let Y=t.addEventListener.bind(t),F=t.removeEventListener.bind(t),H=new WeakMap;t.addEventListener=function(e,n,r){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let i=(p=>n.call(t,p));H.set(n,i),c.addEventListener(e,i,r)}else Y(e,n,r)},t.removeEventListener=function(e,n,r){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let i=H.get(n);i&&(c.removeEventListener(e,i,r),H.delete(n))}else F(e,n,r)};let B=o.preset??"landscape",D=X[B]??X.landscape,L=o.width??D.width,M=o.height??D.height,I=o.maxPixelRatio??2,k=o.pixelRatio??"device",S=o.fit??"contain",x=1,d=L??1,u=M??1,G=new Set,C=null,g=[];function j(){return Math.min(typeof k=="number"?Math.max(1,k):Math.max(1,window.devicePixelRatio||1),I)}function y(){x=j();let e=document.body.getBoundingClientRect(),n=Math.max(1,Math.floor(e.width||window.innerWidth||800)),r=Math.max(1,Math.floor(e.height||window.innerHeight||600));if(L&&M){d=L,u=M;let m=d/u,v=n/r,h=1;if(S==="contain"?h=v>m?r/u:n/d:S==="cover"&&(h=v>m?n/d:r/u),S==="stretch")t.style.width="100%",t.style.height="100%";else{let f=Math.floor(d*h),z=Math.floor(u*h);t.style.width=`${f}px`,t.style.height=`${z}px`,t.style.position="absolute",t.style.left=`${Math.floor((n-f)/2)}px`,t.style.top=`${Math.floor((r-z)/2)}px`}}else if(M){u=M;let m=n/r;d=Math.floor(u*m),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else if(L){d=L;let m=n/r;u=Math.floor(d/m),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else d=n,u=r,t.style.width=`${d}px`,t.style.height=`${u}px`,t.style.position="absolute",t.style.left="0",t.style.top="0";let i=Math.max(1,Math.floor(d*x)),p=Math.max(1,Math.floor(u*x));t.width!==i&&(t.width=i),t.height!==p&&(t.height=p),s.setTransform(x,0,0,x,0,0),G.forEach(m=>m())}let P=new ResizeObserver(y);P.observe(document.body),g.push(()=>P.disconnect()),window.addEventListener("resize",y),g.push(()=>window.removeEventListener("resize",y));let _=window.visualViewport;_&&(_.addEventListener("resize",y),g.push(()=>_.removeEventListener("resize",y)));let E={stage:document.body,canvas:t,ctx:s,get width(){return d},get height(){return u},get dpr(){return x},resize:y,toStagePoint:e=>{let n=t.getBoundingClientRect(),r=(e.clientX-n.left)*(d/n.width),i=(e.clientY-n.top)*(u/n.height);return r=Math.max(0,Math.min(d,r)),i=Math.max(0,Math.min(u,i)),{x:r,y:i}},createDrag:()=>$(E.toStagePoint),onTap:e=>{b.push(e)},onMove:e=>{T.push(e)},onRelease:e=>{O.push(e)},on:(e,n,r,i)=>{if(/^(click|pointer|mouse|touch)/.test(e))try{let v=n.split(",").map(f=>`.star-ui ${f.trim()}`).join(", "),h=document.createElement("style");h.textContent=`${v} { pointer-events: auto; }`,document.head.appendChild(h),g.push(()=>h.remove())}catch{}let p=v=>{let f=v.target?.closest?.(n);f&&r.call(f,v)};document.addEventListener(e,p,i);let m=()=>document.removeEventListener(e,p,i);return g.push(m),m},loop:e=>{let r=0,i=!1,p=0,m=v=>{if(!i)return;let h=p?Math.min((v-p)/1e3,.1):0;p=v;try{e(h,v)}catch(f){console.error("[star-canvas] Game loop error:",f)}r=requestAnimationFrame(m)};return C={get running(){return i},start(){i||(i=!0,p=performance.now(),r=requestAnimationFrame(m))},stop(){i&&(i=!1,cancelAnimationFrame(r))}},C.start(),C},ui:{root:l,render:e=>{l.innerHTML!==e&&(l.innerHTML=e)},el:e=>l.querySelector(e),all:e=>l.querySelectorAll(e)},destroy:()=>{C?.stop(),g.forEach(e=>e()),g=[],G.clear(),t.parentElement&&t.parentElement.removeChild(t),l.parentElement&&l.parentElement.removeChild(l),c.parentElement&&c.parentElement.removeChild(c)},scoped:e=>{s.save();try{e()}finally{s.restore()}}};c.addEventListener("pointerdown",e=>{let n={...E.toStagePoint(e),event:e};b.forEach(r=>r(n))}),c.addEventListener("pointermove",e=>{let n={...E.toStagePoint(e),event:e};T.forEach(r=>r(n))}),c.addEventListener("pointerup",e=>{let n={...E.toStagePoint(e),event:e};O.forEach(r=>r(n))}),window.__STAR_DOM__={destroy:E.destroy},requestAnimationFrame(()=>requestAnimationFrame(()=>{y();try{a(E)}catch(e){console.error("[star-canvas] Game initialization failed:",e)}}))}0&&(module.exports={createDragState,game,version});
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var N="0.8.0",z={landscape:{width:640,height:360},portrait:{width:360,height:640},responsive:{}};function B(m){let i=null,d=0,t=0;return{point(u){return m(u)},grab(u,a){let{x:b,y:T}=m(u);i=a,d=b-a.x,t=T-a.y},move(u){if(i){let{x:a,y:b}=m(u);i.x=a-d,i.y=b-t}},release(){let u=i;return i=null,u},get dragging(){return i}}}function q(){return typeof window<"u"&&typeof document<"u"}function j(){if(!q()||document.getElementById("star-canvas-base"))return;let m=document.createElement("style");m.id="star-canvas-base",m.textContent=`
|
|
2
2
|
html, body { height: 100%; }
|
|
3
3
|
body {
|
|
4
4
|
margin: 0; min-height: 100dvh; overflow: hidden; background: #000;
|
|
@@ -29,4 +29,4 @@ var U="0.8.0",z={landscape:{width:640,height:360},portrait:{width:360,height:640
|
|
|
29
29
|
.star-ui textarea, .star-ui [data-interactive] {
|
|
30
30
|
pointer-events: auto;
|
|
31
31
|
}
|
|
32
|
-
`,document.head.appendChild(m)}function
|
|
32
|
+
`,document.head.appendChild(m)}function U(m,i={}){q()&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>X(m,i),{once:!0}):queueMicrotask(()=>X(m,i)))}function X(m,i){if(j(),window.__STAR_DOM__?.destroy)try{window.__STAR_DOM__.destroy()}catch{}document.querySelectorAll(".star-ui, .star-canvas, .star-input").forEach(e=>e.remove());let d=document.createElement("div");d.className="star-ui",document.body.appendChild(d);let t=document.createElement("canvas");t.className="star-canvas",document.body.appendChild(t);let u=t.getContext("2d",i.contextAttributes??{alpha:!0});if(!u)throw new Error("[star-canvas] Failed to get 2D context");if(i.preventContextMenu!==!1){let e=n=>n.preventDefault();t.addEventListener("contextmenu",e)}let a=document.createElement("div");a.className="star-input",document.body.appendChild(a);let b=[],T=[],A=[],O=null,w=null;Object.defineProperty(t,"onclick",{get:()=>O,set:e=>{w&&(a.removeEventListener("click",w),w=null),O=e,e&&(w=n=>e.call(t,n),a.addEventListener("click",w))}});let $=t.addEventListener.bind(t),W=t.removeEventListener.bind(t),H=new WeakMap;t.addEventListener=function(e,n,o){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let r=(p=>n.call(t,p));H.set(n,r),a.addEventListener(e,r,o)}else $(e,n,o)},t.removeEventListener=function(e,n,o){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let r=H.get(n);r&&(a.removeEventListener(e,r,o),H.delete(n))}else W(e,n,o)};let Y=i.preset??"landscape",R=z[Y]??z.landscape,L=i.width??R.width,M=i.height??R.height,D=i.maxPixelRatio??2,I=i.pixelRatio??"device",S=i.fit??"contain",x=1,s=L??1,l=M??1,k=new Set,C=null,g=[];function F(){return Math.min(typeof I=="number"?Math.max(1,I):Math.max(1,window.devicePixelRatio||1),D)}function y(){x=F();let e=document.body.getBoundingClientRect(),n=Math.max(1,Math.floor(e.width||window.innerWidth||800)),o=Math.max(1,Math.floor(e.height||window.innerHeight||600));if(L&&M){s=L,l=M;let c=s/l,v=n/o,h=1;if(S==="contain"?h=v>c?o/l:n/s:S==="cover"&&(h=v>c?n/s:o/l),S==="stretch")t.style.width="100%",t.style.height="100%";else{let f=Math.floor(s*h),P=Math.floor(l*h);t.style.width=`${f}px`,t.style.height=`${P}px`,t.style.position="absolute",t.style.left=`${Math.floor((n-f)/2)}px`,t.style.top=`${Math.floor((o-P)/2)}px`}}else if(M){l=M;let c=n/o;s=Math.floor(l*c),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else if(L){s=L;let c=n/o;l=Math.floor(s/c),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else s=n,l=o,t.style.width=`${s}px`,t.style.height=`${l}px`,t.style.position="absolute",t.style.left="0",t.style.top="0";let r=Math.max(1,Math.floor(s*x)),p=Math.max(1,Math.floor(l*x));t.width!==r&&(t.width=r),t.height!==p&&(t.height=p),u.setTransform(x,0,0,x,0,0),k.forEach(c=>c())}let G=new ResizeObserver(y);G.observe(document.body),g.push(()=>G.disconnect()),window.addEventListener("resize",y),g.push(()=>window.removeEventListener("resize",y));let _=window.visualViewport;_&&(_.addEventListener("resize",y),g.push(()=>_.removeEventListener("resize",y)));let E={stage:document.body,canvas:t,ctx:u,get width(){return s},get height(){return l},get dpr(){return x},resize:y,toStagePoint:e=>{let n=t.getBoundingClientRect(),o=(e.clientX-n.left)*(s/n.width),r=(e.clientY-n.top)*(l/n.height);return o=Math.max(0,Math.min(s,o)),r=Math.max(0,Math.min(l,r)),{x:o,y:r}},createDrag:()=>B(E.toStagePoint),onTap:e=>{b.push(e)},onMove:e=>{T.push(e)},onRelease:e=>{A.push(e)},on:(e,n,o,r)=>{if(/^(click|pointer|mouse|touch)/.test(e))try{let v=n.split(",").map(f=>`.star-ui ${f.trim()}`).join(", "),h=document.createElement("style");h.textContent=`${v} { pointer-events: auto; }`,document.head.appendChild(h),g.push(()=>h.remove())}catch{}let p=v=>{let f=v.target?.closest?.(n);f&&o.call(f,v)};document.addEventListener(e,p,r);let c=()=>document.removeEventListener(e,p,r);return g.push(c),c},loop:e=>{let o=0,r=!1,p=0,c=v=>{if(!r)return;let h=p?Math.min((v-p)/1e3,.1):0;p=v;try{e(h,v)}catch(f){console.error("[star-canvas] Game loop error:",f)}o=requestAnimationFrame(c)};return C={get running(){return r},start(){r||(r=!0,p=performance.now(),o=requestAnimationFrame(c))},stop(){r&&(r=!1,cancelAnimationFrame(o))}},C.start(),C},ui:{root:d,render:e=>{d.innerHTML!==e&&(d.innerHTML=e)},el:e=>d.querySelector(e),all:e=>d.querySelectorAll(e)},destroy:()=>{C?.stop(),g.forEach(e=>e()),g=[],k.clear(),t.parentElement&&t.parentElement.removeChild(t),d.parentElement&&d.parentElement.removeChild(d),a.parentElement&&a.parentElement.removeChild(a)},scoped:e=>{u.save();try{e()}finally{u.restore()}}};a.addEventListener("pointerdown",e=>{let n={...E.toStagePoint(e),event:e};b.forEach(o=>o(n))}),a.addEventListener("pointermove",e=>{let n={...E.toStagePoint(e),event:e};T.forEach(o=>o(n))}),a.addEventListener("pointerup",e=>{let n={...E.toStagePoint(e),event:e};A.forEach(o=>o(n))}),window.__STAR_DOM__={destroy:E.destroy},requestAnimationFrame(()=>requestAnimationFrame(()=>{y();try{m(E)}catch(e){console.error("[star-canvas] Game initialization failed:",e)}}))}export{B as createDragState,U as game,N as version};
|
package/dist/legacy.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var H=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var Q=(i,o)=>{for(var s in o)H(i,s,{get:o[s],enumerable:!0})},Z=(i,o,s,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of J(o))!K.call(i,l)&&l!==s&&H(i,l,{get:()=>o[l],enumerable:!(t=V(o,l))||t.enumerable});return i};var ee=i=>Z(H({},"__esModule",{value:!0}),i);var oe={};Q(oe,{createDragState:()=>_,game:()=>ne,version:()=>
|
|
1
|
+
"use strict";var H=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var Q=(i,o)=>{for(var s in o)H(i,s,{get:o[s],enumerable:!0})},Z=(i,o,s,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of J(o))!K.call(i,l)&&l!==s&&H(i,l,{get:()=>o[l],enumerable:!(t=V(o,l))||t.enumerable});return i};var ee=i=>Z(H({},"__esModule",{value:!0}),i);var oe={};Q(oe,{createDragState:()=>_,game:()=>ne,version:()=>W});module.exports=ee(oe);var W="0.8.0",q={landscape:{width:640,height:360},portrait:{width:360,height:640},responsive:{}};function _(i){let o=null,s=0,t=0;return{point(l){return i(l)},grab(l,c){let{x:b,y:C}=i(l);o=c,s=b-c.x,t=C-c.y},move(l){if(o){let{x:c,y:b}=i(l);o.x=c-s,o.y=b-t}},release(){let l=o;return o=null,l},get dragging(){return o}}}function Y(){return typeof window<"u"&&typeof document<"u"}function te(){if(!Y()||document.getElementById("star-canvas-base"))return;let i=document.createElement("style");i.id="star-canvas-base",i.textContent=`
|
|
2
2
|
html, body { height: 100%; }
|
|
3
3
|
body {
|
|
4
4
|
margin: 0; min-height: 100dvh; overflow: hidden; background: #000;
|
|
@@ -29,4 +29,4 @@
|
|
|
29
29
|
.star-ui textarea, .star-ui [data-interactive] {
|
|
30
30
|
pointer-events: auto;
|
|
31
31
|
}
|
|
32
|
-
`,document.head.appendChild(i)}function
|
|
32
|
+
`,document.head.appendChild(i)}function F(i,o={}){Y()&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>$(i,o),{once:!0}):queueMicrotask(()=>$(i,o)))}function $(i,o){if(te(),window.__STAR_DOM__?.destroy)try{window.__STAR_DOM__.destroy()}catch{}document.querySelectorAll(".star-ui, .star-canvas, .star-input").forEach(e=>e.remove());let s=document.createElement("div");s.className="star-ui",document.body.appendChild(s);let t=document.createElement("canvas");t.className="star-canvas",document.body.appendChild(t);let l=t.getContext("2d",o.contextAttributes??{alpha:!0});if(!l)throw new Error("[star-canvas] Failed to get 2D context");if(o.preventContextMenu!==!1){let e=n=>n.preventDefault();t.addEventListener("contextmenu",e)}let c=document.createElement("div");c.className="star-input",document.body.appendChild(c);let b=[],C=[],A=[],D=null,w=null;Object.defineProperty(t,"onclick",{get:()=>D,set:e=>{w&&(c.removeEventListener("click",w),w=null),D=e,e&&(w=n=>e.call(t,n),c.addEventListener("click",w))}});let B=t.addEventListener.bind(t),U=t.removeEventListener.bind(t),G=new WeakMap;t.addEventListener=function(e,n,r){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let a=(p=>n.call(t,p));G.set(n,a),c.addEventListener(e,a,r)}else B(e,n,r)},t.removeEventListener=function(e,n,r){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let a=G.get(n);a&&(c.removeEventListener(e,a,r),G.delete(n))}else U(e,n,r)};let j=o.preset??"landscape",I=q[j]??q.landscape,L=o.width??I.width,M=o.height??I.height,R=o.maxPixelRatio??2,k=o.pixelRatio??"device",O=o.fit??"contain",x=1,d=L??1,u=M??1,P=new Set,T=null,g=[];function N(){return Math.min(typeof k=="number"?Math.max(1,k):Math.max(1,window.devicePixelRatio||1),R)}function y(){x=N();let e=document.body.getBoundingClientRect(),n=Math.max(1,Math.floor(e.width||window.innerWidth||800)),r=Math.max(1,Math.floor(e.height||window.innerHeight||600));if(L&&M){d=L,u=M;let m=d/u,v=n/r,h=1;if(O==="contain"?h=v>m?r/u:n/d:O==="cover"&&(h=v>m?n/d:r/u),O==="stretch")t.style.width="100%",t.style.height="100%";else{let f=Math.floor(d*h),X=Math.floor(u*h);t.style.width=`${f}px`,t.style.height=`${X}px`,t.style.position="absolute",t.style.left=`${Math.floor((n-f)/2)}px`,t.style.top=`${Math.floor((r-X)/2)}px`}}else if(M){u=M;let m=n/r;d=Math.floor(u*m),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else if(L){d=L;let m=n/r;u=Math.floor(d/m),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else d=n,u=r,t.style.width=`${d}px`,t.style.height=`${u}px`,t.style.position="absolute",t.style.left="0",t.style.top="0";let a=Math.max(1,Math.floor(d*x)),p=Math.max(1,Math.floor(u*x));t.width!==a&&(t.width=a),t.height!==p&&(t.height=p),l.setTransform(x,0,0,x,0,0),P.forEach(m=>m())}let z=new ResizeObserver(y);z.observe(document.body),g.push(()=>z.disconnect()),window.addEventListener("resize",y),g.push(()=>window.removeEventListener("resize",y));let S=window.visualViewport;S&&(S.addEventListener("resize",y),g.push(()=>S.removeEventListener("resize",y)));let E={stage:document.body,canvas:t,ctx:l,get width(){return d},get height(){return u},get dpr(){return x},resize:y,toStagePoint:e=>{let n=t.getBoundingClientRect(),r=(e.clientX-n.left)*(d/n.width),a=(e.clientY-n.top)*(u/n.height);return r=Math.max(0,Math.min(d,r)),a=Math.max(0,Math.min(u,a)),{x:r,y:a}},createDrag:()=>_(E.toStagePoint),onTap:e=>{b.push(e)},onMove:e=>{C.push(e)},onRelease:e=>{A.push(e)},on:(e,n,r,a)=>{if(/^(click|pointer|mouse|touch)/.test(e))try{let v=n.split(",").map(f=>`.star-ui ${f.trim()}`).join(", "),h=document.createElement("style");h.textContent=`${v} { pointer-events: auto; }`,document.head.appendChild(h),g.push(()=>h.remove())}catch{}let p=v=>{let f=v.target?.closest?.(n);f&&r.call(f,v)};document.addEventListener(e,p,a);let m=()=>document.removeEventListener(e,p,a);return g.push(m),m},loop:e=>{let r=0,a=!1,p=0,m=v=>{if(!a)return;let h=p?Math.min((v-p)/1e3,.1):0;p=v;try{e(h,v)}catch(f){console.error("[star-canvas] Game loop error:",f)}r=requestAnimationFrame(m)};return T={get running(){return a},start(){a||(a=!0,p=performance.now(),r=requestAnimationFrame(m))},stop(){a&&(a=!1,cancelAnimationFrame(r))}},T.start(),T},ui:{root:s,render:e=>{s.innerHTML!==e&&(s.innerHTML=e)},el:e=>s.querySelector(e),all:e=>s.querySelectorAll(e)},destroy:()=>{T?.stop(),g.forEach(e=>e()),g=[],P.clear(),t.parentElement&&t.parentElement.removeChild(t),s.parentElement&&s.parentElement.removeChild(s),c.parentElement&&c.parentElement.removeChild(c)},scoped:e=>{l.save();try{e()}finally{l.restore()}}};c.addEventListener("pointerdown",e=>{let n={...E.toStagePoint(e),event:e};b.forEach(r=>r(n))}),c.addEventListener("pointermove",e=>{let n={...E.toStagePoint(e),event:e};C.forEach(r=>r(n))}),c.addEventListener("pointerup",e=>{let n={...E.toStagePoint(e),event:e};A.forEach(r=>r(n))}),window.__STAR_DOM__={destroy:E.destroy},requestAnimationFrame(()=>requestAnimationFrame(()=>{y();try{i(E)}catch(e){console.error("[star-canvas] Game initialization failed:",e)}}))}function ne(i,o={}){let s={preset:"responsive",...o};return F(i,s)}0&&(module.exports={createDragState,game,version});
|
package/dist/legacy.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var j="0.8.0",z={landscape:{width:640,height:360},portrait:{width:360,height:640},responsive:{}};function q(l){let i=null,s=0,t=0;return{point(m){return l(m)},grab(m,a){let{x:b,y:C}=l(m);i=a,s=b-a.x,t=C-a.y},move(m){if(i){let{x:a,y:b}=l(m);i.x=a-s,i.y=b-t}},release(){let m=i;return i=null,m},get dragging(){return i}}}function $(){return typeof window<"u"&&typeof document<"u"}function N(){if(!$()||document.getElementById("star-canvas-base"))return;let l=document.createElement("style");l.id="star-canvas-base",l.textContent=`
|
|
2
2
|
html, body { height: 100%; }
|
|
3
3
|
body {
|
|
4
4
|
margin: 0; min-height: 100dvh; overflow: hidden; background: #000;
|
|
@@ -29,4 +29,4 @@ var N="0.8.0",z={landscape:{width:640,height:360},portrait:{width:360,height:640
|
|
|
29
29
|
.star-ui textarea, .star-ui [data-interactive] {
|
|
30
30
|
pointer-events: auto;
|
|
31
31
|
}
|
|
32
|
-
`,document.head.appendChild(l)}function
|
|
32
|
+
`,document.head.appendChild(l)}function W(l,i={}){$()&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>X(l,i),{once:!0}):queueMicrotask(()=>X(l,i)))}function X(l,i){if(N(),window.__STAR_DOM__?.destroy)try{window.__STAR_DOM__.destroy()}catch{}document.querySelectorAll(".star-ui, .star-canvas, .star-input").forEach(e=>e.remove());let s=document.createElement("div");s.className="star-ui",document.body.appendChild(s);let t=document.createElement("canvas");t.className="star-canvas",document.body.appendChild(t);let m=t.getContext("2d",i.contextAttributes??{alpha:!0});if(!m)throw new Error("[star-canvas] Failed to get 2D context");if(i.preventContextMenu!==!1){let e=n=>n.preventDefault();t.addEventListener("contextmenu",e)}let a=document.createElement("div");a.className="star-input",document.body.appendChild(a);let b=[],C=[],H=[],_=null,w=null;Object.defineProperty(t,"onclick",{get:()=>_,set:e=>{w&&(a.removeEventListener("click",w),w=null),_=e,e&&(w=n=>e.call(t,n),a.addEventListener("click",w))}});let Y=t.addEventListener.bind(t),F=t.removeEventListener.bind(t),G=new WeakMap;t.addEventListener=function(e,n,o){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let r=(p=>n.call(t,p));G.set(n,r),a.addEventListener(e,r,o)}else Y(e,n,o)},t.removeEventListener=function(e,n,o){if(/^(click|pointer|mouse|touch)/.test(e)&&typeof n=="function"){let r=G.get(n);r&&(a.removeEventListener(e,r,o),G.delete(n))}else F(e,n,o)};let B=i.preset??"landscape",A=z[B]??z.landscape,L=i.width??A.width,M=i.height??A.height,D=i.maxPixelRatio??2,I=i.pixelRatio??"device",O=i.fit??"contain",x=1,c=L??1,d=M??1,R=new Set,T=null,g=[];function U(){return Math.min(typeof I=="number"?Math.max(1,I):Math.max(1,window.devicePixelRatio||1),D)}function y(){x=U();let e=document.body.getBoundingClientRect(),n=Math.max(1,Math.floor(e.width||window.innerWidth||800)),o=Math.max(1,Math.floor(e.height||window.innerHeight||600));if(L&&M){c=L,d=M;let u=c/d,v=n/o,h=1;if(O==="contain"?h=v>u?o/d:n/c:O==="cover"&&(h=v>u?n/c:o/d),O==="stretch")t.style.width="100%",t.style.height="100%";else{let f=Math.floor(c*h),P=Math.floor(d*h);t.style.width=`${f}px`,t.style.height=`${P}px`,t.style.position="absolute",t.style.left=`${Math.floor((n-f)/2)}px`,t.style.top=`${Math.floor((o-P)/2)}px`}}else if(M){d=M;let u=n/o;c=Math.floor(d*u),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else if(L){c=L;let u=n/o;d=Math.floor(c/u),t.style.width="100%",t.style.height="100%",t.style.position="absolute",t.style.left="0",t.style.top="0"}else c=n,d=o,t.style.width=`${c}px`,t.style.height=`${d}px`,t.style.position="absolute",t.style.left="0",t.style.top="0";let r=Math.max(1,Math.floor(c*x)),p=Math.max(1,Math.floor(d*x));t.width!==r&&(t.width=r),t.height!==p&&(t.height=p),m.setTransform(x,0,0,x,0,0),R.forEach(u=>u())}let k=new ResizeObserver(y);k.observe(document.body),g.push(()=>k.disconnect()),window.addEventListener("resize",y),g.push(()=>window.removeEventListener("resize",y));let S=window.visualViewport;S&&(S.addEventListener("resize",y),g.push(()=>S.removeEventListener("resize",y)));let E={stage:document.body,canvas:t,ctx:m,get width(){return c},get height(){return d},get dpr(){return x},resize:y,toStagePoint:e=>{let n=t.getBoundingClientRect(),o=(e.clientX-n.left)*(c/n.width),r=(e.clientY-n.top)*(d/n.height);return o=Math.max(0,Math.min(c,o)),r=Math.max(0,Math.min(d,r)),{x:o,y:r}},createDrag:()=>q(E.toStagePoint),onTap:e=>{b.push(e)},onMove:e=>{C.push(e)},onRelease:e=>{H.push(e)},on:(e,n,o,r)=>{if(/^(click|pointer|mouse|touch)/.test(e))try{let v=n.split(",").map(f=>`.star-ui ${f.trim()}`).join(", "),h=document.createElement("style");h.textContent=`${v} { pointer-events: auto; }`,document.head.appendChild(h),g.push(()=>h.remove())}catch{}let p=v=>{let f=v.target?.closest?.(n);f&&o.call(f,v)};document.addEventListener(e,p,r);let u=()=>document.removeEventListener(e,p,r);return g.push(u),u},loop:e=>{let o=0,r=!1,p=0,u=v=>{if(!r)return;let h=p?Math.min((v-p)/1e3,.1):0;p=v;try{e(h,v)}catch(f){console.error("[star-canvas] Game loop error:",f)}o=requestAnimationFrame(u)};return T={get running(){return r},start(){r||(r=!0,p=performance.now(),o=requestAnimationFrame(u))},stop(){r&&(r=!1,cancelAnimationFrame(o))}},T.start(),T},ui:{root:s,render:e=>{s.innerHTML!==e&&(s.innerHTML=e)},el:e=>s.querySelector(e),all:e=>s.querySelectorAll(e)},destroy:()=>{T?.stop(),g.forEach(e=>e()),g=[],R.clear(),t.parentElement&&t.parentElement.removeChild(t),s.parentElement&&s.parentElement.removeChild(s),a.parentElement&&a.parentElement.removeChild(a)},scoped:e=>{m.save();try{e()}finally{m.restore()}}};a.addEventListener("pointerdown",e=>{let n={...E.toStagePoint(e),event:e};b.forEach(o=>o(n))}),a.addEventListener("pointermove",e=>{let n={...E.toStagePoint(e),event:e};C.forEach(o=>o(n))}),a.addEventListener("pointerup",e=>{let n={...E.toStagePoint(e),event:e};H.forEach(o=>o(n))}),window.__STAR_DOM__={destroy:E.destroy},requestAnimationFrame(()=>requestAnimationFrame(()=>{y();try{l(E)}catch(e){console.error("[star-canvas] Game initialization failed:",e)}}))}function K(l,i={}){let s={preset:"responsive",...i};return W(l,s)}export{q as createDragState,K as game,j as version};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "star-canvas",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Canvas game utilities for reliable game initialization - part of Star SDK.",
|
|
6
6
|
"type": "module",
|
|
@@ -48,6 +48,16 @@
|
|
|
48
48
|
"clean": "rm -rf dist",
|
|
49
49
|
"prepublishOnly": "node ../../apps/web/scripts/process-sdks.js --package star-canvas --public-only && yarn build"
|
|
50
50
|
},
|
|
51
|
+
"license": "MIT",
|
|
52
|
+
"homepage": "https://buildwithstar.com/docs/sdk",
|
|
53
|
+
"repository": {
|
|
54
|
+
"type": "git",
|
|
55
|
+
"url": "https://github.com/buildwithstar/star-sdk",
|
|
56
|
+
"directory": "packages/star-canvas"
|
|
57
|
+
},
|
|
58
|
+
"bugs": {
|
|
59
|
+
"url": "https://github.com/buildwithstar/star-sdk/issues"
|
|
60
|
+
},
|
|
51
61
|
"keywords": [
|
|
52
62
|
"dom",
|
|
53
63
|
"canvas",
|