Remove build step

1 year ago · b5ec58b936
parent dc1a1c8633
commit b5ec58b936
5 changed files with 31 additions and 21 deletions
--- a/README.md
+++ b/README.md
@ -1,20 +1,22 @@
 # naive-keypad

-## Build the browser application
+An interactive demonstration of a keypad with a quickly discoverable code.

-Ensure you have [Node.js](https://nodejs.org) installed. Then run your favorite package manager (npm, yarn, pnpm, bun, etc.) to install the dependencies and build the application:
+## Deploying

-```sh
-npm install
-npm run build
-```
+To deploy it on your web server, you need to copy those files/directories:

-Copy the contents of the `dist` directory to your web server, and there you go!
+- `index.html`
+- `src/`

-## Changing the code
+## Developing

-You may during the build process override the code of the keypad:
+You may optionally use a build step to minify the code and have a development server.
+
+Ensure you have [Node.js](https://nodejs.org) installed. Then run your favorite package manager (npm, yarn, pnpm, bun, etc.) to install the dependencies and build the application:

 ```sh
-VITE_KEYPAD_CODE=7894 npm run build
+npm install
+npm run dev # Run the Vite development server
+npm run build # Build the application in the dist/ directory
 ```
--- a/index.html
+++ b/index.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Digicode</title>
    <meta name="description" content="Spot the security flaw in a naive pin lock" />
+    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div id="app">
@ -14,6 +15,6 @@
      </div>
      <div id="keypad"></div>
    </div>
-    <script type="module" src="/src/digicode.ts"></script>
+    <script type="module" src="src/digicode.js"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -9,7 +9,7 @@
    "preview": "vite preview"
  },
  "devDependencies": {
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
  }
 }
--- a/src/digicode.js
+++ b/src/digicode.js
@ -1,16 +1,18 @@
-import './style.css';
-
 const IS_SUCCESS = 'is-success';
 const IS_ERROR = 'is-error';
 const DELAY = 1000;
-const CODE = import.meta.env.VITE_KEYPAD_CODE || generateCode(4);
+const CODE = generateCode(4);
 let builder = '';

-const display = document.getElementById('display') as HTMLDivElement;
-const light = document.getElementById('light') as HTMLDivElement;
-const keypad = document.getElementById('keypad') as HTMLDivElement;
+const display = /** @type {HTMLDivElement} */ (document.getElementById('display'));
+const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
+const keypad = /** @type {HTMLDivElement} */ (document.getElementById('keypad'));

-function generateCode(len: number): string {
+/**
+ * @param {number} len
+ * @returns {string}
+ */
+function generateCode(len) {
  let code = '';
  for (let i = 0; i < len; i++) {
    code += Math.floor(Math.random() * 10).toString();
@ -24,7 +26,10 @@ function resetCode() {
  light.classList.remove(IS_SUCCESS, IS_ERROR);
 }

-function composeDigit(digit: number) {
+/**
+ * @param {number} digit
+ */
+function composeDigit(digit) {
  builder += digit.toString();
  display.innerText = builder + '_'.repeat(CODE.length - builder.length);
  light.classList.remove(IS_SUCCESS, IS_ERROR);
--- a/tsconfig.json
+++ b/tsconfig.json
@ -6,6 +6,8 @@
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],
    "skipLibCheck": true,
+    "allowJs": true,
+    "checkJs": true,

    /* Bundler mode */
    "moduleResolution": "bundler",