fix resize event

Author: Marinich Maxim

.eslintrc

@@ -35,7 +35,7 @@
     "indent": ["warn", "tab", { "SwitchCase": 1 }],
     "no-debugger": 0,
     "no-console": [
-      "error",
+      "warn",
       {
         "allow": ["debug"]
       }

package-lock.json

@@ -76,6 +76,7 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@babel/runtime": "7.20.1",
+    "@types/d3-ease": "^3.0.2",
     "@types/jest": "29.2.3",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
@@ -87,6 +88,7 @@
     "copy-webpack-plugin": "11.0.0",
     "core-js": "3.26.1",
     "css-loader": "6.7.2",
+    "d3-ease": "^3.0.1",
     "eslint": "8.27.0",
     "eslint-plugin-react": "7.31.10",
     "eslint-webpack-plugin": "^3.2.0",
@@ -105,6 +107,7 @@
     "markdown-loader": "8.0.0",
     "marked": "4.2.2",
     "mini-css-extract-plugin": "2.7.0",
+    "nanoid": "^5.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",

package.json

@@ -1,5 +1,5 @@
 $color-light: #fff;
-$color-bg: #C7CDDE;
+$color-bg: #c7cdde;
 $color-accent: darkred;
 $color-dark: #435794;
 $color-dark-lighten: #3f51b5;
@@ -8,6 +8,25 @@ $color-base-lighten: #b1e9ea;
 $content-max-width: 1200px;
 $content-min-width: 320px;
 
+$color-roulette-6: rgba(18, 4, 28, 1);
+$color-roulette-5: rgba(58, 8, 95, 1);
+$color-roulette-4: rgba(75, 30, 121, 1);
+$color-roulette-3: rgb(92, 49, 151);
+$color-roulette-2: rgb(131, 110, 179);
+$color-roulette-1: rgb(186, 175, 213);
+
+//$color-roulette-5: rgba(10, 28, 102, 0.9);
+//$color-roulette-4: rgba(10, 28, 102, 0.7);
+//$color-roulette-3: rgba(10, 28, 102, 0.6);
+//$color-roulette-2: rgba(10, 28, 102, 0.5);
+//$color-roulette-1: rgba(10, 28, 102, 0.3);
+//
+//$color-roulette-5: rgba(63, 81, 181, 1);
+//$color-roulette-4: rgba(63, 81, 181, 0.8);
+//$color-roulette-3: rgba(63, 81, 181, 0.6);
+//$color-roulette-2: rgba(63, 81, 181, 0.5);
+//$color-roulette-1: rgba(63, 81, 181, 0.4);
+
 @mixin container {
 	width: 100%;
 	height: 100%;
@@ -16,5 +35,5 @@ $content-min-width: 320px;
 	box-sizing: border-box;
 	margin: auto;
 	overflow-x: hidden;
-    padding: 20px;
+	padding: 20px;
 }

src/common.scss

@@ -8,6 +8,7 @@ import StagePaddingPage from './stage-padding';
 import Events from './events';
 import CustomComponents from './custom-components';
 import LazyLoadingPage from './lazy-loading';
+import SandboxPage from './sandbox';
 import './styles.scss';
 
 export default function getPageComponent(pageID = '') {
@@ -38,5 +39,8 @@ export default function getPageComponent(pageID = '') {
 	if (pageID === 'lazy-loading') {
 		return <LazyLoadingPage />;
 	}
+	if (pageID === 'sandbox') {
+		return <SandboxPage />;
+	}
 	return null;
 }

src/components/pages/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import RouletteExample from './roulette/Roulette';
+import Anchor, { genAnchorProps } from '../../the-anchor';
+
+export default function SandboxPage() {
+	return (
+		<section className="p-basic p-sandbox">
+			<h2 className="title">
+				<Anchor {...genAnchorProps('sandbox-roulette')} />
+				&nbsp; Roulette Animation
+			</h2>
+			<RouletteExample />
+			<br />
+			<br />
+			<br />
+		</section>
+	);
+}