Sprites setting: packs selection

satelllte · Nov 18, 2023 · db9b629 · db9b629
1 parent 46c8116
commit db9b629
Show file tree

Hide file tree

Showing 5 changed files with 282 additions and 187 deletions.
diff --git a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
@@ -67,38 +67,11 @@ export function CanvasSection() {
       linesBrightness,
       linesAlpha,
       linesWidth,
+      spritesEnabled,
+      getSprites,
     } = useStore.getState();
 
-    const spritesBaseUrl = '/sprites';
-    const sprites: HTMLImageElement[] = [];
-
-    // Set: classic
-    for (let i = 1; i <= 17; i++) {
-      const sprite = new Image();
-      sprite.src = `${spritesBaseUrl}/classic/${i}.svg`;
-      sprites.push(sprite);
-    }
-
-    // Set: bigdata
-    for (let i = 1; i <= 5; i++) {
-      const sprite = new Image();
-      sprite.src = `${spritesBaseUrl}/bigdata/${i}.svg`;
-      sprites.push(sprite);
-    }
-
-    // Set: aggromaxx
-    for (let i = 1; i <= 12; i++) {
-      const sprite = new Image();
-      sprite.src = `${spritesBaseUrl}/aggromaxx/${i}.svg`;
-      sprites.push(sprite);
-    }
-
-    // Set: crappack
-    for (let i = 1; i <= 27; i++) {
-      const sprite = new Image();
-      sprite.src = `${spritesBaseUrl}/crappack/${i}.svg`;
-      sprites.push(sprite);
-    }
+    const sprites = getSprites();
 
     void draw({
       ctx2d,
@@ -131,6 +104,7 @@ export function CanvasSection() {
         linesBrightness,
         linesAlpha,
         linesWidth,
+        spritesEnabled,
         sprites,
       },
       onEnd(renderTimeMs) {

diff --git a/src/components/pages/Generator/CanvasSection/utils/draw.ts b/src/components/pages/Generator/CanvasSection/utils/draw.ts
@@ -37,6 +37,7 @@ export const draw = async ({
     linesBrightness,
     linesAlpha,
     linesWidth,
+    spritesEnabled,
     sprites: _sprites,
   },
 }: {
@@ -71,6 +72,7 @@ export const draw = async ({
     linesBrightness: NumberDual;
     linesAlpha: NumberDual;
     linesWidth: NumberDual;
+    spritesEnabled: boolean;
     sprites: HTMLImageElement[];
   };
 }): Promise<void> => {
@@ -80,7 +82,7 @@ export const draw = async ({
 
   drawBackground({ctx2d, backgroundBrightness});
 
-  const sprites = await loadSprites(_sprites);
+  const sprites = spritesEnabled ? await loadSprites(_sprites) : [];
 
   animateWithSubIterations({
     iterations,
@@ -139,6 +141,7 @@ export const draw = async ({
           });
           break;
         case 5:
+          if (!spritesEnabled) break;
           drawSprite({
             ctx2d,
             sprites,
@@ -350,8 +353,12 @@ const drawSprite = ({
   ctx2d: CanvasRenderingContext2D;
   sprites: HTMLImageElement[];
 }): void => {
-  const {w, h} = getCanvasDimensions(ctx2d);
+  if (sprites.length <= 0) return;
+
   const sprite = sprites[randomInteger(0, sprites.length - 1)];
+  if (!sprite.complete) return;
+
+  const {w, h} = getCanvasDimensions(ctx2d);
   const size = randomInteger(Math.round(w / 32), Math.round(w / 2));
   const x = randomInteger(Math.round(-w / 16), Math.round(w));
   const y = randomInteger(Math.round(-h / 16), Math.round(h));

diff --git a/src/components/pages/Generator/SettingsSection/SettingsSection.tsx b/src/components/pages/Generator/SettingsSection/SettingsSection.tsx
@@ -1,6 +1,7 @@
 'use client';
 import {Slider} from '@/components/ui/Slider';
 import {Button} from '@/components/ui/Button';
+import {Checkbox} from '@/components/ui/Checkbox';
 import {useStore} from '../store';
 import {SectionTitle} from '../SectionTitle';
 import {type NumberDual} from '@/types';
@@ -30,9 +31,9 @@ import {
   linesWidth as linesWidthConst,
   type SettingConstant,
   type SettingDualConstant,
+  type SpritesPack,
 } from '../constants';
 import {Group} from './Group';
-import {useState} from 'react';
 
 export function SettingsSection() {
   const iterations = useStore((state) => state.iterations);
@@ -69,6 +70,9 @@ export function SettingsSection() {
   const linesAlpha = useStore((state) => state.linesAlpha);
   const linesWidth = useStore((state) => state.linesWidth);
 
+  const spritesEnabled = useStore((state) => state.spritesEnabled);
+  const spritesPacks = useStore((state) => state.spritesPacks);
+
   const setIterations = useStore((state) => state.setIterations);
   const setBackgroundBrightness = useStore(
     (state) => state.setBackgroundBrightness,
@@ -105,7 +109,14 @@ export function SettingsSection() {
   const setLinesAlpha = useStore((state) => state.setLinesAlpha);
   const setLinesWidth = useStore((state) => state.setLinesWidth);
 
-  const [spritesEnabled, setSpritesEnabled] = useState(false);
+  const setSpritesEnabled = useStore((state) => state.setSpritesEnabled);
+  const setSpritesPacks = useStore((state) => state.setSpritesPacks);
+  const setSpritesPackEnabled = (pack: SpritesPack) => (value: boolean) => {
+    setSpritesPacks([
+      ...spritesPacks.filter((p) => p !== pack),
+      ...(value ? [pack] : []),
+    ]);
+  };
 
   const randomize = useStore((state) => state.randomize);
 
@@ -293,13 +304,35 @@ export function SettingsSection() {
         </Group>
         <Group
           withSwitch
-          title='🚧 Sprites 🚧'
+          title='Sprites'
           enabled={spritesEnabled}
           setEnabled={setSpritesEnabled}
         >
-          <span>🚧</span>
-          <span>🚧</span>
-          <span>🚧</span>
+          <div>
+            <div className='pb-1 text-sm'>Packs:</div>
+            <div className='border-l border-l-white/80 pl-2'>
+              <Checkbox
+                label='Classic'
+                isChecked={spritesPackEnabled(spritesPacks, 'classic')}
+                setIsChecked={setSpritesPackEnabled('classic')}
+              />
+              <Checkbox
+                label='Big data'
+                isChecked={spritesPackEnabled(spritesPacks, 'bigdata')}
+                setIsChecked={setSpritesPackEnabled('bigdata')}
+              />
+              <Checkbox
+                label='Aggromaxx'
+                isChecked={spritesPackEnabled(spritesPacks, 'aggromaxx')}
+                setIsChecked={setSpritesPackEnabled('aggromaxx')}
+              />
+              <Checkbox
+                label='Crap pack'
+                isChecked={spritesPackEnabled(spritesPacks, 'crappack')}
+                setIsChecked={setSpritesPackEnabled('crappack')}
+              />
+            </div>
+          </div>
         </Group>
       </div>
     </section>
@@ -352,3 +385,6 @@ function SliderDualWrapper({
     />
   );
 }
+
+const spritesPackEnabled = (packs: SpritesPack[], pack: SpritesPack): boolean =>
+  packs.includes(pack);
diff --git a/src/components/pages/Generator/constants.ts b/src/components/pages/Generator/constants.ts
@@ -22,11 +22,18 @@ export type SettingBooleanConstant = {
   default: boolean;
 };
 
+export type SettingSpritesPacksConstant = {
+  default: SpritesPack[];
+};
+
+export type SpritesPack = 'classic' | 'bigdata' | 'aggromaxx' | 'crappack';
+
 // -------------------
 // HELPER CONSTANTS
 // -------------------
 
 const _booleanTrue: SettingBooleanConstant = {default: true};
+const _booleanFalse: SettingBooleanConstant = {default: false};
 const _brightnessRange: SettingDualConstant = {
   min: 0,
   max: 255,
@@ -116,3 +123,6 @@ export const linesWidth: SettingDualConstant = {
   default: [5, 10],
   step: 1,
 };
+
+export const spritesEnabled: SettingBooleanConstant = _booleanFalse;
+export const spritesPacks: SettingSpritesPacksConstant = {default: ['classic']};