Add easter egg.

evilmartians · Oct 8, 2023 · af5a571 · af5a571
1 parent c1e91bd
commit af5a571
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/src/ui/components/SegmentedFontStyleDefinition.tsx b/src/ui/components/SegmentedFontStyleDefinition.tsx
@@ -1,16 +1,26 @@
 import { type ReactElement } from 'react';
 
 interface Props {
+  currentStyleNumber: number;
   id: string;
   primaryColor: string;
   secondaryColor: string;
 }
 
 export const SegmentedFontStyleDefinition = ({
+  currentStyleNumber,
   id,
   primaryColor,
   secondaryColor,
 }: Props): ReactElement => {
+  const formattedCurrentStyleNumber = currentStyleNumber.toLocaleString(
+    'en-US',
+    {
+      minimumIntegerDigits: 2,
+      useGrouping: false,
+    }
+  );
+
   return (
     <style>
       {`
@@ -22,7 +32,7 @@ export const SegmentedFontStyleDefinition = ({
         .segmented-${id} {
           font-family: Segmented;
           font-palette: --segmented-${id};
-          font-feature-settings: 'ss01' on;
+          font-feature-settings: 'ss${formattedCurrentStyleNumber}' on;
           font-variation-settings: 'wght' 600, 'wdth' 100, 'slnt' 5;
         }
       `}

diff --git a/src/ui/components/Selection.tsx b/src/ui/components/Selection.tsx
@@ -1,7 +1,7 @@
 import { isEmpty } from '~utils/not-empty.ts';
 import clsx from 'clsx';
 import { type Oklch } from 'culori/fn';
-import { type ReactElement } from 'react';
+import { type ReactElement, useState } from 'react';
 
 import { generateUIColors } from '../services/theme/generate-ui-colors.ts';
 import { SegmentedFontStyleDefinition } from './SegmentedFontStyleDefinition.tsx';
@@ -24,12 +24,30 @@ interface Props {
   };
 }
 
+const SEGMENTED_FONT_STYLES = {
+  INITIAL: 1,
+  MAX: 2,
+};
+
 export const Selection = ({
   id,
   isLast,
   size,
   userSelection: { apca, bg, fg },
 }: Props): ReactElement => {
+  const [currentStyleNumber, setCurrentStyleNumber] = useState(
+    SEGMENTED_FONT_STYLES.INITIAL
+  );
+
+  const handleCurrentStyleNumberChange = (): void => {
+    const newStyleNumber = currentStyleNumber + 1;
+    if (newStyleNumber > SEGMENTED_FONT_STYLES.MAX) {
+      setCurrentStyleNumber(SEGMENTED_FONT_STYLES.INITIAL);
+    } else {
+      setCurrentStyleNumber(newStyleNumber);
+    }
+  };
+
   if (isEmpty(apca)) {
     return <CantCalculateMessage />;
   }
@@ -54,6 +72,7 @@ export const Selection = ({
       style={{ backgroundColor: uiColors.theme.bg.hex }}
     >
       <SegmentedFontStyleDefinition
+        currentStyleNumber={currentStyleNumber}
         id={id}
         primaryColor={uiColors.theme.fg.hex}
         secondaryColor={uiColors.theme.secondary.hex}
@@ -65,6 +84,7 @@ export const Selection = ({
         fg={fg}
         id={id}
         isLast={isLast}
+        onApcaDoubleClick={handleCurrentStyleNumberChange}
         size={size}
         uiColors={uiColors}
       />

diff --git a/src/ui/components/SelectionContent.tsx b/src/ui/components/SelectionContent.tsx
@@ -15,6 +15,7 @@ interface Props {
   fg: { hex: string; oklch: Oklch };
   id: string;
   isLast?: boolean;
+  onApcaDoubleClick: () => void;
   size: 'large' | 'small';
   uiColors: WidgetProps;
 }
@@ -25,6 +26,7 @@ export const SelectionContent = ({
   fg,
   id,
   isLast,
+  onApcaDoubleClick,
   size,
   uiColors,
 }: Props): ReactElement => {
@@ -76,7 +78,9 @@ export const SelectionContent = ({
             '--text-shadow-color': `${uiColors.theme.fg.hex}3D`,
           }}
         >
-          <h1 className="text-shadow">{Math.abs(apca)}</h1>
+          <h1 className="inline text-shadow" onDoubleClick={onApcaDoubleClick}>
+            {Math.abs(apca)}
+          </h1>
         </div>
       </div>