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
## 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:
```sh
npm install
npm run build
```
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
npm run dev # Run the Vite development server
npm run build # Build the application in the dist/ directory
```

3
index.html
View File

@@ -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>

4
package.json
View File

@@ -9,7 +9,7 @@
"preview": "vite preview"
},
"devDependencies": {
"typescript": "^5.0.2",
"vite": "^4.4.5"
"typescript": "^5.2.2",
"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_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);

2
tsconfig.json
View File

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