Adjust HTML for better iOS mobile app support.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Thu, 2 Oct 2014 13:40:42 +0000 (15:40 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Thu, 2 Oct 2014 13:40:42 +0000 (15:40 +0200)
src/index.html
src/pwl6.css
src/yuu/data/yuu.css

index f0dfac7163a1cd51c740604ffd3aae702793abb7..2a04c0826eb249239019ac5121d678f62b65187c 100644 (file)
@@ -1,58 +1,57 @@
 <!DOCTYPE html>
-<html lang="en"
-      data-appid="com.yukkurigames.pwl6">
+<html data-appid=com.yukkurigames.pwl6>
   <head>
     <title>Pixel Witch Lesson #6</title>
-    <meta charset="utf-8" />
-    <meta name="viewport"
+    <meta charset=utf-8>
+    <meta name=viewport
           content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style"
-          content="black-translucent" />
-    <link rel=icon href=data/images/icons.ico
-          sizes="16x16 32x32 64x64 128x128 256x256"
-          type="image/vnd.microsoft.icon">
-    <link rel=icon href=data/images/icons.icns
-          sizes="16x16 32x32 64x64 128x128 256x256"
-          >
-    <link rel="stylesheet" href="yuu/data/yuu.css" type="text/css" />
-    <link rel="stylesheet" href="pwl6.css" type="text/css" />
-    <script type="text/javascript" src="ext/gl-matrix.js"></script>
-    <script type="text/javascript" src="ext/gamepad.js"></script>
-    <script type="text/javascript" src="ext/hammer.js"></script>
-    <script type="text/javascript" src="yuu/pre.js"></script>
-    <script type="text/javascript" src="yuu/yf.js"></script>
-    <script type="text/javascript" src="yuu/yT.js"></script>
-    <script type="text/javascript" src="yuu/core.js"></script>
-    <script type="text/javascript" src="yuu/input.js"></script>
-    <script type="text/javascript" src="yuu/ce.js"></script>
-    <script type="text/javascript" src="yuu/gfx.js"></script>
-    <script type="text/javascript" src="yuu/rdr.js"></script>
-    <script type="text/javascript" src="yuu/audio.js"></script>
-    <script type="text/javascript" src="yuu/director.js"></script>
-    <script type="text/javascript" src="yuu/storage.js"></script>
-    <script type="text/javascript" src="pwl6.js"></script>
+    <meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
+    <meta name=apple-mobile-web-app-capable content=yes>
+    <meta name=apple-mobile-web-app-title content="Pixel Witch #6">
+    <meta name=mobile-web-app-capable content=yes>
+    <meta name=mobile-web-app-title content="Pixel Witch #6">
+    <link rel=apple-touch-icon href=data/images/icons.iconset/icon_256x256.png>
+    <link rel=icon href=data/images/icons.iconset/icon_256x256.png>
+    <link rel=icon href=data/images/icons.iconset/icon_16x16.png sizes=16x16>
+    <link rel=icon href=data/images/icons.iconset/icon_32x32.png sizes=32x32>
+    <link rel=stylesheet href=yuu/data/yuu.css>
+    <link rel=stylesheet href=pwl6.css>
+    <script src=ext/gl-matrix.js></script>
+    <script src=ext/gamepad.js></script>
+    <script src=ext/hammer.js></script>
+    <script src=yuu/pre.js></script>
+    <script src=yuu/yf.js></script>
+    <script src=yuu/yT.js></script>
+    <script src=yuu/core.js></script>
+    <script src=yuu/input.js></script>
+    <script src=yuu/ce.js></script>
+    <script src=yuu/gfx.js></script>
+    <script src=yuu/rdr.js></script>
+    <script src=yuu/audio.js></script>
+    <script src=yuu/director.js></script>
+    <script src=yuu/storage.js></script>
+    <script src=pwl6.js></script>
   </head>
   
   <body>
-    <canvas id="yuu-canvas" data-yuu-resize>
+    <canvas id=yuu-canvas data-yuu-resize>
     </canvas>
-    <div id="yuu-error" class="yuu-overlay"
-         data-yuu-animation="yuu-from-top"
-         data-yuu-dismiss-key="escape">
-      <div data-yuu-command="dismiss" tabindex=0></div>
+    <div id=yuu-error class=yuu-overlay
+         data-yuu-animation=yuu-from-top
+         data-yuu-dismiss-key=escape>
+      <div data-yuu-command=dismiss tabindex=0></div>
       <p>There was a problem. Sorry about that.</p>
-      <p id="yuu-error-message"></p>
+      <p id=yuu-error-message></p>
       <h2>Error Log</h2>
-      <pre id="yuu-error-stack">
+      <pre id=yuu-error-stack>
       </pre>
     </div>
-    <div id="yuu-fatal-error" class="yuu-overlay">
+    <div id=yuu-fatal-error class=yuu-overlay>
       <p>
         There was a serious problem. You'll have to restart. Sorry
         about that.
       </p>
-      <p id="yuu-fatal-error-message"></p>
+      <p id=yuu-fatal-error-message></p>
       <p class=standalone>
         If this problem continues,
         <a target=_blank href="https://yukkurigames.com/support.html">check our
         computer, and especially GPU.
       </p>
       <h2>Error Log</h2>
-      <pre id="yuu-fatal-error-stack">
+      <pre id=yuu-fatal-error-stack>
       </pre>
     </div>
-    <div id="preferences" class="yuu-overlay"
-         data-yuu-animation="yuu-from-top-right"
-         data-yuu-dismiss-key="f10 escape">
-      <div data-yuu-command="dismiss" tabindex=0></div>
+    <div id=preferences class=yuu-overlay
+         data-yuu-animation=yuu-from-top-right
+         data-yuu-dismiss-key='f10 escape'>
+      <div data-yuu-command=dismiss tabindex=0></div>
       <h1>Pixel Witch Lesson #6</h1>
-      <table class="yuu-options">
+      <table class=yuu-options>
         <tr>
           <td>
-            <input type="checkbox" data-yuu-command="mute" id="mute">
-            <label for="mute" title="Toggle audio mute (Control+S)"></label>
+            <input type=checkbox data-yuu-command=mute id=mute>
+            <label for=mute title="Toggle audio mute (Control+S)"></label>
           </td>
           <td>
-            <label for="volume">Volume</label>
+            <label for=volume>Volume</label>
           </td>
           <td>
-            <input type="range" data-yuu-command="volume" id="volume"
-                   min="0" max="1.0" step="0.05" style="width: 95%">
+            <input type=range data-yuu-command=volume id=volume
+                   min=0 max=1.0 step=0.05>
           </td>
         </tr>
         <tr>
           <td>
           </td>
           <td>
-            <label for="volume">Music</label>
+            <label for=volume>Music</label>
           </td>
           <td>
-            <input type="range" data-yuu-command="musicVolume" id="musicVolume"
-                   min="0" max="1.0" step="0.05" style="width: 95%">
+            <input type=range data-yuu-command=musicVolume id=musicVolume
+                   min=0 max=1.0 step=0.05>
           </td>
         </tr>
         <tr>
           <td>
-            <input type="checkbox" data-yuu-command="fullscreen"
-                   id="fullscreen">
-            <label for="fullscreen" title="Toggle fullscreen (F11)"></label>
+            <input type=checkbox data-yuu-command=fullscreen
+                   id=fullscreen>
+            <label for=fullscreen title="Toggle fullscreen (F11)"></label>
           </td>
           <td colspan=2>
-            <label for="fullscreen">Fullscreen</label>
+            <label for=fullscreen>Fullscreen</label>
           </td>
         </tr>
       </table>
       <p style="text-align: center">Press F12 to take a screenshot.</p>
     </div>
-    <div id="colophon" class="yuu-overlay"
-         data-yuu-animation="yuu-from-top"
-         data-yuu-dismiss-key="escape">
-      <div data-yuu-command="dismiss" tabindex=0></div>
+    <div id=colophon class=yuu-overlay
+         data-yuu-animation=yuu-from-top
+         data-yuu-dismiss-key=escape>
+      <div data-yuu-command=dismiss tabindex=0></div>
       <h1><a target=_blank href="http://yukkurigames.com/pwl6/">Pixel Witch Lesson #6</a></h1>
       <dl>
         <dt>Designed &amp; Implemented</dt>
         </p>
       </div>
       <hr>
-      <p id="yuu-licensing" data-yuu-command="licensing">
+      <p id=yuu-licensing data-yuu-command=licensing>
         View Complete Licensing Text
       </p>
     </div>
 
     <noscript>
-      <div class="yuu-overlay" style="display: block">
+      <div class=yuu-overlay>
         <p>
           This game requires JavaScript to play. It's a fun game, and
           we hope you take your time to enable JS and try it.
           game.
         </p>
         <hr>
-        <ul class="link-footer">
+        <ul class=link-footer>
           <li><a target=_blank href="http://yukkurigames.com/pwl6/">Pixel Witch Lesson #6</a>
           <li><a target=_blank href="http://yukkurigames.com/">Yukkuri Games</a>
           <li><a href="mailto:yuuSPAM@MAPSyukkurigames.com"
index 2b55cb0673856ad208d461b2e62eea80234c503d..180d15919051583f2de3af8f840ea08fd131bfca 100644 (file)
@@ -1,4 +1,4 @@
-body {
+html, body {
     background-color: black;
 }
 
index 4e2eb23cfb32720356173d26a581eb1f206b0113..a7b3354eae5822cce66f7051f35560945b895544 100644 (file)
@@ -196,6 +196,10 @@ pre#yuu-licensing {
     -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
 }
 
+noscript .yuu-overlay {
+    display: block;
+}
+
 /* Overlays are focusable but should not show it - they are always
    somewhere in the event tree when visible. */
 .yuu-overlay:focus {
@@ -294,6 +298,7 @@ input[type=checkbox][data-yuu-command]:focus + label[for] {
 input[type=range][data-yuu-command] {
     -webkit-appearance: none;
     background-color: gray;
+    width: 95%;
 }
 
 input[type=range][data-yuu-command]::-moz-range-track {