refactor: 🔥 moving svelte (frontend) stuff in their own repo
This commit is contained in:
parent
5638d605c8
commit
4e3e2f6fa2
|
@ -1,20 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
parser: '@typescript-eslint/parser',
|
|
||||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
|
||||||
plugins: ['svelte3', '@typescript-eslint'],
|
|
||||||
ignorePatterns: ['*.cjs'],
|
|
||||||
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
|
|
||||||
settings: {
|
|
||||||
'svelte3/typescript': () => require('typescript')
|
|
||||||
},
|
|
||||||
parserOptions: {
|
|
||||||
sourceType: 'module',
|
|
||||||
ecmaVersion: 2019
|
|
||||||
},
|
|
||||||
env: {
|
|
||||||
browser: true,
|
|
||||||
es2017: true,
|
|
||||||
node: true
|
|
||||||
}
|
|
||||||
};
|
|
8
.gitignore
vendored
8
.gitignore
vendored
|
@ -4,11 +4,3 @@ roms/
|
||||||
states/
|
states/
|
||||||
__pycache__/
|
__pycache__/
|
||||||
*.rdb
|
*.rdb
|
||||||
|
|
||||||
.DS_Store
|
|
||||||
node_modules
|
|
||||||
/build
|
|
||||||
/.svelte-kit
|
|
||||||
/package
|
|
||||||
.env
|
|
||||||
.env.*
|
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
{
|
|
||||||
"useTabs": false,
|
|
||||||
"singleQuote": true,
|
|
||||||
"trailingComma": "none",
|
|
||||||
"printWidth": 100
|
|
||||||
}
|
|
4571
package-lock.json
generated
4571
package-lock.json
generated
File diff suppressed because it is too large
Load diff
34
package.json
34
package.json
|
@ -1,34 +0,0 @@
|
||||||
{
|
|
||||||
"name": "booplaysgba",
|
|
||||||
"version": "0.0.1",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "svelte-kit dev",
|
|
||||||
"build": "svelte-kit build",
|
|
||||||
"package": "svelte-kit package",
|
|
||||||
"preview": "svelte-kit preview",
|
|
||||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
|
||||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
|
||||||
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
|
|
||||||
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@sveltejs/adapter-auto": "next",
|
|
||||||
"@sveltejs/kit": "next",
|
|
||||||
"@typescript-eslint/eslint-plugin": "^4.31.1",
|
|
||||||
"@typescript-eslint/parser": "^4.31.1",
|
|
||||||
"eslint": "^7.32.0",
|
|
||||||
"eslint-config-prettier": "^8.3.0",
|
|
||||||
"eslint-plugin-svelte3": "^3.2.1",
|
|
||||||
"prettier": "^2.4.1",
|
|
||||||
"prettier-plugin-svelte": "^2.4.0",
|
|
||||||
"svelte": "^3.44.0",
|
|
||||||
"svelte-check": "^2.2.6",
|
|
||||||
"svelte-preprocess": "^4.10.0",
|
|
||||||
"tslib": "^2.3.1",
|
|
||||||
"typescript": "^4.4.3"
|
|
||||||
},
|
|
||||||
"type": "module",
|
|
||||||
"dependencies": {
|
|
||||||
"sass": "^1.45.0"
|
|
||||||
}
|
|
||||||
}
|
|
13
src/app.html
13
src/app.html
|
@ -1,13 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="description" content="" />
|
|
||||||
<link rel="icon" href="/favicon.png" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
%svelte.head%
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="svelte">%svelte.body%</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -1,63 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="8.0677929mm"
|
|
||||||
height="9.2203341mm"
|
|
||||||
viewBox="0 0 8.0677928 9.2203341"
|
|
||||||
version="1.1"
|
|
||||||
id="svg5"
|
|
||||||
sodipodi:docname="arrow.svg"
|
|
||||||
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview7"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1.0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:document-units="mm"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="13.108739"
|
|
||||||
inkscape:cx="6.5986514"
|
|
||||||
inkscape:cy="-6.7512214"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1054"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="0"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="layer1" />
|
|
||||||
<defs
|
|
||||||
id="defs2" />
|
|
||||||
<g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"
|
|
||||||
transform="translate(-93.682808,-119.4171)">
|
|
||||||
<text
|
|
||||||
xml:space="preserve"
|
|
||||||
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
|
||||||
x="91.903885"
|
|
||||||
y="129.03831"
|
|
||||||
id="text49897"><tspan
|
|
||||||
sodipodi:role="line"
|
|
||||||
id="tspan49895"
|
|
||||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.6389px;font-family:Inter;-inkscape-font-specification:'Inter, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583"
|
|
||||||
x="91.903885"
|
|
||||||
y="129.03831">></tspan></text>
|
|
||||||
<g
|
|
||||||
aria-label=">"
|
|
||||||
id="text51577"
|
|
||||||
style="font-size:10.5833px;line-height:1.25;stroke-width:0.264583">
|
|
||||||
<path
|
|
||||||
d="m 101.7506,124.52837 -8.067792,4.10906 v -1.60354 l 6.188649,-2.98157 -0.05011,0.10022 v -0.25055 l 0.05011,0.10022 -6.188649,-2.98158 v -1.60353 l 8.067792,4.10906 z"
|
|
||||||
style="font-size:17.6389px;font-family:Inter;-inkscape-font-specification:'Inter, Normal'"
|
|
||||||
id="path51587" />
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 2.4 KiB |
1
src/global.d.ts
vendored
1
src/global.d.ts
vendored
|
@ -1 +0,0 @@
|
||||||
/// <reference types="@sveltejs/kit" />
|
|
|
@ -1,80 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
let websocket: WebSocket | undefined;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
websocket = new WebSocket('ws://localhost:6789/');
|
|
||||||
});
|
|
||||||
|
|
||||||
let passwordInput = document.querySelector('#password-text') as HTMLElement;
|
|
||||||
let divLogin = document.querySelector('#login') as HTMLElement;
|
|
||||||
let divDashboard = document.querySelector('#dashboard') as HTMLElement;
|
|
||||||
let stateList = document.querySelector('#stateList') as HTMLElement;
|
|
||||||
let saveButton = document.getElementById('save') as HTMLElement;
|
|
||||||
|
|
||||||
saveButton.onclick = function (event) {
|
|
||||||
websocket.send(JSON.stringify({ admin: 'save' }));
|
|
||||||
};
|
|
||||||
|
|
||||||
function receiveStates(ev) {
|
|
||||||
let msg = JSON.parse(ev.data);
|
|
||||||
let states = msg.states;
|
|
||||||
for (let i = 0; i < states.length; i++) {
|
|
||||||
let state = states[i];
|
|
||||||
let li = document.createElement('li');
|
|
||||||
let button = document.createElement('button');
|
|
||||||
button.onclick = () => websocket.send(JSON.stringify({ admin: 'load:' + state }));
|
|
||||||
button.appendChild(document.createTextNode(state));
|
|
||||||
li.appendChild(button);
|
|
||||||
stateList.appendChild(li);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function authSuccess(ev) {
|
|
||||||
let msg = JSON.parse(ev.data);
|
|
||||||
if (msg.auth === 'success') {
|
|
||||||
divLogin.style.display = 'none';
|
|
||||||
divDashboard.style.display = 'unset';
|
|
||||||
websocket.removeEventListener('message', authSuccess);
|
|
||||||
receiveStates(ev);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const sendCreds = () => () => {
|
|
||||||
if (websocket) {
|
|
||||||
let message = JSON.stringify({ auth: (<HTMLInputElement>passwordInput).value });
|
|
||||||
websocket.send(message);
|
|
||||||
websocket.addEventListener('message', authSuccess);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
passwordInput.addEventListener('keydown', function (e) {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
sendCreds();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<title>Télécommande admin</title>
|
|
||||||
|
|
||||||
<div id="login">
|
|
||||||
<input type="password" id="password-text" />
|
|
||||||
<input type="button" id="password-button" value="Login" on:click={sendCreds()} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="dashboard">
|
|
||||||
<ul id="stateList" />
|
|
||||||
<button id="save">save</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#dashboard {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,157 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
|
|
||||||
let websocket: WebSocket | undefined;
|
|
||||||
let last_time: number = new Date().getTime();
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
websocket = new WebSocket('ws://localhost:6789/');
|
|
||||||
});
|
|
||||||
|
|
||||||
const sendAction = (key: string) => () => {
|
|
||||||
if (websocket) {
|
|
||||||
let current_time: number = new Date().getTime();
|
|
||||||
if (current_time - last_time > 500) {
|
|
||||||
websocket.send(JSON.stringify({ action: key }));
|
|
||||||
last_time = current_time;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<title>Télécommande</title>
|
|
||||||
|
|
||||||
<table class="buttons">
|
|
||||||
<tr>
|
|
||||||
<td colspan="2" id="l">
|
|
||||||
<button on:click={sendAction('l')}>L</button>
|
|
||||||
</td>
|
|
||||||
<td />
|
|
||||||
<td colspan="2" id="r">
|
|
||||||
<button on:click={sendAction('r')}>R</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td />
|
|
||||||
<td id="up">
|
|
||||||
<button on:click={sendAction('up')}> ∧ </button>
|
|
||||||
</td>
|
|
||||||
<td />
|
|
||||||
<td id="select">
|
|
||||||
<button on:click={sendAction('select')}> select </button>
|
|
||||||
</td>
|
|
||||||
<td id="start">
|
|
||||||
<button on:click={sendAction('start')}> start </button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td id="left">
|
|
||||||
<button on:click={sendAction('left')}> < </button>
|
|
||||||
</td>
|
|
||||||
<td />
|
|
||||||
<td id="right">
|
|
||||||
<button on:click={sendAction('right')}> > </button>
|
|
||||||
</td>
|
|
||||||
<td />
|
|
||||||
<td />
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td />
|
|
||||||
<td id="down">
|
|
||||||
<button on:click={sendAction('down')}> ∨ </button>
|
|
||||||
</td>
|
|
||||||
<td />
|
|
||||||
<td id="a">
|
|
||||||
<button on:click={sendAction('a')}>A</button>
|
|
||||||
</td>
|
|
||||||
<td id="b">
|
|
||||||
<button on:click={sendAction('b')}>B</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@media (orientation: landscape) {
|
|
||||||
button {
|
|
||||||
width: 10vh;
|
|
||||||
height: 10vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#start,
|
|
||||||
#select,
|
|
||||||
#l,
|
|
||||||
#r {
|
|
||||||
button {
|
|
||||||
width: 20vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#r,
|
|
||||||
#l {
|
|
||||||
padding-bottom: 10vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
#right {
|
|
||||||
padding-right: 15vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (orientation: portrait) {
|
|
||||||
button {
|
|
||||||
width: 10vw;
|
|
||||||
height: 10vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#start,
|
|
||||||
#select,
|
|
||||||
#l,
|
|
||||||
#r {
|
|
||||||
button {
|
|
||||||
width: 20vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#r,
|
|
||||||
#l {
|
|
||||||
padding-bottom: 10vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#right {
|
|
||||||
padding-right: 15vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
text-align: center;
|
|
||||||
&#r {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
&#start,
|
|
||||||
&#select,
|
|
||||||
&#l,
|
|
||||||
&#r {
|
|
||||||
button {
|
|
||||||
border-radius: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&#left,
|
|
||||||
&#right,
|
|
||||||
&#up,
|
|
||||||
&#down {
|
|
||||||
button {
|
|
||||||
border-radius: 10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&#a,
|
|
||||||
&#b {
|
|
||||||
button {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,2 +0,0 @@
|
||||||
<h1>Welcome to SvelteKit</h1>
|
|
||||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
|
Binary file not shown.
Before Width: | Height: | Size: 1.5 KiB |
|
@ -1,18 +0,0 @@
|
||||||
import adapter from '@sveltejs/adapter-auto';
|
|
||||||
import preprocess from 'svelte-preprocess';
|
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
|
||||||
const config = {
|
|
||||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
|
||||||
// for more information about preprocessors
|
|
||||||
preprocess: preprocess(),
|
|
||||||
|
|
||||||
kit: {
|
|
||||||
adapter: adapter(),
|
|
||||||
|
|
||||||
// hydrate the <div id="svelte"> element in src/app.html
|
|
||||||
target: '#svelte'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
|
@ -1,31 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"module": "es2020",
|
|
||||||
"lib": ["es2020", "DOM"],
|
|
||||||
"target": "es2020",
|
|
||||||
/**
|
|
||||||
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
|
|
||||||
to enforce using \`import type\` instead of \`import\` for Types.
|
|
||||||
*/
|
|
||||||
"importsNotUsedAsValues": "error",
|
|
||||||
"isolatedModules": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
/**
|
|
||||||
To have warnings/errors of the Svelte compiler at the correct position,
|
|
||||||
enable source maps by default.
|
|
||||||
*/
|
|
||||||
"sourceMap": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"baseUrl": ".",
|
|
||||||
"allowJs": true,
|
|
||||||
"checkJs": true,
|
|
||||||
"paths": {
|
|
||||||
"$lib": ["src/lib"],
|
|
||||||
"$lib/*": ["src/lib/*"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
|
||||||
}
|
|
Loading…
Reference in a new issue