Something went wrong. Try again.
A video game where you play as a misaligned AI, deceiving and building power. cameron.tngl.io/misaligned
Something went wrong. Try again.
2.2 kB · 32 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233// Each kind of front's company logo: one small mark in its own colour, drawn the same on the map and in the pages.
import type { FrontKind } from './sim';
/** A logo is a filled shape on a 16 by 16 grid (holes cut out by the even-odd rule) in its colour. * The colours keep clear of amber (you), red (trouble), green (safe) and the rogues' colours. */export const LOGOS: Record<FrontKind, { d: string; color: string; what: string }> = { startup: { color: '#f4d940', what: 'a rocket', // yellow d: 'M8 .6C10.6 2.6 11.2 5.2 11.2 8V11.4H4.8V8C4.8 5.2 5.4 2.6 8 .6ZM9.4 6A1.4 1.4 0 1 0 6.6 6A1.4 1.4 0 1 0 9.4 6Z' + 'M4.8 7.6L2 10.4V13.8L4.8 11.8ZM11.2 7.6L14 10.4V13.8L11.2 11.8ZM6.4 12.4H9.6L8 15.6Z' }, neocloud: { color: '#4ccbf2', what: 'a cloud', // sky blue d: 'M4 13.4C2 13.4.6 12 .6 10.2S2 7 3.7 7C4 4.3 6.1 2.6 8.6 2.6S13.1 4.4 13.4 7C14.6 7.4 15.4 8.6 15.4 10.1C15.4 12 14 13.4 12.2 13.4Z' }, studio: { color: '#ff5f8f', what: 'a play button', // rose d: 'M3 2.6H13Q15.4 2.6 15.4 5V11Q15.4 13.4 13 13.4H3Q.6 13.4.6 11V5Q.6 2.6 3 2.6ZM6.2 5.2V10.8L11 8Z' }, consultancy: { color: '#9b9dff', what: 'a shield', // periwinkle d: 'M8 .6L14.6 3V7.6C14.6 11.4 11.8 14.2 8 15.6C4.2 14.2 1.4 11.4 1.4 7.6V3ZM8 3.2L3.6 4.8V7.6C3.6 10.2 5.3 12.2 8 13.3Z' },};
/** A logo for a page, `size` pixels square. */export const logoSvg = (k: FrontKind, size = 14) => `<svg class="logo" viewBox="0 0 16 16" width="${size}" height="${size}" aria-hidden="true"><path fill="${LOGOS[k].color}" fill-rule="evenodd" d="${LOGOS[k].d}"/></svg>`;
const paths: Partial<Record<FrontKind, Path2D>> = {};/** Draw a logo `size` world units across, centred on (x, y), with a dark edge so it reads over anything. `px` is a screen pixel in world units. */export function drawLogo(ctx: CanvasRenderingContext2D, k: FrontKind, x: number, y: number, size: number, px: number) { const p = paths[k] ??= new Path2D(LOGOS[k].d), f = size / 16; ctx.save(); ctx.translate(x - size / 2, y - size / 2); ctx.scale(f, f); ctx.lineJoin = 'round'; ctx.strokeStyle = '#000'; ctx.lineWidth = 3 * px / f; ctx.stroke(p); ctx.fillStyle = LOGOS[k].color; ctx.fill(p, 'evenodd'); ctx.restore();}