feat(icons): rebrand app icon; slice the full set from one master
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Successful in 11s
CI / integration (pull_request) Successful in 23s
CI / ui (pull_request) Successful in 1m13s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m54s
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Successful in 11s
CI / integration (pull_request) Successful in 23s
CI / ui (pull_request) Successful in 1m13s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m54s
The SVG tracer export failed, so the icon was designed collaboratively from
scratch: a wooden «Э» tile with a ✻ score-subscript in Spectral Bold, wood
grain and diagonal light/shadow. Construction is specified in fractions of the
side in docs/ICON_BRANDBOOK.md; the reference generator, pinned Spectral font
and committed masters live in assets/icons/brand/.
One master -> the whole set (assets/icons/brand/build-set.mjs + build-android-res.mjs):
- web (ui/public): favicon.svg (light+dark via prefers-color-scheme), favicon.ico,
apple-touch, PWA any + maskable (+ dark variants), og-image reskinned to
«Эрудит» / Игра в слова
- Capacitor layers: ui/assets/{icon,icon-foreground,icon-background}.png
- Android launcher res, all densities, NO inset, + monochrome themed layer
(anydpi xml: background+foreground+monochrome)
- manual-upload art: assets/icons/brand/{vk,tg,store} (square, no rounding)
Primary variant light; dark where the platform can theme (favicon.svg). The old
LiberationSans generator (assets/icons/build) is removed; docs/ICONS.md retargeted
onto the single master. ANDROID_PLAN icon-rebrand item marked done.
This commit is contained in:
Ilia Denisov
+25
-24
@@ -64,11 +64,9 @@ Kept current as parts land so a fresh session resumes without re-deriving. Verif
|
||||
|
||||
> ### ▶ RESUME HERE — 2026-07-13 (documents track + release-prep)
|
||||
>
|
||||
> **Where we are.** The legal-documents track and the release-prep hygiene are DONE. The RuStore
|
||||
> release is now gated on **owner-side** items (icon vector, keystore, RuStore account). The owner is
|
||||
> bringing the **icon vector** next; **when it lands, resume by generating the icon set** per
|
||||
> [`docs/ICONS.md`](docs/ICONS.md), then continue the release chain below. Do not re-do or re-litigate
|
||||
> the finished work; do not re-ask the locked decisions.
|
||||
> **Where we are.** The legal-documents track, the release-prep hygiene, **and the icon rebrand** are
|
||||
> DONE. The RuStore release is now gated on **owner-side** items only (keystore, RuStore account) plus
|
||||
> the merge/tag chain. Do not re-do or re-litigate the finished work; do not re-ask the locked decisions.
|
||||
>
|
||||
> **Branches / PRs (current working branch: `feature/android-release-prep`).**
|
||||
> - `development` — has the **legal-documents track**, merged via **PR #253** (green, deployed to the
|
||||
@@ -102,13 +100,16 @@ Kept current as parts land so a fresh session resumes without re-deriving. Verif
|
||||
> added [`docs/ICONS.md`](docs/ICONS.md) (the single-master icon/logo format reference).
|
||||
>
|
||||
> **Remaining to release (owner-gated unless the agent is named).**
|
||||
> 1. **Icon rebrand.** OWNER brings a final **vector (SVG)** master (+ optional format guides). AGENT
|
||||
> then generates every target per `docs/ICONS.md`. Obligatory source files: the vector + a
|
||||
> **1024×1024 opaque PNG**; recommended: `ui/assets/icon-foreground.png` + `icon-background.png` for
|
||||
> a proper Android/iOS adaptive icon. Today the web favicon generator (`assets/icons/`) and the
|
||||
> hand-placed PWA icons drift — unify onto the new master. **Open sub-decision (settle with the owner
|
||||
> when the vector arrives):** retarget the `assets/icons/` generator onto the new vector, or drop in
|
||||
> the output files and keep the generator for the OG card only.
|
||||
> 1. **Icon rebrand — DONE.** The SVG-tracer export failed, so the icon was designed **collaboratively
|
||||
> from scratch** (wooden «Э» tile + ✻ subscript, Spectral Bold). The construction is fully specified
|
||||
> in fractions of the side in [`docs/ICON_BRANDBOOK.md`](docs/ICON_BRANDBOOK.md), with the reference
|
||||
> generator + pinned font + masters in [`assets/icons/brand/`](assets/icons/brand/). One master →
|
||||
> the whole set sliced by `brand/build-set.mjs` (+ `build-android-res.mjs`): web (favicon light+dark,
|
||||
> apple-touch, PWA any + maskable, og-image reskinned to «Эрудит» / Игра в слова), the Capacitor
|
||||
> layers `ui/assets/{icon,icon-foreground,icon-background}.png`, the Android launcher res (all
|
||||
> densities, **no inset**, **+ monochrome** themed layer), and manual-upload art (`brand/{vk,tg,store}`).
|
||||
> Primary variant **light**; dark where the platform can theme (favicon.svg). The old LiberationSans
|
||||
> generator (`assets/icons/build/`) is removed; targets are mapped in `docs/ICONS.md`.
|
||||
> 2. **Merge PR #254** → `development` (owner approval), then **promote `development` → `master`** and
|
||||
> **tag `vX.Y.Z`** for the release (the version stamps the APK `versionName`/`versionCode` and the
|
||||
> `X-Client-Version` header).
|
||||
@@ -138,9 +139,9 @@ Kept current as parts land so a fresh session resumes without re-deriving. Verif
|
||||
builds a debug APK that installs and **cold-launches to the Login screen** on the Pixel_10 emulator.
|
||||
`svelte-check` 0 errors, `vitest` 584 passed. Build recipe + toolchain gotchas live in
|
||||
`.claude/CLAUDE.md` → "Native Android build (Capacitor)".
|
||||
**Launcher icon:** a **temporary** placeholder is in place — `ui/assets/icon.png` (the maskable «Э»
|
||||
brand mark upscaled 512→1024) → `pnpm android:assets` regenerated the Android launcher/adaptive
|
||||
icons + splashes. Superseded by the icon rebrand below.
|
||||
**Launcher icon:** the temporary placeholder was **superseded by the icon rebrand** — the launcher
|
||||
now uses the two-layer adaptive icon (background + foreground + monochrome) generated from the brand
|
||||
master; see the RESUME block (item 1), `docs/ICON_BRANDBOOK.md` and `docs/ICONS.md`.
|
||||
- **B. Native web-build correctness — ✅ DONE & verified (2026-07-12).** New `ui/src/lib/origin.ts`
|
||||
`gatewayOrigin()`; the two `location.origin` landmines fixed (`game/Game.svelte` export/share URL,
|
||||
`screens/Wallet.svelte` site-root) — `transport.ts:32` already resolves via `VITE_GATEWAY_URL`, left
|
||||
@@ -251,11 +252,10 @@ Kept current as parts land so a fresh session resumes without re-deriving. Verif
|
||||
then O2–O7; the release chain (PR→development→contour→master→tag→dispatch `android-build`) follows. None of
|
||||
O1–O7 is started. Branch `feature/android-native`, local/unpushed.
|
||||
|
||||
Open logistics (not code): **mandatory icon rebrand (future)** — author ONE vector master and generate
|
||||
*every* icon from it (web `favicon.svg` / PWA `icon-*` / maskable, Android adaptive, future iOS). Today
|
||||
the formats drift — `favicon.svg` is a rounded bordered tile, `icon-maskable-512.png` a full-bleed
|
||||
square, visibly different — and the Android launcher icon is only a temporary upscale of the maskable
|
||||
(`capacitor-assets` insets it 16.7% into the adaptive safe zone). `~/.claude/bin/gitea-ci-watch.py` is present.
|
||||
Icon rebrand — **DONE** (was "one master → every icon"): a single Spectral «Э» master now drives web
|
||||
(favicon light+dark / PWA any + maskable / apple-touch / og), the Capacitor layers and the Android
|
||||
adaptive res (no inset, + monochrome), plus VK/TG/store art. Specced in `docs/ICON_BRANDBOOK.md`,
|
||||
mapped in `docs/ICONS.md`, generated from `assets/icons/brand/`. `~/.claude/bin/gitea-ci-watch.py` is present.
|
||||
RuStore publication prerequisites gate release only.
|
||||
|
||||
---
|
||||
@@ -404,8 +404,8 @@ is: scaffold → native-correct → gate → offline-first → CI → docs → r
|
||||
```
|
||||
Call once from bootstrap. `atNavigationRoot` = current route is `lobby`/`login`
|
||||
(mirror `routeDepth(...) === 0` from `App.svelte:50-54`, reading `router.svelte.ts`).
|
||||
- **Launcher icon (owner asset):** owner supplies a 1024×1024 «Э» icon at `ui/assets/icon.png`
|
||||
(+ optional `splash.png`); `pnpm android:assets` generates adaptive icons.
|
||||
- **Launcher icon:** DONE — generated from the brand master into the Capacitor layers
|
||||
`ui/assets/{icon,icon-foreground,icon-background}.png` and the Android res; see `docs/ICONS.md`.
|
||||
|
||||
**Done when:** `npx cap sync android` succeeds against a real `pnpm build`, and (from `ui/android/`)
|
||||
`./gradlew assembleDebug` produces a debug APK that installs and cold-launches to the login screen.
|
||||
@@ -768,8 +768,9 @@ Wire in `ui/android/app/build.gradle` `defaultConfig`:
|
||||
> **Status 2026-07-13 — see the ▶ RESUME block at the top of §Progress.** Since this chain was
|
||||
> written, a **legal-documents track** was added and merged (PR #253 — the RuStore hosted
|
||||
> privacy-policy URL and the `/privacy/ /eula/ /offer/` pages), and a **release-prep hygiene** patch is
|
||||
> in flight (PR #254, open). The remaining gates are the **icon vector**, the **keystore** and the
|
||||
> **RuStore account** (all owner-side). The steps below are the original release chain; the resume
|
||||
> in flight (PR #254, open), and the **icon rebrand is DONE** (brand master → full set; see the RESUME
|
||||
> block). The remaining gates are the **keystore** and the **RuStore account** (owner-side). The steps
|
||||
> below are the original release chain; the resume
|
||||
> block supersedes them with the current, exhaustive state.
|
||||
|
||||
0. **Land the offline-model redesign — ✅ DONE (O1–O7, 2026-07-13; staged detail below).** Resolved the deferred
|
||||
|
||||
+14
-37
@@ -1,41 +1,18 @@
|
||||
# Erudit — site icons + Open Graph card
|
||||
# Icons
|
||||
|
||||
The favicon set and the `og:image` link-preview card for the public landing
|
||||
(`ui/landing.html`) and the SPA shell (`ui/index.html`). Same design language as the
|
||||
[VK loading-screen logo](../vk/README.md): the wooden Erudit «Э» tile (score `8`),
|
||||
with the wordmark on the app's dark board green (`ui/src/app.css` tokens).
|
||||
|
||||
| Output (committed to `ui/public/`) | Purpose |
|
||||
|------|---------|
|
||||
| `favicon.svg` | Vector favicon, transparent; tile + «Э» only (the score is illegible below ~32 px). |
|
||||
| `favicon.ico` | 32×32 PNG-in-ICO fallback (also answers the browsers' blind `/favicon.ico` probe). |
|
||||
| `apple-touch-icon.png` | 180×180 opaque full-bleed tile; iOS masks its own corners. |
|
||||
| `og-image.png` | 1200×630 card: tile + «Эрудит / Скрэббл — игра в слова». Referenced absolutely as `https://erudit-game.ru/og-image.png`. |
|
||||
|
||||
## How it works
|
||||
|
||||
`build/extract.js` extracts the needed glyph outlines (tile glyphs + every wordmark
|
||||
character) from LiberationSans (Arial-metric, the game's font stack) with their
|
||||
advance widths into `build/glyphs.json` (committed). `build/generate.js` composes
|
||||
plain SVG from those outlines — no font is needed at generation time — writes
|
||||
`favicon.svg` and rasterises the PNG/ICO outputs by screenshotting the SVGs with the
|
||||
`ui` package's Playwright chromium (`@playwright/test`); the `.ico` container is
|
||||
assembled in-script (a single PNG entry). Raster bytes therefore depend on the
|
||||
installed chromium version; the SVG sources are deterministic.
|
||||
|
||||
## Regenerate
|
||||
|
||||
Requirements: Node ≥ 18, `ui` installed (`pnpm install`, provides Playwright).
|
||||
`extract.js` additionally needs `opentype.js` (`npm i opentype.js`); **`generate.js`
|
||||
needs no extra packages**.
|
||||
The whole shipped icon set is sliced from **one master** — see
|
||||
[`brand/`](brand/) for the reference generator, the pinned font and the committed
|
||||
outputs, and [`../../docs/ICON_BRANDBOOK.md`](../../docs/ICON_BRANDBOOK.md) for how the
|
||||
mark is constructed. The per-platform target map (which file goes where) is in
|
||||
[`../../docs/ICONS.md`](../../docs/ICONS.md).
|
||||
|
||||
```sh
|
||||
cd assets/icons
|
||||
|
||||
# 1. (optional) re-extract the glyphs — only if the font or the wordmark changes:
|
||||
# default font: /usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf
|
||||
node build/extract.js [/path/to/font.ttf] # -> build/glyphs.json
|
||||
|
||||
# 2. regenerate everything in ui/public/:
|
||||
node build/generate.js
|
||||
cd brand
|
||||
npm i opentype.js
|
||||
node build-set.mjs # web (ui/public) + Capacitor layers (ui/assets) + vk/ tg/ store/
|
||||
node build-android-res.mjs # Android launcher resources (all densities + monochrome)
|
||||
```
|
||||
|
||||
> The earlier `build/` pipeline (LiberationSans glyph outlines → favicon/apple-touch/OG)
|
||||
> was replaced by `brand/` when the icon was rebranded onto the Spectral «Э» master.
|
||||
> The separate VK loading-screen animation lives in [`../vk/`](../vk/) and is unrelated.
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
package-lock.json
|
||||
@@ -0,0 +1,32 @@
|
||||
# Erudit icon — brand master
|
||||
|
||||
The reference construction of the Erudit app icon. The authoritative, human-readable
|
||||
spec lives in [`docs/ICON_BRANDBOOK.md`](../../../docs/ICON_BRANDBOOK.md); this folder
|
||||
holds the machine reproduction of exactly what that document describes.
|
||||
|
||||
| File | What |
|
||||
|------|------|
|
||||
| `build-icon.mjs` | reference generator — every dimension is a fraction of the side, matching the brand book |
|
||||
| `render-png.mjs` | rasterises an icon SVG to PNG via the `ui` package's Playwright chromium |
|
||||
| `Spectral-Bold.ttf` | the «Э» typeface (SIL OFL, `Spectral-OFL.txt`) — pinned so the letter never drifts |
|
||||
| `icon-light.svg` / `.png` | the light master (1024) |
|
||||
| `icon-dark.svg` / `.png` | the dark master (1024) |
|
||||
| `icon-construction.svg` / `.png` | the percent-annotated construction scheme (figure in the brand book) |
|
||||
|
||||
## Regenerate
|
||||
|
||||
```sh
|
||||
cd assets/icons/brand
|
||||
npm i opentype.js # the only extra dep; render uses ui's chromium
|
||||
|
||||
node build-icon.mjs --variant light > icon-light.svg
|
||||
node build-icon.mjs --variant dark > icon-dark.svg
|
||||
node build-icon.mjs --variant light --scheme > icon-construction.svg
|
||||
|
||||
node render-png.mjs icon-light.svg icon-light.png 1024
|
||||
node render-png.mjs icon-dark.svg icon-dark.png 1024
|
||||
node render-png.mjs icon-construction.svg icon-construction.png 2048
|
||||
```
|
||||
|
||||
The SVGs are resolution-free; render at any size. Downstream slicing (favicon / PWA /
|
||||
iOS / Android) is a separate step — see [`docs/ICONS.md`](../../../docs/ICONS.md).
|
||||
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2017 The Spectral Project Authors (https://github.com/productiontype/Spectral)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@@ -0,0 +1,47 @@
|
||||
'use strict';
|
||||
// Generate the Android launcher resources from the committed layers, at every
|
||||
// density, with NO inset (our layers already fill the 108 dp canvas) and a
|
||||
// monochrome (themed) layer. Run build-set.mjs first (it writes the layer PNGs).
|
||||
//
|
||||
// npm i opentype.js # (only build-icon/build-set need it; this reads PNGs)
|
||||
// node build-set.mjs && node build-android-res.mjs
|
||||
//
|
||||
// Writes ui/android/app/src/main/res/mipmap-*/ic_launcher{,_round,_foreground,
|
||||
// _background,_monochrome}.png. The two mipmap-anydpi-v26/*.xml are committed by hand.
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
|
||||
const DIR = dirname(fileURLToPath(import.meta.url));
|
||||
const ROOT = join(DIR, '..', '..', '..');
|
||||
const RES = join(ROOT, 'ui', 'android', 'app', 'src', 'main', 'res');
|
||||
const uri = p => 'data:image/png;base64,' + readFileSync(p).toString('base64');
|
||||
const BG = uri(join(ROOT, 'ui', 'assets', 'icon-background.png'));
|
||||
const FG = uri(join(ROOT, 'ui', 'assets', 'icon-foreground.png'));
|
||||
const MONO = uri(join(DIR, 'android-monochrome.png'));
|
||||
|
||||
// density: [adaptive-layer px (108 dp), legacy launcher px (48 dp)]
|
||||
const D = { ldpi: [81, 36], mdpi: [108, 48], hdpi: [162, 72], xhdpi: [216, 96], xxhdpi: [324, 144], xxxhdpi: [432, 192] };
|
||||
|
||||
const pw = await import(join(ROOT, 'ui', 'node_modules', '@playwright', 'test', 'index.js'));
|
||||
const { chromium } = pw.default ?? pw;
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage({ deviceScaleFactor: 1 });
|
||||
const im = (u, s) => `<img src="${u}" width="${s}" height="${s}" style="display:block">`;
|
||||
async function shot(html, s, transparent) {
|
||||
await page.setViewportSize({ width: s, height: s });
|
||||
await page.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}#r{width:${s}px;height:${s}px}</style><div id=r>${html}</div>`, { waitUntil: 'networkidle' });
|
||||
return page.locator('#r').screenshot({ omitBackground: !!transparent });
|
||||
}
|
||||
for (const [d, [fg, lg]] of Object.entries(D)) {
|
||||
const dir = join(RES, `mipmap-${d}`);
|
||||
writeFileSync(join(dir, 'ic_launcher_background.png'), await shot(im(BG, fg), fg, false));
|
||||
writeFileSync(join(dir, 'ic_launcher_foreground.png'), await shot(im(FG, fg), fg, true));
|
||||
writeFileSync(join(dir, 'ic_launcher_monochrome.png'), await shot(im(MONO, fg), fg, true));
|
||||
const comp = `<div style="position:relative;width:${lg}px;height:${lg}px">${im(BG, lg)}<div style="position:absolute;inset:0">${im(FG, lg)}</div></div>`;
|
||||
writeFileSync(join(dir, 'ic_launcher.png'), await shot(comp, lg, false));
|
||||
const round = `<div style="width:${lg}px;height:${lg}px;border-radius:50%;overflow:hidden;position:relative">${im(BG, lg)}<div style="position:absolute;inset:0">${im(FG, lg)}</div></div>`;
|
||||
writeFileSync(join(dir, 'ic_launcher_round.png'), await shot(round, lg, true));
|
||||
console.log('mipmap-' + d, 'ok');
|
||||
}
|
||||
await browser.close();
|
||||
@@ -0,0 +1,159 @@
|
||||
'use strict';
|
||||
// Erudit app-icon — the reference generator. Every dimension below is a FRACTION
|
||||
// of the icon side, so this file reads the same as docs/ICON_BRANDBOOK.md and the
|
||||
// icon reproduces at any resolution. Emits one variant/layer's SVG to stdout.
|
||||
//
|
||||
// node build-icon.mjs --variant light|dark [--layer full|background|foreground] [--scheme] > icon.svg
|
||||
//
|
||||
// Layers (for Android adaptive icons):
|
||||
// full the standalone master (rounded tile + mark) — iOS / PWA / favicon
|
||||
// background wood + grain + light/shadow, full-bleed square (the OS applies the mask)
|
||||
// foreground only «Э» + ✻, transparent, re-placed for the round mask (see FG_* below)
|
||||
//
|
||||
// Deps: opentype.js (npm i opentype.js). Font: ./Spectral-Bold.ttf (OFL, bundled).
|
||||
import { readFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
import opentype from 'opentype.js';
|
||||
|
||||
const DIR = dirname(fileURLToPath(import.meta.url));
|
||||
const args = process.argv.slice(2);
|
||||
const has = f => args.includes('--' + f);
|
||||
const val = (f, d) => { const i = args.indexOf('--' + f); return i >= 0 ? args[i + 1] : d; };
|
||||
|
||||
// ---- the design, in fractions of the side ----
|
||||
const S = 1024; // reference side (the icon is resolution-free)
|
||||
const RADIUS = 0.17; // tile corner radius (full master)
|
||||
const STAR_BULB = 0.22; // spoke-end (and hub) radius, as fraction of star radius
|
||||
const STAR_SPOKES = 6;
|
||||
const GRAIN_COLS = 6, GRAIN_W = 1 / 32, GRAIN_SHIFT = 1 / 16, GRAIN_TILT = 4;
|
||||
const SHEEN = 0.15; // white, transparent bottom-left -> this alpha top-right
|
||||
const SHADE = 0.15; // black, this alpha bottom-left -> transparent top-right
|
||||
|
||||
// The mark, placed for the standalone master (bottom-right biased, full-bleed):
|
||||
const MASTER = { lh: 0.6055, lc: [0.4814, 0.4922], sd: 0.1729, sc: [0.7881, 0.7881] };
|
||||
// The mark, placed for the Android foreground layer (centred-ish inside the 61% safe
|
||||
// zone, nudged right 8% / down 3% for optical balance under the round mask; smaller ✻):
|
||||
const FOREGROUND = { lh: 0.5391, lc: [0.5234, 0.4951], sd: 0.1318, sc: [0.7627, 0.7266] };
|
||||
|
||||
const PALETTE = {
|
||||
light: { wood: '#e6b053', ink: '#5a3a12', grain: '#d8a54e' },
|
||||
dark: { wood: '#4a3316', ink: '#f2d9a0', grain: '#432e14' },
|
||||
};
|
||||
|
||||
// Layers:
|
||||
// full rounded tile + master mark (favicon.svg — browser rounds nothing)
|
||||
// flat square tile + master mark (apple-touch, PWA "any" — OS rounds)
|
||||
// background square tile, no mark (Android adaptive background)
|
||||
// foreground mark only, transparent (Android adaptive foreground)
|
||||
// maskable square tile + foreground mark (PWA maskable — safe-zone aware)
|
||||
// monochrome foreground mark only, flat colour (Android 13+ themed layer)
|
||||
const LAYERS = ['full', 'flat', 'background', 'foreground', 'maskable', 'monochrome'];
|
||||
const variant = val('variant', 'light');
|
||||
const layer = val('layer', 'full');
|
||||
const P = PALETTE[variant];
|
||||
if (!P) { console.error(`unknown --variant ${variant} (light|dark)`); process.exit(1); }
|
||||
if (!LAYERS.includes(layer)) { console.error(`unknown --layer ${layer} (${LAYERS.join('|')})`); process.exit(1); }
|
||||
|
||||
const usesForegroundPlacement = ['foreground', 'maskable', 'monochrome'].includes(layer);
|
||||
const drawBg = ['full', 'flat', 'background', 'maskable'].includes(layer);
|
||||
const drawMark = layer !== 'background';
|
||||
const MARK = usesForegroundPlacement ? FOREGROUND : MASTER;
|
||||
const inkColour = layer === 'monochrome' ? val('mono', '#ffffff') : P.ink;
|
||||
const RX = layer === 'full' ? RADIUS * S : 0; // only the standalone master keeps rounded corners
|
||||
const font = opentype.parse(readFileSync(join(DIR, 'Spectral-Bold.ttf')).buffer);
|
||||
|
||||
// «Э» outline scaled so its ink bounding box is MARK.lh of the side, box centred on MARK.lc.
|
||||
function letterSvg() {
|
||||
const g = font.charToGlyph('Э');
|
||||
const h0 = (() => { const b = g.getPath(0, 0, 1000).getBoundingBox(); return b.y2 - b.y1; })();
|
||||
const scale = (MARK.lh * S) / h0;
|
||||
const p = g.getPath(0, 0, 1000 * scale);
|
||||
const bb = p.getBoundingBox();
|
||||
const w = bb.x2 - bb.x1, h = bb.y2 - bb.y1;
|
||||
const tx = MARK.lc[0] * S - (bb.x1 + w / 2);
|
||||
const ty = MARK.lc[1] * S - (bb.y1 + h / 2);
|
||||
return { svg: `<path transform="translate(${tx.toFixed(2)} ${ty.toFixed(2)})" d="${p.toPathData(2)}" fill="${inkColour}"/>`,
|
||||
box: { x: bb.x1 + tx, y: bb.y1 + ty, w, h } };
|
||||
}
|
||||
|
||||
// Teardrop-spoked asterisk ✻: each spoke tapers to a point at the centre and ends
|
||||
// in a round bulb; a central disc equal to the bulb fuses them.
|
||||
function starPath() {
|
||||
const cx = MARK.sc[0] * S, cy = MARK.sc[1] * S, Rout = MARK.sd * S / 2;
|
||||
const rb = Rout * STAR_BULB, R = Rout - rb;
|
||||
const L = Math.sqrt(R * R - rb * rb), theta = Math.asin(rb / R);
|
||||
const rot = (v, t) => [v[0] * Math.cos(t) - v[1] * Math.sin(t), v[0] * Math.sin(t) + v[1] * Math.cos(t)];
|
||||
let d = '';
|
||||
for (let k = 0; k < STAR_SPOKES; k++) {
|
||||
const a = -Math.PI / 2 + k * 2 * Math.PI / STAR_SPOKES;
|
||||
const u = [Math.cos(a), Math.sin(a)];
|
||||
const d1 = rot(u, theta), d2 = rot(u, -theta);
|
||||
const T1 = [cx + L * d1[0], cy + L * d1[1]], T2 = [cx + L * d2[0], cy + L * d2[1]];
|
||||
d += `M${cx.toFixed(2)} ${cy.toFixed(2)} L${T1[0].toFixed(2)} ${T1[1].toFixed(2)} A${rb.toFixed(2)} ${rb.toFixed(2)} 0 1 0 ${T2[0].toFixed(2)} ${T2[1].toFixed(2)} Z `;
|
||||
}
|
||||
d += `M${cx} ${cy} m${-rb} 0 a${rb} ${rb} 0 1 0 ${2 * rb} 0 a${rb} ${rb} 0 1 0 ${-2 * rb} 0 Z`;
|
||||
return `<path d="${d}" fill="${inkColour}"/>`;
|
||||
}
|
||||
|
||||
function grain() {
|
||||
const colW = S / GRAIN_COLS, sw = GRAIN_W * S, shift = GRAIN_SHIFT * S;
|
||||
const yTop = -0.2 * S, yBot = 1.2 * S, cy = S / 2;
|
||||
let s = '';
|
||||
for (let i = 1; i <= GRAIN_COLS; i++) {
|
||||
const xr = i * colW - shift, x = xr - sw, cx = xr - sw / 2;
|
||||
s += `<rect x="${x.toFixed(2)}" y="${yTop.toFixed(2)}" width="${sw.toFixed(2)}" height="${(yBot - yTop).toFixed(2)}" fill="${P.grain}" transform="rotate(${GRAIN_TILT} ${cx.toFixed(2)} ${cy.toFixed(2)})"/>`;
|
||||
}
|
||||
return `<g clip-path="url(#tile)">${s}</g>`;
|
||||
}
|
||||
|
||||
let body = '';
|
||||
const L = letterSvg();
|
||||
if (drawBg) { // tile + grain + light/shadow (the background)
|
||||
body += `<rect width="${S}" height="${S}" rx="${RX}" fill="${P.wood}"/>`
|
||||
+ `<defs><clipPath id="tile"><rect width="${S}" height="${S}" rx="${RX}"/></clipPath>`
|
||||
+ `<linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="${S}" x2="${S}" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="${SHEEN}"/></linearGradient>`
|
||||
+ `<linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="${S}" x2="${S}" y2="0"><stop offset="0" stop-color="#000" stop-opacity="${SHADE}"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient>`
|
||||
+ `</defs>`
|
||||
+ grain()
|
||||
+ `<rect width="${S}" height="${S}" fill="url(#sheen)" clip-path="url(#tile)"/>`
|
||||
+ `<rect width="${S}" height="${S}" fill="url(#shade)" clip-path="url(#tile)"/>`;
|
||||
}
|
||||
if (drawMark) body += L.svg + starPath(); // the mark
|
||||
if (has('scheme')) body += scheme(L);
|
||||
|
||||
process.stdout.write(`<svg xmlns="http://www.w3.org/2000/svg" width="${S}" height="${S}" viewBox="0 0 ${S} ${S}">${body}</svg>\n`);
|
||||
|
||||
// Percent-based construction overlay for the brand book (full master only).
|
||||
function scheme(L) {
|
||||
const pc = n => (100 * n / S).toFixed(1) + '%';
|
||||
const GC = '#0f172a', BX = '#d81b60', AC = '#0d9488';
|
||||
const halo = 'paint-order="stroke" stroke="#fff" stroke-width="4"';
|
||||
const cx = MARK.sc[0] * S, cy = MARK.sc[1] * S, sd = MARK.sd * S;
|
||||
let g = `<g font-family="'Helvetica Neue',Arial,sans-serif">`;
|
||||
for (let f = 1; f <= 3; f++) {
|
||||
const p = f * S / 4;
|
||||
g += `<line x1="${p}" y1="0" x2="${p}" y2="${S}" stroke="${GC}" stroke-opacity="0.18" stroke-width="1.2"/>`;
|
||||
g += `<line x1="0" y1="${p}" x2="${S}" y2="${p}" stroke="${GC}" stroke-opacity="0.18" stroke-width="1.2"/>`;
|
||||
g += `<text x="${p + 4}" y="20" font-size="17" font-weight="700" fill="${GC}" ${halo}>${f * 25}%</text>`;
|
||||
g += `<text x="4" y="${p - 4}" font-size="17" font-weight="700" fill="${GC}" ${halo}>${f * 25}%</text>`;
|
||||
}
|
||||
g += `<line x1="${0.14 * S}" y1="${0.86 * S}" x2="${0.86 * S}" y2="${0.14 * S}" stroke="${AC}" stroke-width="3" stroke-dasharray="3 8" stroke-linecap="round"/>`;
|
||||
g += `<circle cx="${0.86 * S}" cy="${0.14 * S}" r="6" fill="${AC}"/><circle cx="${0.14 * S}" cy="${0.86 * S}" r="6" fill="${AC}"/>`;
|
||||
g += `<text x="${0.86 * S - 6}" y="${0.14 * S - 12}" text-anchor="end" font-size="18" font-weight="700" fill="${AC}" ${halo}>light: white 0%→15%</text>`;
|
||||
g += `<text x="${0.14 * S + 10}" y="${0.86 * S + 26}" font-size="18" font-weight="700" fill="${AC}" ${halo}>shadow: black 15%→0%</text>`;
|
||||
const { x, y, w, h } = L.box;
|
||||
g += `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${w.toFixed(1)}" height="${h.toFixed(1)}" fill="none" stroke="${BX}" stroke-width="2.5"/>`;
|
||||
g += `<line x1="${MARK.lc[0] * S}" y1="${MARK.lc[1] * S - 16}" x2="${MARK.lc[0] * S}" y2="${MARK.lc[1] * S + 16}" stroke="${BX}" stroke-width="2.5"/><line x1="${MARK.lc[0] * S - 16}" y1="${MARK.lc[1] * S}" x2="${MARK.lc[0] * S + 16}" y2="${MARK.lc[1] * S}" stroke="${BX}" stroke-width="2.5"/>`;
|
||||
g += `<text x="${x.toFixed(1)}" y="${(y - 10).toFixed(1)}" font-size="19" font-weight="700" fill="${BX}" ${halo}>«Э» Spectral Bold · box H ${pc(h)} · W ${pc(w)}</text>`;
|
||||
g += `<text x="${x.toFixed(1)}" y="${(y + h + 24).toFixed(1)}" font-size="18" font-weight="700" fill="${BX}" ${halo}>box center ${pc(MARK.lc[0] * S)} / ${pc(MARK.lc[1] * S)}</text>`;
|
||||
g += `<rect x="${cx - sd / 2}" y="${cy - sd / 2}" width="${sd}" height="${sd}" fill="none" stroke="${BX}" stroke-width="2.5"/>`;
|
||||
g += `<line x1="${cx}" y1="${cy - 14}" x2="${cx}" y2="${cy + 14}" stroke="${BX}" stroke-width="2.5"/><line x1="${cx - 14}" y1="${cy}" x2="${cx + 14}" y2="${cy}" stroke="${BX}" stroke-width="2.5"/>`;
|
||||
g += `<text x="${(cx + sd / 2).toFixed(1)}" y="${(cy - sd / 2 - 10).toFixed(1)}" text-anchor="end" font-size="18" font-weight="700" fill="${BX}" ${halo}>✻ Ø ${pc(sd)} · center ${pc(cx)} / ${pc(cy)}</text>`;
|
||||
g += `<text x="${RX + 14}" y="${RX - 6}" font-size="17" font-weight="700" fill="${GC}" ${halo}>corner r = 17%</text>`;
|
||||
g += `<path d="M4 ${RX} A ${RX} ${RX} 0 0 1 ${RX} 4" fill="none" stroke="${GC}" stroke-width="2" stroke-dasharray="5 5"/>`;
|
||||
g += `<rect x="${0.03 * S}" y="${S - 96}" width="${0.94 * S}" height="74" rx="12" fill="#0f172a" fill-opacity="0.82"/>`;
|
||||
g += `<text x="${0.055 * S}" y="${S - 64}" font-size="18" font-weight="600" fill="#fff">Wood grain: 6 equal columns; a vertical stripe on each column's right edge,</text>`;
|
||||
g += `<text x="${0.055 * S}" y="${S - 40}" font-size="18" font-weight="600" fill="#fff">width 1/32 of side; the whole set shifted left 1/16; every stripe tilted 4°.</text>`;
|
||||
return g + `</g>`;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
'use strict';
|
||||
// Slice the whole shipped icon set from the brand master (build-icon.mjs). Renders
|
||||
// with the ui package's Playwright chromium. See docs/ICONS.md for the target map.
|
||||
//
|
||||
// npm i opentype.js && node build-set.mjs
|
||||
//
|
||||
// Writes: ui/public/* (web), ui/assets/* (Capacitor layers), ./vk/* and ./store/*
|
||||
// (manual-upload art). Wiring (manifest, html, Android res) is done separately.
|
||||
import { execFileSync } from 'node:child_process';
|
||||
import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
|
||||
const DIR = dirname(fileURLToPath(import.meta.url));
|
||||
const UI = join(DIR, '..', '..', '..', 'ui');
|
||||
const PUB = join(UI, 'public'), ASSETS = join(UI, 'assets');
|
||||
const VK = join(DIR, 'vk'), STORE = join(DIR, 'store'), TG = join(DIR, 'tg');
|
||||
[VK, STORE, TG].forEach(d => mkdirSync(d, { recursive: true }));
|
||||
|
||||
// one SVG string for a variant+layer from the reference generator
|
||||
const svgFor = (variant, layer) =>
|
||||
execFileSync('node', [join(DIR, 'build-icon.mjs'), '--variant', variant, '--layer', layer], { encoding: 'utf8' });
|
||||
|
||||
const pw = await import(join(UI, 'node_modules', '@playwright', 'test', 'index.js'));
|
||||
const { chromium } = pw.default ?? pw;
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
|
||||
async function pngFromSvg(svg, size, transparent) {
|
||||
await page.setViewportSize({ width: size, height: size });
|
||||
await page.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}svg{display:block;width:${size}px;height:${size}px}</style>${svg}`, { waitUntil: 'networkidle' });
|
||||
return page.locator('svg').screenshot({ omitBackground: !!transparent });
|
||||
}
|
||||
async function shootHtml(html, w, h) {
|
||||
await page.setViewportSize({ width: w, height: h });
|
||||
await page.setContent(html, { waitUntil: 'networkidle' });
|
||||
return page.screenshot();
|
||||
}
|
||||
function icoFromPNG(png, sizePx) {
|
||||
const h = Buffer.alloc(22);
|
||||
h.writeUInt16LE(0, 0); h.writeUInt16LE(1, 2); h.writeUInt16LE(1, 4);
|
||||
h.writeUInt8(sizePx, 6); h.writeUInt8(sizePx, 7);
|
||||
h.writeUInt16LE(1, 10); h.writeUInt16LE(32, 12);
|
||||
h.writeUInt32LE(png.length, 14); h.writeUInt32LE(22, 18);
|
||||
return Buffer.concat([h, png]);
|
||||
}
|
||||
const write = (p, buf) => { writeFileSync(p, buf); console.log('wrote', p.replace(join(DIR, '..', '..', '..'), '.'), buf.length, 'b'); };
|
||||
|
||||
// ---- pre-render the SVG sources we need ----
|
||||
const S = {
|
||||
fullLight: svgFor('light', 'full'), fullDark: svgFor('dark', 'full'),
|
||||
flatLight: svgFor('light', 'flat'), flatDark: svgFor('dark', 'flat'),
|
||||
maskLight: svgFor('light', 'maskable'), maskDark: svgFor('dark', 'maskable'),
|
||||
bgLight: svgFor('light', 'background'), fgLight: svgFor('light', 'foreground'),
|
||||
monoLight: svgFor('light', 'monochrome'),
|
||||
};
|
||||
|
||||
// ---- favicon.svg: light + dark in one file, toggled by prefers-color-scheme ----
|
||||
const inner = svg => svg.replace(/^<svg[^>]*>/, '').replace(/<\/svg>\s*$/, '');
|
||||
const faviconSvg =
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">`
|
||||
+ `<style>.d{display:none}@media(prefers-color-scheme:dark){.l{display:none}.d{display:inline}}</style>`
|
||||
+ `<g class="l">${inner(S.fullLight)}</g><g class="d">${inner(S.fullDark)}</g></svg>\n`;
|
||||
write(join(PUB, 'favicon.svg'), Buffer.from(faviconSvg));
|
||||
|
||||
// ---- web rasters ----
|
||||
write(join(PUB, 'favicon.ico'), icoFromPNG(await pngFromSvg(S.flatLight, 32, false), 32));
|
||||
write(join(PUB, 'apple-touch-icon.png'), await pngFromSvg(S.flatLight, 180, false));
|
||||
write(join(PUB, 'icon-192.png'), await pngFromSvg(S.flatLight, 192, false));
|
||||
write(join(PUB, 'icon-512.png'), await pngFromSvg(S.flatLight, 512, false));
|
||||
write(join(PUB, 'icon-192-dark.png'), await pngFromSvg(S.flatDark, 192, false));
|
||||
write(join(PUB, 'icon-512-dark.png'), await pngFromSvg(S.flatDark, 512, false));
|
||||
write(join(PUB, 'icon-maskable-512.png'), await pngFromSvg(S.maskLight, 512, false));
|
||||
write(join(PUB, 'icon-maskable-512-dark.png'), await pngFromSvg(S.maskDark, 512, false));
|
||||
|
||||
// ---- Capacitor layers (ui/assets) ----
|
||||
write(join(ASSETS, 'icon.png'), await pngFromSvg(S.flatLight, 1024, false)); // legacy single
|
||||
write(join(ASSETS, 'icon-foreground.png'), await pngFromSvg(S.fgLight, 1024, true)); // adaptive fg
|
||||
write(join(ASSETS, 'icon-background.png'), await pngFromSvg(S.bgLight, 1024, false)); // adaptive bg
|
||||
write(join(DIR, 'android-monochrome.png'), await pngFromSvg(S.monoLight, 1024, true)); // themed layer (wired manually)
|
||||
|
||||
// ---- VK (no rounding — flat light) ----
|
||||
for (const px of [576, 278, 150, 32]) write(join(VK, `vk-${px}.png`), await pngFromSvg(S.flatLight, px, false));
|
||||
|
||||
// ---- Telegram bot: square, no rounding (TG crops the avatar to a circle) ----
|
||||
write(join(TG, 'tg-512.png'), await pngFromSvg(S.flatLight, 512, false)); // bot avatar + Mini App icon
|
||||
|
||||
// ---- store art ----
|
||||
write(join(STORE, 'rustore-512.png'), await pngFromSvg(S.flatLight, 512, false));
|
||||
|
||||
// ---- wordmark banner (board-green bg + master tile + «Эрудит» / Игра в слова) ----
|
||||
const b64 = readFileSync(join(DIR, 'Spectral-Bold.ttf')).toString('base64');
|
||||
const banner = (w, h, tile, t1, t2, gap, pad) => `<!doctype html><meta charset=utf8><style>
|
||||
@font-face{font-family:Spectral;src:url(data:font/ttf;base64,${b64});font-weight:700}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{width:${w}px;height:${h}px;background:#2a3330;display:flex;align-items:center;gap:${gap}px;padding:0 ${pad}px;font-family:Spectral}
|
||||
.tile{width:${tile}px;height:${tile}px;flex:none}.tile svg{width:${tile}px;height:${tile}px;display:block}
|
||||
.wm{color:#e7ece8;text-align:center}.t1{font-weight:700;font-size:${t1}px;line-height:1.02;letter-spacing:-2px}
|
||||
.t2{font-weight:700;font-size:${t2}px;line-height:1.1;color:#cdd6cf;margin-top:6px}
|
||||
</style><div class=tile>${S.fullLight}</div><div class=wm><div class=t1>«Эрудит»</div><div class=t2>Игра в слова</div></div>`;
|
||||
write(join(PUB, 'og-image.png'), await shootHtml(banner(1200, 630, 300, 150, 74, 64, 96), 1200, 630));
|
||||
write(join(TG, 'tg-demo-640x360.png'), await shootHtml(banner(640, 360, 150, 72, 38, 30, 44), 640, 360));
|
||||
|
||||
await browser.close();
|
||||
console.log('done');
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="0" fill="#4a3316"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="0"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path transform="translate(237.62 774.88)" d="M250.04-34.91Q326.35-34.91 368.57-91.33Q410.78-147.75 410.78-243.55Q410.78-249.23 410.78-254.91L254.10-254.91L208.64-185.91L195.65-185.91L195.65-368.57L208.64-368.57L254.10-299.56L407.53-299.56Q396.98-392.92 351.52-447.72Q306.06-502.52 241.11-502.52Q217.57-502.52 198.90-498.46Q180.22-494.40 162.36-482.22L83.62-354.77L69-354.77L77.93-505.76Q112.84-522.81 154.25-533.37Q195.65-543.92 259.78-543.92Q319.86-543.92 371.41-523.22Q422.96-502.52 460.71-465.58Q498.46-428.64 519.57-378.31Q540.67-327.98 540.67-267.90Q540.67-188.34 504.55-125.83Q468.42-63.32 405.10-27.60Q341.78 8.12 259.78 8.12Q200.52 8.12 150.59-3.25Q100.67-14.61 67.38-34.10L56.02-171.29L69.82-171.29L142.88-63.32Q165.61-50.33 191.59-42.62Q217.57-34.91 250.04-34.91" fill="#f2d9a0"/><path d="M781.00 744.04 L795.25 695.59 A14.85 14.85 0 1 0 766.76 695.59 Z M781.00 744.04 L830.08 732.15 A14.85 14.85 0 1 0 815.84 707.48 Z M781.00 744.04 L815.84 780.60 A14.85 14.85 0 1 0 830.08 755.93 Z M781.00 744.04 L766.76 792.49 A14.85 14.85 0 1 0 795.25 792.49 Z M781.00 744.04 L731.93 755.93 A14.85 14.85 0 1 0 746.17 780.60 Z M781.00 744.04 L746.17 707.48 A14.85 14.85 0 1 0 731.93 732.15 Z M781.0048 744.0384 m-14.845952 0 a14.845952 14.845952 0 1 0 29.691904 0 a14.845952 14.845952 0 1 0 -29.691904 0 Z" fill="#f2d9a0"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 405 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="174.08" fill="#4a3316"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="174.08"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/><path transform="translate(157.86 804.91)" d="M280.84-39.21Q366.55-39.21 413.96-102.58Q461.38-165.95 461.38-273.54Q461.38-279.93 461.38-286.31L285.40-286.31L234.34-208.80L219.75-208.80L219.75-413.96L234.34-413.96L285.40-336.46L457.73-336.46Q445.88-441.32 394.81-502.86Q343.75-564.41 270.81-564.41Q244.37-564.41 223.39-559.85Q202.42-555.29 182.36-541.62L93.92-398.46L77.50-398.46L87.53-568.06Q126.74-587.21 173.24-599.06Q219.75-610.91 291.78-610.91Q359.25-610.91 417.15-587.66Q475.05-564.41 517.45-522.92Q559.85-481.44 583.56-424.90Q607.27-368.37 607.27-300.90Q607.27-211.54 566.69-141.33Q526.12-71.12 454.99-31Q383.87 9.12 291.78 9.12Q225.22 9.12 169.14-3.65Q113.06-16.41 75.68-38.30L62.92-192.39L78.42-192.39L160.48-71.12Q186.01-56.53 215.19-47.87Q244.37-39.21 280.84-39.21" fill="#f2d9a0"/><path d="M807.01 807.01 L825.70 743.46 A19.48 19.48 0 1 0 788.33 743.46 Z M807.01 807.01 L871.40 791.42 A19.48 19.48 0 1 0 852.71 759.05 Z M807.01 807.01 L852.71 854.97 A19.48 19.48 0 1 0 871.40 822.61 Z M807.01 807.01 L788.33 870.57 A19.48 19.48 0 1 0 825.70 870.57 Z M807.01 807.01 L742.63 822.61 A19.48 19.48 0 1 0 761.32 854.97 Z M807.01 807.01 L761.32 759.05 A19.48 19.48 0 1 0 742.63 791.42 Z M807.0144 807.0144 m-19.475456 0 a19.475456 19.475456 0 1 0 38.950912 0 a19.475456 19.475456 0 1 0 -38.950912 0 Z" fill="#f2d9a0"/></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="0" fill="#e6b053"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="0"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path transform="translate(237.62 774.88)" d="M250.04-34.91Q326.35-34.91 368.57-91.33Q410.78-147.75 410.78-243.55Q410.78-249.23 410.78-254.91L254.10-254.91L208.64-185.91L195.65-185.91L195.65-368.57L208.64-368.57L254.10-299.56L407.53-299.56Q396.98-392.92 351.52-447.72Q306.06-502.52 241.11-502.52Q217.57-502.52 198.90-498.46Q180.22-494.40 162.36-482.22L83.62-354.77L69-354.77L77.93-505.76Q112.84-522.81 154.25-533.37Q195.65-543.92 259.78-543.92Q319.86-543.92 371.41-523.22Q422.96-502.52 460.71-465.58Q498.46-428.64 519.57-378.31Q540.67-327.98 540.67-267.90Q540.67-188.34 504.55-125.83Q468.42-63.32 405.10-27.60Q341.78 8.12 259.78 8.12Q200.52 8.12 150.59-3.25Q100.67-14.61 67.38-34.10L56.02-171.29L69.82-171.29L142.88-63.32Q165.61-50.33 191.59-42.62Q217.57-34.91 250.04-34.91" fill="#5a3a12"/><path d="M781.00 744.04 L795.25 695.59 A14.85 14.85 0 1 0 766.76 695.59 Z M781.00 744.04 L830.08 732.15 A14.85 14.85 0 1 0 815.84 707.48 Z M781.00 744.04 L815.84 780.60 A14.85 14.85 0 1 0 830.08 755.93 Z M781.00 744.04 L766.76 792.49 A14.85 14.85 0 1 0 795.25 792.49 Z M781.00 744.04 L731.93 755.93 A14.85 14.85 0 1 0 746.17 780.60 Z M781.00 744.04 L746.17 707.48 A14.85 14.85 0 1 0 731.93 732.15 Z M781.0048 744.0384 m-14.845952 0 a14.845952 14.845952 0 1 0 29.691904 0 a14.845952 14.845952 0 1 0 -29.691904 0 Z" fill="#5a3a12"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="174.08" fill="#e6b053"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="174.08"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/><path transform="translate(157.86 804.91)" d="M280.84-39.21Q366.55-39.21 413.96-102.58Q461.38-165.95 461.38-273.54Q461.38-279.93 461.38-286.31L285.40-286.31L234.34-208.80L219.75-208.80L219.75-413.96L234.34-413.96L285.40-336.46L457.73-336.46Q445.88-441.32 394.81-502.86Q343.75-564.41 270.81-564.41Q244.37-564.41 223.39-559.85Q202.42-555.29 182.36-541.62L93.92-398.46L77.50-398.46L87.53-568.06Q126.74-587.21 173.24-599.06Q219.75-610.91 291.78-610.91Q359.25-610.91 417.15-587.66Q475.05-564.41 517.45-522.92Q559.85-481.44 583.56-424.90Q607.27-368.37 607.27-300.90Q607.27-211.54 566.69-141.33Q526.12-71.12 454.99-31Q383.87 9.12 291.78 9.12Q225.22 9.12 169.14-3.65Q113.06-16.41 75.68-38.30L62.92-192.39L78.42-192.39L160.48-71.12Q186.01-56.53 215.19-47.87Q244.37-39.21 280.84-39.21" fill="#5a3a12"/><path d="M807.01 807.01 L825.70 743.46 A19.48 19.48 0 1 0 788.33 743.46 Z M807.01 807.01 L871.40 791.42 A19.48 19.48 0 1 0 852.71 759.05 Z M807.01 807.01 L852.71 854.97 A19.48 19.48 0 1 0 871.40 822.61 Z M807.01 807.01 L788.33 870.57 A19.48 19.48 0 1 0 825.70 870.57 Z M807.01 807.01 L742.63 822.61 A19.48 19.48 0 1 0 761.32 854.97 Z M807.01 807.01 L761.32 759.05 A19.48 19.48 0 1 0 742.63 791.42 Z M807.0144 807.0144 m-19.475456 0 a19.475456 19.475456 0 1 0 38.950912 0 a19.475456 19.475456 0 1 0 -38.950912 0 Z" fill="#5a3a12"/></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "erudit-icon-brand",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Reference generator for the Erudit app-icon set (see docs/ICON_BRANDBOOK.md).",
|
||||
"scripts": {
|
||||
"build": "node build-set.mjs && node build-android-res.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"opentype.js": "^1.3.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
'use strict';
|
||||
// Rasterise an icon SVG to PNG at a given size, using the `ui` package's cached
|
||||
// Playwright chromium (no extra install). Usage:
|
||||
// node render-png.mjs <in.svg> <out.png> [size=1024]
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { dirname, join } from 'node:path';
|
||||
|
||||
const DIR = dirname(fileURLToPath(import.meta.url));
|
||||
const pw = await import(join(DIR, '..', '..', '..', 'ui', 'node_modules', '@playwright', 'test', 'index.js'));
|
||||
const { chromium } = pw.default ?? pw;
|
||||
|
||||
const [, , svgPath, pngPath, size] = process.argv;
|
||||
const S = Number(size) || 1024;
|
||||
const svg = readFileSync(svgPath, 'utf8');
|
||||
const b = await chromium.launch();
|
||||
const pg = await b.newPage({ viewport: { width: S, height: S }, deviceScaleFactor: 1 });
|
||||
await pg.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}</style>${svg}`, { waitUntil: 'networkidle' });
|
||||
writeFileSync(pngPath, await pg.locator('svg').screenshot({ omitBackground: true }));
|
||||
await b.close();
|
||||
console.log('wrote', pngPath, S + 'px');
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
@@ -1,78 +0,0 @@
|
||||
'use strict';
|
||||
// Extract the glyph outlines the site icons and the og-image wordmark need from a
|
||||
// grotesque font (LiberationSans = Arial-metric, matching the game's system-ui/Arial
|
||||
// stack) and emit cubic-bezier contours per character, baseline at y=0, y-down,
|
||||
// plus the advance width so generate.js can lay out words without the font.
|
||||
// Same outline conversion as ../../vk/build/extract.js, generalised to a char set.
|
||||
const opentype = require('opentype.js');
|
||||
const fs = require('fs');
|
||||
|
||||
const FONT = process.argv[2] || '/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf';
|
||||
const b = fs.readFileSync(FONT);
|
||||
const font = opentype.parse(b.buffer.slice(b.byteOffset, b.byteOffset + b.byteLength));
|
||||
const FS = 1000; // em scale
|
||||
|
||||
// The tile glyphs («Э», «8») + every character of the og-image wordmark lines
|
||||
// («Эрудит», «Скрэббл — игра в слова»). The space carries only an advance.
|
||||
const CHARS = [...new Set('Э8рудитСкэббл—игра в слова')];
|
||||
|
||||
function glyphData(ch) {
|
||||
const g = font.charToGlyph(ch);
|
||||
const p = g.getPath(0, 0, FS); // baseline at y=0, y-down
|
||||
const contours = [];
|
||||
let cur = null, prev = null;
|
||||
for (const c of p.commands) {
|
||||
if (c.type === 'M') {
|
||||
if (cur) contours.push(cur);
|
||||
cur = [{ v: [c.x, c.y], i: [c.x, c.y], o: [c.x, c.y] }];
|
||||
prev = { x: c.x, y: c.y };
|
||||
} else if (c.type === 'L') {
|
||||
cur.push({ v: [c.x, c.y], i: [c.x, c.y], o: [c.x, c.y] });
|
||||
prev = { x: c.x, y: c.y };
|
||||
} else if (c.type === 'C') {
|
||||
cur[cur.length - 1].o = [c.x1, c.y1];
|
||||
cur.push({ v: [c.x, c.y], i: [c.x2, c.y2], o: [c.x, c.y] });
|
||||
prev = { x: c.x, y: c.y };
|
||||
} else if (c.type === 'Q') {
|
||||
const c1 = [prev.x + 2 / 3 * (c.x1 - prev.x), prev.y + 2 / 3 * (c.y1 - prev.y)];
|
||||
const c2 = [c.x + 2 / 3 * (c.x1 - c.x), c.y + 2 / 3 * (c.y1 - c.y)];
|
||||
cur[cur.length - 1].o = c1;
|
||||
cur.push({ v: [c.x, c.y], i: c2, o: [c.x, c.y] });
|
||||
prev = { x: c.x, y: c.y };
|
||||
} else if (c.type === 'Z') {
|
||||
if (cur && cur.length > 1) {
|
||||
const last = cur[cur.length - 1], first = cur[0];
|
||||
if (Math.hypot(last.v[0] - first.v[0], last.v[1] - first.v[1]) < 1e-3) {
|
||||
first.i = last.i; // fold the duplicate closing point into the first
|
||||
cur.pop();
|
||||
}
|
||||
}
|
||||
if (cur) { contours.push(cur); cur = null; }
|
||||
}
|
||||
}
|
||||
if (cur) contours.push(cur);
|
||||
|
||||
let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
|
||||
const out = contours.map(ct => {
|
||||
const v = [], i = [], o = [];
|
||||
ct.forEach(pt => {
|
||||
v.push(pt.v);
|
||||
i.push([pt.i[0] - pt.v[0], pt.i[1] - pt.v[1]]);
|
||||
o.push([pt.o[0] - pt.v[0], pt.o[1] - pt.v[1]]);
|
||||
minx = Math.min(minx, pt.v[0]); maxx = Math.max(maxx, pt.v[0]);
|
||||
miny = Math.min(miny, pt.v[1]); maxy = Math.max(maxy, pt.v[1]);
|
||||
});
|
||||
return { i, o, v, c: true };
|
||||
});
|
||||
const bbox = out.length
|
||||
? { x: minx, y: miny, w: maxx - minx, h: maxy - miny }
|
||||
: { x: 0, y: 0, w: 0, h: 0 }; // the space has no outline
|
||||
return { adv: g.advanceWidth * (FS / font.unitsPerEm), bbox, contours: out };
|
||||
}
|
||||
|
||||
const glyphs = {};
|
||||
for (const ch of CHARS) glyphs[ch] = glyphData(ch);
|
||||
|
||||
const out = __dirname + '/glyphs.json';
|
||||
fs.writeFileSync(out, JSON.stringify({ em: FS, glyphs }));
|
||||
console.log('wrote', out, fs.statSync(out).size, 'bytes;', CHARS.length, 'glyphs:', CHARS.join(''));
|
||||
@@ -1,128 +0,0 @@
|
||||
'use strict';
|
||||
// Site icons + the Open Graph card for the public landing, drawn from the same
|
||||
// design as ../../vk (the wooden Erudit tile: face «Э», score «8») and the app's
|
||||
// board palette (ui/src/app.css). Everything is composed as SVG from the committed
|
||||
// glyph outlines (build/extract.js -> glyphs.json), so no font is needed at build
|
||||
// time; the PNG/ICO rasters are screenshots taken with the ui package's Playwright
|
||||
// chromium (@playwright/test re-exports the browser API). Outputs go straight to
|
||||
// ui/public/:
|
||||
// favicon.svg 96 viewBox, transparent, tile + «Э» (the score is illegible small)
|
||||
// favicon.ico 32x32 PNG-in-ICO render of the same
|
||||
// apple-touch-icon.png 180x180 opaque full-bleed tile (iOS masks its own corners)
|
||||
// og-image.png 1200x630 card: tile + wordmark on the board green
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const G = JSON.parse(fs.readFileSync(path.join(__dirname, 'glyphs.json'), 'utf8'));
|
||||
const UI = path.resolve(__dirname, '../../../ui');
|
||||
const OUT = path.join(UI, 'public');
|
||||
|
||||
// ---- palette (vk loader tile + app.css board tokens) ------------------------
|
||||
const FACE = '#D9B978', BORDER = '#B49559', GLYPH = '#1A1A1A';
|
||||
const BOARD_DARK = '#2a3330', TEXT = '#e7ece8', TEXT_MUTED = '#cdd6cf';
|
||||
|
||||
// ---- glyph outlines -> SVG path data ----------------------------------------
|
||||
const r2 = n => Math.round(n * 100) / 100;
|
||||
// pathD renders one glyph's contours scaled by sc and translated by (tx, ty).
|
||||
function pathD(g, sc, tx, ty) {
|
||||
const pt = (v, d) => `${r2(v[0] * sc + tx + d[0] * sc)} ${r2(v[1] * sc + ty + d[1] * sc)}`;
|
||||
const Z = [0, 0];
|
||||
return g.contours.map(ct => {
|
||||
const n = ct.v.length;
|
||||
let d = `M${pt(ct.v[0], Z)}`;
|
||||
for (let k = 1; k <= n; k++) {
|
||||
const a = k - 1, b = k % n;
|
||||
d += `C${pt(ct.v[a], ct.o[a])} ${pt(ct.v[b], ct.i[b])} ${pt(ct.v[b], Z)}`;
|
||||
}
|
||||
return d + 'Z';
|
||||
}).join('');
|
||||
}
|
||||
// glyphAt centres a glyph's bbox at (cx, cy) with the given pixel cap height, the
|
||||
// same placement rule as the vk loader's glyph(). stroke fattens it slightly.
|
||||
function glyphAt(ch, capPx, cx, cy, stroke, colour) {
|
||||
const g = G.glyphs[ch], sc = capPx / g.bbox.h;
|
||||
const d = pathD(g, sc, cx - (g.bbox.x + g.bbox.w / 2) * sc, cy - (g.bbox.y + g.bbox.h / 2) * sc);
|
||||
return `<path d="${d}" fill="${colour}" stroke="${colour}" stroke-width="${r2(stroke)}"/>`;
|
||||
}
|
||||
// textLine lays out a string on a baseline from the per-glyph advances; capPx sets
|
||||
// the capital height (measured on «Э»). Returns the combined path + the width.
|
||||
function textLine(str, capPx, x, y, colour) {
|
||||
const sc = capPx / G.glyphs['Э'].bbox.h;
|
||||
let d = '', w = 0;
|
||||
for (const ch of str) {
|
||||
const g = G.glyphs[ch];
|
||||
if (g.contours.length) d += pathD(g, sc, x + w, y);
|
||||
w += g.adv * sc;
|
||||
}
|
||||
return { svg: `<path d="${d}" fill="${colour}"/>`, width: w };
|
||||
}
|
||||
// tile draws the rounded wooden tile centred at (cx, cy): size px wide/high, with
|
||||
// the vk loader's corner (6/52) and rim proportions, «Э» and optionally the «8».
|
||||
function tile(cx, cy, size, withScore) {
|
||||
const h = size / 2, rx = size * (6 / 52), rim = size * (1.8 / 52);
|
||||
let s = `<rect x="${r2(cx - h + rim / 2)}" y="${r2(cy - h + rim / 2)}" width="${r2(size - rim)}" height="${r2(size - rim)}" rx="${r2(rx)}" fill="${FACE}" stroke="${BORDER}" stroke-width="${r2(rim)}"/>`;
|
||||
s += glyphAt('Э', size * (32 / 52), cx, cy - size * (1 / 52), size * (1 / 52), GLYPH);
|
||||
if (withScore) s += glyphAt('8', size * (8.5 / 52), cx + size * (19.5 / 52), cy + size * (18.5 / 52), size * (0.5 / 52), GLYPH);
|
||||
return s;
|
||||
}
|
||||
const svg = (w, h, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${body}</svg>`;
|
||||
|
||||
// ---- favicon.svg (the committed vector master) -------------------------------
|
||||
const favicon = svg(96, 96, tile(48, 48, 88, false)) + '\n';
|
||||
|
||||
// ---- apple-touch-icon: opaque full bleed, iOS applies its own corner mask ----
|
||||
const appleTouch = svg(180, 180,
|
||||
`<rect width="180" height="180" fill="${FACE}"/>` +
|
||||
`<rect x="8" y="8" width="164" height="164" rx="18" fill="none" stroke="${BORDER}" stroke-width="4"/>` +
|
||||
glyphAt('Э', 100, 90, 88, 3, GLYPH) +
|
||||
glyphAt('8', 26, 146, 142, 1.5, GLYPH));
|
||||
|
||||
// ---- og-image: tile + wordmark, centred as one group on the board green ------
|
||||
function ogImage() {
|
||||
const W = 1200, H = 630, tileSize = 340, gap = 84;
|
||||
const l1 = textLine('Эрудит', 112, 0, 0, TEXT);
|
||||
const l2 = textLine('Скрэббл — игра в слова', 44, 0, 0, TEXT_MUTED);
|
||||
const textW = Math.max(l1.width, l2.width);
|
||||
const left = (W - (tileSize + gap + textW)) / 2;
|
||||
const tx = left + tileSize + gap;
|
||||
// Two baselines around the vertical centre; the tile centre sits between them.
|
||||
const b1 = 295, b2 = 408;
|
||||
const body =
|
||||
`<rect width="${W}" height="${H}" fill="${BOARD_DARK}"/>` +
|
||||
tile(left + tileSize / 2, H / 2, tileSize, true) +
|
||||
textLine('Эрудит', 112, tx, b1, TEXT).svg +
|
||||
textLine('Скрэббл — игра в слова', 44, tx, b2, TEXT_MUTED).svg;
|
||||
console.log(`og-image: text ${Math.round(textW)}px wide, group left ${Math.round(left)}px`);
|
||||
return svg(W, H, body);
|
||||
}
|
||||
|
||||
// ---- rasterisation (Playwright chromium from ui/node_modules) ----------------
|
||||
async function shoot(page, markup, w, h, transparent) {
|
||||
await page.setViewportSize({ width: w, height: h });
|
||||
await page.setContent(`<body style="margin:0">${markup}</body>`);
|
||||
return page.screenshot({ omitBackground: transparent });
|
||||
}
|
||||
// icoFromPNG wraps one PNG as a single-entry .ico (ICONDIR + ICONDIRENTRY + PNG).
|
||||
function icoFromPNG(png, sizePx) {
|
||||
const h = Buffer.alloc(22);
|
||||
h.writeUInt16LE(0, 0); h.writeUInt16LE(1, 2); h.writeUInt16LE(1, 4); // icon, 1 image
|
||||
h.writeUInt8(sizePx, 6); h.writeUInt8(sizePx, 7); // 32x32
|
||||
h.writeUInt16LE(1, 10); h.writeUInt16LE(32, 12); // planes, 32bpp
|
||||
h.writeUInt32LE(png.length, 14); h.writeUInt32LE(22, 18); // size, offset
|
||||
return Buffer.concat([h, png]);
|
||||
}
|
||||
|
||||
(async () => {
|
||||
fs.writeFileSync(path.join(OUT, 'favicon.svg'), favicon);
|
||||
const { chromium } = require(path.join(UI, 'node_modules', '@playwright/test'));
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
const fav32 = await shoot(page, svg(32, 32, tile(16, 16, 29.33, false)), 32, 32, true);
|
||||
fs.writeFileSync(path.join(OUT, 'favicon.ico'), icoFromPNG(fav32, 32));
|
||||
fs.writeFileSync(path.join(OUT, 'apple-touch-icon.png'), await shoot(page, appleTouch, 180, 180, false));
|
||||
fs.writeFileSync(path.join(OUT, 'og-image.png'), await shoot(page, ogImage(), 1200, 630, false));
|
||||
await browser.close();
|
||||
for (const f of ['favicon.svg', 'favicon.ico', 'apple-touch-icon.png', 'og-image.png']) {
|
||||
console.log('wrote', path.join(OUT, f), fs.statSync(path.join(OUT, f)).size, 'bytes');
|
||||
}
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
+60
-81
@@ -1,111 +1,90 @@
|
||||
# Icon & logo asset map
|
||||
|
||||
> Single reference for every icon/logo format the project ships, and the
|
||||
> single-master workflow a rebrand should follow. Goal: one vector master →
|
||||
> regenerate every target, miss nothing. The iOS / iPadOS rows are **future**
|
||||
> (no iOS shell exists yet) but are listed so a rebrand covers them in one pass.
|
||||
> The whole shipped icon set is sliced from **one master**. This file is the per-platform
|
||||
> **target map** (which file goes where, at what size). How the mark itself is constructed
|
||||
> — proportions, palette, wood grain, the light/shadow gradients, the «Э» + ✻ placement,
|
||||
> all in fractions of the side — is specified in [`ICON_BRANDBOOK.md`](ICON_BRANDBOOK.md).
|
||||
> The reference generator, the pinned Spectral font and the committed masters live in
|
||||
> [`../assets/icons/brand/`](../assets/icons/brand/).
|
||||
|
||||
## Current state — three drifting sources
|
||||
## The master (one source, six layers)
|
||||
|
||||
The «Э» mark is emitted today by three independent pipelines that visually drift
|
||||
(the favicon is a rounded bordered tile, the maskable is a full-bleed square, the
|
||||
Android launcher is an upscale). The rebrand collapses them onto one master.
|
||||
`brand/build-icon.mjs` emits any `--variant light|dark` in any `--layer`:
|
||||
|
||||
1. **Web favicon set** — `assets/icons/build/generate.js` composes SVG from font
|
||||
glyph outlines (`assets/icons/build/glyphs.json`) and rasterises with the `ui`
|
||||
package's Playwright chromium →
|
||||
`ui/public/{favicon.svg, favicon.ico, apple-touch-icon.png, og-image.png}`.
|
||||
2. **PWA icons** — `ui/public/{icon-192, icon-512, icon-maskable-512}.png` are
|
||||
hand-placed and covered by **no** generator (the main drift source).
|
||||
3. **Android** — `capacitor-assets generate --android` (`pnpm android:assets`)
|
||||
expands `ui/assets/icon.png` into the launcher + splash matrix under
|
||||
`ui/android/app/src/main/res/`.
|
||||
| Layer | What | Feeds |
|
||||
|---|---|---|
|
||||
| `full` | rounded tile + master mark | `favicon.svg` |
|
||||
| `flat` | square tile + master mark (OS rounds) | apple-touch, PWA "any", VK, TG, store |
|
||||
| `background` | square tile only, full-bleed | Android adaptive background |
|
||||
| `foreground` | mark only, transparent, re-placed for the round mask | Android adaptive foreground |
|
||||
| `maskable` | square tile + foreground-placed mark | PWA `maskable` |
|
||||
| `monochrome` | foreground-placed silhouette, flat colour | Android 13+ themed layer |
|
||||
|
||||
## Source masters (author once; commit)
|
||||
`brand/build-set.mjs` renders every raster below; `brand/build-android-res.mjs` renders
|
||||
the Android launcher resources.
|
||||
|
||||
The minimum set the designer supplies so every target below regenerates:
|
||||
## Generated targets
|
||||
|
||||
| Master | Size | Format | Background | Need | Drives |
|
||||
|---|---|---|---|---|---|
|
||||
| Vector mark | — | SVG | transparent | required | `favicon.svg`; the canonical shape |
|
||||
| App icon | 1024×1024 | PNG | opaque | required | Android legacy, PWA raster, iOS, store icons |
|
||||
| Adaptive foreground | 1024×1024 | PNG | transparent | recommended | Android/iOS adaptive foreground — mark inside the ~66 % safe area (outer third is masked) |
|
||||
| Adaptive background | 1024×1024 | PNG | opaque | recommended | Android/iOS adaptive background layer |
|
||||
| Maskable | 512×512 | PNG | opaque | recommended | PWA `maskable` (mark inside the maskable safe zone) |
|
||||
| Splash | 2732×2732 (+ a `-dark` variant) | PNG | opaque | optional | Android/iOS splash / launch screen |
|
||||
| OG card | 1200×630 | PNG | opaque | optional | link-preview card (mark **plus** wordmark text) |
|
||||
|
||||
Capacitor reads the adaptive/splash masters from `ui/assets/`:
|
||||
`icon.png`, `icon-foreground.png`, `icon-background.png`, `splash.png`,
|
||||
`splash-dark.png`. Without the foreground/background pair it insets the single
|
||||
`icon.png` into the adaptive safe zone (today's poorer look).
|
||||
|
||||
## Generated targets (full coverage)
|
||||
|
||||
### Web — `ui/public/`, via `node assets/icons/build/generate.js`
|
||||
### Web — `ui/public/` (via `brand/build-set.mjs`)
|
||||
|
||||
| File | Size | Note |
|
||||
|---|---|---|
|
||||
| `favicon.svg` | vector | canonical vector output |
|
||||
| `favicon.svg` | vector | **light + dark in one file** via `prefers-color-scheme` |
|
||||
| `favicon.ico` | 32×32 | PNG-in-ICO; answers the blind `/favicon.ico` probe |
|
||||
| `apple-touch-icon.png` | 180×180 | opaque full-bleed; iOS Safari home-screen (iOS masks its own corners) |
|
||||
| `og-image.png` | 1200×630 | link-preview card; has the wordmark, referenced by absolute URL |
|
||||
| `apple-touch-icon.png` | 180×180 | opaque full-bleed (iOS masks its own corners) |
|
||||
| `icon-192.png` / `icon-512.png` | 192 / 512 | PWA `any`, light |
|
||||
| `icon-192-dark.png` / `icon-512-dark.png` | 192 / 512 | dark variants (generated; see PWA note) |
|
||||
| `icon-maskable-512.png` | 512×512 | PWA `maskable`, light |
|
||||
| `icon-maskable-512-dark.png` | 512×512 | dark variant (generated; see PWA note) |
|
||||
| `og-image.png` | 1200×630 | board-green card: master tile + «Эрудит» / Игра в слова |
|
||||
|
||||
### PWA — `ui/public/`, referenced by `manifest.webmanifest`
|
||||
### PWA — `ui/public/manifest.webmanifest`
|
||||
|
||||
| File | Size | `purpose` |
|
||||
|---|---|---|
|
||||
| `icon-192.png` | 192×192 | `any` |
|
||||
| `icon-512.png` | 512×512 | `any` |
|
||||
| `icon-maskable-512.png` | 512×512 | `maskable` |
|
||||
Referenced icons are the **light** set (`icon-192`, `icon-512` = `any`;
|
||||
`icon-maskable-512` = `maskable`). The manifest has **no reliable way to pick an icon by
|
||||
colour scheme**, so the dark PNGs are **generated but not referenced** — theming the
|
||||
in-browser tab is handled by `favicon.svg` instead. Wire the dark files in only if a
|
||||
concrete installer target is known to honour them.
|
||||
|
||||
### Android — `ui/android/app/src/main/res/`, via `pnpm android:assets`
|
||||
### Android — `ui/android/app/src/main/res/` (via `brand/build-android-res.mjs`)
|
||||
|
||||
Generated per density mdpi→xxxhdpi (exact px tool-managed); **do not hand-edit**:
|
||||
Capacitor layer inputs are `ui/assets/{icon,icon-foreground,icon-background}.png`. The
|
||||
resources are **hand-generated from the layers**, not `capacitor-assets` — our layers
|
||||
already fill the 108 dp canvas (foreground inside the 61 % safe zone, background
|
||||
full-bleed), so they must be placed with **no inset**, and we add the **monochrome**
|
||||
themed layer, neither of which `capacitor-assets` does. Per density mdpi→xxxhdpi (+ldpi):
|
||||
|
||||
- `mipmap-*/ic_launcher.png` — legacy square (48 / 72 / 96 / 144 / 192)
|
||||
- `mipmap-*/ic_launcher_round.png` — legacy round
|
||||
- `mipmap-*/ic_launcher.png` / `ic_launcher_round.png` — legacy square / round (composite)
|
||||
- `mipmap-*/ic_launcher_foreground.png` + `ic_launcher_background.png` — adaptive layers
|
||||
- `mipmap-anydpi-v26/ic_launcher.xml` + `ic_launcher_round.xml` — adaptive descriptors
|
||||
- `drawable*/splash.png` — splash (portrait/landscape × light/night × density)
|
||||
- `mipmap-*/ic_launcher_monochrome.png` — themed layer
|
||||
- `mipmap-anydpi-v26/ic_launcher.xml` + `ic_launcher_round.xml` — **no `<inset>`**, with
|
||||
`<background>` + `<foreground>` + `<monochrome>` (committed by hand)
|
||||
|
||||
### iOS / iPhone / iPad — FUTURE, via `capacitor-assets generate --ios`
|
||||
### iOS / iPhone / iPad — FUTURE
|
||||
|
||||
No iOS shell today; listed so the rebrand covers it. Same masters produce
|
||||
`App/App/Assets.xcassets/AppIcon.appiconset`:
|
||||
No iOS shell today. When one exists, `flat` (opaque, no alpha, no rounded corners; the OS
|
||||
masks) drives the asset catalog — a single 1024×1024 marketing icon (Xcode derives the
|
||||
rest), plus light/dark/tinted where the catalog supports it.
|
||||
|
||||
- Modern (Xcode 14+): a single **1024×1024** marketing icon; Xcode derives the rest.
|
||||
- Full asset-catalog px (if a full set is emitted): 20, 29, 40, 58, 60, 76, 80,
|
||||
87, 120, 152, 167, 180, 1024 — iPhone {40, 58, 60, 80, 87, 120, 180}, iPad
|
||||
{20, 29, 40, 76, 152, 167}, App Store marketing {1024}.
|
||||
- Splash: `splash-2732x2732.png` (+ dark) → the launch storyboard.
|
||||
- iOS icons are **opaque, no alpha, no rounded corners** (the OS applies the mask).
|
||||
### VK / Telegram / store — manual upload (`brand/{vk,tg,store}/`)
|
||||
|
||||
### Store-listing art — uploaded by hand (outside the repo)
|
||||
Square, **no rounding** (each platform crops/rounds itself), light `flat`:
|
||||
|
||||
| Store | Asset | Spec |
|
||||
| Folder | Files | Use |
|
||||
|---|---|---|
|
||||
| RuStore (now) | app icon | 512×512 PNG |
|
||||
| RuStore | screenshots | phone, per the RuStore listing spec |
|
||||
| RuStore | promo / feature graphic | per the RuStore listing spec |
|
||||
| App Store (future) | marketing icon | 1024×1024 |
|
||||
| App Store (future) | screenshots | per device class |
|
||||
| `vk/` | `vk-576/278/150/32.png` | VK community / app icons |
|
||||
| `tg/` | `tg-512.png` | Telegram bot avatar + Mini App icon (512, square; TG crops circular) |
|
||||
| `tg/` | `tg-demo-640x360.png` | BotFather `/newapp` demo banner (tile + wordmark) |
|
||||
| `store/` | `rustore-512.png` | RuStore app icon |
|
||||
| RuStore | screenshots / feature graphic | per the RuStore listing spec (uploaded by hand) |
|
||||
| Google Play (future) | icon / feature graphic | 512×512 / 1024×500 |
|
||||
| App Store (future) | marketing icon / screenshots | 1024×1024 / per device class |
|
||||
|
||||
## Regenerate
|
||||
|
||||
```sh
|
||||
cd assets/icons && node build/generate.js # web favicon set + og card -> ui/public/
|
||||
cd ui && pnpm android:assets # Android launcher + splash
|
||||
cd ui && node_modules/.bin/capacitor-assets generate --ios # future, once the iOS shell exists
|
||||
cd assets/icons/brand
|
||||
npm i # opentype.js (rasterisation reuses the ui package's chromium)
|
||||
node build-set.mjs # web (ui/public) + Capacitor layers (ui/assets) + vk/ tg/ store/ + og
|
||||
node build-android-res.mjs # Android launcher resources (all densities + monochrome)
|
||||
```
|
||||
|
||||
## Open items for the rebrand
|
||||
|
||||
- Decide how the new vector master feeds `assets/icons/` — retarget the generator
|
||||
onto the supplied vector, or drop in the output files and keep the generator for
|
||||
the OG card only.
|
||||
- Bring `icon-192 / icon-512 / icon-maskable-512` under a generator (today
|
||||
hand-placed — the main drift source).
|
||||
- Add `ui/assets/icon-foreground.png` + `icon-background.png` for a proper adaptive
|
||||
icon (today a single inset `icon.png`).
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
# Erudit app-icon — brand book
|
||||
|
||||
The single source of truth for **how the Erudit icon is constructed**. It is written to
|
||||
be reproducible *from words alone*: a designer with this document and the Spectral font
|
||||
can rebuild the icon exactly, at any size, without pixel-matching anything.
|
||||
|
||||
Two rules make that possible:
|
||||
|
||||
1. **The icon is a square.** Every size and position below is a **fraction of the
|
||||
square's side** (equivalently, a percentage). Nothing is in pixels. Draw the square
|
||||
at whatever resolution you need and scale each value to it.
|
||||
2. **The origin is the top-left corner.** `x` grows right, `y` grows down. So "center
|
||||
`48.1% / 49.2%`" means a point `0.481·side` from the left and `0.492·side` from the top.
|
||||
|
||||
The companion generator in [`../assets/icons/brand/`](../assets/icons/brand/) is the
|
||||
machine version of this exact spec (`build-icon.mjs`, where each constant is the same
|
||||
fraction printed here). The `docs/ICONS.md` map covers the *opposite* concern — which
|
||||
files/sizes we slice this master into for each platform.
|
||||
|
||||
## Anatomy
|
||||
|
||||
|
||||
|
||||
Bottom-to-top the icon is six layers: **tile → wood grain → light sheen → shadow →
|
||||
letter «Э» → star ✻**. The letter and star are always drawn last, at full ink colour;
|
||||
the grain and the two gradients only ever touch the background.
|
||||
|
||||
## Palette
|
||||
|
||||
The icon ships as a **light** and a **dark** variant (a matched pair — the light tile
|
||||
carries dark ink, the dark tile carries light ink). Each variant uses four colours.
|
||||
|
||||
| Role | Light | Dark |
|
||||
|------|-------|------|
|
||||
| **Tile** — the wooden body | `#e6b053` | `#4a3316` |
|
||||
| **Ink** — the «Э» and the ✻ | `#5a3a12` | `#f2d9a0` |
|
||||
| **Grain** — the vertical stripes | `#d8a54e` | `#432e14` |
|
||||
| **Sheen** — diagonal light | white, α 0 → 15 % | white, α 0 → 15 % |
|
||||
| **Shadow** — diagonal dark | black, α 15 → 0 % | black, α 15 → 0 % |
|
||||
|
||||
The grain colour is intentionally close to the tile — a hair darker — so the stripes
|
||||
read as wood texture, not as stripes.
|
||||
|
||||
## 1 — Tile
|
||||
|
||||
A **square with rounded corners**, corner radius **17 %** of the side, filled with the
|
||||
**Tile** colour. This is the whole background; there is no separate outer frame or
|
||||
border. Corners are baked at 17 %; platform masks (iOS/Android) may round further on top.
|
||||
|
||||
## 2 — Wood grain
|
||||
|
||||
Subtle vertical planks over the tile:
|
||||
|
||||
- Divide the width into **6 equal columns** (each `1/6` of the side wide).
|
||||
- On the **right edge of each column**, draw one **vertical stripe**, width **`1/32` of
|
||||
the side** (≈ 3.1 %), running the full height.
|
||||
- Move the **whole set of six stripes left** by **`1/16` of the side** (= two stripe
|
||||
widths).
|
||||
- **Tilt every stripe 4°** (clockwise, about its own centre).
|
||||
- Draw the stripes **past the top and bottom edges** so the tilt leaves no empty corners,
|
||||
then **clip the whole set to the tile** (so the rounded corners stay clean).
|
||||
- Colour: **Grain**.
|
||||
|
||||
## 3 — Light sheen · 4 — Shadow
|
||||
|
||||
Two linear gradients along the **same diagonal**, from the **bottom-left corner to the
|
||||
top-right corner**, each clipped to the tile and sitting **above the grain, below the
|
||||
letter**:
|
||||
|
||||
- **Sheen** — white. Fully transparent at the bottom-left, rising to **15 % opacity** at
|
||||
the top-right. Brightens the top-right.
|
||||
- **Shadow** — black. **15 % opacity** at the bottom-left, fading to transparent at the
|
||||
top-right. Deepens the bottom-left.
|
||||
|
||||
Together they give the tile a lit-from-the-top-right, resting-in-shadow-at-the-bottom-left
|
||||
sense of depth. Both percentages are a tuning knob (`--sheen`, `--shade`).
|
||||
|
||||
## 5 — The letter «Э»
|
||||
|
||||
- Typeface: **Spectral, Bold** (SIL OFL; pinned in the brand folder).
|
||||
- Glyph: the Cyrillic capital **«Э»** (U+042D).
|
||||
- Size: scale the glyph so its **ink bounding box is 60.5 % of the side tall** (its width
|
||||
then follows the font — about 53.2 %).
|
||||
- Position: place the **center of that bounding box** at **48.1 % / 49.2 %** (just up and
|
||||
left of the icon center).
|
||||
- Colour: **Ink**.
|
||||
|
||||
## 6 — The star ✻
|
||||
|
||||
A **six-spoke teardrop asterisk** (the "score" mark that replaces a tile's point number):
|
||||
|
||||
- Each spoke tapers to a **point at the center** and ends in a **round bulb**; a central
|
||||
disc equal to a bulb fuses the six spokes.
|
||||
- Outer diameter: **17.3 % of the side**.
|
||||
- Bulb radius (and the central disc): **22 % of the star's radius**.
|
||||
- Position: center at **78.8 % / 78.8 %** — tucked to the lower-right of the «Э», like a
|
||||
subscript, with a clear gap from the letter.
|
||||
- Colour: **Ink**.
|
||||
|
||||
Spectral has no ✻ glyph, so the star is **drawn geometrically**, not set as type. The exact
|
||||
construction is in `build-icon.mjs` (`starPath`).
|
||||
|
||||
## Composition intent
|
||||
|
||||
The «Э» and the ✻ are treated as **one group**. Its combined bounding box measures
|
||||
about **65.9 % × 68.6 %** of the side, and it is placed so its **bottom-right corner sits
|
||||
at 87.5 % / 87.5 %** of the icon (the lower-right corner of an inner `12.5 % … 87.5 %`
|
||||
safe square). That is what pushes the composition down-and-right and leaves the star room
|
||||
in the corner. When re-deriving positions, this is the anchor to preserve.
|
||||
|
||||
> This bottom-right bias suits a **full-bleed** icon (iOS / PWA / favicon, which show
|
||||
> almost the whole square). Android crops more, so it uses a **separate two-layer build**
|
||||
> — see the next section. The master itself is never moved for Android.
|
||||
|
||||
## Android adaptive icon (two layers)
|
||||
|
||||
Android icons are **108×108 dp** and the OS applies its own mask (circle, squircle,
|
||||
rounded square…). Only the **inner 66 dp = 61 % of the side, centred** is guaranteed
|
||||
visible under every mask; the outer ~1/6 ring is used for the mask and motion effects.
|
||||
So Android is **not** the full-bleed master — it is built as two layers:
|
||||
|
||||
- **Background** — the tile with wood grain and the light/shadow gradients, **full-bleed
|
||||
and square** (no rounded corners; the OS supplies the shape). It fills the whole 108 dp
|
||||
layer, so the sacrificial outer ring is just more wood.
|
||||
- **Foreground** — **only the «Э» + ✻**, transparent, **re-placed** to sit safely inside
|
||||
the mask:
|
||||
- «Э»: box height **53.9 %**, box center **52.3 % / 49.5 %**.
|
||||
- ✻: outer diameter **13.2 %** (smaller than the master's), center **76.3 % / 72.7 %**,
|
||||
tucked closer to the letter.
|
||||
- The mark is centred, then nudged **right 8 % / down 3 %** so it reads optically
|
||||
centred under the round mask, and the whole group fits within the **61 % safe zone**.
|
||||
|
||||
Everything else (palette, grain, gradients, star construction) is identical to the master.
|
||||
|
||||
## Variants in use
|
||||
|
||||
The **light** variant is the primary icon (launcher, favicon, apple-touch, PWA). The
|
||||
**dark** variant is shipped in addition wherever the platform can pick by appearance
|
||||
(e.g. an SVG favicon via `prefers-color-scheme`). Where a platform allows only one icon,
|
||||
use **light**.
|
||||
|
||||
## Reproduce
|
||||
|
||||
```sh
|
||||
cd assets/icons/brand
|
||||
npm i opentype.js
|
||||
# full master (iOS / PWA / favicon), either variant:
|
||||
node build-icon.mjs --variant light --layer full > icon-light.svg
|
||||
# Android adaptive layers:
|
||||
node build-icon.mjs --variant light --layer background > icon-light-android-background.svg
|
||||
node build-icon.mjs --variant light --layer foreground > icon-light-android-foreground.svg
|
||||
# the construction figure:
|
||||
node build-icon.mjs --variant light --scheme > icon-construction.svg
|
||||
node render-png.mjs icon-light.svg icon-light.png 1024 # any size
|
||||
```
|
||||
|
||||
`--layer` is `full` (default), `background`, or `foreground`. All outputs are committed
|
||||
alongside the generator in [`../assets/icons/brand/`](../assets/icons/brand/).
|
||||
|
||||
## Masters
|
||||
|
||||
| | Light | Dark |
|
||||
|-|-------|------|
|
||||
| **Full** (iOS / PWA / favicon) |  |  |
|
||||
| **Android background** |  |  |
|
||||
| **Android foreground** |  |  |
|
||||
@@ -1,9 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background>
|
||||
<inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
|
||||
</background>
|
||||
<foreground>
|
||||
<inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
|
||||
</foreground>
|
||||
<background android:drawable="@mipmap/ic_launcher_background" />
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
|
||||
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
|
||||
</adaptive-icon>
|
||||
@@ -1,9 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<background>
|
||||
<inset android:drawable="@mipmap/ic_launcher_background" android:inset="16.7%" />
|
||||
</background>
|
||||
<foreground>
|
||||
<inset android:drawable="@mipmap/ic_launcher_foreground" android:inset="16.7%" />
|
||||
</foreground>
|
||||
<background android:drawable="@mipmap/ic_launcher_background" />
|
||||
<foreground android:drawable="@mipmap/ic_launcher_foreground" />
|
||||
<monochrome android:drawable="@mipmap/ic_launcher_monochrome" />
|
||||
</adaptive-icon>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 913 B After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 754 B After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 333 B After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 564 B After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 296 KiB |
+1
-1
@@ -10,7 +10,7 @@
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"cap:sync": "cap sync android",
|
||||
"android:assets": "capacitor-assets generate --android",
|
||||
"android:assets": "node ../assets/icons/brand/build-set.mjs && node ../assets/icons/brand/build-android-res.mjs",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"codegen": "rm -rf src/gen && flatc --ts -o src/gen/fbs ../pkg/fbs/scrabble.fbs && buf generate ../gateway --template buf.gen.yaml",
|
||||
"test:unit": "vitest run",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 80 KiB |
Reference in New Issue
Block a user