feat: Add shot on two line (#134)

web/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

web/src/themes/04_TWO_LINE/index.ts

@@ -5,7 +5,6 @@ import { ThemeFunc, ThemeOption, ThemeOptionInput } from '../00_BASE/type';
 
 const TWO_LINE_OPTIONS: ThemeOption[] = [
   { key: 'BACKGROUND_COLOR', type: String, default: '#ffffff', description: '#ffffff is white, #000000 is black' },
-  { key: 'SQUARE', type: String, default: 'no', description: 'yes or no' },
   { key: 'PADDING_INSIDE', type: String, default: 'no', description: 'yes or no' },
   { key: 'PADDING_TOP', type: Number, default: 100, description: 'px' },
   { key: 'PADDING_BOTTOM', type: Number, default: 350, description: 'px' },

web/src/themes/05_SHOT_ON/index.ts → web/src/themes/05_SHOT_ON_ONE_LINE/index.ts

@@ -3,12 +3,12 @@ import { Store } from '../../store';
 import sandbox from '../00_BASE/sandbox';
 import { ThemeFunc, ThemeOption, ThemeOptionInput } from '../00_BASE/type';
 
-const SHOT_ON_OPTIONS: ThemeOption[] = [
+const SHOT_ON_ONE_LINE_OPTIONS: ThemeOption[] = [
   { key: 'BACKGROUND_COLOR', type: String, default: '#ffffff', description: '#ffffff is white, #000000 is black' },
   { key: 'TEXT_COLOR', type: String, default: '#000000', description: '#ffffff is white, #000000 is black' },
 ];
 
-const SHOT_ON_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput, store: Store) => {
+const SHOT_ON_ONE_LINE_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput, store: Store) => {
   const BACKGROUND_COLOR = (input.get('BACKGROUND_COLOR') as string).trim();
   const TEXT_COLOR = input.get('TEXT_COLOR') as string;
   const PADDING_BOTTOM = 200;
@@ -52,4 +52,4 @@ const SHOT_ON_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput, store: S
   return canvas;
 };
 
-export { SHOT_ON_FUNC, SHOT_ON_OPTIONS };
+export { SHOT_ON_ONE_LINE_FUNC, SHOT_ON_ONE_LINE_OPTIONS };

web/src/themes/06_SHOT_ON_TWO_LINE/index.ts

@@ -0,0 +1,52 @@
+import Photo from '../../core/photo';
+import { Store } from '../../store';
+import sandbox from '../00_BASE/sandbox';
+import { ThemeFunc, ThemeOption, ThemeOptionInput } from '../00_BASE/type';
+
+const SHOT_ON_TWO_LINE_OPTIONS: ThemeOption[] = [
+  { key: 'BACKGROUND_COLOR', type: String, default: '#ffffff', description: '#ffffff is white, #000000 is black' },
+  { key: 'TEXT_COLOR', type: String, default: '#000000', description: '#ffffff is white, #000000 is black' },
+  { key: 'TOP_LABEL', type: String, default: '@username', description: 'ex. @username' },
+];
+
+const SHOT_ON_TWO_LINE_FUNC: ThemeFunc = (photo: Photo, input: ThemeOptionInput, store: Store) => {
+  const BACKGROUND_COLOR = (input.get('BACKGROUND_COLOR') as string).trim();
+  const TEXT_COLOR = input.get('TEXT_COLOR') as string;
+  const TOP_LABEL = (input.get('TOP_LABEL') as string).trim();
+
+  const canvas = sandbox(photo, BACKGROUND_COLOR, { top: 200, right: 50, bottom: 300, left: 50 });
+
+  const context = canvas.getContext('2d')!;
+  context.fillStyle = TEXT_COLOR;
+  context.textBaseline = 'middle';
+  context.textAlign = 'center';
+
+  // DRAW TOP LABEL
+  context.font = `normal 100 50px Barlow`;
+  context.fillText(TOP_LABEL, canvas.width / 2, 125);
+
+  // shot on ${MAKER} ${MODEL}
+  context.font = `normal 500 80px Barlow`;
+  context.fillText(
+    `shot on ${[
+      store.showCameraMaker ? store.overrideCameraMaker || photo.make : null,
+      store.showCameraModel ? store.overrideCameraModel || photo.model : null,
+    ]
+      .filter(Boolean)
+      .join(' ')}`,
+    canvas.width / 2,
+    canvas.height - 200
+  );
+
+  // ISO ${ISO} | ${F} ${FocalLength} | ${ShutterSpeed}s
+  context.font = `normal 100 50px Barlow`;
+  context.fillText(
+    [`ISO ${photo.iso}`, `${photo.focalLength}`, `${photo.fNumber}`, `${photo.exposureTime}s`].filter(Boolean).join('    '),
+    canvas.width / 2,
+    canvas.height - 100
+  );
+
+  return canvas;
+};
+
+export { SHOT_ON_TWO_LINE_FUNC, SHOT_ON_TWO_LINE_OPTIONS };

web/src/themes/index.ts

@@ -3,8 +3,9 @@ import { NO_FRAME_THEME_FUNC, NO_FRAME_OPTIONS } from './01_NO_FRAME';
 import { ONE_LINE_FUNC, ONE_LINE_OPTIONS } from './03_ONE_LINE';
 import { TWO_LINE_FUNC, TWO_LINE_OPTIONS } from './04_TWO_LINE';
 import { JUST_FRAME_FUNC, JUST_FRAME_OPTIONS } from './02_JUST_FRAME';
-import { SHOT_ON_FUNC, SHOT_ON_OPTIONS } from './05_SHOT_ON';
-import { STRAP_FUNC, STRAP_OPTIONS } from './06_STRAP';
+import { STRAP_FUNC, STRAP_OPTIONS } from './07_STRAP';
+import { SHOT_ON_ONE_LINE_FUNC, SHOT_ON_ONE_LINE_OPTIONS } from './05_SHOT_ON_ONE_LINE';
+import { SHOT_ON_TWO_LINE_FUNC, SHOT_ON_TWO_LINE_OPTIONS } from './06_SHOT_ON_TWO_LINE';
 
 type AcceptInputType = string | number | boolean;
 
@@ -35,10 +36,11 @@ const useThemeStore = create<ThemeStore>((set) => ({
 const themes = [
   { name: 'No frame', func: NO_FRAME_THEME_FUNC, options: NO_FRAME_OPTIONS },
   { name: 'Just frame', func: JUST_FRAME_FUNC, options: JUST_FRAME_OPTIONS },
+  { name: 'Strap', func: STRAP_FUNC, options: STRAP_OPTIONS },
   { name: 'One line', func: ONE_LINE_FUNC, options: ONE_LINE_OPTIONS },
   { name: 'Two line', func: TWO_LINE_FUNC, options: TWO_LINE_OPTIONS },
-  { name: 'Shot on', func: SHOT_ON_FUNC, options: SHOT_ON_OPTIONS },
-  { name: 'Strap', func: STRAP_FUNC, options: STRAP_OPTIONS },
+  { name: 'Shot on one line', func: SHOT_ON_ONE_LINE_FUNC, options: SHOT_ON_ONE_LINE_OPTIONS },
+  { name: 'Shot on two line', func: SHOT_ON_TWO_LINE_FUNC, options: SHOT_ON_TWO_LINE_OPTIONS },
 ];
 
 export default themes;