diff --git a/src/photo/PhotoRecipe.tsx b/src/photo/PhotoRecipe.tsx index cc14661d..5465cdac 100644 --- a/src/photo/PhotoRecipe.tsx +++ b/src/photo/PhotoRecipe.tsx @@ -2,9 +2,25 @@ import { FujifilmRecipe } from '@/platforms/fujifilm/recipe'; import { FilmSimulation } from '@/simulation'; import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation'; import clsx from 'clsx/lite'; +import { IoCloseCircle } from 'react-icons/io5'; const addSign = (value = 0) => value < 0 ? value : `+${value}`; +const getRandomInt = () => { + const randomInt = Math.floor(Math.random() * 4) + 1; + return Math.random() >= 0.5 ? randomInt : -randomInt; +}; + +const random = { + highlight: getRandomInt(), + shadow: getRandomInt(), + color: getRandomInt(), + sharpness: getRandomInt(), + clarity: getRandomInt(), + colorChromeEffect: getRandomInt(), + colorChromeFXBlue: getRandomInt(), +}; + export default function PhotoRecipe({ recipe: { dynamicRange, @@ -23,29 +39,31 @@ export default function PhotoRecipe({ bwMagentaGreen, }, simulation, + exposure, + iso, }: { recipe: FujifilmRecipe simulation: FilmSimulation + exposure: string + iso: string }) { const whiteBalanceFormatted = (whiteBalance?.type ?? 'auto') .replaceAll('auto', ' ') .replaceAll('-', ' '); - const hasCustomizedWhiteBalance = - Boolean(whiteBalance?.red) || - Boolean(whiteBalance?.blue); - const hasBWAdjustments = Boolean(bwAdjustment) || Boolean(bwMagentaGreen); const renderDataSquare = (label: string, value: string | number = '0') => (
{typeof value === 'number' ? addSign(value) : value}
-
+
{label}
@@ -53,72 +71,84 @@ export default function PhotoRecipe({ return
-
- -
- DR - {dynamicRange ?? 100} -
+
+ +
-
-
- {whiteBalanceFormatted.length <= 8 && 'AWB: '} - {whiteBalanceFormatted} - {hasCustomizedWhiteBalance && <> - {' '} - {'('} - R {addSign(whiteBalance?.red ?? 0)} - / - B {addSign(whiteBalance?.blue ?? 0)} - {')'} - } +
+
+
+ DR{dynamicRange ?? 100} +
+
+ {iso} +
+
+ {exposure} +
- {renderDataSquare('Highlight', highlight)} - {renderDataSquare('Shadow', shadow)} + {renderDataSquare( + `R${addSign(whiteBalance?.red)} / B${addSign(whiteBalance?.blue)}`, + whiteBalanceFormatted, + )} +
+
+ {renderDataSquare('Highlight', highlight || random.highlight)} + {renderDataSquare('Shadow', shadow || random.shadow)}
{/* TODO: Confirm color vs saturation label */} - {renderDataSquare('Color', color)} - {renderDataSquare('Sharp', sharpness)} - {renderDataSquare('Clarity', clarity)} + {renderDataSquare('Color', color || random.color)} + {renderDataSquare('Sharpness', sharpness || random.sharpness)} + {renderDataSquare('Clarity', clarity || random.clarity)}
- {renderDataSquare('Chrome', colorChromeEffect)} + {renderDataSquare('Color Chrome', colorChromeEffect)} {renderDataSquare('FX Blue', colorChromeFXBlue)}
-
- {highISONoiseReduction !== undefined - ? <> - High ISO NR: - {addSign(highISONoiseReduction)} - - : <> - Noise Reduction: - {noiseReductionBasic} - - } -
{grainEffect && -
- Grain: - {' '} - {grainEffect.roughness} - {' / '} - {grainEffect.size} +
+ {renderDataSquare( + highISONoiseReduction !== undefined + ? 'High ISO NR' + : 'Noise Reduction', + highISONoiseReduction ?? noiseReductionBasic, + )} + {renderDataSquare( + 'Grain', + // eslint-disable-next-line max-len + `${grainEffect.roughness} / ${grainEffect.size === 'large' ? 'LG' : grainEffect.size === 'small' ? 'SM' : 'OFF'}`, + )}
} {hasBWAdjustments && -
- BW Adjustment: {addSign(bwAdjustment)} - {' / '} - MG: {addSign(bwMagentaGreen)} +
+ {renderDataSquare('BW Adjustment', bwAdjustment)} + {renderDataSquare('BW Magenta Green', bwMagentaGreen)}
}
diff --git a/src/photo/PhotoRecipeFrostDark.tsx b/src/photo/PhotoRecipeFrostDark.tsx deleted file mode 100644 index d0b9bb20..00000000 --- a/src/photo/PhotoRecipeFrostDark.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { FujifilmRecipe } from '@/platforms/fujifilm/recipe'; -import { FilmSimulation } from '@/simulation'; -import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation'; -import clsx from 'clsx/lite'; - -const addSign = (value = 0) => value < 0 ? value : `+${value}`; - -export default function PhotoRecipeFrostDark({ - recipe: { - dynamicRange, - whiteBalance, - highISONoiseReduction, - noiseReductionBasic, - highlight, - shadow, - color, - sharpness, - clarity, - colorChromeEffect, - colorChromeFXBlue, - grainEffect, - bwAdjustment, - bwMagentaGreen, - }, - simulation, -}: { - recipe: FujifilmRecipe - simulation: FilmSimulation -}) { - const whiteBalanceFormatted = (whiteBalance?.type ?? 'auto') - .replaceAll('auto', ' ') - .replaceAll('-', ' '); - - const hasCustomizedWhiteBalance = - Boolean(whiteBalance?.red) || - Boolean(whiteBalance?.blue); - - const hasBWAdjustments = - Boolean(bwAdjustment) || - Boolean(bwMagentaGreen); - - const renderDataSquare = (label: string, value: string | number = '0') => ( -
-
{typeof value === 'number' ? addSign(value) : value}
-
- {label} -
-
- ); - - return
-
-
- -
- DR - {dynamicRange ?? 100} -
-
-
-
- {whiteBalanceFormatted.length <= 8 && 'AWB: '} - {whiteBalanceFormatted} - {hasCustomizedWhiteBalance && <> - {' '} - {'('} - R {addSign(whiteBalance?.red ?? 0)} - / - B {addSign(whiteBalance?.blue ?? 0)} - {')'} - } -
-
- {renderDataSquare('Highlight', highlight)} - {renderDataSquare('Shadow', shadow)} -
-
- {/* TODO: Confirm color vs saturation label */} - {renderDataSquare('Color', color)} - {renderDataSquare('Sharp', sharpness)} - {renderDataSquare('Clarity', clarity)} -
-
- {renderDataSquare('Chrome', colorChromeEffect)} - {renderDataSquare('FX Blue', colorChromeFXBlue)} -
-
- {highISONoiseReduction !== undefined - ? <> - High ISO NR: - {addSign(highISONoiseReduction)} - - : <> - Noise Reduction: - {noiseReductionBasic} - - } -
- {grainEffect && -
- Grain: - {' '} - {grainEffect.roughness} - {' / '} - {grainEffect.size} -
} - {hasBWAdjustments && -
- BW Adjustment: {addSign(bwAdjustment)} - {' / '} - MG: {addSign(bwMagentaGreen)} -
} -
-
-
; -} diff --git a/src/photo/PhotoRecipeFrostLight.tsx b/src/photo/PhotoRecipeFrostLight.tsx deleted file mode 100644 index 2a023d36..00000000 --- a/src/photo/PhotoRecipeFrostLight.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { FujifilmRecipe } from '@/platforms/fujifilm/recipe'; -import { FilmSimulation } from '@/simulation'; -import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation'; -import clsx from 'clsx/lite'; -import { IoCloseCircle } from 'react-icons/io5'; - -const addSign = (value = 0) => value < 0 ? value : `+${value}`; - -const getRandomInt = () => { - const randomInt = Math.floor(Math.random() * 4) + 1; - return Math.random() >= 0.5 ? randomInt : -randomInt; -}; - -const random = { - highlight: getRandomInt(), - shadow: getRandomInt(), - color: getRandomInt(), - sharpness: getRandomInt(), - clarity: getRandomInt(), - colorChromeEffect: getRandomInt(), - colorChromeFXBlue: getRandomInt(), -}; - -export default function PhotoRecipeFrostLight({ - recipe: { - dynamicRange, - whiteBalance, - highISONoiseReduction, - noiseReductionBasic, - highlight, - shadow, - color, - sharpness, - clarity, - colorChromeEffect, - colorChromeFXBlue, - grainEffect, - bwAdjustment, - bwMagentaGreen, - }, - simulation, - exposure, - iso, -}: { - recipe: FujifilmRecipe - simulation: FilmSimulation - exposure: string - iso: string -}) { - const whiteBalanceFormatted = (whiteBalance?.type ?? 'auto') - .replaceAll('auto', ' ') - .replaceAll('-', ' '); - - const hasBWAdjustments = - Boolean(bwAdjustment) || - Boolean(bwMagentaGreen); - - const renderDataSquare = (label: string, value: string | number = '0') => ( -
-
{typeof value === 'number' ? addSign(value) : value}
-
- {label} -
-
- ); - - return
-
-
- - -
-
-
-
- DR{dynamicRange ?? 100} -
-
- {iso} -
-
- {exposure} -
-
-
- {renderDataSquare( - `R${addSign(whiteBalance?.red)} / B${addSign(whiteBalance?.blue)}`, - whiteBalanceFormatted, - )} -
-
- {renderDataSquare('Highlight', highlight || random.highlight)} - {renderDataSquare('Shadow', shadow || random.shadow)} -
-
- {/* TODO: Confirm color vs saturation label */} - {renderDataSquare('Color', color || random.color)} - {renderDataSquare('Sharpness', sharpness || random.sharpness)} - {renderDataSquare('Clarity', clarity || random.clarity)} -
-
- {renderDataSquare('Color Chrome', colorChromeEffect)} - {renderDataSquare('FX Blue', colorChromeFXBlue)} -
- {grainEffect && -
- {renderDataSquare( - highISONoiseReduction !== undefined - ? 'High ISO NR' - : 'Noise Reduction', - highISONoiseReduction ?? noiseReductionBasic, - )} - {renderDataSquare( - 'Grain', - // eslint-disable-next-line max-len - `${grainEffect.roughness} / ${grainEffect.size === 'large' ? 'LG' : grainEffect.size === 'small' ? 'SM' : 'OFF'}`, - )} -
} - {hasBWAdjustments && -
- {renderDataSquare('BW Adjustment', bwAdjustment)} - {renderDataSquare('BW Magenta Green', bwMagentaGreen)} -
} -
-
-
; -} diff --git a/src/photo/PhotoRecipeFrostLightV2.tsx b/src/photo/PhotoRecipeFrostLightV2.tsx deleted file mode 100644 index 5a0e006c..00000000 --- a/src/photo/PhotoRecipeFrostLightV2.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import { FujifilmRecipe } from '@/platforms/fujifilm/recipe'; -import { FilmSimulation } from '@/simulation'; -import PhotoFilmSimulation from '@/simulation/PhotoFilmSimulation'; -import clsx from 'clsx/lite'; -import { IoCloseCircle } from 'react-icons/io5'; - -const addSign = (value = 0) => value < 0 ? value : `+${value}`; - -const getRandomInt = () => { - const randomInt = Math.floor(Math.random() * 4) + 1; - return Math.random() >= 0.5 ? randomInt : -randomInt; -}; - -const random = { - highlight: getRandomInt(), - shadow: getRandomInt(), - color: getRandomInt(), - sharpness: getRandomInt(), - clarity: getRandomInt(), - colorChromeEffect: getRandomInt(), - colorChromeFXBlue: getRandomInt(), -}; - -export default function PhotoRecipeFrostLightV2({ - recipe: { - dynamicRange, - whiteBalance, - highISONoiseReduction, - noiseReductionBasic, - highlight, - shadow, - color, - sharpness, - clarity, - colorChromeEffect, - colorChromeFXBlue, - grainEffect, - bwAdjustment, - bwMagentaGreen, - }, - simulation, - exposure, - iso, -}: { - recipe: FujifilmRecipe - simulation: FilmSimulation - exposure: string - iso: string -}) { - const whiteBalanceFormatted = (whiteBalance?.type ?? 'auto') - .replaceAll('auto', ' ') - .replaceAll('-', ' '); - - const hasBWAdjustments = - Boolean(bwAdjustment) || - Boolean(bwMagentaGreen); - - const renderDataSquare = (label: string, value: string | number = '0') => ( -
-
{typeof value === 'number' ? addSign(value) : value}
-
- {label} -
-
- ); - - return
-
-
- - -
-
-
-
- DR{dynamicRange ?? 100} -
-
- {iso} -
-
- {exposure} -
-
-
- {renderDataSquare( - `R${addSign(whiteBalance?.red)} / B${addSign(whiteBalance?.blue)}`, - whiteBalanceFormatted, - )} -
-
- {renderDataSquare('Highlight', highlight || random.highlight)} - {renderDataSquare('Shadow', shadow || random.shadow)} -
-
- {/* TODO: Confirm color vs saturation label */} - {renderDataSquare('Color', color || random.color)} - {renderDataSquare('Sharpness', sharpness || random.sharpness)} - {renderDataSquare('Clarity', clarity || random.clarity)} -
-
- {renderDataSquare('Color Chrome', colorChromeEffect)} - {renderDataSquare('FX Blue', colorChromeFXBlue)} -
- {grainEffect && -
- {renderDataSquare( - highISONoiseReduction !== undefined - ? 'High ISO NR' - : 'Noise Reduction', - highISONoiseReduction ?? noiseReductionBasic, - )} - {renderDataSquare( - 'Grain', - // eslint-disable-next-line max-len - `${grainEffect.roughness} / ${grainEffect.size === 'large' ? 'LG' : grainEffect.size === 'small' ? 'SM' : 'OFF'}`, - )} -
} - {hasBWAdjustments && -
- {renderDataSquare('BW Adjustment', bwAdjustment)} - {renderDataSquare('BW Magenta Green', bwMagentaGreen)} -
} -
-
-
; -} diff --git a/src/photo/PhotoRecipeOverlay.tsx b/src/photo/PhotoRecipeOverlay.tsx index d8ca5cee..d7b74237 100644 --- a/src/photo/PhotoRecipeOverlay.tsx +++ b/src/photo/PhotoRecipeOverlay.tsx @@ -2,7 +2,7 @@ import { FujifilmRecipe } from '@/platforms/fujifilm/recipe'; import { FilmSimulation } from '@/simulation'; import clsx from 'clsx/lite'; import ImageLarge from '@/components/image/ImageLarge'; -import PhotoRecipeFrostLightV2 from './PhotoRecipeFrostLightV2'; +import PhotoRecipe from './PhotoRecipe'; export default function PhotoRecipeOverlay({ backgroundImageUrl, @@ -31,7 +31,7 @@ export default function PhotoRecipeOverlay({ 'absolute inset-0', 'flex items-center justify-center', )}> -