Sprites.Store

The media library, saved in IndexedDB. Live reads for listings and counts, a two way document for the editor, and updates across tabs.

Sprites.Store

Sprites.Store.Id String

Sprites.Store.Id()

A fresh 128 bit random id, as a 32 character hex string. Every saved item keeps its id for life, so a reference to it stays stable across edits.

Returns the id string.

const id = Sprites.Store.Id();
const template = { media: 'sprite', platform: 'freeform' };
const doc = Sprites.Store.Open(id, template);
A fresh id starts a new document, saved on its first edit.

Sprites.Store.MediaCounts Live, array

Sprites.Store.MediaCounts()

The number of saved items in each media type, for the home page totals. It refreshes on any change, in this tab or another.

Returns a reactive value holding an array of { media, count }, most first. It is pending until the first read lands, so a Loading boundary shows a spinner while it loads.

const counts = Sprites.Store.MediaCounts();
Sprites.Ui.Loading(() => {
  Sprites.Reactive.Each(counts, (row) => {
    const media = Sprites.Reactive.Field(row, 'media');
    const count = Sprites.Reactive.Field(row, 'count');
    Sprites.Ui.Dom.Text(media, ' ', count);
  });
});
The totals render under a Loading boundary and follow the library live.

Sprites.Store.PlatformCounts Live, array

Sprites.Store.PlatformCounts(media)

The number of saved items on each platform within one media type, for the platform summary on a media page.

InputTypeDescription
mediaSprites.Reactive.Value or StringThe media type to count within, for example 'sprite'. Reactive or constant.

Returns a reactive value holding an array of { platform, count }, most first. Live across tabs.

const platforms = Sprites.Store.PlatformCounts('sprite');
Sprites.Ui.Loading(() => {
  Sprites.Reactive.Each(platforms, (row) => {
    const platform = Sprites.Reactive.Field(row, 'platform');
    const count = Sprites.Reactive.Field(row, 'count');
    Sprites.Ui.Dom.Text(platform, ' ', count);
  });
});
How many sprites exist for each platform.

Sprites.Store.List Live, array

Sprites.Store.List(query)

The saved items for a media page: their metadata and thumbnails, without the heavy data. It refreshes when the library changes, here or in another tab. The query is one reactive object of the search fields, built with Sprites.Data.Object, and each field may be reactive or constant.

FieldTypeDescription
query.mediaStringThe media type to list. Optional.
query.platformStringLimit to one platform. Optional.
query.searchStringKeep items whose name contains this text. Optional.
query.startNumberSkip this many, for paging. Optional.
query.countNumberReturn at most this many. Optional.
query.sortString'name' for alphabetical, otherwise most recently changed first.

Returns a reactive value holding an array of metadata records, each the whole envelope without its data.

const search = Sprites.Reactive.Value('');
const query = Sprites.Data.Object({ media: 'sprite', search: search, sort: 'recent' });
const items = Sprites.Store.List(query);
Sprites.Ui.Input.Text(search);
Sprites.Ui.Loading(() => {
  Sprites.Reactive.Each(items, (item) => {
    const name = Sprites.Reactive.Field(item, 'name');
    Sprites.Ui.Dom.Text(name);
  });
});
Typing in the search box refilters the list, which also refreshes when another tab changes the library.

Sprites.Store.Open Binding

Sprites.Store.Open(id, template)

The editor document: a two way value holding the whole record. It seeds a blank at once, so the editor is editable immediately, loads the stored record when it arrives, and saves edits in the background, debounced. Bind pieces with Sprites.Reactive.Field, so the name is Field(doc, 'name') and the pixels are Field(doc, 'data'). A new id is a record the load does not find, so it stays the blank until the first edit writes it.

InputTypeDescription
idSprites.Reactive.Value or StringThe item id to open. Reactive or constant.
templateObjectSupplies the media, platform and a fresh empty data buffer, used only when no record exists for the id.

Returns a two way Sprites.Reactive.Value of the record.

const blank = Sprites.Media.Sprite.New(16, 16);
const template = { media: 'sprite', platform: 'c64', data: blank };
const doc = Sprites.Store.Open(id, template);
const name = Sprites.Reactive.Field(doc, 'name');
const data = Sprites.Reactive.Field(doc, 'data');
Sprites.Ui.Input.Text(name);
Sprites.Media.Sprite.Editor({ state: data });
The name input and the sprite editor bind to fields of the document; edits autosave.

Sprites.Store.Name Binding

Sprites.Store.Name(id)

One item's name as a two way value, for an inline rename in a listing without loading its data. It echoes the edit at once and renames in the background, debounced.

InputTypeDescription
idSprites.Reactive.Value or StringThe item id to name. Reactive or constant.

Returns a two way Sprites.Reactive.Value of the name string.

const name = Sprites.Store.Name(id);
Sprites.Ui.Input.Text(name);
A rename field that loads only the name and saves it, debounced.

Sprites.Store.Remove Command

Sprites.Store.Remove(id)

A command that deletes an item. Act it from a button; while the delete runs the item is held, then the library updates everywhere.

InputTypeDescription
idSprites.Reactive.Value or StringThe item id to delete. Reactive or constant.

Returns a command value for Sprites.Ui.Button.Act.

const remove = Sprites.Store.Remove(id);
Sprites.Ui.Button.Act(remove, 'Delete');
Act the command from a button to delete the item.

Sprites.Store.Duplicate Command

Sprites.Store.Duplicate(id)

A command that copies an item under a fresh id, its name suffixed with copy. Act it from a button.

InputTypeDescription
idSprites.Reactive.Value or StringThe item id to copy. Reactive or constant.

Returns a command value for Sprites.Ui.Button.Act, giving the new id when it completes.

const duplicate = Sprites.Store.Duplicate(id);
Sprites.Ui.Button.Act(duplicate, 'Duplicate');
Copy the item under a fresh id.