Added image loop

2 files changed, 77 insertions, 2 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;
+`;
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index d3ed96bc8..686c48533 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -8,6 +8,7 @@ import {colors} from 'ts/style/colors';
 import {Banner} from 'ts/@next/components/banner';
 import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
 import {Icon} from 'ts/@next/components/Icon';
+import {ImageLoop} from 'ts/@next/components/image_loop';
 import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
 import {SiteWrap} from 'ts/@next/components/siteWrap';
 import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -80,9 +81,9 @@ export const Next0xInstant = () => (
         <Section isFullWidth={true} isNoPadding={true}>
             <Wrap width="full">
                 {/* Note: This should be another component, this is just for mocking */}
-                <ImageCarousel>
+                <ImageLoop>
                     <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/>
-                </ImageCarousel>
+                </ImageLoop>
             </Wrap>
         </Section>