clement/naive-keypad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove build step

Browse Source
This commit is contained in:
Clément Fréville
2023-11-19 12:27:35 +01:00
parent dc1a1c8633
commit b5ec58b936
5 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@@ -1,20 +1,22 @@
# naive-keypad # naive-keypad
## Build the browser application An interactive demonstration of a keypad with a quickly discoverable code.
## Deploying
To deploy it on your web server, you need to copy those files/directories:
- `index.html`
- `src/`
## Developing
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: 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 ```sh
npm install npm install
npm run build npm run dev # Run the Vite development server
``` npm run build # Build the application in the dist/ directory
Copy the contents of the `dist` directory to your web server, and there you go!
## Changing the code
You may during the build process override the code of the keypad:
```sh
VITE_KEYPAD_CODE=7894 npm run build
``` ```

3
index.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digicode</title> <title>Digicode</title>
<meta name="description" content="Spot the security flaw in a naive pin lock" /> <meta name="description" content="Spot the security flaw in a naive pin lock" />
<link rel="stylesheet" href="src/style.css" />
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@@ -14,6 +15,6 @@
</div> </div>
<div id="keypad"></div> <div id="keypad"></div>
</div> </div>
<script type="module" src="/src/digicode.ts"></script> <script type="module" src="src/digicode.js"></script>
</body> </body>
</html> </html>

4
package.json
View File

@@ -9,7 +9,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5.0.2", "typescript": "^5.2.2",
"vite": "^4.4.5" "vite": "^4.5.0"
} }
} }

21
src/digicode.ts → src/digicode.js
View File

@@ -1,16 +1,18 @@
import './style.css';
const IS_SUCCESS = 'is-success'; const IS_SUCCESS = 'is-success';
const IS_ERROR = 'is-error'; const IS_ERROR = 'is-error';
const DELAY = 1000; const DELAY = 1000;
const CODE = import.meta.env.VITE_KEYPAD_CODE || generateCode(4); const CODE = generateCode(4);
let builder = ''; let builder = '';
const display = document.getElementById('display') as HTMLDivElement; const display = /** @type {HTMLDivElement} */ (document.getElementById('display'));
const light = document.getElementById('light') as HTMLDivElement; const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
const keypad = document.getElementById('keypad') as HTMLDivElement; const keypad = /** @type {HTMLDivElement} */ (document.getElementById('keypad'));
function generateCode(len: number): string { /**
* @param {number} len
* @returns {string}
*/
function generateCode(len) {
let code = ''; let code = '';
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
code += Math.floor(Math.random() * 10).toString(); code += Math.floor(Math.random() * 10).toString();
@@ -24,7 +26,10 @@ function resetCode() {
light.classList.remove(IS_SUCCESS, IS_ERROR); light.classList.remove(IS_SUCCESS, IS_ERROR);
} }
function composeDigit(digit: number) { /**
* @param {number} digit
*/
function composeDigit(digit) {
builder += digit.toString(); builder += digit.toString();
display.innerText = builder + '_'.repeat(CODE.length - builder.length); display.innerText = builder + '_'.repeat(CODE.length - builder.length);
light.classList.remove(IS_SUCCESS, IS_ERROR); light.classList.remove(IS_SUCCESS, IS_ERROR);

2
tsconfig.json
View File

@@ -6,6 +6,8 @@
"lib": ["ES2020", "DOM", "DOM.Iterable"], "lib": ["ES2020", "DOM", "DOM.Iterable"],
"types": ["vite/client"], "types": ["vite/client"],
"skipLibCheck": true, "skipLibCheck": true,
"allowJs": true,
"checkJs": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",