diff --git a/README.md b/README.md index d9bd119..ca3add0 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,11 @@ The kit the social aquarium game [Fishies](https://fishies.lol) is drawn with: r components, design tokens as CSS variables and as data, and the painted system icon set. See every piece live, with the Fishies Handbook, at **https://fishies.lol/ui**. +
+ Fishies UI components: buttons, round buttons, chips, badges, tags, stats, cards and tabs + The painted Fishies system icon set: care tools, places and lists +
+ ```sh bun add @fishies/ui ``` @@ -32,7 +37,7 @@ import '@fishies/ui/kit.css' // the components import { Button, Panel, configureIcons } from '@fishies/ui' // The icons ship in this package under icons/. Serve that folder, or point at a CDN copy: -configureIcons({ url: icon => `https://cdn.jsdelivr.net/npm/@fishies/ui@0.8.10/icons/${icon.name}.png` }) +configureIcons({ url: icon => `https://cdn.jsdelivr.net/npm/@fishies/ui@0.8.11/icons/${icon.name}.png` }) export function Shop() { return @@ -57,4 +62,4 @@ stylesheet that does, and every component animates with them; leave them out and | `icons/` | the painted icon set, one PNG per name, each twice its largest display size | | `handbook/` | the Fishies Handbook as Markdown | -Version 0.8.10: the minor version follows the Fishies release it was taken from; a patch is a fix to the kit itself. +Version 0.8.11: the minor version follows the Fishies release it was taken from; a patch is a fix to the kit itself. diff --git a/handbook/README.md b/handbook/README.md index 3f041b7..30c42ab 100644 --- a/handbook/README.md +++ b/handbook/README.md @@ -222,20 +222,25 @@ Named slots the motion system fills (apps/web/app/motion/motion.css, where each ### Reef Journal - [Open Water](https://fishies.lol/wiki/mechanics/open-water) · Swim out as one of your fish and meet other keepers. -- [Sea folk](https://fishies.lol/wiki/mechanics/npcs) · Ollie, Marlo, Captain Shelby and Pip live out in Open Water. Talk to them, make friends and hear their stories. +- [Sea folk](https://fishies.lol/wiki/mechanics/npcs) · Ollie, Marlo, Captain Shelby, Pip and Lumen live out in Open Water. Talk to them, make friends and hear their stories. +- [Characters](https://fishies.lol/wiki/npcs) · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for. +- [Creatures](https://fishies.lol/wiki/creatures) · The wild creatures of the sea that are not fish: the jellyfish and the golden shoal. +- [Lore](https://fishies.lol/wiki/lore) · The stories of the sea, told by the game: the Lantern Keepers and what they left behind. - [Expeditions](https://fishies.lol/wiki/mechanics/expeditions) · Send a team of your grown fish to the Trench or the Vents and wait for what they bring home. - [Swimming in a friend's aquarium](https://fishies.lol/wiki/mechanics/swim-visits) · Join another keeper's aquarium as one of your own fish. - [Halloween](https://fishies.lol/wiki/mechanics/halloween) · Trick-or-treating at other keepers’ aquariums while the Halloween party runs. +- [Places](https://fishies.lol/wiki/places) · Every Open Water place and every room behind a door: what stands there, what you find there and how to get there. +- [Events and seasons](https://fishies.lol/wiki/events) · The seasonal parties, the weekly contests and the things that happen out in the sea, with their dates, places and prizes. ### Places -- [Kelp Garden](https://fishies.lol/open-water/kelp-garden) · A coral garden that runs into a kelp forest. Room to roam. -- [Shipwreck](https://fishies.lol/open-water/shipwreck) · An old ship asleep on the sand, lanterns still lit. Swim through its ribs. -- [Market](https://fishies.lol/open-water/market) · A wanted board in the sunny shallows. Bring the fish the Market is asking for this week. -- [Lagoon](https://fishies.lol/open-water/lagoon) · Warm, bright shallows of seagrass and white sand. Play Pearl Catch at the oyster bed. +- [Kelp Garden](https://fishies.lol/open-water/kelp-garden) · A coral garden that runs into a kelp forest, home to the Gallery and the Pineapple House. Bite the kelp for Kelp Fibre. +- [Shipwreck](https://fishies.lol/open-water/shipwreck) · An old ship asleep on the sand, lanterns still lit. A chest is hidden along it every week, and its crates give Driftwood. +- [Market](https://fishies.lol/open-water/market) · Stalls in the sunny shallows where keepers trade fish, eggs and food. The wanted board asks for new fish every week. +- [Lagoon](https://fishies.lol/open-water/lagoon) · Warm, bright shallows of seagrass and white sand. Play Pearl Catch at the oyster bed and open the clams for Lagoon Shells. - [Arena](https://fishies.lol/open-water/arena) · An open stadium of coral stands round a start gate. Race the week's course for a place on the board. -- [Ice Shelf](https://fishies.lol/open-water/ice-shelf) · Pale water under an ice roof, frost ferns and ice spires. The seasonal parties are thrown here. -- [Ruins](https://fishies.lol/open-water/ruins) · A sunken temple among fallen columns, its door sealed. Six lost tablets are hidden across Open Water. +- [Ice Shelf](https://fishies.lol/open-water/ice-shelf) · Pale water under an ice roof, frost ferns and ice spires. The seasonal parties are thrown here, and the spires give Ice Crystals. +- [Ruins](https://fishies.lol/open-water/ruins) · A sunken temple among fallen columns, its door sealed. Six lost tablets are hidden across Open Water, and the columns give Stone Shards. - [Trench](https://fishies.lol/open-water/trench) · The dark deep at the reef's edge. Send a fish on an expedition into it from the diving bell. - [Vents](https://fishies.lol/open-water/vents) · Warm volcanic chimneys glowing in the dark. Send a fish on an expedition from the outpost. - [Pineapple House](https://fishies.lol/open-water/pineapple-house) · A house made from a pineapple, deep in the kelp. It is the reading room: tap it to open the Reef Journal. @@ -245,6 +250,21 @@ Named slots the motion system fills (apps/web/app/motion/motion.css, where each ### Catalogues +- [Collection pages](https://fishies.lol/wiki/collections) (24) · Every Reef Journal collection page: its pieces, where each one comes from and what finishing it pays. - [Species catalogue](https://fishies.lol/wiki/species) (106) · Every fish in the game with its growth time, unlock level, egg price and sale value. +- [Quest log](https://fishies.lol/wiki/quests) (138) · Every quest in the game with its goals, its place in its chain and its reward. +- [Quest chains](https://fishies.lol/wiki/quest-chains) (16) · The storyline and every quest chain, step by step, with what opens each one and what it pays in all. +- [Achievement list](https://fishies.lol/wiki/achievements) (40) · Every achievement with its tier and reward. The hidden ones stay behind a spoiler. +- [Badges](https://fishies.lol/wiki/badges) (13) · Every badge a keeper can wear on a profile and how it is earned. - [Decorations catalogue](https://fishies.lol/wiki/decorations) (74) · Every plant and ornament, what it costs and how long it keeps algae away. -- [Equipment catalogue](https://fishies.lol/wiki/equipment) (9) · Every filter, auto-feeder and heater with its price, unlock level and what it does. +- [Equipment catalogue](https://fishies.lol/wiki/equipment) (10) · Every filter, auto-feeder and heater with its price, unlock level and what it does. +- [Items](https://fishies.lol/wiki/items) (90) · Every food, material, tool, wardrobe piece and prize: what it does, where it comes from and what it is used in. +- [Workshop recipes](https://fishies.lol/wiki/recipes) (21) · Every mix the Workshop's bowl makes, with its ingredients, time, level and what comes out. +- [Research tree](https://fishies.lol/wiki/research) (31) · Every study and mastery in the Research tree, with its branch, level, Notes, coins and what it opens. +- [Rooms, themes and floors](https://fishies.lol/wiki/styles) (23) · Every Room around the glass, every water theme and every floor, with how each one is unlocked. +- [Upgrades](https://fishies.lol/wiki/upgrades) (5) · The bench tiers, the expedition kits, more aquariums, enlarging and the slot ladder, tier by tier. +- [Characters](https://fishies.lol/wiki/npcs) (5) · The neighbours out in the sea: where each one lives, how they talk, what they give and what they ask for. +- [Creatures](https://fishies.lol/wiki/creatures) (2) · The wild creatures of the sea that are not fish: the jellyfish and the golden shoal. +- [Lore](https://fishies.lol/wiki/lore) (1) · The stories of the sea, told by the game: the Lantern Keepers and what they left behind. +- [Places](https://fishies.lol/wiki/places) (13) · Every Open Water place and every room behind a door: what stands there, what you find there and how to get there. +- [Events and seasons](https://fishies.lol/wiki/events) (11) · The seasonal parties, the weekly contests and the things that happen out in the sea, with their dates, places and prizes. diff --git a/icons/bell.png b/icons/bell.png index 9b4cfca..5932a5e 100644 Binary files a/icons/bell.png and b/icons/bell.png differ diff --git a/icons/clean.png b/icons/clean.png index 806b072..e7742c2 100644 Binary files a/icons/clean.png and b/icons/clean.png differ diff --git a/icons/decorate.png b/icons/decorate.png index 4007409..86b2d04 100644 Binary files a/icons/decorate.png and b/icons/decorate.png differ diff --git a/icons/explore.png b/icons/explore.png index f94e629..d68c7f1 100644 Binary files a/icons/explore.png and b/icons/explore.png differ diff --git a/icons/feed.png b/icons/feed.png index 981c7be..4674872 100644 Binary files a/icons/feed.png and b/icons/feed.png differ diff --git a/icons/fullscreen.png b/icons/fullscreen.png index 198b794..339cd83 100644 Binary files a/icons/fullscreen.png and b/icons/fullscreen.png differ diff --git a/icons/inventory.png b/icons/inventory.png index 942938d..1b6cebe 100644 Binary files a/icons/inventory.png and b/icons/inventory.png differ diff --git a/icons/menu.png b/icons/menu.png index c17a425..9a368a9 100644 Binary files a/icons/menu.png and b/icons/menu.png differ diff --git a/icons/music.png b/icons/music.png index 6b7719c..41ae86f 100644 Binary files a/icons/music.png and b/icons/music.png differ diff --git a/icons/mute.png b/icons/mute.png index 3f3c834..ae1099b 100644 Binary files a/icons/mute.png and b/icons/mute.png differ diff --git a/icons/net.png b/icons/net.png index 84a21c3..5a29dc7 100644 Binary files a/icons/net.png and b/icons/net.png differ diff --git a/icons/pin.png b/icons/pin.png index eca161c..c97f4e4 100644 Binary files a/icons/pin.png and b/icons/pin.png differ diff --git a/icons/quest.png b/icons/quest.png index ebef7e3..5b9b3e3 100644 Binary files a/icons/quest.png and b/icons/quest.png differ diff --git a/icons/research.png b/icons/research.png new file mode 100644 index 0000000..60829de Binary files /dev/null and b/icons/research.png differ diff --git a/icons/shop.png b/icons/shop.png index 52d9dd0..8e61b93 100644 Binary files a/icons/shop.png and b/icons/shop.png differ diff --git a/icons/sound.png b/icons/sound.png index 3f24a23..d58d4aa 100644 Binary files a/icons/sound.png and b/icons/sound.png differ diff --git a/package.json b/package.json index 92927bc..cd06bc3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fishies/ui", - "version": "0.8.10", + "version": "0.8.11", "description": "The Fishies UI kit: reef-toy components, design tokens and the painted system icon set from the social aquarium game Fishies.", "keywords": [ "fishies", diff --git a/src/FishiesImg.tsx b/src/FishiesImg.tsx index f4a54c0..9223aad 100644 --- a/src/FishiesImg.tsx +++ b/src/FishiesImg.tsx @@ -1,7 +1,7 @@ 'use client' import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ImgHTMLAttributes, type Ref } from 'react' -import { reveal } from './fx-image' +import { imageFallback, reveal } from './fx-image' import './loader.css' const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect @@ -23,9 +23,16 @@ export default function FishiesImg({ ref, decoding, ...props }: ImgHTMLAttribute mounted.current = true reveal(img, first && img.complete) const settle = () => reveal(img) + delete img.dataset.webpFallback + + const failed = () => { + const png = imageFallback(img.currentSrc || img.src) + if (png && !img.dataset.webpFallback) { img.dataset.webpFallback = '1'; img.src = png; return } + reveal(img) + } img.addEventListener('load', settle) - img.addEventListener('error', settle) - return () => { img.removeEventListener('load', settle); img.removeEventListener('error', settle) } + img.addEventListener('error', failed) + return () => { img.removeEventListener('load', settle); img.removeEventListener('error', failed) } }, [props.src, props.srcSet]) return } diff --git a/src/fx-image.ts b/src/fx-image.ts index e118d85..18e3f20 100644 --- a/src/fx-image.ts +++ b/src/fx-image.ts @@ -1,5 +1,9 @@ export type FxState = 'wait' | 'fade' | 'ready' | 'error' +let alternative: (src: string) => string | null = () => null +export function configureImageFallback(find: (src: string) => string | null): void { alternative = find } +export const imageFallback = (src: string): string | null => alternative(src) + export function reveal(img: HTMLImageElement, instant?: boolean): void { if (img.getAttribute('data-fx') !== 'wait' || !img.complete) return const src = img.currentSrc || img.src diff --git a/src/icons.generated.ts b/src/icons.generated.ts index 4f1659a..9132d5a 100644 --- a/src/icons.generated.ts +++ b/src/icons.generated.ts @@ -1,15 +1,15 @@ export const ICON_FACTS: Readonly> = { "feed": { - "px": 56, - "sharpTo": 28, + "px": 168, + "sharpTo": 84, "usedBy": [ "Game", "Reef Journal" ] }, "net": { - "px": 56, - "sharpTo": 28, + "px": 168, + "sharpTo": 84, "usedBy": [ "Game", "Keeper OS", @@ -17,8 +17,8 @@ export const ICON_FACTS: Readonly