Scene and Comic

Minor cleanups and refactors to accomodate.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maximeij/react-csstick",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "CSS Stick figures and comics",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",

src/components/Comic/Comic.tsx

@@ -0,0 +1,53 @@
+import React, {FC, useMemo} from 'react';
+
+import {Default} from './presets';
+
+import './style.css';
+import Scene from '@/components/Scene';
+import {baseCSSProps, divCss, multCss} from '@/util/css';
+import {ComicProps} from '@/util/types';
+
+const Comic: FC<ComicProps> = ({color, dimensions, layout, scenes}) => {
+  const {width, height, thickness} = dimensions ?? Default.dimensions;
+
+  const comicStyle = baseCSSProps({
+    width,
+    height,
+    thickness,
+    color,
+  });
+
+  const panels = useMemo(() => {
+    const normalized = layout.flatMap(r => {
+      const total = r.reduce((t, n) => t + n, 0);
+      return r.map(ogN => ogN / (total || 1));
+    });
+
+    return (
+      <div className="row">
+        {normalized.map((nf, idx) => {
+          const sp = scenes[idx];
+          const normalizedProps = sp
+            ? {
+                ...sp,
+                dimensions: {
+                  ...sp.dimensions,
+                  width: multCss(sp.dimensions?.width ?? '', nf),
+                  height: divCss(dimensions?.height ?? '', layout.length || 1),
+                },
+              }
+            : undefined;
+          return normalizedProps && <Scene key={`scene-${idx}`} {...normalizedProps} />;
+        })}
+      </div>
+    );
+  }, [dimensions?.height, layout, scenes]);
+
+  return (
+    <div className="container" style={comicStyle}>
+      {panels}
+    </div>
+  );
+};
+
+export default Comic;

src/components/Comic/index.ts

@@ -0,0 +1,2 @@
+export {default} from './Comic';
+export * as ComicPresets from './presets';

src/components/Comic/presets.ts

@@ -0,0 +1,16 @@
+import {StickPresets} from '@/components/Stick';
+import {ComicProps} from '@/util/types';
+
+const DEFAULT_COMIC_SIZE = '50vmin';
+
+export const Default: Required<ComicProps> = {
+  color: StickPresets.Default.color,
+  dimensions: {
+    width: DEFAULT_COMIC_SIZE,
+    height: DEFAULT_COMIC_SIZE,
+    thickness: StickPresets.Default.dimensions.thickness,
+  },
+  id: '',
+  scenes: [],
+  layout: [],
+};

src/components/Comic/style.css

@@ -0,0 +1,13 @@
+.container {
+  width: var(--w, 100%);
+  height: var(--h, 100%);
+  position: relative;
+  outline: var(--t, 2px) solid var(--c, #888888);
+  margin: 3rem auto;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}

src/components/Scene/Scene.tsx

@@ -0,0 +1,29 @@
+import React, {FC} from 'react';
+
+import {Default} from './presets';
+
+import './style.css';
+import Stick from '@/components/Stick';
+import {baseCSSProps} from '@/util/css';
+import {SceneProps} from '@/util/types';
+
+const Scene: FC<SceneProps> = ({color, dimensions, sticks}) => {
+  const {width, height, thickness} = dimensions ?? Default.dimensions;
+
+  const sceneStyle = baseCSSProps({
+    width,
+    height,
+    thickness,
+    color,
+  });
+
+  return (
+    <div className="container" style={sceneStyle}>
+      {sticks?.map((stickProps, idx) => (
+        <Stick {...stickProps} key={`stick-${idx}-${stickProps.id}`} />
+      ))}
+    </div>
+  );
+};
+
+export default Scene;

src/components/Scene/index.ts

@@ -0,0 +1,2 @@
+export {default} from './Scene';
+export * as ScenePresets from './presets';

src/components/Scene/presets.ts

@@ -0,0 +1,59 @@
+import {StickPresets} from '@/components/Stick';
+import {divCss, offsetVar} from '@/util/css';
+import {Coordinates, SceneProps} from '@/util/types';
+
+const DEFAULT_SCENE_SIZE = '100%';
+
+export const Default: Required<SceneProps> = {
+  color: StickPresets.Default.color,
+  dimensions: {
+    width: DEFAULT_SCENE_SIZE,
+    height: DEFAULT_SCENE_SIZE,
+    thickness: StickPresets.Default.dimensions.thickness,
+  },
+  id: '',
+  sticks: [],
+};
+
+const H = 'h';
+const W = 'w';
+const OP = '0%';
+
+export const Directions: Record<string, Coordinates> = {
+  C: {
+    x: divCss(offsetVar(W), 2),
+    y: divCss(offsetVar(H), 2),
+  },
+  SW: {
+    x: OP,
+    y: offsetVar(H),
+  },
+  W: {
+    x: OP,
+    y: divCss(offsetVar(H), 2),
+  },
+  NW: {
+    x: OP,
+    y: OP,
+  },
+  N: {
+    x: divCss(offsetVar(W), 2),
+    y: OP,
+  },
+  NE: {
+    x: offsetVar(W),
+    y: OP,
+  },
+  E: {
+    x: offsetVar(W),
+    y: divCss(offsetVar(H), 2),
+  },
+  SE: {
+    x: offsetVar(W),
+    y: offsetVar(H),
+  },
+  S: {
+    x: divCss(offsetVar(W), 2),
+    y: offsetVar(H),
+  },
+};

src/components/Scene/style.css

@@ -0,0 +1,7 @@
+.container {
+  width: var(--w, 100%);
+  height: var(--h, 100%);
+  position: relative;
+  outline: var(--t, 2px) solid var(--c, #888888);
+  margin: auto;
+}

src/components/Stick/Stick.tsx

@@ -1,6 +1,6 @@
 import React, {FC} from 'react';
 
-import {Default, POSITIONS} from './presets';
+import {Default, Positions} from './presets';
 
 import './style.css';
 import {rotateTransformCSSProp, stickCSSProps} from '@/util/css';
@@ -9,7 +9,7 @@ import {LimbAngleProps, StickProps} from '@/util/types';
 const Stick: FC<StickProps> = (props = Default) => {
   const {color, posId, customPos, dimensions, coord} = props;
   const hasCustomPose = posId === 'custom' && customPos;
-  const {limbs, offsets} = !hasCustomPose ? POSITIONS[posId ?? 'custom'] : customPos;
+  const {limbs, offsets} = !hasCustomPose ? Positions[posId ?? 'custom'] : customPos;
   const {width, height, thickness} = {...Default.dimensions, ...dimensions};
   const {base = 0, arms, legs} = {...Default.customPos.limbs, ...limbs};
 

src/components/Stick/presets.ts

@@ -1,7 +1,6 @@
-import {divCss, offsetVar} from '@/util/css';
-import {Coordinates, PosType, StickPosition, StickProps} from '@/util/types';
+import {PosType, StickPosition, StickProps} from '@/util/types';
 
-export const DEFAULT_STICK_SIZE = '12rem';
+const DEFAULT_STICK_SIZE = '12rem';
 
 export const Default: Required<StickProps> = {
   color: '#888888',
@@ -23,50 +22,7 @@ export const Default: Required<StickProps> = {
   posId: 'default',
 };
 
-const H = 'h';
-const W = 'w';
-const OP = '0%';
-
-export const COORD: Record<string, Coordinates> = {
-  C: {
-    x: divCss(offsetVar(W), 2),
-    y: divCss(offsetVar(H), 2),
-  },
-  SW: {
-    x: OP,
-    y: offsetVar(H),
-  },
-  W: {
-    x: OP,
-    y: divCss(offsetVar(H), 2),
-  },
-  NW: {
-    x: OP,
-    y: OP,
-  },
-  N: {
-    x: divCss(offsetVar(W), 2),
-    y: OP,
-  },
-  NE: {
-    x: offsetVar(W),
-    y: OP,
-  },
-  E: {
-    x: offsetVar(W),
-    y: divCss(offsetVar(H), 2),
-  },
-  SE: {
-    x: offsetVar(W),
-    y: offsetVar(H),
-  },
-  S: {
-    x: divCss(offsetVar(W), 2),
-    y: offsetVar(H),
-  },
-};
-
-export const POSITIONS: Record<PosType, StickPosition> = {
+export const Positions: Record<PosType, StickPosition> = {
   default: Default.customPos,
   custom: {},
   pointL: {
@@ -85,100 +41,3 @@ export const POSITIONS: Record<PosType, StickPosition> = {
   walkL: {},
   walkR: {},
 };
-
-export const POINT_SIDES: Array<StickProps> = [
-  {
-    ...Default,
-    coord: COORD.E,
-    posId: 'pointL',
-    id: 'R',
-  },
-  {
-    ...Default,
-    coord: COORD.W,
-    posId: 'pointR',
-    id: 'L',
-  },
-];
-
-// export const SIX_CELL_SCENE_PROPS: SceneProps = {
-//   ...DEFAULT_COMMON,
-//   dimensions: {
-//     width: multCss(DEFAULT_STICK_SIZE, 3),
-//     height: multCss(DEFAULT_STICK_SIZE, 2),
-//   },
-//   sticks: POINT_SIDES,
-// };
-
-// export const TWO_CELL_SCENE_PROPS: SceneProps = {
-//   ...DEFAULT_COMMON,
-//   dimensions: {
-//     width: multCss(DEFAULT_STICK_SIZE, 2),
-//     height: DEFAULT_STICK_SIZE,
-//   },
-//   sticks: POINT_SIDES,
-// };
-
-// export const TWO_ROW_COMIC_PROPS: ComicProps = {
-//   ...DEFAULT_COMMON,
-//   id: "def-comic",
-//   dimensions: {
-//     width: multCss(DEFAULT_STICK_SIZE, 4),
-//     height: multCss(DEFAULT_STICK_SIZE, 2),
-//   },
-//   scenes: [
-//     DEFAULT_SCENE_PROPS,
-//     DEFAULT_SCENE_PROPS,
-//     DEFAULT_SCENE_PROPS,
-//     DEFAULT_SCENE_PROPS,
-//     DEFAULT_SCENE_PROPS,
-//     DEFAULT_SCENE_PROPS,
-//   ],
-//   layout: [
-//     [150, 50, 75],
-//     [50, 50, 75],
-//   ],
-// };
-
-// export const COMIC_LAYOUTS: Record<string, Partial<ComicProps>> = {
-//   THREE_STRIP: {
-//     dimensions: {
-//       width: multCss(DEFAULT_STICK_SIZE, 4),
-//       height: DEFAULT_STICK_SIZE,
-//     },
-//     layout: [[2, 2, 3]],
-//   },
-//   THREE_BY_THREE: {
-//     dimensions: {
-//       width: multCss(DEFAULT_STICK_SIZE, 4),
-//       height: multCss(DEFAULT_STICK_SIZE, 4),
-//     },
-//     layout: [
-//       [2, 2, 3],
-//       [3, 2, 2],
-//       [2, 3, 2],
-//     ],
-//   },
-//   SINGLE_MINI: {
-//     dimensions: {
-//       width: DEFAULT_STICK_SIZE,
-//       height: DEFAULT_STICK_SIZE,
-//     },
-//     layout: [[1]],
-//   },
-//   SINGLE_BIG: {
-//     dimensions: {
-//       width: multCss(DEFAULT_STICK_SIZE, 4),
-//       height: multCss(DEFAULT_STICK_SIZE, 4),
-//     },
-//     layout: [[1]],
-//   },
-// };
-
-// export const DEFAULT_COMIC_PROPS: ComicProps = {
-//   ...DEFAULT_COMMON,
-//   id: "def-comic",
-//   dimensions: COMIC_LAYOUTS.THREE_STRIP.dimensions,
-//   scenes: [],
-//   layout: COMIC_LAYOUTS.THREE_STRIP.layout ?? [],
-// };

src/components/index.ts

@@ -1 +1,3 @@
+export {default as Comic, ComicPresets} from './Comic';
+export {default as Scene, ScenePresets} from './Scene';
 export {default as Stick, StickPresets} from './Stick';