p5.js-web-editor/server/domain-objects/createDefaultFiles.js at develop · processing/p5.js-web-editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { currentP5Version } from '../../common/p5Versions';
import {
  p5SoundURLOldTemplate,
  p5SoundURL,
  p5PreloadAddonURL,
  p5ShapesAddonURL,
  p5DataAddonURL,
  p5URLTemplate
} from '../../common/p5URLs';

export const defaultSketch = `function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}`;

const majorVersion = (version) => version.split('.')[0];

export function defaultHTML({
  version = currentP5Version,
  sound = true,
  preload = false,
  shapes = false,
  data = false
} = {}) {
  const p5URL = p5URLTemplate.replace('$VERSION', version);

  const soundURL =
    majorVersion(version) === '2'
      ? p5SoundURL
      : p5SoundURLOldTemplate.replace('$VERSION', version);

  const libraries = [
    `<script src="${p5URL}"></script>`,
    sound ? `<script src="${soundURL}"></script>` : '',
    preload ? `<script src="${p5PreloadAddonURL}"></script>` : '',
    shapes ? `<script src="${p5ShapesAddonURL}"></script>` : '',
    data ? `<script src="${p5DataAddonURL}"></script>` : ''
  ].join('\n    ');

  return `<!DOCTYPE html>
<html lang="en">
  <head>
    ${libraries}
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>
`;
}

export const defaultCSS = `html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
`;

export default function createDefaultFiles() {
  return {
    'index.html': {
      content: defaultHTML()
    },
    'style.css': {
      content: defaultCSS
    },
    'sketch.js': {
      content: defaultSketch
    }
  };
}