Added image loop

1 files changed, 74 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/image_loop.tsx b/packages/website/ts/@next/components/image_loop.tsx
new file mode 100644
index 000000000..8b3ee2eb9
--- /dev/null
+++ b/packages/website/ts/@next/components/image_loop.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import * as _ from 'lodash/collection';
+import styled from 'styled-components';
+
+interface Props {
+    name: string;
+    size?: 'small' | 'medium' | 'large' | number;
+}
+
+export class ImageLoop extends React.Component<Props> {
+    private _img: Image;
+    private _ctx: CanvasRenderingContext2D;
+    private _x = 0;
+    private _speed = -1;
+    private _canvas = React.createRef();
+
+    constructor(props: Props) {
+        super(props);
+    }
+    public componentDidMount(): void {
+        const domImage = React.Children.only(this.props.children);
+
+        debugger;
+
+        this._img = new Image(1446, 407);
+        this._img.src = domImage.src;
+        this._ctx = this._canvas.current.getContext('2d');
+
+        this._img.onload = this.updateCanvas.bind(this);
+    }
+    public render(): React.ReactNode {
+        return (
+            <Wrapper {...this.props}>
+                <canvas id="canvas" style={{ width: '100vw', height: '407px' }} ref={this._canvas} />
+            </Wrapper>
+        );
+    }
+    public updateCanvas(): void {
+        this.move();
+
+        const { width, height } = this._canvas.current;
+
+        this._ctx.clearRect(0, 0, width, height);
+        this.draw();
+
+        requestAnimationFrame(this.updateCanvas.bind(this));
+    }
+    public move(): void {
+        this._x += this._speed;
+        this._x %= this._canvas.current.width;
+    }
+    public draw(): void {
+        const img = this._img;
+        const imgWidth = img.naturalWidth / 2;
+        const imgHeight = img.naturalHeight / 2;
+        const currentPosition = this._x;
+        const canvasWidth = this._canvas.current.width;
+
+        this._ctx.drawImage(img, currentPosition, 0, imgWidth, imgHeight);
+
+        if (this._speed < 0) {
+            this._ctx.drawImage(img, currentPosition + canvasWidth, 0, imgWidth, imgHeight);
+        } else {
+            this._ctx.drawImage(img, currentPosition - imgWidth, 0, imgWidth, imgHeight);
+        }
+    }
+}
+
+export const Wrapper = styled.div`
+    margin: 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;