Add dp image, consisten punctuation in default files, and overview of all users under '/users'

README.ruben.md

@@ -1,14 +1,8 @@
-Gebruik s3cmd om bucket in te stellen.
 
-## Make bucket:
-s3cmd mb s3://digitalplayground-p5
+# Usage
+
+There is a hidden link to have an overview of all users registered on the server: `/users`.
 
-## Set the CORS rules
-s3cmd -c .s3cfg setcors CORS.xml s3://digitalplayground-p5
-## Delete the CORS rules
-s3cmd -c .s3cfg delcors s3://digitalplayground-p5
-## Get bucket info including CORS rules
-s3cmd -c .s3cfg info s3://digitalplayground-p5
 
 # Development
 
@@ -22,3 +16,16 @@ s3cmd -c .s3cfg info s3://digitalplayground-p5
 * `npm run build:server`
 * `npm run build:client`
 * `service p5.js-web-editor start`
+
+
+Gebruik s3cmd om bucket in te stellen.
+
+## Make bucket:
+s3cmd mb s3://digitalplayground-p5
+
+## Set the CORS rules
+s3cmd -c .s3cfg setcors CORS.xml s3://digitalplayground-p5
+## Delete the CORS rules
+s3cmd -c .s3cfg delcors s3://digitalplayground-p5
+## Get bucket info including CORS rules
+s3cmd -c .s3cfg info s3://digitalplayground-p5

client/modules/IDE/reducers/files.js

@@ -4,8 +4,8 @@ import * as ActionTypes from '../../../constants';
 const defaultSketch = `// liveUpdate
 
 function drawMask(detection) {
-  stroke('red');
-  strokeWeight(2);
+  stroke('red')
+  strokeWeight(2)
   rect(detection.x, detection.y, detection.width, detection.height)
 }`;
 

dist/static/assets/images.json

@@ -20,5 +20,6 @@
     "mustache2": "/assets/images/mustache2.png",
     "mustache3": "/assets/images/mustache3.png",
     "mustache4": "/assets/images/mustache4.png",
-    "mustache5": "/assets/images/mustache5.png"
+    "mustache5": "/assets/images/mustache5.png",
+    "dp": "/assets/images/dp.png"
 }

doc/cheatsheet.md

@@ -31,39 +31,31 @@ detection.height
 detection.angle
 : Hoeveel het gezicht gedraaid is (oftewel de 'roll').
 
-<!-- detection.center.x  & detection.center.y
-: Het midden van de bounding box -->
-
-
-
 
 ## Tekenen
 
-drawPoints(punten)
+drawPoints(\[punt1, punt2, ...])
 : Teken punten
 
-strokePoints(punten)
+strokePoints(\[punt1, punt2, ...])
 : Teken lijnen tussen een set punten
 
+strokePoints(\[punt1, punt2, ...], OPEN)
+: Teken lijnen tussen een set punten, maar de eindpunten worden _niet_ met elkaar verbonden.
+
 rect(x, y, breedte, hoogte)
 : teken een rechthoek. _x_ en _y_ bepalen de linker bovenhoek.
 
 circle(cx, cy, radius)
 : Teken een cirkel. _cx_ en _cy_ bepalen het midden. Radius is de straal.
 
-<!-- let img = loadImage('bestandsnaam.jpg')
-: Upload een afbeelding, waarna je hem kunt inladen met loadImage(...) -->
-
 image(naam, x, y, breedte, hoogte)
 : Toon een ingeladen afbeelding. _x_ en _y_ bepalen waar de linker bovenhoek wordt geplaatst.
 : Zie hieronder voor alle beschikbare afbeeldingen
 
-getBoundingBox(punten)
+let box = getBoundingBox(punten)
 :  Bepaald het rechthoek waarbinnen de punten vallen.
-
-<!-- 
-mergePoints(punten, anderePunten)
-: Voeg meerdere sets van punten samen. Bijvoorbeeld `mergePoints( detection.parts.rightEyeBrow, detection.parts.leftEyeBrow )` -->
+: Te gebruiken als `box.x`, `box.y`, `box.width`, `box.height`.
 
 ## Opmaak
 
@@ -95,12 +87,6 @@ https://genekogan.com/code/p5js-transformations/
 
 
 
-<!-- 
-<a href="https://www.freepik.com/vectors/man">Man vector created by studiogstock - www.freepik.com</a> -->
-
-
-
-
 ## Afbeeldingen
 
 Deze afbeeldingen kun je gebruiken met `image()`.

server/domain-objects/createDefaultFiles.js

@@ -1,8 +1,8 @@
 const defaultSketch = `// liveUpdate
 
 function drawMask(detection) {
-  stroke('red');
-  strokeWeight(2);
+  stroke('red')
+  strokeWeight(2)
   rect(detection.x, detection.y, detection.width, detection.height)
 }
 `;

server/server.js

@@ -28,6 +28,8 @@ import embedRoutes from './routes/embed.routes';
 import assetRoutes from './routes/asset.routes';
 import { requestsOfTypeJSON } from './utils/requestsOfType';
 
+import User from './models/user';
+
 import { renderIndex } from './views/index';
 import { get404Sketch } from './views/404Page';
 
@@ -48,6 +50,8 @@ if (process.env.BASIC_USERNAME && process.env.BASIC_PASSWORD) {
 
 const allowedCorsOrigins = [
   /p5js\.org$/,
+  /digitalplayground\.nl$/,
+  /rubenvandeven\.com$/
 ];
 
 // to allow client-only development
@@ -185,6 +189,22 @@ app.use('/api', (error, req, res, next) => {
 });
 
 
+// overview of users:
+app.get('/users', (req, res) => {
+  // let results = [];
+  User.find({}).sort({ createdAt: -1 }).exec()
+  .then((users) => {
+    const usernames = users.map((user) => user.username);
+    let names = "<ul>";
+    usernames.forEach((username) => names += `<li><a href="/${username}/sketches">${username}</a></li>`);
+    names += "</ul>";
+    res.send(names);
+  });
+  // User.find()
+  // res.send({'testing': true});
+});
+
+
 // Handle missing routes.
 app.get('*', (req, res) => {
   res.status(404);