From 4eea5d7da4f06adda7cbe5f94e522606df9de06b Mon Sep 17 00:00:00 2001
From: edvardds <edvardds@stud.ntnu.no>
Date: Wed, 23 Sep 2020 23:50:33 +0200
Subject: [PATCH] Made the welcome SVG randomly generated
---
frontend/src/Components/LandingPage.tsx | 12 +++-----
frontend/src/Components/LandingpageSVG.tsx | 36 ++++++++++++++++++++++
2 files changed, 40 insertions(+), 8 deletions(-)
create mode 100644 frontend/src/Components/LandingpageSVG.tsx
diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index afdfb83..4645a7f 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/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
diff --git a/frontend/src/Components/LandingpageSVG.tsx b/frontend/src/Components/LandingpageSVG.tsx
new file mode 100644
index 0000000..a7d8e16
--- /dev/null
+++ b/frontend/src/Components/LandingpageSVG.tsx
@@ -0,0 +1,36 @@
+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;
+
+
--
GitLab