diff --git a/index.css b/index.css
new file mode 100644
index 0000000..e69de29
diff --git a/js/ColorPickerView.js b/js/ColorPickerView.js
new file mode 100644
index 0000000..faf894b
--- /dev/null
+++ b/js/ColorPickerView.js
@@ -0,0 +1,31 @@
+'use strict';
+
+import React from "react";
+import ColorPicker from 'react-color-picker';
+import Drawpad from './Drawpad'
+import State from './State';
+
+let state=State.instance;
+state.strokeColor="#000000";
+let COLOR=null;
+
+class ColorPickerView extends React.Component{
+ constructor(props) {
+ super(props);
+ }
+
+ onDrag(color, c){
+ COLOR = color;
+ state.strokeColor=color;
+ }
+
+ render(){
+ return
+
+ {COLOR}
+
+
;
+ }
+}
+
+export default ColorPickerView
\ No newline at end of file
diff --git a/js/ControlsView.js b/js/ControlsView.js
new file mode 100644
index 0000000..d2a5fe3
--- /dev/null
+++ b/js/ControlsView.js
@@ -0,0 +1,41 @@
+'use strict';
+
+import d3 from "d3";
+import React from "react";
+
+/**
+ */
+class ControlsView extends React.Component{
+
+ constructor(props) {
+ super(props);
+ }
+
+ next(){
+ let drawpad=d3.select("#drawpad");
+ let drawpadMin1=d3.select("#drawpadMin1");
+ let drawpadMin2=d3.select("#drawpadMin2");
+
+ if (drawpadMin1.select("path")[0][0]!= undefined){
+ drawpadMin2.selectAll("path").remove();
+ drawpadMin2
+ .append("path")
+ .attr("d", function(){return drawpadMin1.select("path").attr("d");})
+ .attr("style", function(){return drawpadMin1.select("path").attr("style");});
+ }
+ drawpadMin1.selectAll("path").remove();
+ drawpadMin1
+ .append("path")
+ .attr("d", function(){return drawpad.select("path").attr("d");})
+ .attr("style", function(){return drawpad.select("path").attr("style");});
+ drawpad.selectAll("path").remove();
+ }
+
+ render() {
+ return ;
+ }
+
+}
+
+
+export default ControlsView
\ No newline at end of file
diff --git a/js/Drawpad.js b/js/Drawpad.js
index 0ed137c..b21fcdb 100644
--- a/js/Drawpad.js
+++ b/js/Drawpad.js
@@ -1,8 +1,16 @@
'use strict';
+/*
+ * Behaviour for the drawpad component. The reason this is separate from the view is that a React component class behaves very differently from a regular ES6 class.
+ * Ie. you don't have 'this'.
+ */
+
import Point from "./Point";
import simplify from "simplify-js";
import d3 from "d3";
+import State from './State';
+
+let state=State.instance;
class Drawpad{
constructor() {
@@ -19,7 +27,7 @@ class Drawpad{
//add starting point to svg-path
this.pathD="M"+newPoint.x+","+newPoint.y;//path Move operation
this.path=d3.select("#drawpad").append("path").attr("d", this.pathD);
-
+ this.path.attr("style", "stroke:" + state.strokeColor);
//add new point to array of points, used to reduce the number of points after finishing the line
this.points=[];
this.points.push(newPoint);
diff --git a/js/DrawpadView.js b/js/DrawpadView.js
index 6019a67..dddd91e 100644
--- a/js/DrawpadView.js
+++ b/js/DrawpadView.js
@@ -1,12 +1,17 @@
require('../less/main.less');
+require('../less/index.less');
'use strict';
+
import React from "react";
import Drawpad from './Drawpad';
let drawpad=new Drawpad();
+/**
+ * All methods delegate to the Drawpad class.
+ */
class DrawpadView extends React.Component{
constructor(props) {
@@ -27,7 +32,10 @@ class DrawpadView extends React.Component{
render() {
- return ;
+ return
+
+
+
;
}
}
diff --git a/js/Frames.js b/js/Frames.js
new file mode 100644
index 0000000..46561e6
--- /dev/null
+++ b/js/Frames.js
@@ -0,0 +1,10 @@
+'use strict'
+
+class Frames {
+
+ static createSvg(frame) {
+
+ }
+}
+
+export default Frames
\ No newline at end of file
diff --git a/js/Line.js b/js/Line.js
index 7172fea..0e9a28a 100644
--- a/js/Line.js
+++ b/js/Line.js
@@ -7,8 +7,6 @@ class Line{
this.start=startPoint;
this.end=endPoint;
}
-
-
}
export default Line;
\ No newline at end of file
diff --git a/js/State.js b/js/State.js
new file mode 100644
index 0000000..8ccf7c5
--- /dev/null
+++ b/js/State.js
@@ -0,0 +1,25 @@
+'use strict';
+
+/*
+ * Keeps global state properties like frames, current strokeColor etc.
+ */
+
+let singleton = Symbol();
+let singletonEnforcer = Symbol();
+
+class State {
+
+ constructor(enforcer, props) {
+ if(enforcer != singletonEnforcer) throw "Cannot construct singleton";
+ this.props=props;
+ }
+
+ static get instance() {
+ if(!this[singleton]) {
+ this[singleton] = new State(singletonEnforcer);
+ }
+ return this[singleton];
+ }
+}
+
+export default State
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index 8e89130..00fe7cc 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,4 +1,14 @@
+/*
+ * The main app component
+ */
+
import React from 'react';
import DrawpadView from './DrawpadView';
+import ColorPickerView from './ColorPickerView';
+import ControlsView from './ControlsView';
+import State from './State';
-React.render(, document.getElementById('app'));
+var state=State.instance;
+state.frames=[];
+
+React.render(