-
-
-
-
-
-
-
-
-
-
diff --git a/src/render/components/context.js b/src/render/components/context.js
new file mode 100644
index 0000000..b6879ae
--- /dev/null
+++ b/src/render/components/context.js
@@ -0,0 +1,38 @@
+
+const Context =
+{
+ props: ["modifier", "context", "avatar", "id"],
+
+ setup(props) {
+ const playback = Vue.ref(false);
+
+ Vue.onMounted(() => {
+ window.mainApi.on("playback", (id, status) => {
+ if (id === props.id) {
+ playback.value = status;
+ }
+ });
+ });
+
+ return { playback };
+ },
+
+ template: `
+
+
+
-
-
- {{ text }}
-
-
-
-
-
- {{ context }}
-
-
-
+
+ ![]()
+
+
+
+ {{ context }}
+
+ `
+}
+
+export default Context;
diff --git a/src/render/components/control/draggify.js b/src/render/components/control/draggify.js
new file mode 100644
index 0000000..f85b930
--- /dev/null
+++ b/src/render/components/control/draggify.js
@@ -0,0 +1,198 @@
+const saveLocation = "input_item_position";
+const defaultPosition = { x: 15, y: window.innerHeight - 300 };
+
+//---Dragabble Helper Funcs--------------------------------------
+
+// Calculate distance to nearest side.
+function calcSideProximity (elementX, elementLength, winW) {
+
+ // Calc right short.
+ let short = winW - elementX - elementLength;
+
+ // See if it's left short.
+ if (elementX + 20 < winW / 2) {
+ short = elementX
+ }
+
+ return short
+}
+
+// Update elementX or elementY value on window resize
+function calcPosition (elementPosition, elementLength, percent, short, win) {
+
+ // Is it close to the right/bottom side?
+ if (percent > 0.75) {
+ elementPosition = win - short - elementLength;
+ }
+
+ // Is it not close to a side?
+ if (percent < 0.75 && percent > 0.25) {
+ elementPosition = win * percent
+ }
+
+ return elementPosition
+}
+
+function draggify(elementId, margin) {
+
+ let element;
+
+ /* only compatible with elements having equal width and height */
+ let elementLength;
+
+ // Cords of inputItem.
+ const elementX = Vue.ref();
+ const elementY = Vue.ref();
+
+ // Position of inputItem on terms of percentage of window.
+ let percentX;
+ let percentY;
+
+ // How close inputItem is to closest X or Y side.
+ let xShort;
+ let yShort;
+
+ // Keep track of window size;
+ let winW = window.innerWidth;
+ let winH = window.innerHeight;
+
+ //---Reposition Anime-----------------------------------------------
+
+ // Move element to target smoothly.
+ const repositionAnime = (xChange, yChange) => {
+ const xStep = xChange / 6000;
+ const yStep = yChange / 6000;
+
+ for (let i = 1; i <= 6000; i++) {
+
+ setTimeout(() => {
+ elementX.value += xStep;
+ elementY.value += yStep;
+ }, 16) // 60fps
+
+ }
+ }
+
+ //---Event Handlers-----------------------------------------------
+
+ // Update the position of inputItem on mouse dragging.
+ const onMouseMove = (e) => {
+ e.preventDefault();
+
+ const inputItemRect = element.getBoundingClientRect();
+ elementX.value = inputItemRect.left + e.movementX;
+ elementY.value = inputItemRect.top + e.movementY;
+ }
+
+ // Add an event listener for dragging.
+ const onMouseDown = (e) => {
+ e.preventDefault();
+ window.addEventListener('mousemove', onMouseMove);
+ window.addEventListener('mouseup', onMouseUp);
+ }
+
+ // Update position references when user is done moving targetEl.
+ const onMouseUp = (e) => {
+ e.preventDefault();
+
+ window.removeEventListener('mousemove', onMouseMove);
+ window.removeEventListener('mouseup', onMouseUp);
+
+ // See if and calculate reposition.
+ let x = 0; // vector change
+ let y = 0;
+
+ if (elementX.value < 0) {
+ x = (elementX.value - margin)*-1
+ }
+
+ if (elementX.value > winW - elementLength) {
+ const b = winW - elementLength - margin;
+ x = (elementX.value - b)*-1
+ }
+
+ // Reposition y
+ if (elementY.value < 0) {
+ y = (elementY.value - margin)*-1
+ }
+
+ if (elementY.value > winH - elementLength) {
+ const d = winH - elementLength - margin;
+ y = (elementY.value - d)*-1
+ }
+
+ // Reposition if needed.
+ if (x !== 0 || y !== 0) repositionAnime(x, y);
+
+ xShort = calcSideProximity(elementX.value, elementLength, winW);
+ yShort = calcSideProximity(elementY.value, elementLength, winH);
+
+ // Update percentages.
+ percentX = elementX.value / winW;
+ percentY = elementY.value / winH;
+
+ // Save position.
+ savePosition();
+ }
+
+ // Update position of targetEl on windowResize.
+ const onWindowResize = (_e) => {
+
+ // Update window dimensions.
+ winW = window.innerWidth;
+ winH = window.innerHeight;
+
+ elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, winW);
+ elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, winH);
+
+ savePosition();
+ }
+
+ const savePosition = () => {
+ window.localStorage.setItem(saveLocation, JSON.stringify({
+ x: elementX.value,
+ y: elementY.value
+ }));
+ }
+
+ //---------------------------------------------------------------
+
+ Vue.onMounted(() => {
+
+ element = document.getElementById(elementId);
+
+ elementLength = element.offsetWidth;
+
+ // Initialize the positional references.
+ percentX = elementX.value / window.innerWidth;
+ percentY = elementY.value / window.innerHeight;
+
+ xShort = calcSideProximity(elementX.value, elementLength, window.innerWidth);
+ yShort = calcSideProximity(elementX.value, elementLength, window.innerHeight);
+
+ // Then, we can listen for window resize (and mousedown).
+ element.addEventListener("mousedown", onMouseDown);
+ window.addEventListener('resize', onWindowResize)
+ });
+
+ // remove event listeners on component dismount.
+ Vue.onUnmounted(() => {
+ element.removeEventListener('mousedown', onMouseDown);
+ window.removeEventListener('resize', onWindowResize)
+ window.removeEventListener('mouseup', onMouseUp)
+ window.removeEventListener('mousemove', onMouseMove);
+ });
+
+ // Try loading initPosition, otherwise set default values
+ let initPosition;
+ const rawData = window.localStorage.getItem("saveLocation")
+ rawData ? initPosition = JSON.parse(rawData) : initPosition = defaultPosition;
+
+ elementX.value = initPosition.x;
+ elementY.value = initPosition.y;
+
+ return { elementX, elementY };
+
+}
+
+export default draggify;
diff --git a/src/render/components/control/scroll.js b/src/render/components/control/scroll.js
new file mode 100644
index 0000000..4666ea1
--- /dev/null
+++ b/src/render/components/control/scroll.js
@@ -0,0 +1,24 @@
+let el;
+
+const initScroll = (elementId) => {
+ el = document.getElementById(elementId);
+ el.addEventListener('adjust-scroll', adjustScroll);
+ window.addEventListener('resize', adjustScroll);
+}
+
+const isBottom = () => {
+ if (el) {
+ return el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
+ }
+}
+
+const adjustScroll = () => {
+ if (el) {
+ el.scrollTo({
+ top: el.scrollHeight - el.clientHeight,
+ behavior: 'smooth'
+ });
+ }
+}
+
+export default initScroll;
\ No newline at end of file
diff --git a/src/render/components/control/text.js b/src/render/components/control/text.js
new file mode 100644
index 0000000..626746f
--- /dev/null
+++ b/src/render/components/control/text.js
@@ -0,0 +1,76 @@
+const inputLength = 230;
+
+const metaKeys = [
+ "Tab",
+ "CapsLock",
+ "Shift",
+ "Control",
+ "Alt",
+ "Meta",
+ " ",
+ "ArrowLeft",
+ "ArrowRight",
+ "ArrowUp",
+ "ArrowDown",
+ "Enter",
+ "Backspace",
+ "Escape"
+];
+
+function useText(elementId, left, typing)
+{
+ let el;
+
+ const show = Vue.ref(false);
+ const leftSide = Vue.ref(false);
+
+ const calcSide = () => {
+ window.innerWidth - left.value < inputLength ? leftSide.value = true : leftSide.value = false;
+ }
+
+ /* handle user typing */
+ Vue.onMounted(() => {
+
+ el = document.getElementById(elementId);
+
+ window.addEventListener("keydown", (e) => {
+
+ if (!show.value && !metaKeys.includes(e.key))
+ {
+ show.value = true;
+ }
+ else if (show.value && ((el.value.length === 1 && e.key === "Backspace") || e.key === "Escape"))
+ {
+ show.value = false;
+ }
+
+ if (e.key === "Enter" && el.value)
+ {
+ window.mainApi.send("message", {
+ category: "text/plain",
+ text: el.value,
+ blob: null
+ });
+ show.value = false;
+ }
+ });
+
+ });
+
+ Vue.watch(left, calcSide);
+
+ Vue.watch(show, (c, _p) => {
+ if (c) {
+ el.focus();
+ } else {
+ el.value = "";
+ el.blur();
+ }
+ });
+
+ calcSide();
+
+ return { leftSide, show };
+}
+
+export default useText;
diff --git a/src/render/components/controllers/bubble.control.ts b/src/render/components/controllers/bubble.control.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/render/components/controllers/helpers.ts b/src/render/components/controllers/helpers.ts
deleted file mode 100644
index 23976a8..0000000
--- a/src/render/components/controllers/helpers.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ref } from "vue";
-import anime from "animejs";
-import { v4 as uuidv4 } from 'uuid';
-
-
-export function animateTextInput () {
-
- const side = ref("right");
-
- function show () {
- const t1 = (side.value === "right") ? 50 : -70;
- const t2 = (side.value === "right") ? 110 : -130;
-
- anime({
- targets: '#textInput',
- opacity: [0, 1],
- translateX: [t1, t2],
- scale: [0.3, 1],
- duration: 500,
- easing: 'easeOutExpo',
- })
-
- }
-
- function hide () {
- const t = (side.value === "right") ? 50 : -80;
-
- anime({
- targets: '#textInput',
- opacity: [1, 0],
- translateX: t,
- scale: 0.3,
- duration: 500,
- easing: 'easeOutExpo',
- })
-
- }
-
- function switchSide () {
- const t = (side.value === "right") ? -130 : 110;
-
- anime({
- targets: '#textInput',
- translateX: t,
- duration: 500,
- easing: 'easeOutExpo',
- })
-
- }
-
- return {
- side,
- show,
- hide,
- switchSide
- };
-
-}
-
-export function animateAudioInput () {
-
- function show () {
- anime({
- targets: '#recIcon',
- opacity: [0, 0.75],
- scale: [0.0, 1],
- duration: 250,
- easing: 'linear',
- })
- }
-
- function hide () {
- anime({
- targets: '#recIcon',
- opacity: [0.75, 0],
- scale: [1, 0],
- duration: 250,
- easing: 'linear',
- })
- }
-
- return {
- show,
- hide
- };
-
-}
-
-
-export function newMessage ({
- text=false,
- audio=false,
- context=false,
- uid=uuidv4()
-}) {
- return {
- text: text,
- audio: audio,
- context: context,
- uid: uid
- };
-}
diff --git a/src/render/components/controllers/inputItem.control.audio.ts b/src/render/components/controllers/inputItem.control.audio.ts
deleted file mode 100644
index facf30c..0000000
--- a/src/render/components/controllers/inputItem.control.audio.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { onMounted, onUnmounted, ref, Ref } from "vue";
-import { postMessage } from "@/render/ipc";
-import { newMessage, animateAudioInput } from "./helpers";
-import { invokeReturnAudio, postAudioChunk } from "@/render/ipc";
-
-export default function useAudioInputController (typing: Ref) {
-
- const recording = ref(false);
- let mediaRecorder: MediaRecorder;
-
- const { show, hide } = animateAudioInput();
-
- // initialize audio
- const conf = {audio: true, video: false}
- navigator.mediaDevices.getUserMedia(conf).then((stream: MediaStream) => {
-
- const options = {mimeType: 'audio/webm'};
- mediaRecorder = new MediaRecorder(stream, options);
-
- // post any mew audio to backend
- mediaRecorder.addEventListener('dataavailable', (e: BlobEvent) => {
- e.data.arrayBuffer().then((buff: ArrayBuffer) => {
- postAudioChunk(buff);
- });
- });
-
- // get audio and post new message to backend
- mediaRecorder.addEventListener('stop', (_e: Event) => {
- invokeReturnAudio().then((audio: ArrayBuffer[] | Error) => {
- console.log(audio);
- // postMessage(newMessage({audio: audio}));
- });
- });
-
- });
-
- // start recording on space bar
- const record = () => {
- console.log("INPT:Capturing audio...")
- mediaRecorder.start();
- recording.value = true;
- show()
- }
-
- // stop recording and send on release
- const stop = () => {
- console.log("INPT:Stopping record.")
- mediaRecorder.stop();
- recording.value = false;
- hide();
- }
-
- const onKeyDown = (e: KeyboardEvent) => {
- if (e.keyCode == 32 && !typing.value) record();
- }
-
- const onKeyUp = (e: KeyboardEvent) => {
- if (e.keyCode == 32 && recording.value) stop();
- }
-
- //-----------------------------------------------------------
-
- onMounted(() => {
- window.addEventListener("keydown", onKeyDown);
- window.addEventListener("keyup", onKeyUp);
- });
-
- onUnmounted(() => {
- window.removeEventListener("keydown", onKeyDown);
- window.removeEventListener("keyup", onKeyUp);
- })
-
- return {
- recording
- }
-
-}
diff --git a/src/render/components/controllers/inputItem.control.text.ts b/src/render/components/controllers/inputItem.control.text.ts
deleted file mode 100644
index 941ae89..0000000
--- a/src/render/components/controllers/inputItem.control.text.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
-import { postMessage } from "@/render/ipc";
-import { newMessage, animateTextInput } from "./helpers";
-
-
-export default function useTextInputController(elementX: Ref) {
-
- let textInput: HTMLInputElement | null;
-
- const { side, show, hide, switchSide } = animateTextInput();
-
- let firstKey = true;
- const typing = ref(false);
-
- // Prep inputItem for typing.
- const prepInput = () => {
- show()
- typing.value = true
- }
-
- // Clear and hide inputItem after done typing.
- const clearInput = () => {
-
- if (textInput) {
- textInput.value = "";
- textInput.blur();
- }
-
- hide()
- firstKey = true;
- typing.value = false;
- }
-
- // Send a message and clean up after.
- const sendMessage = () => {
- if (textInput) {
-
- // Send it to the backend for processing.
- const message = newMessage({
- text: false
- });
-
- // postMessage(message);
-
- clearInput()
- }
- }
-
- // Keys that are capable of opening the text input (numbers and letters).
- const isHotKey = (key: number) => {
- if (key >= 47 && key <= 91) { // a letter
- return true
- }
- }
-
- //---Callbacks-----------------------------------------------
-
- const onKeyDown = (e: KeyboardEvent) => {
- const key = e.keyCode;
-
- if (textInput) {
-
- // Only runs on firstKey.
- if (firstKey) {
-
- if (!isHotKey(key)) {
- return
- }
-
- prepInput()
- }
-
- textInput.focus();
-
- // Close input when no text or on ESC.
- if ((textInput.value == "") && (!firstKey) && (key === 8)) { // backspace
- clearInput()
- return
- }
-
- if (key === 27) { // escape
- clearInput()
- return
- }
-
- // Close and send on enter.
- if (key === 13) {
- if (textInput.value) {
- sendMessage()
- return
- }
- }
-
- if (firstKey) firstKey = false
- }
- }
-
- //-----------------------------------------------------------
-
- // Watch parent position and update side.
- watch(elementX, (elementX, _previous) => {
- const winW = window.innerWidth
-
- // Logic depends on the side we are on.
- if (side.value === "right") {
- if (winW - elementX < 230) {
- switchSide()
- side.value = "left"
- }
- }
-
- else {
- if (winW - elementX > 230) {
- switchSide()
- side.value = "right"
- }
- }
-
- });
-
- onMounted(() => {
- textInput = document.getElementById("textInput") as HTMLInputElement;
- window.addEventListener("keydown", onKeyDown);
- })
-
- onUnmounted(() => {
- window.removeEventListener("keydown", onKeyDown);
- });
-
- return {
- typing
- }
-
-}
diff --git a/src/render/components/controllers/messenger.control.ts b/src/render/components/controllers/messenger.control.ts
deleted file mode 100644
index b9c3a96..0000000
--- a/src/render/components/controllers/messenger.control.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ref } from 'vue';
-import useScroll from "@/render/composables/useScroll";
-
-const messagesRef = ref();
-
-/* seed the canvas with messages */
-const seedCanvas = (messages: Message[]) => {
- messagesRef.value = messages;
-}
-
-const addMessage = (message: Message) => {
- messagesRef.value.push(message);
-}
-
-const updateMessage = (message: Message) => {
-
- let target_message = messagesRef.value.filter((m: Message) => {
- return m.uid = message.uid;
- })[0];
-
- if (target_message) {
- target_message = message;
- }
-
-}
-
-export default function useMessages() {
-
- const { updateScrollRef, adjustScroll } = useScroll("messenger");
-
- return {
- messagesRef,
- seedCanvas,
- addMessage,
- updateMessage
- };
-
-}
diff --git a/src/render/components/header.js b/src/render/components/header.js
new file mode 100644
index 0000000..0851a69
--- /dev/null
+++ b/src/render/components/header.js
@@ -0,0 +1,23 @@
+const Header =
+{
+ setup() {
+ const onNavBar = (command) => window.mainApi.send('nav-bar', command);
+ return { onNavBar };
+ },
+
+ template: `
+
+
+ `
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/render/components/header.vue b/src/render/components/header.vue
deleted file mode 100644
index 63716c8..0000000
--- a/src/render/components/header.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/render/components/input.js b/src/render/components/input.js
new file mode 100644
index 0000000..5bc8144
--- /dev/null
+++ b/src/render/components/input.js
@@ -0,0 +1,55 @@
+import useText from "./control/text.js";
+import draggify from "./control/draggify.js";
+
+const Input =
+{
+ props: ["person"],
+
+ setup(props)
+ {
+ const initials = Vue.ref("");
+
+ const recording = Vue.ref(false);
+
+ const { elementX, elementY } = draggify("input", 15);
+
+ const { leftSide, show } = useText("input-text", elementX);
+
+ window.mainApi.on("record", (status) => recording.value = status);
+
+ Vue.watch(() => props.person, (c, _p) => initials.value = getInitials(c));
+
+ return { initials, elementX, elementY, recording, leftSide, show };
+ },
+
+ template: `
+
+
+
`
+}
+
+function getInitials(name)
+{
+ let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
+
+ let initials = [...name.matchAll(rgx)] || [];
+
+ return (
+ (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
+ ).toUpperCase();
+}
+
+export default Input;
diff --git a/src/render/components/inputItem.vue b/src/render/components/inputItem.vue
deleted file mode 100644
index edd844f..0000000
--- a/src/render/components/inputItem.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-
- {{ initials }}
+
+
+
+
-
-
-
-
-
-
diff --git a/src/render/components/login.js b/src/render/components/login.js
new file mode 100644
index 0000000..da2e080
--- /dev/null
+++ b/src/render/components/login.js
@@ -0,0 +1,58 @@
+const Login =
+{
+ setup()
+ {
+ const usr = Vue.ref("");
+ const pwd = Vue.ref("");
+
+ const submitForm = async () => {
+ const success = await window.mainApi.invoke("login", usr.value, pwd.value);
+ if (!success) shake("login-form");
+ }
+
+ return { usr, pwd, submitForm };
+ },
+
+ template: `
+ `
+}
+
+/** Shake a div to indicate incorrect credentials */
+const shake = (elementId) =>
+{
+ const el = document.getElementById(elementId);
+
+ if (el)
+ el.classList.remove("shake");
+
+ setTimeout(() => {
+ if (el) el.classList.add("shake");
+ }, 250);
+}
+
+export default Login;
\ No newline at end of file
diff --git a/src/render/components/login.vue b/src/render/components/login.vue
deleted file mode 100644
index bece6ea..0000000
--- a/src/render/components/login.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/src/render/components/message.js b/src/render/components/message.js
new file mode 100644
index 0000000..fd1b41c
--- /dev/null
+++ b/src/render/components/message.js
@@ -0,0 +1,60 @@
+import Bubble from "./bubble.js";
+import Context from "./context.js";
+
+const Message =
+{
+ components: {
+ Bubble,
+ Context
+ },
+
+ props: ["modifier", "content", "context", "avatar", "id"],
+
+ setup(props)
+ {
+ return { calcChild };
+ },
+
+ template: `
+ {{ initials }}
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
`
+}
+
+function calcChild(index, len)
+{
+ if (len === 1)
+ {
+ return "none-child";
+ }
+ else if (index === 0)
+ {
+ return "first-child";
+ }
+ else if (index === len - 1)
+ {
+ return "last-child";
+ }
+ else
+ {
+ return "middle-child";
+ }
+}
+
+export default Message;
diff --git a/src/render/components/messenger.js b/src/render/components/messenger.js
new file mode 100644
index 0000000..668b505
--- /dev/null
+++ b/src/render/components/messenger.js
@@ -0,0 +1,102 @@
+import initScroll from "./control/scroll.js";
+
+import WS from "./ws.js";
+import Input from "./input.js";
+import Settings from "./settings.js";
+import Message from "./message.js";
+
+const Messenger = {
+
+ components: {
+ WS,
+ Settings,
+ Message,
+ Input
+ },
+
+ setup()
+ {
+ const person = Vue.ref("");
+ const messages = Vue.ref([{
+ modifier: "ai",
+ content: [{
+ category: "text/html",
+ text: `
+
`,
+ blob: null
+ }],
+ context: "Email from David Spade",
+ avatar: null,
+ id: 0
+ }]);
+
+ const onDrop = async (e) => {
+ const file = e.dataTransfer.items[0].getAsFile();
+
+ const buffer = await file.arrayBuffer();
+ const b64String = await window.mainApi.invoke("encode", buffer);
+
+ window.mainApi.send("message", {
+ category: file.type,
+ text: file.name,
+ blob: b64String
+ });
+ }
+
+ Vue.onMounted(() => {
+
+ window.mainApi.on("message", (message) => {
+ if (message.person)
+ {
+ person.value = message.person;
+ messages.value = message.messages;
+ }
+ else if (message.name)
+ {
+ person.value = message;
+ }
+ else if (message.content)
+ {
+ messages.value.push(message);
+ }
+ else
+ {
+ messages.value[messages.value.length - 1].content.push(message);
+ }
+ });
+
+ initScroll("messenger");
+ window.mainApi.send("messenger");
+ });
+
+ Vue.onUnmounted(() => {
+ messages.value = [];
+ });
+
+ return { person, messages, onDrop };
+ },
+
+ template: `
+ About HTML Parser
+Return the text of the most recently opened start tag. This should not normally be needed for structured processing, but may be useful in dealing with HTML “as deployed” or for re-generating input with minimal changes (whitespace between attributes can be preserved, etc.).
+
+
`
+}
+
+export default Messenger;
diff --git a/src/render/components/messenger.vue b/src/render/components/messenger.vue
deleted file mode 100644
index ee56549..0000000
--- a/src/render/components/messenger.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/render/components/settings.js b/src/render/components/settings.js
new file mode 100644
index 0000000..68d69f2
--- /dev/null
+++ b/src/render/components/settings.js
@@ -0,0 +1,28 @@
+
+const Settings =
+{
+ setup() {
+ const active = Vue.ref(false);
+
+ window.addEventListener("keydown", (e) => {
+ console.log("toggle settings");
+ })
+
+ const logout = async () => {
+ await window.mainApi.send("logout");
+ }
+
+ return { active, logout };
+ },
+
+ template: `
+
+
+
+
+
`
+}
+
+export default Settings;
\ No newline at end of file
diff --git a/src/render/components/settings.vue b/src/render/components/settings.vue
deleted file mode 100644
index cf881c3..0000000
--- a/src/render/components/settings.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/render/components/splash.js b/src/render/components/splash.js
new file mode 100644
index 0000000..220eaad
--- /dev/null
+++ b/src/render/components/splash.js
@@ -0,0 +1,50 @@
+const Splash =
+{
+ template: `
+
+
+
+ `
+}
+
+export default Splash;
\ No newline at end of file
diff --git a/src/render/components/splash.vue b/src/render/components/splash.vue
deleted file mode 100644
index 247847a..0000000
--- a/src/render/components/splash.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/render/components/ws.js b/src/render/components/ws.js
new file mode 100644
index 0000000..189b03d
--- /dev/null
+++ b/src/render/components/ws.js
@@ -0,0 +1,35 @@
+
+const WS =
+{
+ setup()
+ {
+ const status = Vue.ref();
+
+ Vue.onMounted(() => {
+
+ window.mainApi.on("ws-status", (val) => {
+ status.value = val;
+ });
+
+ });
+
+ return { status }
+ },
+
+ template: `
+
+
+ 
+
+
`
+}
+
+export default WS;
\ No newline at end of file
diff --git a/src/render/composables/useDraggify.ts b/src/render/composables/useDraggify.ts
deleted file mode 100644
index f3d8978..0000000
--- a/src/render/composables/useDraggify.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import { onMounted, ref, onUnmounted } from "vue";
-
-//---Dragabble Helper Funcs--------------------------------------
-
-// Calculate distance to nearest side.
-function calcSideProximity (elementX: number, winW: number) {
-
- // Calc right short.
- let short = winW - elementX - 40;
-
- // See if it's left short.
- if (elementX + 20 < winW / 2) {
- short = elementX
- }
-
- return short
-}
-
-// Update elementX or elementY value on window resize
-function calcPosition (elementPosition: number, percent: number,
- short: number, win: number) {
-
- // Is it close to the right/bottom side?
- if (percent > 0.75) {
- elementPosition = win - short - 40;
- }
-
- // Is it not close to a side?
- if (percent < 0.75 && percent > 0.25) {
- elementPosition = win * percent
- }
-
- return elementPosition
-}
-
-export default function draggify(elementId: string, xStart: number,
- yStart: number, margin: number) {
-
- let element: HTMLElement | null;
-
- // Cords of inputItem.
- const elementX = ref(0);
- const elementY = ref(0);
-
- // Position of inputItem on terms of percentage of window.
- let percentX: number;
- let percentY: number;
-
- // How close inputItem is to closest X or Y side.
- let xShort: number;
- let yShort: number;
-
- // Keep track of window size;
- let winW = window.innerWidth;
- let winH = window.innerHeight;
-
- //---Reposition Anime-----------------------------------------------
-
- // Move element to target smoothly.
- const repositionAnime = (xChange: number, yChange: number) => {
- const xStep = xChange / 6000;
- const yStep = yChange / 6000;
-
- for (let i = 1; i <= 6000; i++) {
-
- setTimeout(() => {
- elementX.value += xStep;
- elementY.value += yStep;
- }, 16) // 60fps
-
- }
- }
-
- //---Event Handlers-----------------------------------------------
-
- // Update the position of inputItem on mouse dragging.
- const onMouseMove = (e: any) => {
- e.preventDefault()
- element = document.getElementById(elementId);
-
- if (element) {
- const inputItemRect = element.getBoundingClientRect();
- elementX.value = inputItemRect.left + e.movementX;
- elementY.value = inputItemRect.top + e.movementY;
- }
-
- }
-
- // Add an event listener for dragging.
- const onMouseDown = (_e: any) => {
- _e.preventDefault()
- window.addEventListener('mousemove', onMouseMove, true);
- }
-
- // Update position references when user is done moving targetEl.
- const onMouseUp = (_e: any) => {
- window.removeEventListener('mousemove', onMouseMove, true);
-
- // See if and calculate reposition.
- let x = 0; // vector change
- let y = 0;
-
- if (elementX.value < 0) {
- x = (elementX.value - margin)*-1
- }
-
- if (elementX.value > winW - 40) {
- const b = winW - 40 - margin;
- x = (elementX.value - b)*-1
- }
-
- // Reposition y
- if (elementY.value < 0) {
- y = (elementY.value - margin)*-1
- }
-
- if (elementY.value > winH - 40) {
- const d = winH - 40 - margin;
- y = (elementY.value - d)*-1
- }
-
- // Reposition if needed.
- if (x !== 0 || y !== 0) repositionAnime(x, y);
-
- xShort = calcSideProximity(elementX.value, winW);
- yShort = calcSideProximity(elementY.value, winH);
-
- // Update percentages.
- percentX = elementX.value / winW;
- percentY = elementY.value / winH;
-
- // Save position.
- const position = {
- x: elementX.value,
- y: elementY.value
- }
- window.localStorage.setItem("inputItem_position", JSON.stringify(position));
- }
-
- // Update position of targetEl on windowResize.
- const onWindowResize = (_e: any) => {
-
- // Update window dimensions.
- winW = window.innerWidth;
- winH = window.innerHeight;
-
- elementX.value = calcPosition(elementX.value, percentX, xShort, winW);
- elementY.value = calcPosition(elementY.value, percentY, yShort, winH);
-
- }
-
- //---------------------------------------------------------------
-
- onMounted(() => {
- element = document.getElementById(elementId);
-
- if (element) {
- element.addEventListener('mousedown', onMouseDown, false);
- }
-
- window.addEventListener("mouseup", onMouseUp, false);
-
- // Initialize the positional references.
- percentX = elementX.value / window.innerWidth;
- percentY = elementY.value / window.innerHeight;
-
- xShort = calcSideProximity(elementX.value, window.innerWidth);
- yShort = calcSideProximity(elementX.value, window.innerHeight);
-
- // Then, we can listen for window resize.
- window.addEventListener('resize', onWindowResize, false);
- });
-
- // Try loading initPosition, otherwise set default values
- let initPosition: any;
- const rawData = window.localStorage.getItem("inputItem_position")
-
- if (rawData) {
- initPosition = JSON.parse(rawData)
- } else {
- initPosition = {x: xStart, y: yStart}
- }
-
- elementX.value = initPosition.x;
- elementY.value = initPosition.y;
-
- // remove event listeners on component dismount.
- onUnmounted(() => {
- window.removeEventListener('resize', onWindowResize);
- window.removeEventListener('mouseup', onMouseUp);
- if (element) element.removeEventListener('mousedown', onMouseDown);
- })
-
- return {
- elementX,
- elementY
- }
-
-}
diff --git a/src/render/composables/useIpcRend.ts b/src/render/composables/useIpcRend.ts
deleted file mode 100644
index 9ba7f73..0000000
--- a/src/render/composables/useIpcRend.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-
-import { IpcRendererEvent } from "electron";
-
-export class IpcRendererListener
+
+
+
+
+
+