lilgotchi 0.0.0-stage → 3.0.2

package/dist/pets/boot.js

@@ -0,0 +1,161 @@
+import { applyPetColors, cleanColors } from './colors.js';
+import { selectedCharacter } from './storage.js';
+import { TamagotchiApp } from './game.js';
+import { trapOverlayTab } from './focus.js';
+import { overlayContentHeight } from './overlay-size.js';
+import { petType, validState, configureStorage } from './storage.js';
+import { configurationActionId } from '../widget/settings.js';
+
+const params=new URLSearchParams(location.search);
+const embedded=params.get('embed')==='1';
+let channel=null;
+let saved=null;
+let saveId=0;
+let lastConfiguration='';
+let configurationReady=false;
+let customColors={};
+const applyColors=()=>{applyPetColors(document.documentElement,selectedCharacter.id,customColors);window.app?.renderer.updateColors();window.app?.render();};
+function publishConfiguration(){
+  if(!channel||!window.app||!configurationReady)return;
+  const configuration={vacation:window.app.state.vacationAt>0,scanlines:document.documentElement.classList.contains('scanlines'),eink:window.app.eink,muted:window.app.sound.muted,classic:petType==='classic'};
+  const key=JSON.stringify(configuration);
+  if(key===lastConfiguration)return;
+  lastConfiguration=key;channel.postMessage({type:'configuration',configuration});
+}
+document.documentElement.dataset.pet=petType;
+document.documentElement.dataset.embedded=String(embedded);
+if(petType!=='classic') {
+  const style=document.createElement('link');
+  style.rel='stylesheet'; style.href=new URL('./custom-themes.css',import.meta.url).href;
+  const loaded=new Promise(resolve=>{style.onload=resolve;style.onerror=resolve;});
+  document.head.append(style); await loaded;
+  document.getElementById('eink-row').hidden=true;
+}
+function start(initial, muted=true, eink=false,scanlines=false) {
+  for(const overlay of document.querySelectorAll('.overlay')) {
+    const title=overlay.querySelector('.overlay-title');
+    title.id=`${overlay.id}-title`;overlay.setAttribute('aria-labelledby',title.id);
+  }
+  saved=initial;
+  applyColors();
+  if(embedded) configureStorage({load:()=>saved,save:state=>{
+    saved=state;
+    channel.postMessage({type:'save',id:++saveId,state});
+    publishConfiguration();
+  }});
+  window.app=new TamagotchiApp({scanlines,onScanlinesChange:value=>{
+    if(channel){channel.postMessage({type:'preference',name:'scanlines',value});publishConfiguration();}
+    else try{localStorage.setItem('lilgotchi:scanlines',String(value));}catch{}
+  },eink:petType==='classic'&&eink,onThemeChange:value=>{
+    applyColors();
+    if(channel){channel.postMessage({type:'preference',name:'eink',value});publishConfiguration();}
+    else try{localStorage.setItem('lilgotchi:eink',String(value));}catch{}
+  }});
+  applyColors();
+  if(!muted) window.app.handleAction('mute');
+  document.getElementById('mute-btn').addEventListener('click',()=>{channel?.postMessage({type:'preference',name:'muted',value:window.app.sound.muted});publishConfiguration();});
+  window.app.state.save();
+  if(channel) {
+    window.app.render();
+    channel.postMessage({type:'ready'});
+    configurationReady=true;
+    publishConfiguration();
+    setInterval(()=>channel.postMessage({type:'care-status',state:JSON.parse(JSON.stringify(window.app.state))}),5000);
+    let lastHeight=0;
+    const resize=()=>{
+      const device=document.getElementById('device');
+      const overlay=document.querySelector('.overlay.show');
+      let height=Math.ceil(device.getBoundingClientRect().height+24);
+      if(overlay) {
+        height=Math.max(height,overlayContentHeight(overlay)+12);
+      }
+      height=Math.min(1200,Math.max(100,height));
+      if(height!==lastHeight){lastHeight=height;channel.postMessage({type:'resize',height});}
+    };
+    const sizes=new ResizeObserver(resize);
+    sizes.observe(document.getElementById('device'));
+    for(const overlay of document.querySelectorAll('.overlay')) {
+      sizes.observe(overlay);
+      for(const child of overlay.children)sizes.observe(child);
+    }
+    new MutationObserver(resize).observe(document.body,{subtree:true,childList:true,attributes:true,attributeFilter:['class','hidden']});
+    resize();
+  }
+}
+if(embedded) {
+  const expectedOrigin=params.get('parentOrigin');
+  const nonce=params.get('nonce');
+  const connect=event=>{
+    if(event.source!==parent || event.origin!==expectedOrigin || event.data?.type!=='lilgotchi:connect' || event.data.nonce!==nonce || !event.ports[0] || channel) return;
+    window.removeEventListener('message',connect);
+    channel=event.ports[0];
+    channel.onmessage=event=>{
+      const message=event.data;
+      if(!message || typeof message.type!=='string') return;
+      if(message.type==='colors'){customColors=cleanColors(message.colors);applyColors();}
+      if(message.type==='configure' && window.app){
+        const id=configurationActionId(message.action,petType==='classic');
+        if(id){document.getElementById(id)?.click();publishConfiguration();}
+      }
+      if(message.type==='snapshot' && Number.isSafeInteger(message.id) && window.app) {
+        if(message.closing){window.app.arcade?.pause();window.app.interruptGuess();}
+        channel.postMessage({type:'snapshot',id:message.id,state:JSON.parse(JSON.stringify(window.app.state))});
+      }
+      if(message.type==='visibility' && typeof message.visible==='boolean' && window.app){
+        window.app.panelVisible=message.visible;
+        if(!message.visible){window.app.arcade?.pause();window.app.interruptGuess();}
+        window.app.sound.suspended=!message.visible;
+        if(message.visible){window.app.processMissedTime();window.app.updateButtons();}
+        else {
+          window.app.interruptGuess();
+          const overlay=document.querySelector('.overlay.show');
+          if(overlay && overlay.id!=='death-overlay' && overlay.id!=='arcade-overlay')window.app.closeOverlay(overlay.id);
+          window.app.state.save();
+        }
+      }
+      if(message.type==='save-status') document.getElementById('save-status').textContent=String(message.text||'').slice(0,160);
+    };
+    customColors=cleanColors(event.data.colors);
+    const initial=event.data.state;
+    start(validState(initial)?initial:null,event.data.muted!==false,event.data.eink===true,event.data.scanlines===true);
+  };
+  window.addEventListener('message',connect);
+} else {
+  let eink=false,scanlines=false;
+  try{eink=localStorage.getItem('lilgotchi:eink')==='true';scanlines=localStorage.getItem('lilgotchi:scanlines')==='true';}catch{}
+  start(null,true,eink,scanlines);
+}
+window.addEventListener('pagehide',()=>window.app?.state.save());
+window.restorePetSession=data=>{
+  if(!window.app || !validState(data)) return;
+  window.app.cancelGame();
+  window.app.state.vacationAt=data.vacationAt||0;
+  for(const key of Object.keys(window.app.state)) if(Object.hasOwn(data,key)) window.app.state[key]=data[key];
+  window.app.processMissedTime(); window.app.updateButtons();
+};
+document.addEventListener('keydown',event=>{
+  const overlay=document.querySelector('.overlay.show');
+  if(event.key==='Escape') {
+    event.preventDefault();
+    if(overlay && overlay.id!=='death-overlay' && overlay.id!=='arcade-overlay') {
+      window.app.gameActive=false; window.app.closeOverlay(overlay.id);
+    } else if(channel) channel.postMessage({type:'close'});
+    else if(overlay?.id==='arcade-overlay')window.app.closeOverlay(overlay.id);
+  }
+  if(overlay)trapOverlayTab(event,overlay);
+});
+
+// Frames cannot naturally chain a gesture to their containing drawer.
+const scrollHost=delta=>channel?.postMessage({type:'scroll',delta:Math.max(-1000,Math.min(1000,delta))});
+document.addEventListener('wheel',event=>{
+  if(!channel || event.ctrlKey)return;
+  event.preventDefault();
+  scrollHost(event.deltaY*(event.deltaMode===1?16:event.deltaMode===2?innerHeight:1));
+},{passive:false});
+let touchY=null;
+document.addEventListener('touchstart',event=>{touchY=event.touches.length===1?event.touches[0].clientY:null;},{passive:true});
+document.addEventListener('touchmove',event=>{
+  if(!channel || touchY===null || event.touches.length!==1)return;
+  const next=event.touches[0].clientY;
+  event.preventDefault();scrollHost(touchY-next);touchY=next;
+},{passive:false});

package/dist/pets/catalog.js

@@ -0,0 +1,32 @@
+// Public choices share one identity map across the host and game frame.
+export const catalog=Object.freeze([
+  {id:'slice',name:'Slice',skin:'pizza',character:'egg',stage:'egg'},
+  {id:'cyberpunk',name:'Cypunk',skin:'cyberpunk',character:'egg',stage:'egg'},
+  {id:'lilgotchi',name:'Lilgotchi',skin:'lilgotchi',character:'egg',stage:'egg'},
+  {id:'default',name:'Gen 1',skin:'classic',character:'egg',stage:'egg'},
+  {id:'original2',name:'Gen 2',skin:'classic',character:'egg',stage:'egg'},
+].map(Object.freeze));
+export const families=Object.freeze(catalog.map(choice=>choice.id));
+export const legacyFamily=Object.freeze(Object.fromEntries(catalog.map(choice=>[choice.id,choice.skin])));
+export const getCharacter=id=>catalog.find(choice=>choice.id===id);
+export function allowedCharacters(value=null){
+  if(value===null || value.trim()==='all')return [...families];
+  const ids=[...new Set(value.trim().split(/[\s,]+/).filter(Boolean))];
+  if(!ids.length || ids.some(id=>!families.includes(id)))throw new TypeError('Invalid characters setting. Use all or a list of available character IDs.');
+  return ids;
+}
+export function requireAllowed(id,allowed){
+  if(!families.includes(id))throw new TypeError('Unknown character');
+  if(!allowed.includes(id))throw new TypeError('This character is not available on this site.');
+  return id;
+}
+export const initialCharacter=(saved,requested,allowed)=>saved ? (allowed.includes(saved)?saved:allowed[0]) : (allowed.includes(requested)?requested:allowed[0]);
+export function frameCharacter(params){
+  const id=params.get('character');
+  if(id!==null){
+    const choice=getCharacter(id);
+    if(!choice || (params.has('pet') && params.get('pet')!==choice.skin))throw new TypeError('Invalid game character configuration');
+    return choice;
+  }
+  return getCharacter({classic:'default',pizza:'slice',cyberpunk:'cyberpunk',lilgotchi:'lilgotchi'}[params.get('pet')]||'slice');
+}

package/dist/pets/celebrations.js

@@ -0,0 +1,54 @@
+import { characterName } from './skins.js';
+
+const stages=new Set(['baby','child','teen','adult']);
+export function growthEvent(previous,next) {
+  if(!previous||!next||next.isDead||!stages.has(next.stage))return null;
+  if(previous.character===next.character&&previous.stage===next.stage)return null;
+  return {
+    key:`${next.bornAt}:${next.stageStartTime}:${next.character}`,
+    character:next.character,
+    stage:next.stage,
+    hatched:previous.stage==='egg',
+  };
+}
+
+// The card is outside the LCD and never steals focus or dismisses itself.
+export class GrowthCelebration {
+  constructor(element,{nameFor=characterName}={}) {
+    this.element=element;
+    this.nameFor=nameFor;
+    this.dismissed=new Set();
+    this.current=null;
+  }
+  observe(previous,next) {
+    const event=growthEvent(previous,next);
+    if(event)this.show(event);
+    return event;
+  }
+  show(event) {
+    if(!event||this.dismissed.has(event.key)||this.current?.key===event.key||!this.element)return;
+    this.current=event;
+    const doc=this.element.ownerDocument;
+    const text=doc.createElement('p');
+    text.className='growth-message';
+    text.setAttribute('role','status');
+    text.textContent=`${event.hatched?'Just hatched':'A little growth'}! Meet ${this.nameFor(event.character)}, your ${event.stage} pet.`;
+    const close=doc.createElement('button');
+    close.type='button';close.textContent='Got it';
+    close.setAttribute('aria-label','Dismiss growth update');
+    close.addEventListener('click',()=>this.dismiss());
+    this.element.replaceChildren(text,close);
+    this.element.classList.add('growth-card');
+    this.element.hidden=false;
+  }
+  dismiss() {
+    if(this.current)this.dismissed.add(this.current.key);
+    if(this.element)this.element.hidden=true;
+    this.current=null;
+  }
+  clear() {
+    if(this.element){this.element.hidden=true;this.element.replaceChildren();}
+    this.current=null;
+    this.dismissed.clear();
+  }
+}