let drawing;

​

function setup() {

  let canvas = createCanvas(500, 500);

  background(100);

  canvas.parent("canvascontainer");

​

  // save button

  let saveButton = select("#saveButton");

  saveButton.mousePressed(saveDrawing);

​

  // clear button

  let clearButton = select("#clearButton");

  clearButton.mousePressed(clearDrawing);

​

​

​

  drawing = new Drawing();

​

  // firebase

  setupFirebase();

​

  // get data

  let ref = database.ref("drawing");

  ref.on("value", gotData, errData);

}

​

function setupFirebase() { // Your web app's Firebase configuration

  // For Firebase JS SDK v7.20.0 and later, measurementId is optional

  var firebaseConfig = {

    apiKey: "AIzaSyB8EAQfxk9uQ11rfySrru_9AGkDrsLot7g",

    authDomain: "p5-data.firebaseapp.com",

    databaseURL: "https://p5-data-default-rtdb.firebaseio.com",

    projectId: "p5-data",

    storageBucket: "p5-data.appspot.com",

    messagingSenderId: "964100032682",

    appId: "1:964100032682:web:90c1e2adc4944c1d9028d3",

    measurementId: "G-3N28X78Y7D"

  };

  // Initialize Firebase

  firebase.initializeApp(firebaseConfig);

​

  database = firebase.database();

}

​

function keyPressed() {

  print("msg submit");

  let ref = database.ref("drawing");

  let data = {

    drawing: drawing

  };

  ref.push(data);

}

​

function gotData(rawData) {

  print("data arrived");

  let data = rawData.val();

​

  let keys = Object.keys(data);

​

  let listings = selectAll(".listing");

  for (let list of listings) {

    list.remove();

  }

​

  for (let key of keys) {

    let li = createElement("li", "");

    li.class("listing");

    let ahref = createA("", key, "_parent");

    ahref.mousePressed(showDrawing);

    ahref.parent(li);

    li.parent("drawinglist")

  }

​

}

​

function errData(err) {

  print("ERROR");

  print(err);

}

​

function draw() {

  background(0);

​

  drawing.draw();

}

​

function mousePressed(e) {

  if (mouseButton == LEFT) {

    drawing.startNewPath();

  }

}

​

function mouseDragged() {

  if (mouseButton == LEFT) {

    drawing.addPoint(mouseX, mouseY);

  }

}

​

function saveDrawing() {

  let ref = database.ref("drawing");

  ref.push(drawing);

  print("drawing saved");

}

​

function showDrawing() {

  print("showDrawing!");

​

  let key = this.html();

  let ref = database.ref("drawing/" + key);

  ref.on("value", oneDrawing, errData);

​

  function oneDrawing(data) {

    let oneDrawing = data.val();

    drawing = Object.assign(new Drawing(), oneDrawing);

  }

}

​

function clearDrawing() {

  print("clear");

  drawing.clear();

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

//