goblin-gadgets 3.2.2 → 3.2.3

package/widgets/launcher/widget.js

@@ -1,79 +1,79 @@
-import React from 'react';
-import props from './props';
-import scenarios from './scenarios';
-import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
-import Widget from 'goblin-laboratory/widgets/widget';
-import LauncherBlob from 'goblin-gadgets/widgets/launcher-blob/widget';
-import Label from 'goblin-gadgets/widgets/label/widget';
-import Rocket from 'goblin-gadgets/widgets/rocket/widget';
-import * as styles from './styles';
-
-/******************************************************************************/
-
-export default class Launcher extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-  }
-
-  /******************************************************************************/
-
-  renderTitle() {
-    return (
-      <div className={this.styles.classNames.title}>
-        <Label
-          text={this.props.title}
-          grow="1"
-          justify="center"
-          fontSize="400%"
-          fontWeight="bold"
-        />
-      </div>
-    );
-  }
-
-  renderRocket(rocket, index) {
-    return (
-      <Rocket
-        key={index}
-        size="200px"
-        textColor={this.props.rocketTextColor || '#fff'}
-        shadow={this.props.rocketShadow || 'none'}
-        iconShadow={this.props.rocketIconShadow || 'none'}
-        onClick={() => this.props.onLaunchRocket(rocket.id)}
-        {...rocket}
-      />
-    );
-  }
-
-  renderRockets() {
-    if (!this.props.rockets) {
-      return null;
-    }
-
-    let index = 0;
-    return (
-      <div className={this.styles.classNames.rockets}>
-        {this.props.rockets.map((rocket) => this.renderRocket(rocket, index++))}
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div className={this.styles.classNames.launcher}>
-        <LauncherBlob
-          kind={this.props.blobKind}
-          color={this.props.blobColor}
-          duration="30s"
-        />
-        {this.renderTitle()}
-        {this.renderRockets()}
-      </div>
-    );
-  }
-}
-
-/******************************************************************************/
-
-registerWidget(Launcher, props, scenarios);
+import React from 'react';
+import props from './props';
+import scenarios from './scenarios';
+import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
+import Widget from 'goblin-laboratory/widgets/widget';
+import LauncherBlob from 'goblin-gadgets/widgets/launcher-blob/widget';
+import Label from 'goblin-gadgets/widgets/label/widget';
+import Rocket from 'goblin-gadgets/widgets/rocket/widget';
+import * as styles from './styles';
+
+/******************************************************************************/
+
+export default class Launcher extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  /******************************************************************************/
+
+  renderTitle() {
+    return (
+      <div className={this.styles.classNames.title}>
+        <Label
+          text={this.props.title}
+          grow="1"
+          justify="center"
+          fontSize="400%"
+          fontWeight="bold"
+        />
+      </div>
+    );
+  }
+
+  renderRocket(rocket, index) {
+    return (
+      <Rocket
+        key={index}
+        size="200px"
+        textColor={this.props.rocketTextColor || '#fff'}
+        shadow={this.props.rocketShadow || 'none'}
+        iconShadow={this.props.rocketIconShadow || 'none'}
+        onClick={() => this.props.onLaunchRocket(rocket.id)}
+        {...rocket}
+      />
+    );
+  }
+
+  renderRockets() {
+    if (!this.props.rockets) {
+      return null;
+    }
+
+    let index = 0;
+    return (
+      <div className={this.styles.classNames.rockets}>
+        {this.props.rockets.map((rocket) => this.renderRocket(rocket, index++))}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className={this.styles.classNames.launcher}>
+        <LauncherBlob
+          kind={this.props.blobKind}
+          color={this.props.blobColor}
+          duration="30s"
+        />
+        {this.renderTitle()}
+        {this.renderRockets()}
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/
+
+registerWidget(Launcher, props, scenarios);

package/widgets/launcher-blob/props.js

@@ -1,25 +1,25 @@
-import {types} from 'goblin-gadgets/types/types.js';
-
-export default [
-  // Aspect.
-  {
-    name: 'kind',
-    group: 'aspect',
-    type: types.enum(['none', 'blob', 'wave']),
-  },
-  {
-    name: 'color',
-    group: 'aspect',
-    type: types.color,
-  },
-  {
-    name: 'duration',
-    group: 'aspect',
-    type: types.string,
-  },
-  {
-    name: 'direction',
-    group: 'aspect',
-    type: types.enum(['normal', 'reverse']),
-  },
-];
+import {types} from 'goblin-gadgets/types/types.js';
+
+export default [
+  // Aspect.
+  {
+    name: 'kind',
+    group: 'aspect',
+    type: types.enum(['none', 'blob', 'wave']),
+  },
+  {
+    name: 'color',
+    group: 'aspect',
+    type: types.color,
+  },
+  {
+    name: 'duration',
+    group: 'aspect',
+    type: types.string,
+  },
+  {
+    name: 'direction',
+    group: 'aspect',
+    type: types.enum(['normal', 'reverse']),
+  },
+];

package/widgets/launcher-blob/scenarios.js

@@ -1,24 +1,24 @@
-export default [
-  {
-    name: 'blob',
-    props: {
-      kind: 'blob',
-      color: 'purple',
-      duration: '5s',
-      direction: 'normal',
-    },
-  },
-  {
-    name: 'wave',
-    props: {
-      kind: 'wave',
-      color: 'pink',
-      duration: '5s',
-      direction: 'normal',
-    },
-  },
-  {
-    name: 'empty',
-    props: {},
-  },
-];
+export default [
+  {
+    name: 'blob',
+    props: {
+      kind: 'blob',
+      color: 'purple',
+      duration: '5s',
+      direction: 'normal',
+    },
+  },
+  {
+    name: 'wave',
+    props: {
+      kind: 'wave',
+      color: 'pink',
+      duration: '5s',
+      direction: 'normal',
+    },
+  },
+  {
+    name: 'empty',
+    props: {},
+  },
+];

package/widgets/launcher-blob/styles.js

@@ -1,62 +1,62 @@
-/******************************************************************************/
-
-export const propNames = ['color', 'duration', 'direction'];
-
-export default function styles(theme, props) {
-  const {color = 'red', duration = '60s', direction = 'normal'} = props;
-
-  const keyframesBlob = {
-    '0%': {transform: 'scale(1) translate(10px, -15px)'},
-    '38%': {transform: 'scale(1, 0.6) translate(4vw, 18vh) rotate(160deg)'},
-    '40%': {transform: 'scale(1, 0.6) translate(4vw, 18vh) rotate(160deg)'},
-    '78%': {transform: 'scale(1.0, 0.8) translate(-5vw, -9vh) rotate(-20deg)'},
-    '80%': {transform: 'scale(1.0, 0.8) translate(-5vw, -9vh) rotate(-20deg)'},
-    '100%': {transform: 'scale(1) translate(10px, -15px)'},
-  };
-
-  const keyframesWave = {
-    '0%': {transform: 'scale(2,2) translateX(25%) rotate(0deg)'},
-    '20%': {transform: 'scale(3,2) translateX(13%) rotate(-4deg)'},
-    '30%': {transform: 'scale(2.5,2) translateX(6%) rotate(1deg)'},
-    '50%': {transform: 'scale(2,2) translateX(-3%) rotate(-5deg)'},
-    '60%': {transform: 'scale(3,2) translateX(-16%) rotate(-7deg)'},
-    '70%': {transform: 'scale(3.5,2) translateX(-16%) rotate(5deg)'},
-    '85%': {transform: 'scale(2.5,2) translateX(-22%) rotate(-3deg)'},
-    '100%': {transform: 'scale(2,2) translateX(-25%) rotate(0deg)'},
-  };
-
-  const launcherBlob = {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    fill: color,
-    willChange: 'transform',
-    transformOrigin: '50% 50%',
-    animation: `${duration} ease-in-out infinite ${direction}`,
-    animationName: keyframesBlob,
-    pointerEvents: 'none',
-  };
-
-  const launcherWave = {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 'calc(50% - 20px)',
-    fill: color,
-    willChange: 'transform',
-    transformOrigin: 'top',
-    animation: `${duration} ease-in-out infinite ${direction}`,
-    animationDirection: 'alternate',
-    animationName: keyframesWave,
-    pointerEvents: 'none',
-  };
-
-  return {
-    launcherBlob,
-    launcherWave,
-  };
-}
-
-/******************************************************************************/
+/******************************************************************************/
+
+export const propNames = ['color', 'duration', 'direction'];
+
+export default function styles(theme, props) {
+  const {color = 'red', duration = '60s', direction = 'normal'} = props;
+
+  const keyframesBlob = {
+    '0%': {transform: 'scale(1) translate(10px, -15px)'},
+    '38%': {transform: 'scale(1, 0.6) translate(4vw, 18vh) rotate(160deg)'},
+    '40%': {transform: 'scale(1, 0.6) translate(4vw, 18vh) rotate(160deg)'},
+    '78%': {transform: 'scale(1.0, 0.8) translate(-5vw, -9vh) rotate(-20deg)'},
+    '80%': {transform: 'scale(1.0, 0.8) translate(-5vw, -9vh) rotate(-20deg)'},
+    '100%': {transform: 'scale(1) translate(10px, -15px)'},
+  };
+
+  const keyframesWave = {
+    '0%': {transform: 'scale(2,2) translateX(25%) rotate(0deg)'},
+    '20%': {transform: 'scale(3,2) translateX(13%) rotate(-4deg)'},
+    '30%': {transform: 'scale(2.5,2) translateX(6%) rotate(1deg)'},
+    '50%': {transform: 'scale(2,2) translateX(-3%) rotate(-5deg)'},
+    '60%': {transform: 'scale(3,2) translateX(-16%) rotate(-7deg)'},
+    '70%': {transform: 'scale(3.5,2) translateX(-16%) rotate(5deg)'},
+    '85%': {transform: 'scale(2.5,2) translateX(-22%) rotate(-3deg)'},
+    '100%': {transform: 'scale(2,2) translateX(-25%) rotate(0deg)'},
+  };
+
+  const launcherBlob = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    fill: color,
+    willChange: 'transform',
+    transformOrigin: '50% 50%',
+    animation: `${duration} ease-in-out infinite ${direction}`,
+    animationName: keyframesBlob,
+    pointerEvents: 'none',
+  };
+
+  const launcherWave = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 'calc(50% - 20px)',
+    fill: color,
+    willChange: 'transform',
+    transformOrigin: 'top',
+    animation: `${duration} ease-in-out infinite ${direction}`,
+    animationDirection: 'alternate',
+    animationName: keyframesWave,
+    pointerEvents: 'none',
+  };
+
+  return {
+    launcherBlob,
+    launcherWave,
+  };
+}
+
+/******************************************************************************/

package/widgets/launcher-blob/widget.js

@@ -1,50 +1,50 @@
-import React from 'react';
-import props from './props';
-import scenarios from './scenarios';
-import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
-import Widget from 'goblin-laboratory/widgets/widget';
-import * as styles from './styles';
-
-/******************************************************************************/
-
-export default class LauncherBlob extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-  }
-
-  renderWave() {
-    return (
-      <div className={this.styles.classNames.launcherWave}>
-        <svg viewBox="0 -10 297 210">
-          <path d="m0 210v-210c11.967 4.6933 17.656-2.6807 26.401-3.4144 17.858-1.4982 15.87 6.3329 26.016 6.8302 5.5989 0.27446 12.175-6.0911 17.735-5.6633 8.4981 0.65378 13.814 6.8138 22.378 6.4341 12.034-0.53358 19.69-9.5641 31.682-8.8311 9.8009 0.59908 8.3159 10.576 17.852 11.859 7.1212 0.95798 9.5798-6.566 16.847-7.191 11.94-1.027 24.46 4.5648 35.956 2.6493 12.783-2.1297 9.6811-8.5442 23.133-8.2003 10.218 0.26123 6.5631 7.7036 16.344 9.2095 12.961 1.9956 24.451-6.793 37.968-7.3172 5.8495-0.22685 8.0543 6.6039 13.814 7.1631 3.9539 0.38389 5.0908-4.6654 10.874-3.5279v210z" />
-        </svg>
-      </div>
-    );
-  }
-
-  // See https://css-tricks.com/blobs/
-  renderBlob() {
-    return (
-      <div className={this.styles.classNames.launcherBlob}>
-        <svg viewBox="0 0 310 350">
-          <path d="m156.4 339.5c31.8-2.5 59.4-26.8 80.2-48.5 28.3-29.5 40.5-47 56.1-85.1 14-34.3 20.7-75.6 2.3-111-18.1-34.8-55.7-58-90.4-72.3-11.7-4.8-24.1-8.8-45.05-13.2s-49.85-4.6-75.65 4.4c-38.8 13.6-64 48.8-66.8 90.3-3 43.9 17.8 88.3 33.7 128.8 5.3 13.5 10.4 27.1 14.9 40.9 11.8 36.1 45.3 69.2 90.7 65.7z" />
-        </svg>
-      </div>
-    );
-  }
-
-  render() {
-    if (this.props.kind === 'wave') {
-      return this.renderWave();
-    } else if (this.props.kind === 'blob') {
-      return this.renderBlob();
-    } else {
-      return null;
-    }
-  }
-}
-
-/******************************************************************************/
-
-registerWidget(LauncherBlob, props, scenarios);
+import React from 'react';
+import props from './props';
+import scenarios from './scenarios';
+import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles';
+
+/******************************************************************************/
+
+export default class LauncherBlob extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  renderWave() {
+    return (
+      <div className={this.styles.classNames.launcherWave}>
+        <svg viewBox="0 -10 297 210">
+          <path d="m0 210v-210c11.967 4.6933 17.656-2.6807 26.401-3.4144 17.858-1.4982 15.87 6.3329 26.016 6.8302 5.5989 0.27446 12.175-6.0911 17.735-5.6633 8.4981 0.65378 13.814 6.8138 22.378 6.4341 12.034-0.53358 19.69-9.5641 31.682-8.8311 9.8009 0.59908 8.3159 10.576 17.852 11.859 7.1212 0.95798 9.5798-6.566 16.847-7.191 11.94-1.027 24.46 4.5648 35.956 2.6493 12.783-2.1297 9.6811-8.5442 23.133-8.2003 10.218 0.26123 6.5631 7.7036 16.344 9.2095 12.961 1.9956 24.451-6.793 37.968-7.3172 5.8495-0.22685 8.0543 6.6039 13.814 7.1631 3.9539 0.38389 5.0908-4.6654 10.874-3.5279v210z" />
+        </svg>
+      </div>
+    );
+  }
+
+  // See https://css-tricks.com/blobs/
+  renderBlob() {
+    return (
+      <div className={this.styles.classNames.launcherBlob}>
+        <svg viewBox="0 0 310 350">
+          <path d="m156.4 339.5c31.8-2.5 59.4-26.8 80.2-48.5 28.3-29.5 40.5-47 56.1-85.1 14-34.3 20.7-75.6 2.3-111-18.1-34.8-55.7-58-90.4-72.3-11.7-4.8-24.1-8.8-45.05-13.2s-49.85-4.6-75.65 4.4c-38.8 13.6-64 48.8-66.8 90.3-3 43.9 17.8 88.3 33.7 128.8 5.3 13.5 10.4 27.1 14.9 40.9 11.8 36.1 45.3 69.2 90.7 65.7z" />
+        </svg>
+      </div>
+    );
+  }
+
+  render() {
+    if (this.props.kind === 'wave') {
+      return this.renderWave();
+    } else if (this.props.kind === 'blob') {
+      return this.renderBlob();
+    } else {
+      return null;
+    }
+  }
+}
+
+/******************************************************************************/
+
+registerWidget(LauncherBlob, props, scenarios);