doc: inject content of README.md onto our webpage

.gitignore

@@ -58,4 +58,6 @@ ProjectSettings/ProjectVersion.txt
 .idea/
 *.apk
 
-node_modules
+node_modules/
+webgl/
+yarn-error.log

README.md

@@ -47,12 +47,12 @@ At the end of each level,
   - Lose condition: Player fails to score the expected score within the given time limit
 
 ## Contributors
-- Patrick Assaf https://www.linkedin.com/in/patrick-assaf-964029161
-- Joseph Beavans https://www.linkedin.com/in/joseph-beavans
-- Venkata Sai Himabindu Kandukuri https://www.linkedin.com/in/himabindu-kandukuri-a2690356/
-- Gustavo Moncada https://www.linkedin.com/in/gustavo-moncada-12591463
-- Elden Park https://www.linkedin.com/in/eldenpark/
-- Priya Patel https://www.linkedin.com/in/priya-patel-usc/
-- Bhagyashree Rawal https://www.linkedin.com/in/bhagyashreerawal/
-- Rucha Tambe https://www.linkedin.com/in/rucha-tambe/
-- Jungwon Yoon https://www.linkedin.com/in/foggyoon/
+- Patrick Assaf [https://www.linkedin.com/in/patrick-assaf-964029161](https://www.linkedin.com/in/patrick-assaf-964029161)
+- Joseph Beavans [https://www.linkedin.com/in/joseph-beavans](https://www.linkedin.com/in/joseph-beavans)
+- Venkata Sai Himabindu Kandukuri [https://www.linkedin.com/in/himabindu-kandukuri-a2690356/](https://www.linkedin.com/in/himabindu-kandukuri-a2690356/)
+- Gustavo Moncada [https://www.linkedin.com/in/gustavo-moncada-12591463](https://www.linkedin.com/in/gustavo-moncada-12591463)
+- Elden Park [https://www.linkedin.com/in/eldenpark/](https://www.linkedin.com/in/eldenpark/
+- Priya Patel [https://www.linkedin.com/in/priya-patel-usc/](https://www.linkedin.com/in/priya-patel-usc/)
+- Bhagyashree Rawal [https://www.linkedin.com/in/bhagyashreerawal/](https://www.linkedin.com/in/bhagyashreerawal/)
+- Rucha Tambe [https://www.linkedin.com/in/rucha-tambe/](https://www.linkedin.com/in/rucha-tambe/)
+- Jungwon Yoon [https://www.linkedin.com/in/foggyoon/](https://www.linkedin.com/in/foggyoon/)

doc-generator/build.js

@@ -1,5 +1,230 @@
-const gulp = require('gulp');
+const { buildLogger } = require('jege/server');
 const cheerio = require('cheerio');
+const del = require('del');
+const fs = require('fs');
+const gulp = require('gulp');
+const path = require('path');
+const showdown = require('showdown');
+
+const buildLog = buildLogger('[contact-tracers]');
+
+const paths = {
+  docs: path.resolve(__dirname, '../docs'),
+  root: path.resolve(__dirname, '..'),
+  webgl: path.resolve(__dirname, '../webgl'),
+};
+
+gulp.task('clean', () => {
+  const cleanPaths = [
+    `${paths.docs}/**/*`,
+  ];
+
+  buildLog('clean', 'cleanPaths: %j', cleanPaths);
+
+  return del(cleanPaths, {
+    force: true,
+  });
+});
+
+gulp.task('copy-webgl', () => {
+  const srcPath = `${paths.webgl}/**/*`;
+  const destPath = `${paths.docs}`;
+  buildLog('copy-webgl', 'srcPath: %s, destPath: %s', srcPath, destPath);
+
+  return gulp.src(srcPath)
+    .pipe(gulp.dest(destPath));
+});
+
+gulp.task('copy-index-html', () => {
+  const srcPath = `${paths.docs}/index.html`;
+  const destPath = `${paths.docs}/index_original.html`;
+  buildLog('copy-index-html', 'srcPath: %s, destPath: %s', srcPath, destPath);
+  fs.copyFileSync(srcPath, destPath);
+
+  return Promise.resolve();
+});
+
+gulp.task('modify-html', () => {
+  const srcPath = path.resolve(paths.docs, 'index.html');
+  const readmePath = path.resolve(paths.root, 'README.md');
+  buildLog('modify-html', 'srcPath: %s', srcPath);
+
+  const indexHtml = fs.readFileSync(srcPath).toString();
+  const $ = cheerio.load(indexHtml);
+  const md = new showdown.Converter();
+  const readme = fs.readFileSync(readmePath).toString();
+  const readmeHtml = md.makeHtml(readme);
+
+  const GameContainer = {
+    width: '90vw',
+    height: '56.25vw',
+    maxWidth: '585px',
+    maxHeight: '406.25px',
+  };
+
+  const headHtml = `
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
+`;
+
+  const scriptHtml = `
+<script>
+</script>
+`;
+  const styleHtml = `
+<style>
+  html {
+    background-color: rgb(242, 242, 242);
+  }
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: Helvetica, Arial, "sans-serif";
+    line-height: 1.5;
+  }
+  body {
+    font-size: 16px;
+  }
+  a, a:visited {
+    color: #0F79D0;
+    text-decoration: none;
+  }
+  a:hover {
+    color: #0F79D0;
+    text-decoration: underline;
+  }
+  h1, h2 {
+    font-family: "Noto Sans JP", serif;
+  }
+  h1 {
+    font-size: 32px;
+    margin-top: 1.1em;
+    margin-bottom: 0.2em;
+  }
+  h2 {
+    border-bottom: 1px solid #d9d9d9;
+    font-size: 28px;
+    margin-top: 1.1em;
+    margin-bottom: 0.2em;
+  }
+  ul {
+    padding-left: 26px;
+  }
+  #wrap {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  @media (max-width: 480px) {
+    body {
+      font-size: 14px;
+    }
+  }
+  .warn {
+    color: rgb(91, 91, 91);
+    font-size: 0.92em;
+    line-height: 1.45;
+    padding: 12px 0;
+    text-align: center;
+  }
+  .warn p {
+    font-weight: 300;
+    margin: 0;
+    padding: 0;
+  }
+  .warn a {
+    color: inherit;
+  }
+  .warn span {
+    color: rgb(15, 121, 208);
+  }
+  .warn i {
+    border-color: rgb(70, 70, 70);
+    border-style: solid;
+    border-width: 0px 1px 1px 0px;
+    display: inline-block;
+    margin-left: 6px;
+    padding: 3px;
+    transform: rotate(45deg) translate(-0.15em, -0.15em);
+  }
+  .webgl-content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: 0.2em 0;
+    position: static;
+    transform: none;
+    width: 100%;
+  }
+  .footer {
+  }
+  .footer .title {
+    display: none;
+  }
+  .webgl-content .footer .webgl-logo {
+    display: none;
+  }
+  #desc {
+    margin: 10px 0 60px 0;
+  }
+  .content-area {
+    max-width: 650px;
+    padding: 12px;
+  }
+  .media-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .media {
+    height: 47vw;
+    max-height: 267px;
+    max-width: 480px;
+    width: 85vw;
+  }
+</style>
+`;
+
+  const warnHtml = `
+<div class="warn">
+  <p>
+    <b>This application is designed to run in mobile devices that support WebGL</b>
+  </p>
+  <p>
+    <a href="#contacttracers">
+      <b>Contact Tracers</b> - Read the <span>description</span> below<i></i>
+    </a>
+  </p>
+</div>
+`;
+
+  const descHtml = `
+<div id="desc" class="content-area">
+${readmeHtml}
+</div>
+`;
+
+  $('title').html('Contact Tracers: Survival from virus pandemic');
+  $('head').append(styleHtml);
+  $('head').append(headHtml);
+  $('head').append(scriptHtml);
+  $('body').prepend('<div id="wrap"></div>');
+  const webglContent = $('.webgl-content');
+
+  $('#wrap').prepend(warnHtml);
+  $('#wrap').append(webglContent);
+  $('#wrap').append(descHtml);
+  const nextHtml = $.html();
+
+  fs.writeFileSync(srcPath, nextHtml, {
+    flag: 'w',
+  });
+  return Promise.resolve();
+});
 
+gulp.task('build', gulp.series('clean', 'copy-webgl', 'copy-index-html', 'modify-html'));
 
-gulp.task('generate-doc' );
+if (require.main === module) {
+  const buildTask = gulp.task('build');
+  buildTask();
+}