grevlingui 0.1.9 → 0.1.10

package/Dots/Dots.css

@@ -7,8 +7,21 @@
     width: 6rem;
 }
 
+.flipped.dots {
+    transform: rotate(45deg);
+}
+
+.big.dots {
+    grid-template-columns: repeat(4, 2rem);
+    grid-template-rows: repeat(4, 2rem);
+    height: 8rem;
+    width: 8rem;
+    transform: rotate(135deg);
+}
+
 .dots .dot {
-    width: 1.6rem;
-    height: 1.6rem;
+    width: 26px;
+    height: 26px;
     border-radius: 100%;
+    margin: 3px;
 }

package/Dots/Dots.js

@@ -18,14 +18,15 @@ require("./Dots.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Dots = _ref => {
-  var _grids$num;
+  var _grids$version$num;
 
   let {
     num,
-    color
+    color,
+    version = 0
   } = _ref;
-  const grids = [[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 3, 5, 6, 8], [0, 2, 3, 4, 5, 6, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]];
-  const grid = (_grids$num = grids[num]) !== null && _grids$num !== void 0 ? _grids$num : [];
+  const grids = [[[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 3, 5, 6, 8], [0, 2, 3, 4, 5, 6, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 5, 6, 7, 8], [0, 2, 4, 5, 6, 7, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [8], [4, 8], [2, 6, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 5, 6, 7, 8], [0, 2, 4, 5, 6, 7, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [0], [1, 4], [0, 1, 4], [0, 1, 4, 5], [0, 1, 4, 6, 9], [0, 1, 4, 5, 6, 9], [0, 1, 4, 5, 6, 9, 10], [0, 1, 4, 5, 6, 9, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14, 15]], [[], [0], [0, 5], [0, 1, 4], [0, 1, 4, 5], [0, 1, 4, 5, 10], [0, 1, 4, 5, 6, 9], [0, 1, 4, 5, 6, 9, 10], [0, 1, 4, 5, 6, 9, 10, 15], [0, 1, 4, 5, 6, 9, 10, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14, 15]]];
+  const grid = (_grids$version$num = grids[version][num]) !== null && _grids$version$num !== void 0 ? _grids$version$num : [];
 
   const renderDot = i => grid.includes(i) ? /*#__PURE__*/_react.default.createElement("div", {
     key: "dot-".concat(i),
@@ -38,8 +39,8 @@ const Dots = _ref => {
   });
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "dots"
-  }, [...Array(9).keys()].map(renderDot));
+    className: "dots".concat(version ? ' flipped' : '').concat(version > 2 ? ' big' : '')
+  }, [...Array(version > 2 ? 16 : 9).keys()].map(renderDot));
 };
 
 exports.Dots = Dots;

package/SunMoon.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SunMoon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SunMoon = _ref => {
+  let {
+    sun,
+    color = 'white',
+    tt = 300,
+    size = 32,
+    onClick
+  } = _ref;
+
+  const transition = keys => keys.map(key => "".concat(key, " ").concat(tt, "ms linear")).join(', ');
+
+  const path = d => /*#__PURE__*/_react.default.createElement("path", {
+    d: d,
+    fill: color,
+    style: {
+      transition: transition(['d', 'fill'])
+    }
+  });
+
+  const circle = (cx, cy, r, fill) => /*#__PURE__*/_react.default.createElement("circle", {
+    cx: cx,
+    cy: cy,
+    r: r,
+    fill: fill,
+    style: {
+      transition: transition(['r', 'cy', 'cx', 'fill'])
+    }
+  });
+
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 120 120",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      transition: "fill ".concat(tt, "ms linear")
+    },
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement("mask", {
+    id: "moonMask"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    height: "10000",
+    width: "10000",
+    fill: "white"
+  }), sun ? circle("91", "43", "0", "black") : circle("73", "53", "35", "black")), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#moonMask)"
+  }, sun ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 2L68 18H52L60 2Z"), path("M60 118L52 102L68 102L60 118Z"), path("M89 9.77053L87.9282 27.6269L74.0718 19.6269L89 9.77053Z"), path("M31 110.229L32.0718 92.3731L45.9282 100.373L31 110.229Z"), path("M110.229 31L100.373 45.9282L92.3731 32.0718L110.229 31Z"), path("M9.77053 89L19.6269 74.0718L27.6269 87.9282L9.77053 89Z"), path("M118 60L102 68L102 52L118 60Z"), path("M2 60L18 52L18 68L2 60Z"), path("M110.229 89L92.3731 87.9282L100.373 74.0718L110.229 89Z"), path("M9.77052 31L27.6269 32.0718L19.6269 45.9282L9.77052 31Z"), path("M89 110.229L74.0718 100.373L87.9282 92.3731L89 110.229Z"), path("M31 9.77053L45.9282 19.6269L32.0718 27.6269L31 9.77053Z"), circle("60", "60", "35", color)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 15L68 31H52L60 15Z"), path("M60 105L52 89L68 89L60 105Z"), path("M82.5 21.0289L81.4282 38.8853L67.5718 30.8853L82.5 21.0289Z"), path("M37.5 98.9711L38.5718 81.1147L52.4282 89.1147L37.5 98.9711Z"), path("M98.9712 37.5L89.1148 52.4282L81.1148 38.5718L98.9712 37.5Z"), path("M21.0289 82.5L30.8853 67.5718L38.8853 81.4282L21.0289 82.5Z"), path("M105 60L89 68L89 52L105 60Z"), path("M15 60L31 52L31 68L15 60Z"), path("M98.9711 82.5L81.1147 81.4282L89.1147 67.5718L98.9711 82.5Z"), path("M21.0288 37.5L38.8852 38.5718L30.8852 52.4282L21.0288 37.5Z"), path("M82.5 98.9711L67.5718 89.1147L81.4282 81.1147L82.5 98.9711Z"), path("M37.5 21.0289L52.4282 30.8853L38.5718 38.8853L37.5 21.0289Z"), circle("60", "60", "45", color))));
+};
+
+exports.SunMoon = SunMoon;

package/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "SettingsButton", {
     return _SettingsButton.SettingsButton;
   }
 });
+Object.defineProperty(exports, "SunMoon", {
+  enumerable: true,
+  get: function get() {
+    return _SunMoon.SunMoon;
+  }
+});
 Object.defineProperty(exports, "ToggleSwitch", {
   enumerable: true,
   get: function get() {
@@ -94,6 +100,8 @@ var _CheckBox = require("./CheckBox");
 
 var _Dots = require("./Dots/Dots");
 
+var _SunMoon = require("./SunMoon");
+
 var _ToggleSwitch = require("./ToggleSwitch");
 
 var _NumberSelect = require("./NumberSelect/NumberSelect");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grevlingui",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "GUI elements",
   "main": "index.jsx",
   "repository": {