Merge branch 'welcomesvg' into 'master'

Welcome SVG randomly generated

See merge request it2810-h20/team-75/prosjekt-2!13

frontend/src/Components/LandingPage.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement} from 'react';
 import NavButton from './NavButton';
 import "../Style/LandingPage.css"
 import FavoriteLink from "./FavoriteLink";
+import LandingpageSvg from "./LandingpageSVG";
 
 type props = { // Typescript definitions for the arguments received via props
 }
@@ -17,6 +18,8 @@ class LandingPage extends React.Component<props, state> {
         this.state = {favorites: []}
     }
 
+    
+
     componentDidMount(): void {
         const favs = [];
         for (let i = 1; i < 12; i++) {
@@ -31,14 +34,7 @@ class LandingPage extends React.Component<props, state> {
             <div className={'landing-page'}>
                 <h1 className={'title'}> Welcome to the gallery!</h1>
                 <div className={'welcome-svg'}>
-                    <svg className={"SVG"} xmlns="http://www.w3.org/2000/svg" height="400" width="400">
-                        <polygon points="325,250 150,325 75,250 " fill="blue" fill-opacity="0.5"></polygon>
-                        <polygon points="150,325 325,150 75,150 " fill="red" fill-opacity="0.5"></polygon>
-                        <polygon points="325,250 250,75 75,150 " fill="green" fill-opacity="0.5"></polygon>
-                        <polygon points="150,325 325,250 75,250 " fill="pink" fill-opacity="0.5"></polygon>
-                        <polygon points="75,150 250,325 150,325 " fill="yellow" fill-opacity="0.5"></polygon>
-                        <polygon points="150,75 75,250 250,325 " fill="orange" fill-opacity="0.5"></polygon>
-                    </svg>
+                    <LandingpageSvg />
                 </div>
                 <p className={'welcome-p'}>Welcome to this interactive gallery! In here you will find unique art pieces,
                     consisting of a quote and SVG. If you turn up your volume you may hear some wonderful tunes to

frontend/src/Components/LandingpageSVG.tsx

+import React from 'react';
+
+const LandingpageSVG = () => {
+
+    const SVGpoints = ["150,75", "250,75", "325,150", "325,250", "250,325", "150,325", "75,250", "75,150"];
+
+    const pickPoints = () => {
+        let points = []
+        while(points.length < 3) {
+            let x = SVGpoints[Math.floor(Math.random() * SVGpoints.length)];
+            while(points.indexOf(x) !== -1) {
+                x = SVGpoints[Math.floor(Math.random() * SVGpoints.length)];
+            }
+            points.push(x);
+        }
+        return points.join(' ');
+    }
+
+    return(
+        <div className={'welcome-svg'}>
+            <svg id="SVG" xmlns="http://www.w3.org/2000/svg" height="400" width="400">
+                <polygon points={pickPoints()} fill="blue" fill-opacity="0.5"  />
+                <polygon points={pickPoints()} fill="red" fill-opacity="0.5" />
+                <polygon points={pickPoints()} fill="green" fill-opacity="0.5" />
+                <polygon points={pickPoints()} fill="yellow" fill-opacity="0.5" />
+                <polygon points={pickPoints()} fill="pink" fill-opacity="0.5" />
+                <polygon points={pickPoints()} fill="orange" fill-opacity="0.5" />
+            </svg>
+        </div>
+    );
+
+}
+
+export default LandingpageSVG;
+
+