refactor: 🔥 moving svelte (frontend) stuff in their own repo
This commit is contained in:
Laureηt
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/
|
||||
__pycache__/
|
||||
*.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