Merge pull request #240 from paulcockrell/master

Apps Installer [Enhancement] - Add README.md viewer

apps.json

@@ -913,10 +913,11 @@
     "name": "Mario Clock",
     "icon": "marioclock.png",
     "version":"0.07",
-    "description": "Animated Mario clock, jumps to change the time! Swipe right to change the character, and swipe left to toggle night mode. Press BTN1 to jump.",
+    "description": "Animated retro Mario clock, with Gameboy style 8-bit grey-scale graphics.",
     "tags": "clock,mario,retro",
     "type": "clock",
     "allow_emulator":true,
+    "readme": "README.md",
     "storage": [
       {"name":"marioclock.app.js","url":"marioclock-app.js"},
       {"name":"marioclock.img","url":"marioclock-icon.js","evaluate":true}

apps/marioclock/README.md

@@ -0,0 +1,19 @@
+# Mario Clock
+Let's go back in time with this Gameboy inspired Mario retro clock.
+
+Enjoy watching Mario, or one of the other game characters run through a level while showing you the time and date.
+
+![](https://raw.githubusercontent.com/paulcockrell/BangleApps/master/apps/marioclock/mario-clock-screen-shot.png)
+
+## Features
+
+* Multiple characters - swipe the screen right to change the character
+* Night and Day modes - swipe left to toggle mode
+* Smooth animation
+* Awesome 8-bit style grey-scale graphics
+* Mario jumps to change the time, every minute
+* You can make Mario jump by pressing the top button (Button 1) on the watch
+
+## Requests
+
+If you have any feature requests, please send an email to the author `paulcockrell@gmail.com`

apps/marioclock/marioclock-app.js

@@ -90,20 +90,13 @@ function incrementTimer() {
 
 function drawBackground() {
   // Clear screen
-  if (nightMode) {
-    g.setColor(NIGHT);
-  } else {
-    g.setColor(LIGHTEST);
-  }
+  const bgColor = (nightMode) ? NIGHT : LIGHTEST;
+  g.setColor(bgColor);
   g.fillRect(0, 10, W, H);
 
-  // set cloud colors
-  if (nightMode) {
-    g.setColor(DARKEST);
-  } else {
-    g.setColor(LIGHT);
-  }
-  // draw clouds
+  // set cloud colors and draw clouds
+  const cloudColor = (nightMode) ? DARK : LIGHT;
+  g.setColor(cloudColor);
   g.fillRect(0, 10, g.getWidth(), 15);
   g.fillRect(0, 17, g.getWidth(), 17);
   g.fillRect(0, 19, g.getWidth(), 19);
@@ -124,14 +117,15 @@ function drawFloor() {
 function drawPyramid() {
   const pPol = [pyramidSprite.x + 10, H - 6, pyramidSprite.x + 50, pyramidSprite.height, pyramidSprite.x + 90, H - 6]; // Pyramid poly
 
-  g.setColor(LIGHT);
+  const color = (nightMode) ? DARK : LIGHT;
+  g.setColor(color);
   g.fillPoly(pPol);
 
   pyramidSprite.x -= 1;
   // Reset and randomize pyramid if off-screen
   if (pyramidSprite.x < - 100) {
     pyramidSprite.x = 90;
-    pyramidSprite.height = Math.floor(Math.random() * (60 /* max */ - 25 /* min */ + 1) + 25 /* min */);
+    pyramidSprite.height = genRanNum(25, 60);
   }
 }
 
@@ -146,7 +140,7 @@ function drawTreesFrame(x, y) {
 function generateTreeSprite() {
   return {
     x: 90,
-    y: Math.floor(Math.random() * (60 /* max */ - 30 /* min */ + 1) + 30 /* min */)
+    y: genRanNum(30, 60)
   };
 }
 
@@ -257,10 +251,10 @@ function drawCharacter(date, character) {
   }
 
   switch(characterSprite.character) {
-    case("toad"):
+    case(TOAD):
       drawToadFrame(characterSprite.frameIdx, characterSprite.x, characterSprite.y);
       break;
-    case("mario"):
+    case(MARIO):
     default:
       drawMarioFrame(characterSprite.frameIdx, characterSprite.x, characterSprite.y);
   }

index.html

@@ -163,6 +163,7 @@
     <script src="js/comms.js"></script>
     <script src="js/appinfo.js"></script>
     <script src="js/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="js/pwa.js" defer></script>
   </body>
 </html>

js/index.js

@@ -23,6 +23,14 @@ function showChangeLog(appid) {
   httpGet(`apps/${appid}/ChangeLog`).
   then(show).catch(()=>show("No Change Log available"));
 }
+function showReadme(appid) {
+  var app = appNameToApp(appid);
+  function show(contents) {
+    if (!contents) return;
+    showPrompt(app.name + " Documentation", marked(contents), {ok: true}, false).catch(() => {});
+  }
+  httpGet(`apps/${appid}/${app.readme}`).then(show).catch(()=>show("Failed to load README."));
+}
 function handleCustomApp(appTemplate) {
   // Pops up an IFRAME that allows an app to be customised
   if (!appTemplate.custom) throw new Error("App doesn't have custom HTML");
@@ -175,13 +183,14 @@ function refreshLibrary() {
     var version = getVersionInfo(app, appInstalled);
     var versionInfo = version.text;
     if (versionInfo) versionInfo = " <small>("+versionInfo+")</small>";
+    var readme = `<a href="#" onclick="showReadme('${app.id}')">Read more...</a>`;
     return `<div class="tile column col-6 col-sm-12 col-xs-12">
     <div class="tile-icon">
       <figure class="avatar"><img src="apps/${app.icon?`${app.id}/${app.icon}`:"unknown.png"}" alt="${escapeHtml(app.name)}"></figure><br/>
     </div>
     <div class="tile-content">
       <p class="tile-title text-bold">${escapeHtml(app.name)} ${versionInfo}</p>
-      <p class="tile-subtitle">${escapeHtml(app.description)}</p>
+      <p class="tile-subtitle">${escapeHtml(app.description)}${app.readme?`<br/>${readme}`:""}</p>
       <a href="https://github.com/espruino/BangleApps/tree/master/apps/${app.id}" target="_blank" class="link-github"><img src="img/github-icon-sml.png" alt="See the code on GitHub"/></a>
     </div>
     <div class="tile-action">

js/ui.js

@@ -97,8 +97,10 @@ function showToast(message, type) {
 }
 
 /// Show a yes/no prompt
-function showPrompt(title, text, buttons) {
+function showPrompt(title, text, buttons, shouldEscapeHtml) {
   if (!buttons) buttons={yes:1,no:1};
+  if (typeof(shouldEscapeHtml) === 'undefined' || shouldEscapeHtml === null) shouldEscapeHtml = true;
+
   return new Promise((resolve,reject) => {
     var modal = htmlElement(`<div class="modal active">
       <!--<a href="#close" class="modal-overlay" aria-label="Close"></a>-->
@@ -109,7 +111,7 @@ function showPrompt(title, text, buttons) {
         </div>
         <div class="modal-body">
           <div class="content">
-            ${escapeHtml(text).replace(/\n/g,'<br/>')}
+            ${(shouldEscapeHtml) ? escapeHtml(text).replace(/\n/g,'<br/>') : text}
           </div>
         </div>
         <div class="modal-footer">