_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve local-app

Browse Source
This commit is contained in:
Anton Bracke 2022-02-22 10:05:21 +01:00
parent 6b208ceb0c
commit ac18aab773
No known key found for this signature in database
GPG Key ID: B1222603899C6B25
30 changed files with 841 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
desktop/local-app/package.json
View File

@ -17,6 +17,8 @@
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.30", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
"@tsconfig/svelte": "^2.0.1", "@tsconfig/svelte": "^2.0.1",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"prettier-plugin-svelte": "^2.6.0",
"rollup-plugin-svelte-svg": "^1.0.0-beta.6",
"svelte": "^3.44.0", "svelte": "^3.44.0",
"svelte-check": "^2.2.7", "svelte-check": "^2.2.7",
"svelte-navigator": "^3.1.5", "svelte-navigator": "^3.1.5",
@ -26,5 +28,10 @@
"vite": "^2.8.0", "vite": "^2.8.0",
"vite-plugin-windicss": "^1.7.1", "vite-plugin-windicss": "^1.7.1",
"windicss": "^3.4.3" "windicss": "^3.4.3"
},
"dependencies": {
"@16bits/nes.css": "^2.3.2",
"@fontsource/press-start-2p": "^4.5.2",
"hotkeys-js": "^3.8.7"
} }
} }

17
desktop/local-app/src/App.svelte
View File

@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import { Router, Route } from "svelte-navigator"; import { Router, Route } from "svelte-navigator";
import Sidebar from "./lib/Sidebar.svelte"; import Sidebar from "~/lib/Sidebar.svelte";
import LazyRoute from "./lib/LazyRoute.svelte"; import LazyRoute from "~/lib/LazyRoute.svelte";
const Home = () => import("./views/Home.svelte"); const Home = () => import("~/views/Home.svelte");
const AddServer = () => import("./views/AddServer.svelte"); const AddServer = () => import("~/views/AddServer.svelte");
const Settings = () => import("~/views/Settings.svelte");
let insideElectron = window?.WorkAdventureDesktopApi?.desktop; let insideElectron = window?.WorkAdventureDesktopApi?.desktop;
</script> </script>
@ -17,6 +18,7 @@
<main class="flex flex-grow"> <main class="flex flex-grow">
<LazyRoute path="/" component={Home} delayMs={500}>Loading ...</LazyRoute> <LazyRoute path="/" component={Home} delayMs={500}>Loading ...</LazyRoute>
<LazyRoute path="/server/add" component={AddServer} delayMs={500}>Loading ...</LazyRoute> <LazyRoute path="/server/add" component={AddServer} delayMs={500}>Loading ...</LazyRoute>
<LazyRoute path="/settings" component={Settings} delayMs={500}>Loading ...</LazyRoute>
<Route> <Route>
<h3>404</h3> <h3>404</h3>
<p>No Route could be matched.</p> <p>No Route could be matched.</p>
@ -28,9 +30,12 @@
{/if} {/if}
<style> <style>
@import "@fontsource/press-start-2p/index.css";
@import "@16bits/nes.css/css/nes.min.css";
:root { :root {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", font-family: "Press Start 2P", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif; "Open Sans", "Helvetica Neue", sans-serif;
} }
main { main {

3
desktop/local-app/src/assets/nes.icons/README.md Normal file
View File

@ -0,0 +1,3 @@
# NES.icons
Source: https://github.com/nostalgic-css/NES.icons/

103
desktop/local-app/src/assets/nes.icons/cog.svg Normal file
View File

@ -0,0 +1,103 @@
<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="0" width="1" height="1" fill="#000000" />
<rect x="8" y="0" width="1" height="1" fill="#000000" />
<rect x="2" y="1" width="1" height="1" fill="#000000" />
<rect x="7" y="1" width="1" height="1" fill="#000000" />
<rect x="8" y="1" width="1" height="1" fill="#000000" />
<rect x="13" y="1" width="1" height="1" fill="#000000" />
<rect x="1" y="2" width="1" height="1" fill="#000000" />
<rect x="2" y="2" width="1" height="1" fill="#000000" />
<rect x="3" y="2" width="1" height="1" fill="#000000" />
<rect x="5" y="2" width="1" height="1" fill="#000000" />
<rect x="6" y="2" width="1" height="1" fill="#000000" />
<rect x="7" y="2" width="1" height="1" fill="#000000" />
<rect x="8" y="2" width="1" height="1" fill="#000000" />
<rect x="9" y="2" width="1" height="1" fill="#000000" />
<rect x="10" y="2" width="1" height="1" fill="#000000" />
<rect x="12" y="2" width="1" height="1" fill="#000000" />
<rect x="13" y="2" width="1" height="1" fill="#000000" />
<rect x="14" y="2" width="1" height="1" fill="#000000" />
<rect x="2" y="3" width="1" height="1" fill="#000000" />
<rect x="3" y="3" width="1" height="1" fill="#000000" />
<rect x="4" y="3" width="1" height="1" fill="#000000" />
<rect x="5" y="3" width="1" height="1" fill="#000000" />
<rect x="6" y="3" width="1" height="1" fill="#000000" />
<rect x="7" y="3" width="1" height="1" fill="#000000" />
<rect x="8" y="3" width="1" height="1" fill="#000000" />
<rect x="9" y="3" width="1" height="1" fill="#000000" />
<rect x="10" y="3" width="1" height="1" fill="#000000" />
<rect x="11" y="3" width="1" height="1" fill="#000000" />
<rect x="12" y="3" width="1" height="1" fill="#000000" />
<rect x="13" y="3" width="1" height="1" fill="#000000" />
<rect x="3" y="4" width="1" height="1" fill="#000000" />
<rect x="4" y="4" width="1" height="1" fill="#000000" />
<rect x="11" y="4" width="1" height="1" fill="#000000" />
<rect x="12" y="4" width="1" height="1" fill="#000000" />
<rect x="2" y="5" width="1" height="1" fill="#000000" />
<rect x="3" y="5" width="1" height="1" fill="#000000" />
<rect x="12" y="5" width="1" height="1" fill="#000000" />
<rect x="13" y="5" width="1" height="1" fill="#000000" />
<rect x="2" y="6" width="1" height="1" fill="#000000" />
<rect x="3" y="6" width="1" height="1" fill="#000000" />
<rect x="12" y="6" width="1" height="1" fill="#000000" />
<rect x="13" y="6" width="1" height="1" fill="#000000" />
<rect x="0" y="7" width="1" height="1" fill="#000000" />
<rect x="1" y="7" width="1" height="1" fill="#000000" />
<rect x="2" y="7" width="1" height="1" fill="#000000" />
<rect x="3" y="7" width="1" height="1" fill="#000000" />
<rect x="12" y="7" width="1" height="1" fill="#000000" />
<rect x="13" y="7" width="1" height="1" fill="#000000" />
<rect x="14" y="7" width="1" height="1" fill="#000000" />
<rect x="15" y="7" width="1" height="1" fill="#000000" />
<rect x="0" y="8" width="1" height="1" fill="#000000" />
<rect x="1" y="8" width="1" height="1" fill="#000000" />
<rect x="2" y="8" width="1" height="1" fill="#000000" />
<rect x="3" y="8" width="1" height="1" fill="#000000" />
<rect x="12" y="8" width="1" height="1" fill="#000000" />
<rect x="13" y="8" width="1" height="1" fill="#000000" />
<rect x="14" y="8" width="1" height="1" fill="#000000" />
<rect x="15" y="8" width="1" height="1" fill="#000000" />
<rect x="2" y="9" width="1" height="1" fill="#000000" />
<rect x="3" y="9" width="1" height="1" fill="#000000" />
<rect x="12" y="9" width="1" height="1" fill="#000000" />
<rect x="13" y="9" width="1" height="1" fill="#000000" />
<rect x="2" y="10" width="1" height="1" fill="#000000" />
<rect x="3" y="10" width="1" height="1" fill="#000000" />
<rect x="12" y="10" width="1" height="1" fill="#000000" />
<rect x="13" y="10" width="1" height="1" fill="#000000" />
<rect x="3" y="11" width="1" height="1" fill="#000000" />
<rect x="4" y="11" width="1" height="1" fill="#000000" />
<rect x="11" y="11" width="1" height="1" fill="#000000" />
<rect x="12" y="11" width="1" height="1" fill="#000000" />
<rect x="2" y="12" width="1" height="1" fill="#000000" />
<rect x="3" y="12" width="1" height="1" fill="#000000" />
<rect x="4" y="12" width="1" height="1" fill="#000000" />
<rect x="5" y="12" width="1" height="1" fill="#000000" />
<rect x="6" y="12" width="1" height="1" fill="#000000" />
<rect x="7" y="12" width="1" height="1" fill="#000000" />
<rect x="8" y="12" width="1" height="1" fill="#000000" />
<rect x="9" y="12" width="1" height="1" fill="#000000" />
<rect x="10" y="12" width="1" height="1" fill="#000000" />
<rect x="11" y="12" width="1" height="1" fill="#000000" />
<rect x="12" y="12" width="1" height="1" fill="#000000" />
<rect x="13" y="12" width="1" height="1" fill="#000000" />
<rect x="1" y="13" width="1" height="1" fill="#000000" />
<rect x="2" y="13" width="1" height="1" fill="#000000" />
<rect x="3" y="13" width="1" height="1" fill="#000000" />
<rect x="5" y="13" width="1" height="1" fill="#000000" />
<rect x="6" y="13" width="1" height="1" fill="#000000" />
<rect x="7" y="13" width="1" height="1" fill="#000000" />
<rect x="8" y="13" width="1" height="1" fill="#000000" />
<rect x="9" y="13" width="1" height="1" fill="#000000" />
<rect x="10" y="13" width="1" height="1" fill="#000000" />
<rect x="12" y="13" width="1" height="1" fill="#000000" />
<rect x="13" y="13" width="1" height="1" fill="#000000" />
<rect x="14" y="13" width="1" height="1" fill="#000000" />
<rect x="2" y="14" width="1" height="1" fill="#000000" />
<rect x="7" y="14" width="1" height="1" fill="#000000" />
<rect x="8" y="14" width="1" height="1" fill="#000000" />
<rect x="13" y="14" width="1" height="1" fill="#000000" />
<rect x="7" y="15" width="1" height="1" fill="#000000" />
<rect x="8" y="15" width="1" height="1" fill="#000000" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

16
desktop/local-app/src/lib/InputField.svelte Normal file
View File

@ -0,0 +1,16 @@
<script lang="ts">
export let title: string;
export let id: string;
export let description: string = "";
</script>
<div class="mb-6">
<label class="block text-gray-200 text-lg font-bold mb-1" for={id}>
{title}
</label>
<slot />
<!-- <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************"> -->
{#if description.length > 0}
<p class="text-gray-200 text-xs mt-1 italic">{description}</p>
{/if}
</div>

178
desktop/local-app/src/lib/KeyRecord.svelte Normal file
View File

@ -0,0 +1,178 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let id: string;
export let value: string = "";
const dispatch = createEventDispatcher<{
change: string;
}>();
// https://www.electronjs.org/de/docs/latest/api/accelerator
function keyCodeToElectron(key: string): string {
if (key.match(/^Key[A-Z]/)) {
return key.replace(/^Key/, "").toLocaleUpperCase();
}
if (key.match(/^Digit[0-9]/)) {
return key.replace(/^Digit/, "").toLowerCase();
}
if (key.match(/^Numpad[0-9]/)) {
return key.replace(/^Numpad/, "num").toLowerCase();
}
switch (key) {
// Modifiers
case "ControlLeft":
return "CmdOrCtrl";
case "ControlRight":
return "CmdOrCtrl";
case "AltLeft":
return "Alt";
case "AltRight":
return "AltGr";
case "ScrollLock":
return "Scrolllock";
case "ShiftLeft":
return "Shift";
case "ShiftRight":
return "Shift";
// Specialchars
case "Period":
return ".";
case "Comma":
return ",";
case "Slash":
return "/";
case "Backslash":
return "\\";
case "Minus":
return "-";
case "Equal":
return "=";
case "BracketLeft":
return "[";
case "BracketRight":
return "]";
case "Quote":
return "'";
case "Semicolon":
return ";";
case "IntlBackslash":
return "\\";
case "Backquote":
return "`";
// Numpad
case "NumpadDecimal":
return "numdec";
case "NumpadAdd":
return "numadd";
case "NumpadSubtract":
return "numsub";
case "NumpadMultiply":
return "nummult";
case "NumpadDivide":
return "numdiv";
default:
return key;
}
}
let shortCut: string[] = [];
let recording = false;
let recordingTimeout: NodeJS.Timeout;
let keyInputTimeout: NodeJS.Timeout;
function camelPad(str: string) {
return (
str
// Look for long acronyms and filter out the last letter
.replace(/([A-Z]+)([A-Z][a-z])/g, " $1 $2")
// Look for lower-case letters followed by upper-case letters
.replace(/([a-z\d])([A-Z])/g, "$1 $2")
// Look for lower-case letters followed by numbers
// .replace(/([a-zA-Z])(\d)/g, "$1 $2")
.replace(/^./, (str) => str.toUpperCase())
// Remove any white space left around the word
.trim()
);
}
function resetRecording() {
recording = false;
shortCut = [];
value = "";
}
function stopRecording() {
clearTimeout(recordingTimeout);
recording = false;
value = shortCut.map(keyCodeToElectron).join(" + ");
dispatch("change", value);
}
function startRecording() {
if (recording) {
return;
}
recording = true;
value = "";
shortCut = [];
recordingTimeout = setTimeout(() => {
stopRecording();
}, 1000 * 5);
}
function keyUp(event: KeyboardEvent) {
if (!recording) {
return;
}
shortCut = [...shortCut, event.code];
if (!keyInputTimeout) {
keyInputTimeout = setTimeout(() => {
stopRecording();
keyInputTimeout = undefined;
}, 300);
}
}
</script>
<div
class={`flex items-center w-full h-8 border-1 rounded-md overflow-hidden text-gray-200 text-xs appearance-none focus:outline-none ${
recording ? "border-red-500" : "border-gray-400"
}`}
on:keyup={keyUp}
on:click={startRecording}
tabindex="0"
>
<input
{id}
type="text"
class="flex-grow h-full border-none mx-2 bg-transparent appearance-none focus:outline-none"
disabled
{value}
/>
{#if value.length > 0}
<span
class="flex items-center justify-center w-4 h-4 p-2 mr-1 rounded-full cursor-pointer bg-gray-500 hover:bg-gray-400"
on:click|stopPropagation={resetRecording}>x</span
>
{/if}
<div
class={`flex h-6 items-center px-2 m-0.5 rounded-sm w-28 justify-center cursor-pointer ${
recording ? "bg-red-500" : "hover:bg-gray-400"
}`}
on:click={recording ? stopRecording : startRecording}
>
{#if recording}
<span>recording</span>
{:else}
<span>record</span>
{/if}
</div>
</div>

50
desktop/local-app/src/lib/Lazy.svelte
View File

@ -1,35 +1,35 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from "svelte";
export let component; export let component;
export let delayMs = null; export let delayMs = null;
let loadedComponent = null; let loadedComponent = null;
let timeout; let timeout;
let showFallback = !delayMs; let showFallback = !delayMs;
let props; let props;
$: { $: {
// eslint-disable-next-line no-shadow // eslint-disable-next-line no-shadow
const { component, delayMs, ...restProps } = $$props; const { component, delayMs, ...restProps } = $$props;
props = restProps; props = restProps;
} }
onMount(() => { onMount(() => {
if (delayMs) { if (delayMs) {
timeout = setTimeout(() => { timeout = setTimeout(() => {
showFallback = true; showFallback = true;
}, delayMs); }, delayMs);
} }
component().then(module => { component().then((module) => {
loadedComponent = module.default; loadedComponent = module.default;
}); });
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
}); });
</script> </script>
{#if loadedComponent} {#if loadedComponent}
<svelte:component this={loadedComponent} {...props} /> <svelte:component this={loadedComponent} {...props} />
{:else if showFallback} {:else if showFallback}
<slot /> <slot />
{/if} {/if}

28
desktop/local-app/src/lib/LazyRoute.svelte
View File

@ -1,20 +1,20 @@
<script> <script>
import { Route } from "svelte-navigator"; import { Route } from "svelte-navigator";
import Lazy from "./Lazy.svelte"; import Lazy from "~/lib/Lazy.svelte";
export let component; export let component;
export let delayMs = null; export let delayMs = null;
let props; let props;
$: { $: {
// eslint-disable-next-line no-shadow // eslint-disable-next-line no-shadow
const { component, ...restProps } = $$props; const { component, ...restProps } = $$props;
props = restProps; props = restProps;
} }
</script> </script>
<Route {...props}> <Route {...props}>
<Lazy {component} {delayMs}> <Lazy {component} {delayMs}>
<slot /> <slot />
</Lazy> </Lazy>
</Route> </Route>

23
desktop/local-app/src/lib/Link.svelte
View File

@ -1,18 +1,17 @@
<script> <script>
import { navigate } from "svelte-navigator"; import { navigate } from "svelte-navigator";
let to = '/'; let to = "/";
let clazz = ''; let clazz = "";
export { clazz as class, to }; export { clazz as class, to };
async function click() {
async function click() { await window?.WorkAdventureDesktopApi?.showLocalApp();
await window?.WorkAdventureDesktopApi?.showLocalApp(); navigate(to);
navigate(to); }
}
</script> </script>
<div on:click="{ click }" class="{`${clazz}`}"> <div on:click={click} class={`${clazz}`}>
<slot /> <slot />
</div> </div>

49
desktop/local-app/src/lib/Sidebar.svelte
View File

@ -1,16 +1,29 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import Link from "./Link.svelte";
import { servers, selectedServer, selectServer, loadServers } from "../store"; import Link from "~/lib/Link.svelte";
import { servers, selectedServer, selectServer, loadServers, Server } from "../store";
import CogIcon from "~/assets/nes.icons/cog.svg";
let isDevelopment = false; let isDevelopment = false;
function getServerColor(i: number) { function getServerColor(i: number) {
const serverColors = ['bg-red-400', 'bg-yellow-500', 'bg-green-500', 'bg-blue-500', 'bg-indigo-500', 'bg-purple-500']; const serverColors = [
"bg-red-400",
"bg-yellow-500",
"bg-green-500",
"bg-blue-500",
"bg-indigo-500",
"bg-purple-500",
];
return serverColors[i % serverColors.length]; return serverColors[i % serverColors.length];
} }
selectedServer.subscribe((e) => {
console.log("selected server changed", e);
});
onMount(async () => { onMount(async () => {
await loadServers(); await loadServers();
isDevelopment = await window?.WorkAdventureDesktopApi?.isDevelopment(); isDevelopment = await window?.WorkAdventureDesktopApi?.isDevelopment();
@ -20,29 +33,37 @@
<aside class="flex flex-col bg-gray-700 items-center"> <aside class="flex flex-col bg-gray-700 items-center">
<div class="flex flex-col mt-4 space-y-4 overflow-y-auto pb-4"> <div class="flex flex-col mt-4 space-y-4 overflow-y-auto pb-4">
{#each $servers as server, i} {#each $servers as server, i}
<div class="flex flex-col items-center justify-center text-gray-400"> <div class="flex flex-col items-center justify-center ">
<div <div
class={`w-12 h-12 rounded-lg flex cursor-pointer text-center items-center justify-center text-light-50 ${getServerColor(i)} ${ class={`w-16 h-16 p-1 rounded-md flex cursor-pointer text-light-50 border-4 border-transparent text-gray-200 hover:text-gray-500`}
$selectedServer === server._id ? "" : "" class:border-gray-400={$selectedServer === server._id}
}`}
on:click={() => selectServer(server)} on:click={() => selectServer(server)}
> >
{server.name.slice(0, 2).toLocaleUpperCase()} <div class={`flex w-full h-full text-center items-center justify-center rounded-md ${getServerColor(i)}`}>
{server.name.slice(0,2).toLocaleUpperCase()}
</div>
</div> </div>
</div> </div>
{/each} {/each}
<Link
to="/server/add"
class="flex justify-center items-center text-4xl no-underline text-gray-400 cursor-pointer">+</Link
>
</div> </div>
<Link
to="/server/add"
class="flex justify-center items-center text-4xl no-underline text-gray-200 cursor-pointer hover:text-gray-500"
>+</Link
>
<Link
to="/settings"
class="flex mt-auto justify-center items-center text-4xl no-underline cursor-pointer"
>
<CogIcon width="30" height="30" class="fill-gray-200 hover:fill-gray-500" />
</Link>
{#if isDevelopment} {#if isDevelopment}
<button class="mt-auto" on:click={() => location.reload()}>Refresh</button> <button class="text-8px text-red-500 mt-8 mb-4" on:click={() => location.reload()}>Refresh</button>
{/if} {/if}
</aside> </aside>
<style> <style>
aside { aside {
width: 70px; width: 80px;
} }
</style> </style>

27
desktop/local-app/src/lib/TextInput.svelte Normal file
View File

@ -0,0 +1,27 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let id: string;
export let value: string = "";
export let required: boolean = false;
const dispatch = createEventDispatcher<{
change: string;
}>();
</script>
<div
class={`flex items-center w-full h-10 border-1 rounded-md overflow-hidden text-gray-200 text-md appearance-none focus:outline-none`}
>
<input
{id}
type="text"
class="flex-grow h-full border-none mx-2 bg-transparent appearance-none focus:outline-none"
{value}
{required}
on:change={(e) => {
value = e.target.value;
dispatch("change", { value });
}}
/>
</div>

25
desktop/local-app/src/lib/ToggleSwitch.svelte Normal file
View File

@ -0,0 +1,25 @@
<script lang="ts">
export let id: string;
export let value: boolean;
export let title: string = null;
</script>
<div class="flex w-full my-2">
<label for={id} class="flex items-center cursor-pointer">
<div class="relative">
<input {id} type="checkbox" class="sr-only" checked={value} />
<div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" />
<div class="dot absolute w-6 h-6 bg-gray-500 rounded-full shadow -left-1 -top-1 transition" />
</div>
{#if title}
<div class="ml-4 text-gray-200 text-sm">{title}</div>
{/if}
</label>
</div>
<style>
input:checked ~ .dot {
transform: translateX(100%);
background-color: #0369a1;
}
</style>

10
desktop/local-app/src/store.ts
View File

@ -1,6 +1,6 @@
import { writable, get } from "svelte/store"; import { writable, get } from "svelte/store";
type Server = { export type Server = {
_id: string; _id: string;
name: string; name: string;
url: string; url: string;
@ -11,15 +11,19 @@ export const newServer = writable<Omit<Server, "_id">>({
url: "", url: "",
}); });
export const servers = writable<Server[]>([]); export const servers = writable<Server[]>([]);
export const selectedServer = writable<string | undefined>(undefined); export const selectedServer = writable<string | undefined>("");
export async function selectServer(server: Server) { export async function selectServer(server: Server) {
await window.WorkAdventureDesktopApi.selectServer(server._id); await window.WorkAdventureDesktopApi.selectServer(server._id);
selectedServer.set(server._id); selectedServer.set(server._id);
} }
export async function addServer(event: Event) { export async function addServer() {
const addedServer = await window?.WorkAdventureDesktopApi?.addServer(get(newServer)); const addedServer = await window?.WorkAdventureDesktopApi?.addServer(get(newServer));
if (!addedServer?._id) {
console.log(addedServer);
throw new Error(addedServer);
}
newServer.set({ name: "", url: "" }); newServer.set({ name: "", url: "" });
servers.update((s) => [...s, addedServer]); servers.update((s) => [...s, addedServer]);
await selectServer(addedServer); await selectServer(addedServer);

4
desktop/local-app/src/svg.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module "*.svg" {
const content: string;
export default content;
}

38
desktop/local-app/src/views/AddServer.svelte
View File

@ -1,12 +1,36 @@
<script lang="ts"> <script lang="ts">
import { newServer, addServer } from '../store'; import InputField from "~/lib/InputField.svelte";
import TextInput from "~/lib/TextInput.svelte";
import { newServer, addServer } from "~/store";
let error = "";
async function _addServer() {
try {
await addServer();
} catch(e) {
console.log(e);
error = e.message;
}
}
</script> </script>
<div class="flex w-full h-full justify-center items-center"> <div class="flex w-full h-full justify-center items-center">
<form class="flex flex-col justify-center" on:submit|preventDefault={_addServer}>
<form class="flex flex-col justify-center space-y-2" on:submit|preventDefault={addServer}> <!-- <input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Url" required > -->
<input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Name" required bind:value={$newServer.name}> <InputField title="Name" id="name">
<input type="text" class="w-full h-12 px-4 py-2 bg-gray-200 rounded-lg" placeholder="Url" required bind:value={$newServer.url}> <TextInput bind:value={$newServer.name} required id="name" />
<input type="submit" value="Add server" /> </InputField>
</form> <InputField title="Url" id="url">
<TextInput bind:value={$newServer.url} required id="url" />
</InputField>
{#if error}
<div class="text-red-500 text-center mb-2">{error}</div>
{/if}
<input
type="submit"
value="Add server"
class="mt-4 rounded-md p-2 bg-gray-300 cursor-pointer hover:bg-gray-400"
/>
</form>
</div> </div>

17
desktop/local-app/src/views/Home.svelte
View File

@ -1,7 +1,18 @@
<script lang="ts"> <script lang="ts">
import logo from "../../../assets/icons/logo-text.png"; import { onMount } from "svelte";
import Logo from "~/../../assets/icons/logo.svg";
let version = "";
onMount(async () => {
version = await window?.WorkAdventureDesktopApi?.getVersion();
});
</script> </script>
<div class="flex w-full h-full justify-center items-center"> <div class="flex flex-col w-full h-full justify-center items-center">
<img src={logo} alt="WorkAdeventure logo" /> <Logo height="100" class="my-auto" />
<div class="flex my-4 items-center space-x-4">
<span class="text-gray-300 text-lg ">Desktop-App Version: {version}</span>
</div>
</div> </div>

59
desktop/local-app/src/views/Settings.svelte Normal file
View File

@ -0,0 +1,59 @@
<script lang="ts">
import { onMount } from "svelte";
import { writable } from "svelte/store";
import ToggleSwitch from "~/lib/ToggleSwitch.svelte";
import InputField from "~/lib/InputField.svelte";
import KeyRecord from "~/lib/KeyRecord.svelte";
const shortCuts = writable<Record<string, string> | undefined>({});
onMount(async () => {
shortCuts.set(await window?.WorkAdventureDesktopApi?.getShortcuts());
});
async function saveShortcut(key: string, value: string) {
await window?.WorkAdventureDesktopApi?.saveShortcut(key, value);
}
</script>
<div class="flex flex-col w-full h-full justify-center items-center">
<h1 class="text-gray-200 text-2xl mb-6">Settings</h1>
<div class="flex flex-col justify-start max-w-152">
{#if $shortCuts}
<InputField
id="toggle-camera"
title="Toggle Mute"
description="Set a shortcut to turn your microphone on and off"
>
<KeyRecord
id="toggle-mute"
value={$shortCuts.mute_toggle}
on:change={(e) => saveShortcut("mute_toggle", e.detail)}
/>
</InputField>
<InputField
id="toggle-camera"
title="Toggle Camera"
description="Set a shortcut to turn your camera on and off"
>
<KeyRecord
id="toggle-camera"
value={$shortCuts.camera_toggle}
on:change={(e) => saveShortcut("camera_toggle", e.detail)}
/>
</InputField>
{/if}
<InputField id="toggle-autostart" title="Toggle autostart">
<ToggleSwitch
id="toggle-autostart"
value={true}
title="Autostart WorkAdventure after your PC started"
on:change={(e) => {}}
/>
</InputField>
</div>
</div>

5
desktop/local-app/tsconfig.json
View File

@ -13,7 +13,10 @@
* of JS in `.svelte` files. * of JS in `.svelte` files.
*/ */
"allowJs": true, "allowJs": true,
"checkJs": true "checkJs": true,
"paths": {
"~/*": ["./*"]
}
}, },
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
"references": [{ "path": "./tsconfig.node.json" }] "references": [{ "path": "./tsconfig.node.json" }]

3
desktop/local-app/tsconfig.node.json
View File

@ -2,7 +2,8 @@
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"module": "esnext", "module": "esnext",
"moduleResolution": "node" "moduleResolution": "node",
"allowSyntheticDefaultImports": true
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

21
desktop/local-app/vite.config.ts
View File

@ -1,7 +1,26 @@
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte"; import { svelte } from "@sveltejs/vite-plugin-svelte";
import WindiCSS from "vite-plugin-windicss"; import WindiCSS from "vite-plugin-windicss";
import { svelteSVG } from "rollup-plugin-svelte-svg";
import path from "path";
export default defineConfig({ export default defineConfig({
plugins: [svelte(), WindiCSS()], resolve: {
alias: {
"~": `${path.resolve(__dirname, "src")}/`,
},
},
plugins: [
svelte(),
svelteSVG({
// optional SVGO options
// pass empty object to enable defaults
svgo: {},
// vite-specific
// https://vitejs.dev/guide/api-plugin.html#plugin-ordering
// enforce: 'pre' | 'post'
enforce: "pre",
}),
WindiCSS(),
],
}); });

156
desktop/local-app/yarn.lock
View File

@ -2,6 +2,11 @@
# yarn lockfile v1 # yarn lockfile v1
"@16bits/nes.css@^2.3.2":
version "2.3.2"
resolved "https://registry.yarnpkg.com/@16bits/nes.css/-/nes.css-2.3.2.tgz#e69db834119b33ae8d3cb044f106a07a17cadd6f"
integrity sha512-nEM5PIth+Bab5JSOa4uUR+PMNUsNTYxA55oVlG3gXI/4LoYtWS767Uv9Pu/KCbHXVvnIjt4ZXt13kZw3083qTw==
"@antfu/utils@^0.4.0": "@antfu/utils@^0.4.0":
version "0.4.0" version "0.4.0"
resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.4.0.tgz#df100ed9922d7359bf6c99083765b5207086b9a7" resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.4.0.tgz#df100ed9922d7359bf6c99083765b5207086b9a7"
@ -9,6 +14,11 @@
dependencies: dependencies:
"@types/throttle-debounce" "^2.1.0" "@types/throttle-debounce" "^2.1.0"
"@fontsource/press-start-2p@^4.5.2":
version "4.5.2"
resolved "https://registry.yarnpkg.com/@fontsource/press-start-2p/-/press-start-2p-4.5.2.tgz#062d56ce6dcffdd28f8ca80d9e5b86a473a37c15"
integrity sha512-1Wwk85zlUiirPTIw25V3z4wLXbrqaOqDV7g5akjPuthg+hY5Wv0zOPXcHRVBwb+Igh4qVLHUd6O5X27BgWTbkg==
"@nodelib/fs.scandir@2.1.5": "@nodelib/fs.scandir@2.1.5":
version "2.1.5" version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@ -49,6 +59,11 @@
magic-string "^0.25.7" magic-string "^0.25.7"
svelte-hmr "^0.14.9" svelte-hmr "^0.14.9"
"@trysound/sax@0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
"@tsconfig/svelte@^2.0.1": "@tsconfig/svelte@^2.0.1":
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-2.0.1.tgz#0e8d7caa693e9b2afce5e622c0475bb0fd89c12c" resolved "https://registry.yarnpkg.com/@tsconfig/svelte/-/svelte-2.0.1.tgz#0e8d7caa693e9b2afce5e622c0475bb0fd89c12c"
@ -116,6 +131,11 @@ binary-extensions@^2.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
boolbase@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
brace-expansion@^1.1.7: brace-expansion@^1.1.7:
version "1.1.11" version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@ -156,11 +176,47 @@ chokidar@^3.4.1:
optionalDependencies: optionalDependencies:
fsevents "~2.3.2" fsevents "~2.3.2"
commander@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
concat-map@0.0.1: concat-map@0.0.1:
version "0.0.1" version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
css-select@^4.1.3:
version "4.2.1"
resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
dependencies:
boolbase "^1.0.0"
css-what "^5.1.0"
domhandler "^4.3.0"
domutils "^2.8.0"
nth-check "^2.0.1"
css-tree@^1.1.2, css-tree@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
dependencies:
mdn-data "2.0.14"
source-map "^0.6.1"
css-what@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
csso@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
dependencies:
css-tree "^1.1.2"
debug@^4.3.3: debug@^4.3.3:
version "4.3.3" version "4.3.3"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
@ -178,6 +234,41 @@ detect-indent@^6.0.0:
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6" resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA== integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
dom-serializer@^1.0.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
dependencies:
domelementtype "^2.0.1"
domhandler "^4.2.0"
entities "^2.0.0"
domelementtype@^2.0.1, domelementtype@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
domhandler@^4.2.0, domhandler@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
dependencies:
domelementtype "^2.2.0"
domutils@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
dependencies:
dom-serializer "^1.0.1"
domelementtype "^2.2.0"
domhandler "^4.2.0"
entities@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
es6-promise@^3.1.2: es6-promise@^3.1.2:
version "3.3.1" version "3.3.1"
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613" resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@ -303,6 +394,11 @@ esbuild@^0.14.14:
esbuild-windows-64 "0.14.23" esbuild-windows-64 "0.14.23"
esbuild-windows-arm64 "0.14.23" esbuild-windows-arm64 "0.14.23"
estree-walker@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
estree-walker@^2.0.1: estree-walker@^2.0.1:
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
@ -379,6 +475,11 @@ has@^1.0.3:
dependencies: dependencies:
function-bind "^1.1.1" function-bind "^1.1.1"
hotkeys-js@^3.8.7:
version "3.8.7"
resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
integrity sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==
import-fresh@^3.2.1: import-fresh@^3.2.1:
version "3.3.0" version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@ -460,6 +561,11 @@ magic-string@^0.25.7:
dependencies: dependencies:
sourcemap-codec "^1.4.4" sourcemap-codec "^1.4.4"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
merge2@^1.3.0: merge2@^1.3.0:
version "1.4.1" version "1.4.1"
resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@ -525,6 +631,13 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
nth-check@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
dependencies:
boolbase "^1.0.0"
once@^1.3.0: once@^1.3.0:
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@ -576,6 +689,11 @@ postcss@^8.4.6:
picocolors "^1.0.0" picocolors "^1.0.0"
source-map-js "^1.0.2" source-map-js "^1.0.2"
prettier-plugin-svelte@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.6.0.tgz#0e845b560b55cd1d951d6c50431b4949f8591746"
integrity sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==
prettier@^2.5.1: prettier@^2.5.1:
version "2.5.1" version "2.5.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
@ -619,6 +737,21 @@ rimraf@^2.5.2:
dependencies: dependencies:
glob "^7.1.3" glob "^7.1.3"
rollup-plugin-svelte-svg@^1.0.0-beta.6:
version "1.0.0-beta.6"
resolved "https://registry.yarnpkg.com/rollup-plugin-svelte-svg/-/rollup-plugin-svelte-svg-1.0.0-beta.6.tgz#0ee3deae2329abb1c90f50b83598aaf0bb0559fc"
integrity sha512-6uJb9kuaqK6p+DvkgphhGN18wvUzdT6h7MQC2B8P1omi9omC9lQC54pwaot21h6z9ibhGPLG9a1XFLeDQth/kg==
dependencies:
rollup-pluginutils "^2.8.2"
svgo "^2.3.1"
rollup-pluginutils@^2.8.2:
version "2.8.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
dependencies:
estree-walker "^0.6.1"
rollup@^2.59.0: rollup@^2.59.0:
version "2.67.3" version "2.67.3"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.67.3.tgz#3f04391fc296f807d067c9081d173e0a33dbd37e" resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.67.3.tgz#3f04391fc296f807d067c9081d173e0a33dbd37e"
@ -665,6 +798,11 @@ source-map-js@^1.0.2:
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
source-map@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
source-map@^0.7.3: source-map@^0.7.3:
version "0.7.3" version "0.7.3"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
@ -675,6 +813,11 @@ sourcemap-codec@^1.3.0, sourcemap-codec@^1.4.4:
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
stable@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
strip-indent@^3.0.0: strip-indent@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001" resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
@ -739,6 +882,19 @@ svelte@^3.44.0:
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.46.4.tgz#0c46bc4a3e20a2617a1b7dc43a722f9d6c084a38" resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.46.4.tgz#0c46bc4a3e20a2617a1b7dc43a722f9d6c084a38"
integrity sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg== integrity sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==
svgo@^2.3.1:
version "2.8.0"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
dependencies:
"@trysound/sax" "0.2.0"
commander "^7.2.0"
css-select "^4.1.3"
css-tree "^1.1.3"
csso "^4.2.0"
picocolors "^1.0.0"
stable "^0.1.8"
to-regex-range@^5.0.1: to-regex-range@^5.0.1:
version "5.0.1" version "5.0.1"
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"

14
desktop/src/app.ts
View File

@ -3,11 +3,12 @@ import { app, BrowserWindow, globalShortcut } from "electron";
import { createWindow, getWindow } from "./window"; import { createWindow, getWindow } from "./window";
import { createTray } from "./tray"; import { createTray } from "./tray";
import autoUpdater from "./auto-updater"; import autoUpdater from "./auto-updater";
import updateAutoLaunch from "./update-auto-launch"; import { updateAutoLaunch } from "./auto-launch";
import ipc, { emitMutedKeyPress } from "./ipc"; import ipc from "./ipc";
import settings from "./settings"; import settings from "./settings";
import { setLogLevel } from "./log"; import { setLogLevel } from "./log";
import "./serve"; // prepare custom url scheme import "./serve"; // prepare custom url scheme
import { loadShortcuts } from "./shortcuts";
function init() { function init() {
const appLock = app.requestSingleInstanceLock(); const appLock = app.requestSingleInstanceLock();
@ -56,10 +57,7 @@ function init() {
await createWindow(); await createWindow();
createTray(); createTray();
// TODO loadShortcuts();
globalShortcut.register("Alt+CommandOrControl+M", () => {
emitMutedKeyPress();
});
}); });
// Quit when all windows are closed. // Quit when all windows are closed.
@ -81,6 +79,10 @@ function init() {
app.on("quit", () => { app.on("quit", () => {
// TODO // TODO
}); });
app.on("will-quit", () => {
globalShortcut.unregisterAll();
});
} }
export default { export default {

8
desktop/src/update-auto-launch.ts → desktop/src/auto-launch.ts
View File

@ -1,10 +1,10 @@
import AutoLaunch from "auto-launch"; import AutoLaunch from "auto-launch";
import isDev from "electron-is-dev";
import { app } from "electron"; import { app } from "electron";
import electronIsDev from "electron-is-dev";
import settings from "./settings"; import settings from "./settings";
export default async () => { export async function updateAutoLaunch() {
let isAutoLaunchEnabled = settings.get("auto_launch_enabled"); let isAutoLaunchEnabled = settings.get("auto_launch_enabled");
// set default to enabled // set default to enabled
@ -14,7 +14,7 @@ export default async () => {
} }
// Don't run this in development // Don't run this in development
if (isDev) { if (electronIsDev) {
return; return;
} }
@ -38,4 +38,4 @@ export default async () => {
openAtLogin: isAutoLaunchEnabled, openAtLogin: isAutoLaunchEnabled,
openAsHidden: true, openAsHidden: true,
}); });
}; }

33
desktop/src/ipc.ts
View File

@ -1,21 +1,32 @@
import { ipcMain } from "electron"; import { ipcMain, app } from "electron";
import electronIsDev from "electron-is-dev"; import electronIsDev from "electron-is-dev";
import { createAndShowNotification } from "./notification"; import { createAndShowNotification } from "./notification";
import { Server } from "./preload-local-app/types"; import { Server } from "./preload-local-app/types";
import settings from "./settings"; import settings from "./settings";
import { saveShortcut } from "./shortcuts";
import { getWindow, hideAppView, showAppView } from "./window"; import { getWindow, hideAppView, showAppView } from "./window";
export function emitMutedKeyPress() { export function emitMuteToggle() {
const mainWindow = getWindow(); const mainWindow = getWindow();
if (!mainWindow) { if (!mainWindow) {
throw new Error("Main window not found"); throw new Error("Main window not found");
} }
mainWindow.webContents.send("app:on-muted-key-press"); mainWindow.webContents.send("app:on-camera-toggle");
}
export function emitCameraToggle() {
const mainWindow = getWindow();
if (!mainWindow) {
throw new Error("Main window not found");
}
mainWindow.webContents.send("app:on-mute-toggle");
} }
export default () => { export default () => {
ipcMain.handle("is-development", () => electronIsDev); ipcMain.handle("is-development", () => electronIsDev);
ipcMain.handle("get-version", () => (electronIsDev ? "dev" : app.getVersion()));
// app ipc // app ipc
ipcMain.on("app:notify", (event, txt) => { ipcMain.on("app:notify", (event, txt) => {
@ -30,6 +41,7 @@ export default () => {
ipcMain.handle("local-app:getServers", () => { ipcMain.handle("local-app:getServers", () => {
return ( return (
settings.get("servers") || [ settings.get("servers") || [
// TODO: remove this default server
{ {
_id: "1", _id: "1",
name: "WA Demo", name: "WA Demo",
@ -51,8 +63,17 @@ export default () => {
return true; return true;
}); });
ipcMain.handle("local-app:addServer", (event, server: Omit<Server, "_id">) => { ipcMain.handle("local-app:addServer", async (event, server: Omit<Server, "_id">) => {
const servers = settings.get("servers") || []; const servers = settings.get("servers") || [];
try {
// TODO: add proper test to see if server url is valid and points to a real WA server
await fetch(`${server.url}/iframe_api.js`);
} catch (e) {
console.error(e);
return new Error("Invalid server url");
}
const newServer = { const newServer = {
...server, ...server,
_id: `${servers.length + 1}`, _id: `${servers.length + 1}`,
@ -70,4 +91,8 @@ export default () => {
); );
return true; return true;
}); });
ipcMain.handle("local-app:saveShortcut", (event, shortcut, key) => saveShortcut(shortcut, key));
ipcMain.handle("local-app:getShortcuts", (event) => settings.get("shortcuts") || {});
}; };

6
desktop/src/preload-app/preload.ts
View File

@ -1,12 +1,14 @@
import { contextBridge, ipcRenderer, IpcRendererEvent } from "electron"; import { contextBridge, ipcRenderer, IpcRendererEvent } from "electron";
import { SettingsData } from "src/settings";
import type { WorkAdventureDesktopApi } from "./types"; import type { WorkAdventureDesktopApi } from "./types";
const api: WorkAdventureDesktopApi = { const api: WorkAdventureDesktopApi = {
desktop: true, desktop: true,
isDevelopment: () => ipcRenderer.invoke("is-development"), isDevelopment: () => ipcRenderer.invoke("is-development"),
getVersion: () => ipcRenderer.invoke("get-version"),
notify: (txt: string) => ipcRenderer.send("app:notify", txt), notify: (txt: string) => ipcRenderer.send("app:notify", txt),
onMutedKeyPress: (callback: (event: IpcRendererEvent) => void) => onMuteToggle: (callback: (event: IpcRendererEvent) => void) => ipcRenderer.on("app:on-mute-toggle", callback),
ipcRenderer.on("app:on-muted-key-press", callback), onCameraToggle: (callback: (event: IpcRendererEvent) => void) => ipcRenderer.on("app:on-camera-toggle", callback),
}; };
contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", api); contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", api);

4
desktop/src/preload-app/types.ts
View File

@ -3,6 +3,8 @@ import type { IpcRendererEvent } from "electron";
export type WorkAdventureDesktopApi = { export type WorkAdventureDesktopApi = {
desktop: boolean; desktop: boolean;
isDevelopment: () => Promise<boolean>; isDevelopment: () => Promise<boolean>;
getVersion: () => Promise<string>;
notify: (txt: string) => void; notify: (txt: string) => void;
onMutedKeyPress: (callback: (event: IpcRendererEvent) => void) => void; onMuteToggle: (callback: (event: IpcRendererEvent) => void) => void;
onCameraToggle: (callback: (event: IpcRendererEvent) => void) => void;
}; };

5
desktop/src/preload-local-app/preload.ts
View File

@ -1,14 +1,19 @@
import { contextBridge, ipcRenderer } from "electron"; import { contextBridge, ipcRenderer } from "electron";
import { SettingsData } from "src/settings";
import type { Server, WorkAdventureLocalAppApi } from "./types"; import type { Server, WorkAdventureLocalAppApi } from "./types";
const api: WorkAdventureLocalAppApi = { const api: WorkAdventureLocalAppApi = {
desktop: true, desktop: true,
isDevelopment: () => ipcRenderer.invoke("is-development"), isDevelopment: () => ipcRenderer.invoke("is-development"),
getVersion: () => ipcRenderer.invoke("get-version"),
showLocalApp: () => ipcRenderer.invoke("local-app:showLocalApp"), showLocalApp: () => ipcRenderer.invoke("local-app:showLocalApp"),
getServers: () => ipcRenderer.invoke("local-app:getServers"), getServers: () => ipcRenderer.invoke("local-app:getServers"),
selectServer: (serverId: string) => ipcRenderer.invoke("local-app:selectServer", serverId), selectServer: (serverId: string) => ipcRenderer.invoke("local-app:selectServer", serverId),
addServer: (server: Omit<Server, "_id">) => ipcRenderer.invoke("local-app:addServer", server), addServer: (server: Omit<Server, "_id">) => ipcRenderer.invoke("local-app:addServer", server),
removeServer: (serverId: Server["_id"]) => ipcRenderer.invoke("local-app:removeServer", serverId), removeServer: (serverId: Server["_id"]) => ipcRenderer.invoke("local-app:removeServer", serverId),
saveShortcut: (shortcut: keyof SettingsData["shortcuts"], key: string | null) =>
ipcRenderer.invoke("local-app:saveShortcut", shortcut, key),
getShortcuts: () => ipcRenderer.invoke("local-app:getShortcuts"),
}; };
contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", api); contextBridge.exposeInMainWorld("WorkAdventureDesktopApi", api);

5
desktop/src/preload-local-app/types.ts
View File

@ -1,3 +1,5 @@
import { SettingsData } from "src/settings";
export type Server = { export type Server = {
_id: string; _id: string;
name: string; name: string;
@ -7,9 +9,12 @@ export type Server = {
export type WorkAdventureLocalAppApi = { export type WorkAdventureLocalAppApi = {
desktop: boolean; desktop: boolean;
isDevelopment: () => Promise<boolean>; isDevelopment: () => Promise<boolean>;
getVersion: () => Promise<string>;
showLocalApp: () => Promise<void>; showLocalApp: () => Promise<void>;
getServers: () => Promise<Server[]>; getServers: () => Promise<Server[]>;
selectServer: (serverId: string) => Promise<Error | boolean>; selectServer: (serverId: string) => Promise<Error | boolean>;
addServer: (server: Omit<Server, "_id">) => Promise<Server>; addServer: (server: Omit<Server, "_id">) => Promise<Server>;
removeServer: (serverId: Server["_id"]) => Promise<boolean>; removeServer: (serverId: Server["_id"]) => Promise<boolean>;
saveShortcut: (shortcut: keyof SettingsData["shortcuts"], key: string | null) => Promise<void>;
getShortcuts: () => Promise<SettingsData["shortcuts"]>;
}; };

3
desktop/src/settings.ts
View File

@ -2,10 +2,11 @@ import ElectronLog from "electron-log";
import Settings from "electron-settings"; import Settings from "electron-settings";
import type { Server } from "./preload-local-app/types"; import type { Server } from "./preload-local-app/types";
type SettingsData = { export type SettingsData = {
log_level: ElectronLog.LogLevel; log_level: ElectronLog.LogLevel;
auto_launch_enabled: boolean; auto_launch_enabled: boolean;
servers: Server[]; servers: Server[];
shortcuts: Record<"mute_toggle" | "camera_toggle", string | null>;
}; };
let settings: SettingsData; let settings: SettingsData;

29
desktop/src/shortcuts.ts Normal file
View File

@ -0,0 +1,29 @@
import { globalShortcut } from "electron";
import settings, { SettingsData } from "./settings";
import { emitCameraToggle, emitMuteToggle } from "./ipc";
export function loadShortcuts() {
globalShortcut.unregisterAll();
const shortcuts = settings.get("shortcuts");
// // mute key
if (shortcuts?.mute_toggle && shortcuts.mute_toggle.length > 0) {
globalShortcut.register(shortcuts.mute_toggle, () => {
emitMuteToggle();
});
}
if (shortcuts?.camera_toggle && shortcuts.camera_toggle.length > 0) {
globalShortcut.register(shortcuts.camera_toggle, () => {
emitCameraToggle();
});
}
}
export function saveShortcut(shortcut: keyof SettingsData["shortcuts"], key: string | null) {
const shortcuts = settings.get("shortcuts") || <SettingsData["shortcuts"]>{};
shortcuts[shortcut] = key;
settings.set("shortcuts", shortcuts);
loadShortcuts();
}