ucfopen#43 Rearranged css and js imports in the views to reduce redun…

…dancy and enable the 'Download Package' button on the splash screen, started working out backend logic for making preflight checks.
FrenjaminBanklin · Mar 25, 2019 · acdca6e · acdca6e
1 parent afd8a29
commit acdca6e
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 18 deletions.
diff --git a/assets/css/mdk-creator.css b/assets/css/mdk-creator.css
@@ -3,11 +3,6 @@
  width: 100%;
 }
 
-.tools {
- margin-top: -12px;
- float: right;
-}
-
 .center {
  width: 100%;
  height: 600px;

diff --git a/assets/css/mdk-download.css b/assets/css/mdk-download.css
@@ -30,4 +30,39 @@ body#download #build-commands{
 
 body#download #download_button{
  margin-right:20px;
+}
+
+body#download #preflight-checklist-container{
+ display: block;
+ text-align: center;
+}
+
+body#download #preflight-checklist{
+ display: inline-flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin: 0 auto;
+}
+
+body#download #preflight-checklist > span .action{
+ font-size: 10px;
+}
+
+body#download #preflight-checklist > span:before{
+ display: inline-block;
+ text-align: left;
+ width: 20px;
+}
+
+body#download #preflight-checklist > span.pass:before{
+ content: "✔";
+ color: green;
+}
+body#download #preflight-checklist > span.fail:before{
+ content: "X";
+ color: red;
+}
+body#download #preflight-checklist > span.unknown:before{
+ content: "?";
+ color: orange;
 }
diff --git a/assets/css/mdk-main.css b/assets/css/mdk-main.css
@@ -19,6 +19,11 @@ body {
  text-decoration: none;
 }
 
+.tools {
+ margin-top: -12px;
+ float: right;
+}
+
 #leftbar {
  width: 250px;
  background: #333;
@@ -107,7 +112,7 @@ body {
  background: #fff;
 
  width: 500px;
- height: 280px;
+ height: 500px;
 
  margin: 0 auto;
 }

diff --git a/express.js b/express.js
@@ -376,7 +376,93 @@ module.exports = (app) => {
 
  // Show the package options
  app.get('/mdk/package', (req, res) => {
- res.locals = Object.assign(res.locals, {template: 'download'})
+ let status = {
+ demo: 'unknown',
+ install: 'unknown',
+ screenshot: 'unknown',
+ icon: 'unknown',
+ scoreModule: 'unknown',
+ creatorCallback: 'unknown',
+ playerCallback: 'unknown',
+ scoreScreenCallback: 'unknown'
+ }
+ let action = {
+ demo: '',
+ install: '',
+ screenshot: '',
+ icon: '',
+ scoreModule: '',
+ creatorCallback: '',
+ playerCallback: '',
+ scoreScreenCallback: ''
+ }
+ //let's see if we can get the demo json file
+ try {
+ let demo = JSON.parse(getFileFromWebpack('demo.json').toString())
+
+ if(!demo.name) {
+ status.demo = 'fail'
+ action.demo = "'name' property missing"
+ } else if(!demo.qset) {
+ status.demo = 'fail'
+ action.demo = "'qset' property missing"
+ } else if(!demo.qset.version) {
+ status.demo = 'fail'
+ action.demo = "'qset' 'version' property missing"
+ } else if(!demo.qset.data) {
+ status.demo = 'fail'
+ action.demo = "'qset' 'data' property missing"
+ }
+ status.demo = 'pass'
+ } catch(error) {
+ status.demo = 'fail'
+ action.demo = 'demo.json missing or can\'t be parsed'
+ }
+
+ const checklist = [
+ {
+ status: status.demo,
+ text: 'demo.json found and valid',
+ action: action.demo,
+ },
+ {
+ status: status.install,
+ text: 'install.yaml found and valid',
+ action: action.install,
+ },
+ {
+ status: status.screenshot,
+ text: 'screenshots found',
+ action: action.screenshot,
+ },
+ {
+ status: status.icon,
+ text: 'icons files found',
+ action: action.icon,
+ },
+ {
+ status: status.scoreModule,
+ text: 'score module found and valid',
+ action: action.scoreModule,
+ },
+ {
+ status: status.creatorCallback,
+ text: 'creator callbacks registered',
+ action: action.creatorCallback,
+ },
+ {
+ status: status.playerCallback,
+ text: 'player callbacks registered',
+ action: action.playerCallback,
+ },
+ {
+ status: status.scoreScreenCallback,
+ text: 'score screen callbacks registered',
+ action: action.scoreScreenCallback,
+ },
+ ]
+
+ res.locals = Object.assign(res.locals, {template: 'download', checklist: checklist})
  res.render(res.locals.template)
  })
 

diff --git a/views/creator_mdk.html b/views/creator_mdk.html
@@ -2,10 +2,7 @@
 <link rel="stylesheet" href="/mdk/assets/css/create.css" type="text/css" />
 <link rel="stylesheet" href="/mdk/assets/css/ng-modal.css" type="text/css" />
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
-<script src="/mdk/assets/js/materia.js"></script>
 <script src="/mdk/assets/js/author.js"></script>
-<script src="/mdk/mdk-assets/js/mdk-package.js"></script>
 
 <div id="topbar">
  <a class="logo" href="/">Materia Developer Kit</a>

diff --git a/views/download.html b/views/download.html
@@ -1,6 +1,24 @@
 <link rel='stylesheet' href='/mdk/assets/css/mdk-download.css' type='text/css' />
 
 <h1 class='centered'>Download or Install:</h1>
+<hr/>
+<h2 class='centered'>Preflight Checks:</h2>
+
+<div id='preflight-checklist-container'>
+ <div id='preflight-checklist'>
+ {{#checklist}}
+ <span class={{status}}>
+ <span>
+ {{text}}
+ </span>
+ <span class='action'>
+ {{action}}
+ </span>
+ </span>
+ {{/checklist}}
+ </div>
+</div>
+
 <hr/>
 <div id='build-commands' class='centered'>
  <a href="/mdk/download"><button class='edit_button orange' id='download_button'>Download .wigt</button></a>
@@ -12,6 +30,8 @@ <h1 class='centered'>Download or Install:</h1>
 </div>
 
 <script>
+
+
  document.getElementById('cancel-button').onclick = (e) => {
  window.parent.MDK.Package.cancel();
  return false

diff --git a/views/index.html b/views/index.html
@@ -1,5 +1,8 @@
 <div id="topbar">
  <a class='logo' href='/'>Materia Developer Kit</a>
+ <div class="tools">
+ <button id="downloadLink" class="edit_button orange" onclick="MDK.Package.showPackageDownload();">Download Package</button>
+ </div>
 </div>
 
 <center class='widget'>

diff --git a/views/layout.html b/views/layout.html
@@ -11,6 +11,9 @@
  var MEDIA_URL = '/mdk/media'
  var STATIC_CROSSDOMAIN = 'http://localhost:{{ port }}/'
  </script>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
+ <script src="/mdk/assets/js/materia.js"></script>
+ <script src="/mdk/mdk-assets/js/mdk-package.js"></script>
  </head>
  <body id="{{ template }}" >
  <div id='modalbg'></div>

diff --git a/views/player_mdk.html b/views/player_mdk.html
@@ -1,15 +1,7 @@
-<link rel="stylesheet" href="/mdk/assets/css/main.css" type="text/css" />
 <link rel="stylesheet" href="/mdk/assets/css/play.css" type="text/css" />
 <link rel="stylesheet" href="/mdk/assets/css/ng-modal.css" type="text/css" />
-<link rel="stylesheet" href="/mdk/assets/css/mdk-creator.css" type="text/css" />
-<link rel="stylesheet" href="/mdk/assets/css/mdk-download.css" type="text/css" />
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
-<!-- <script src='//cdnjs.cloudflare.com/ajax/libs/swfobject/2.2/swfobject.min.js'></script> -->
-<script src="/mdk/assets/js/materia.js"></script>
 <script src="/mdk/assets/js/student.js"></script>
-<script src="/mdk/mdk-assets/js/mdk-package.js"></script>
-<!-- <script src="/mdk/mdk-assets/js/mdk-player.js"></script> -->
 
 <script >
  var PLAY_ID = '{{ instance }}';