cleanup

cranksters · Mar 27, 2022 · e3df59b · e3df59b
1 parent b026650
commit e3df59b
Show file tree

Hide file tree

Showing 14 changed files with 488 additions and 321 deletions.
diff --git a/examples/assets/styles.css b/examples/assets/styles.css
@@ -1,11 +1,10 @@
 html, body {
  margin: 0;
- font-size: 14px;
+ font-size: 18px;
  line-height: 1.75;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: #dcdef0;
  box-sizing: border-box;
- user-select: none;
 }
 
 * > * {
@@ -17,13 +16,24 @@ p {
  margin-bottom: .5em;
 }
 
+h1, h2, h3, h4, h5, h6 {
+ line-height: 1.5;
+ margin-top: 0;
+ margin-bottom: .25em;
+}
+
+h1, h2 {
+ margin-bottom: 1em;
+}
+
 button {
  background: #282732;
  color: #ffb738;
  border: 0;
  border-radius: 4px;
- padding: 7px 11px;
- font-size: 14px;
+ padding: 9px 14px;
+ font-size: 16px;
+ font-weight: bold;
  cursor: pointer;
 }
 
@@ -35,7 +45,7 @@ button:disabled {
 }
 
 a {
- color: slateblue;
+ color: rgb(92, 71, 224);
  text-decoration: none;
  border-bottom: 0.1em solid currentColor;
  cursor: pointer;
@@ -46,6 +56,7 @@ canvas {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  cursor:crosshair;
+ user-select: none;
 }
 
 .wrapper {
@@ -57,8 +68,9 @@ canvas {
 
 .panel {
  background: #fff;
- padding: 21px;
- border-radius: 12px;
+ box-shadow: 0 4px 0 0 rgba(203, 203, 211, 0.342);
+ padding: 22px 26px;
+ border-radius: 16px;
  margin-bottom: 15px;
 }
 
@@ -80,10 +92,25 @@ canvas {
 }
 
 .example-list {
- list-style: square;
- font-size: 16px;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 24px;
+}
+
+.example-item {
+ text-decoration: none;
+ border-bottom: none;
+ /* color: inherit; */
+}
+
+.example-item p {
+ opacity: .8;
 }
 
 #serial {
  padding: 0 .5em;
+}
+
+.no-select {
+ user-select: none;
 }
diff --git a/examples/example-basic.html b/examples/example-basic.html
@@ -4,20 +4,20 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Playdate USB demo</title>
+ <title>PD-USB Demo - Basic Connection</title>
  <link rel="stylesheet" href="./assets/styles.css">
  <script src="./pd-usb.js"></script>
 </head>
 <body>
  <div class="wrapper">
  <header>
- <h1>Playdate USB demo</h1>
+ <h1>PD-USB Demo - Basic Connection</h1>
  </header>
  <main>
  <div class="panel">
  <div class="row">
  <div class="pull-left">
- <button onclick="connect()" id="connectButton"> connect to playdate </button>
+ <button onclick="connect()" id="connectButton"> Connect to Playdate </button>
  <span id="serial"></span>
  </div>
  </div>
@@ -30,7 +30,7 @@ <h1>Playdate USB demo</h1>
  <a href="//github.com/jaames/pd-usb">pd-usb</a> | <a href="//github.com/jaames/pd-usb/blob/main/examples/example-basic.html">page source</a>
  </div>
  <div class="pull-right">
- built by <a href="//github.com/jaames">james daniel</a>
+ built by <a href="//github.com/jaames">jaames</a>
  </div>
  </footer>
  </div>
@@ -40,9 +40,9 @@ <h1>Playdate USB demo</h1>
 
  const data = document.getElementById('data');
 
- // Check WebUSB support, display error if not supported
+ // Check WebSerial support, display error if not supported
  try {
- playdateUsb.assertUsbSupported();
+ pdusb.assertUsbSupported();
  }
  catch (e) {
  document.getElementById('serial').innerHTML = e.message;
@@ -51,7 +51,7 @@ <h1>Playdate USB demo</h1>
 
  async function connect() {
  try {
- device = await playdateUsb.requestConnectPlaydate();
+ device = await pdusb.requestConnectPlaydate();
 
  await device.open();
  const serial = await device.getSerial();

diff --git a/examples/example-controller.html b/examples/example-controller.html
@@ -4,25 +4,25 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Playdate USB demo - reading controls</title>
+ <title>PD-USB Demo - Input State Capture</title>
  <link rel="stylesheet" href="./assets/styles.css">
  <script src="./pd-usb.js"></script>
 </head>
 <body>
  <div class="wrapper">
  <header>
- <h1>Playdate USB demo - reading controls</h1>
+ <h1>PD-USB Demo - Input State Capture</h1>
  </header>
  <main>
  <div class="panel">
  <div class="row">
  <div class="pull-left">
- <button onclick="connect()" id="connectButton"> connect to playdate </button>
+ <button onclick="connect()" id="connectButton"> Connect to Playdate </button>
  <span id="serial"></span>
  </div>
  <div class="pull-right">
- <button onclick="start()" id="startButton" disabled> begin polling controls </button>
- <button onclick="stop()" id="stopButton" disabled> stop polling controls </button>
+ <button onclick="start()" id="startButton" disabled> Begin </button>
+ <button onclick="stop()" id="stopButton" disabled> Stop </button>
  </div>
  </div>
  </div>
@@ -52,7 +52,7 @@ <h1>Playdate USB demo - reading controls</h1>
  <a href="//github.com/jaames/pd-usb">pd-usb</a> | <a href="//github.com/jaames/pd-usb/blob/main/examples/example-controller.html">page source</a>
  </div>
  <div class="pull-right">
- built by <a href="//github.com/jaames">james daniel</a>
+ built by <a href="//github.com/jaames">jaames</a>
  </div>
  </footer>
  </div>
@@ -71,9 +71,9 @@ <h1>Playdate USB demo - reading controls</h1>
  const inputCrank = document.getElementById('inputCrank');
  const inputDocked = document.getElementById('inputDocked');
 
- // Check WebUSB support, display error if not supported
+ // Check WebSerial support, display error if not supported
  try {
- playdateUsb.assertUsbSupported();
+ pdusb.assertUsbSupported();
  }
  catch (e) {
  document.getElementById('serial').innerHTML = e.message;
@@ -82,7 +82,7 @@ <h1>Playdate USB demo - reading controls</h1>
 
  async function connect() {
  try {
- device = await playdateUsb.requestConnectPlaydate();
+ device = await pdusb.requestConnectPlaydate();
 
  await device.open();
 
@@ -98,7 +98,8 @@ <h1>Playdate USB demo - reading controls</h1>
  document.getElementById('stopButton').disabled = true;
  });
  }
- catch {
+ catch(e) {
+ console.warn(e);
  document.getElementById('serial').innerHTML = 'Error connecting to Playdate, try again'
  }
  }
@@ -119,14 +120,14 @@ <h1>Playdate USB demo - reading controls</h1>
  inputCrank.innerHTML = state.crank;
  inputDocked.innerHTML = state.crankDocked;
 
- inputA.innerHTML = state.button.a ? 'pressed' : '';
- inputB.innerHTML = state.button.b ? 'pressed' : '';
- inputMenu.innerHTML = state.button.menu ? 'pressed' : '';
- inputLock.innerHTML = state.button.lock ? 'pressed' : '';
- inputUp.innerHTML = state.button.up ? 'pressed' : '';
- inputDown.innerHTML = state.button.down ? 'pressed' : '';
- inputLeft.innerHTML = state.button.left ? 'pressed' : '';
- inputRight.innerHTML = state.button.right ? 'pressed' : '';
+ inputA.innerHTML = state.button.a ? '✅' : '❌';
+ inputB.innerHTML = state.button.b ? '✅' : '❌';
+ inputMenu.innerHTML = state.button.menu ? '✅' : '❌';
+ inputLock.innerHTML = state.button.lock ? '✅' : '❌';
+ inputUp.innerHTML = state.button.up ? '✅' : '❌';
+ inputDown.innerHTML = state.button.down ? '✅' : '❌';
+ inputLeft.innerHTML = state.button.left ? '✅' : '❌';
+ inputRight.innerHTML = state.button.right ? '✅' : '❌';
  }
  </script>
 </body>

diff --git a/examples/example-eval.html b/examples/example-eval.html
@@ -4,27 +4,30 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Playdate USB demo</title>
+ <title>PD-USB Demo - Execute Lua Payload</title>
  <link rel="stylesheet" href="./assets/styles.css">
  <script src="./pd-usb.js"></script>
 </head>
 <body>
  <div class="wrapper">
  <header>
- <h1>Playdate USB demo - eval</h1>
+ <h1>PD-USB Demo - Execute Lua Payload</h1>
  </header>
  <main>
  <div class="panel">
  <div class="row">
  <div class="pull-left">
- <button onclick="connect()" id="connectButton"> connect to playdate </button>
+ <button onclick="connect()" id="connectButton"> Connect to Playdate </button>
  <span id="serial"></span>
  </div>
  </div>
  </div>
  <div class="panel" id="data">
  <p>
- This example uses evalLuaPayload() to send a compiled Lua payload over USB and execute it on your Playdate - as long as the current application is not a system app. This payload is designed to print all fo the global variables from the current app's lua runtime, the code is: 
+ This example uses evalLuaPayload() to send a compiled Lua payload over USB and execute it on your Playdate, as long as the current application is not a system app.
+ </p>
+ <p>
+ The payload is designed to print all of the global variables from the current app's Lua runtime, the code is: 
  <pre>for n in pairs(_G) do print(n) end</pre>
  </p>
  </div>
@@ -34,7 +37,7 @@ <h1>Playdate USB demo - eval</h1>
  <a href="//github.com/jaames/pd-usb">pd-usb</a> | <a href="//github.com/jaames/pd-usb/blob/main/examples/example-basic.html">page source</a>
  </div>
  <div class="pull-right">
- built by <a href="//github.com/jaames">james daniel</a>
+ built by <a href="//github.com/jaames">jaames</a>
  </div>
  </footer>
  </div>
@@ -44,9 +47,9 @@ <h1>Playdate USB demo - eval</h1>
 
  const data = document.getElementById('data');
 
- // Check WebUSB support, display error if not supported
+ // Check WebSerial support, display error if not supported
  try {
- playdateUsb.assertUsbSupported();
+ pdusb.assertUsbSupported();
  }
  catch (e) {
  document.getElementById('serial').innerHTML = e.message;
@@ -64,7 +67,7 @@ <h1>Playdate USB demo - eval</h1>
 
  async function connect() {
  try {
- device = await playdateUsb.requestConnectPlaydate();
+ device = await pdusb.requestConnectPlaydate();
  // device setup
  await device.open();
  const serial = await device.getSerial();
@@ -76,7 +79,7 @@ <h1>Playdate USB demo - eval</h1>
  const consoleData = await runPayload(device);
  document.getElementById('data');
  data.innerHTML += "<b>results:</b>";
- data.innerHTML += consoleData.split('\n').join('</br>');
+ data.innerHTML += consoleData.join('</br>');
  console.log(consoleData);
  }
  catch(e) {