diff --git a/webOverlay/index.html b/webOverlay/index.html deleted file mode 100644 index f6c6ae11..00000000 --- a/webOverlay/index.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - - - - StreamCompanion web overlay - - - - - - - - - -
-
-

This is preview of all installed overlays in StreamCompanion.

-
-
Click on any name to open it in separate page.
-
To edit or create new one navigate to StreamCompanion Files/web/overlays/ folder. Make - sure - to read README inside of example overlays.
-
-
-

{{overlayName}}

-

Loading...

- -
-
-
-

Links:

-
Overlays index
-
List of functional endpoints
-
All tokens output
-
Discord
-
-
- - - - \ No newline at end of file diff --git a/webOverlay/lib/consts.js b/webOverlay/lib/consts.js deleted file mode 100644 index 20da2619..00000000 --- a/webOverlay/lib/consts.js +++ /dev/null @@ -1,103 +0,0 @@ -(()=>{let config = { - scheme: window.location.protocol.slice(0, -1), - host: window.location.hostname, - port: window.location.port, - getUrl: () => `${config.scheme}://${config.host}:${config.port}`, - getWs: () => `ws://${config.host}:${config.port}`, -}; - -let osuStatus = { - Null: 0, - Listening: 1, - Playing: 2, - Watching: 8, - Editing: 16, - ResultsScreen: 32, -}; -let osuStatusFriendly = { - Null: { text: 'Null', value: 0 }, - Listening: { text: 'Listening', value: 1 }, - Playing: { text: 'Playing', value: 2 }, - Watching: { text: 'Watching', value: 8 }, - Editing: { text: 'Editing', value: 16 }, - ResultsScreen: { text: 'ResultsScreen', value: 32 }, -}; - -let rawOsuStatus = { - Unknown: -2, - NotRunning: -1, - MainMenu: 0, - EditingMap: 1, - Playing: 2, - GameShutdownAnimation: 3, - SongSelectEdit: 4, - SongSelect: 5, - ResultsScreen: 7, - GameStartupAnimation: 10, - MultiplayerRooms: 11, - MultiplayerRoom: 12, - MultiplayerSongSelect: 13, - MultiplayerResultsscreen: 14, - OsuDirect: 15, - RankingTagCoop: 17, - RankingTeam: 18, - ProcessingBeatmaps: 19, - Tourney: 22, -}; -let rawOsuStatusFriendly = { - Unknown: { text: 'Unknown', value: -2 }, - NotRunning: { text: 'NotRunning', value: -1 }, - MainMenu: { text: 'Main Menu', value: 0 }, - EditingMap: { text: 'Editing Map', value: 1 }, - Playing: { text: 'Playing', value: 2 }, - //GameShutdownAnimation: { text: 'GameShutdownAnimation', value: 3 }, - SongSelectEdit: { text: 'Editing beatmap', value: 4 }, - SongSelect: { text: 'Selecting song', value: 5 }, - ResultsScreen: { text: 'Results screen', value: 7 }, - //GameStartupAnimation: { text: 'GameStartupAnimation', value: 10 }, - MultiplayerRooms: { text: 'Multiplayer Room selection', value: 11 }, - MultiplayerRoom: { text: 'Multiplayer lobby', value: 12 }, - MultiplayerSongSelect: { text: 'Multiplayer song selection', value: 13 }, - MultiplayerResultsscreen: { text: 'Multiplayer results screen', value: 14 }, - OsuDirect: { text: 'OsuDirect', value: 15 }, - RankingTagCoop: { text: 'Multiplayer TagCoop results screen', value: 17 }, - RankingTeam: { text: 'Multiplayer Teams results screen', value: 18 }, - ProcessingBeatmaps: { text: 'Processing beatmaps', value: 19 }, - Tourney: { text: 'Tourney manager', value: 22 }, -}; - -let osuGrade = { - 0: 'SSH', - 1: 'SH', - 2: 'SS', - 3: 'S', - 4: 'A', - 5: 'B', - 6: 'C', - 7: 'D', - 8: 'F', - 9: '', -}; - -let scoresType = { - 0: 'Local', - 1: 'Top', - 2: 'Selected mods', - 3: 'Friends', - 4: 'Country', - 10: '', //Unknown -}; - -window.overlay = { - osuStatus, - osuStatusFriendly, - rawOsuStatus, - rawOsuStatusFriendly, - osuGrade, - scoresType, - config, -}; - -})(); - - diff --git a/webOverlay/lib/reconnecting-websocket.js b/webOverlay/lib/reconnecting-websocket.js deleted file mode 100644 index a701afed..00000000 --- a/webOverlay/lib/reconnecting-websocket.js +++ /dev/null @@ -1,365 +0,0 @@ -// MIT License: -// -// Copyright (c) 2010-2012, Joe Walnes -// -// Permission is hereby granted, free of charge, to any person obtaining a copy -// of this software and associated documentation files (the "Software"), to deal -// in the Software without restriction, including without limitation the rights -// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -// copies of the Software, and to permit persons to whom the Software is -// furnished to do so, subject to the following conditions: -// -// The above copyright notice and this permission notice shall be included in -// all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -// THE SOFTWARE. - -/** - * This behaves like a WebSocket in every way, except if it fails to connect, - * or it gets disconnected, it will repeatedly poll until it successfully connects - * again. - * - * It is API compatible, so when you have: - * ws = new WebSocket('ws://....'); - * you can replace with: - * ws = new ReconnectingWebSocket('ws://....'); - * - * The event stream will typically look like: - * onconnecting - * onopen - * onmessage - * onmessage - * onclose // lost connection - * onconnecting - * onopen // sometime later... - * onmessage - * onmessage - * etc... - * - * It is API compatible with the standard WebSocket API, apart from the following members: - * - * - `bufferedAmount` - * - `extensions` - * - `binaryType` - * - * Latest version: https://github.com/joewalnes/reconnecting-websocket/ - * - Joe Walnes - * - * Syntax - * ====== - * var socket = new ReconnectingWebSocket(url, protocols, options); - * - * Parameters - * ========== - * url - The url you are connecting to. - * protocols - Optional string or array of protocols. - * options - See below - * - * Options - * ======= - * Options can either be passed upon instantiation or set after instantiation: - * - * var socket = new ReconnectingWebSocket(url, null, { debug: true, reconnectInterval: 4000 }); - * - * or - * - * var socket = new ReconnectingWebSocket(url); - * socket.debug = true; - * socket.reconnectInterval = 4000; - * - * debug - * - Whether this instance should log debug messages. Accepts true or false. Default: false. - * - * automaticOpen - * - Whether or not the websocket should attempt to connect immediately upon instantiation. The socket can be manually opened or closed at any time using ws.open() and ws.close(). - * - * reconnectInterval - * - The number of milliseconds to delay before attempting to reconnect. Accepts integer. Default: 1000. - * - * maxReconnectInterval - * - The maximum number of milliseconds to delay a reconnection attempt. Accepts integer. Default: 30000. - * - * reconnectDecay - * - The rate of increase of the reconnect delay. Allows reconnect attempts to back off when problems persist. Accepts integer or float. Default: 1.5. - * - * timeoutInterval - * - The maximum time in milliseconds to wait for a connection to succeed before closing and retrying. Accepts integer. Default: 2000. - * - */ -(function (global, factory) { - if (typeof define === 'function' && define.amd) { - define([], factory); - } else if (typeof module !== 'undefined' && module.exports){ - module.exports = factory(); - } else { - global.ReconnectingWebSocket = factory(); - } -})(this, function () { - - if (!('WebSocket' in window)) { - return; - } - - function ReconnectingWebSocket(url, protocols, options) { - - // Default settings - var settings = { - - /** Whether this instance should log debug messages. */ - debug: false, - - /** Whether or not the websocket should attempt to connect immediately upon instantiation. */ - automaticOpen: true, - - /** The number of milliseconds to delay before attempting to reconnect. */ - reconnectInterval: 1000, - /** The maximum number of milliseconds to delay a reconnection attempt. */ - maxReconnectInterval: 30000, - /** The rate of increase of the reconnect delay. Allows reconnect attempts to back off when problems persist. */ - reconnectDecay: 1.5, - - /** The maximum time in milliseconds to wait for a connection to succeed before closing and retrying. */ - timeoutInterval: 2000, - - /** The maximum number of reconnection attempts to make. Unlimited if null. */ - maxReconnectAttempts: null, - - /** The binary type, possible values 'blob' or 'arraybuffer', default 'blob'. */ - binaryType: 'blob' - } - if (!options) { options = {}; } - - // Overwrite and define settings with options if they exist. - for (var key in settings) { - if (typeof options[key] !== 'undefined') { - this[key] = options[key]; - } else { - this[key] = settings[key]; - } - } - - // These should be treated as read-only properties - - /** The URL as resolved by the constructor. This is always an absolute URL. Read only. */ - this.url = url; - - /** The number of attempted reconnects since starting, or the last successful connection. Read only. */ - this.reconnectAttempts = 0; - - /** - * The current state of the connection. - * Can be one of: WebSocket.CONNECTING, WebSocket.OPEN, WebSocket.CLOSING, WebSocket.CLOSED - * Read only. - */ - this.readyState = WebSocket.CONNECTING; - - /** - * A string indicating the name of the sub-protocol the server selected; this will be one of - * the strings specified in the protocols parameter when creating the WebSocket object. - * Read only. - */ - this.protocol = null; - - // Private state variables - - var self = this; - var ws; - var forcedClose = false; - var timedOut = false; - var eventTarget = document.createElement('div'); - - // Wire up "on*" properties as event handlers - - eventTarget.addEventListener('open', function(event) { self.onopen(event); }); - eventTarget.addEventListener('close', function(event) { self.onclose(event); }); - eventTarget.addEventListener('connecting', function(event) { self.onconnecting(event); }); - eventTarget.addEventListener('message', function(event) { self.onmessage(event); }); - eventTarget.addEventListener('error', function(event) { self.onerror(event); }); - - // Expose the API required by EventTarget - - this.addEventListener = eventTarget.addEventListener.bind(eventTarget); - this.removeEventListener = eventTarget.removeEventListener.bind(eventTarget); - this.dispatchEvent = eventTarget.dispatchEvent.bind(eventTarget); - - /** - * This function generates an event that is compatible with standard - * compliant browsers and IE9 - IE11 - * - * This will prevent the error: - * Object doesn't support this action - * - * http://stackoverflow.com/questions/19345392/why-arent-my-parameters-getting-passed-through-to-a-dispatched-event/19345563#19345563 - * @param s String The name that the event should use - * @param args Object an optional object that the event will use - */ - function generateEvent(s, args) { - var evt = document.createEvent("CustomEvent"); - evt.initCustomEvent(s, false, false, args); - return evt; - }; - - this.open = function (reconnectAttempt) { - ws = new WebSocket(self.url, protocols || []); - ws.binaryType = this.binaryType; - - if (reconnectAttempt) { - if (this.maxReconnectAttempts && this.reconnectAttempts > this.maxReconnectAttempts) { - return; - } - } else { - eventTarget.dispatchEvent(generateEvent('connecting')); - this.reconnectAttempts = 0; - } - - if (self.debug || ReconnectingWebSocket.debugAll) { - console.debug('ReconnectingWebSocket', 'attempt-connect', self.url); - } - - var localWs = ws; - var timeout = setTimeout(function() { - if (self.debug || ReconnectingWebSocket.debugAll) { - console.debug('ReconnectingWebSocket', 'connection-timeout', self.url); - } - timedOut = true; - localWs.close(); - timedOut = false; - }, self.timeoutInterval); - - ws.onopen = function(event) { - clearTimeout(timeout); - if (self.debug || ReconnectingWebSocket.debugAll) { - console.debug('ReconnectingWebSocket', 'onopen', self.url); - } - self.protocol = ws.protocol; - self.readyState = WebSocket.OPEN; - self.reconnectAttempts = 0; - var e = generateEvent('open'); - e.isReconnect = reconnectAttempt; - reconnectAttempt = false; - eventTarget.dispatchEvent(e); - }; - - ws.onclose = function(event) { - clearTimeout(timeout); - ws = null; - if (forcedClose) { - self.readyState = WebSocket.CLOSED; - eventTarget.dispatchEvent(generateEvent('close')); - } else { - self.readyState = WebSocket.CONNECTING; - var e = generateEvent('connecting'); - e.code = event.code; - e.reason = event.reason; - e.wasClean = event.wasClean; - eventTarget.dispatchEvent(e); - if (!reconnectAttempt && !timedOut) { - if (self.debug || ReconnectingWebSocket.debugAll) { - console.debug('ReconnectingWebSocket', 'onclose', self.url); - } - eventTarget.dispatchEvent(generateEvent('close')); - } - - var timeout = self.reconnectInterval * Math.pow(self.reconnectDecay, self.reconnectAttempts); - setTimeout(function() { - self.reconnectAttempts++; - self.open(true); - }, timeout > self.maxReconnectInterval ? self.maxReconnectInterval : timeout); - } - }; - ws.onmessage = function(event) { - if (self.debug || ReconnectingWebSocket.debugAll) { - console.debug('ReconnectingWebSocket', 'onmessage', self.url, event.data); - } - var e = generateEvent('message'); - e.data = event.data; - eventTarget.dispatchEvent(e); - }; - ws.onerror = function(event) { - if (self.debug || ReconnectingWebSocket.debugAll) { - console.debug('ReconnectingWebSocket', 'onerror', self.url, event); - } - eventTarget.dispatchEvent(generateEvent('error')); - }; - } - - // Whether or not to create a websocket upon instantiation - if (this.automaticOpen == true) { - this.open(false); - } - - /** - * Transmits data to the server over the WebSocket connection. - * - * @param data a text string, ArrayBuffer or Blob to send to the server. - */ - this.send = function(data) { - if (ws) { - if (self.debug || ReconnectingWebSocket.debugAll) { - console.debug('ReconnectingWebSocket', 'send', self.url, data); - } - return ws.send(data); - } else { - throw 'INVALID_STATE_ERR : Pausing to reconnect websocket'; - } - }; - - /** - * Closes the WebSocket connection or connection attempt, if any. - * If the connection is already CLOSED, this method does nothing. - */ - this.close = function(code, reason) { - // Default CLOSE_NORMAL code - if (typeof code == 'undefined') { - code = 1000; - } - forcedClose = true; - if (ws) { - ws.close(code, reason); - } - }; - - /** - * Additional public API method to refresh the connection if still open (close, re-open). - * For example, if the app suspects bad data / missed heart beats, it can try to refresh. - */ - this.refresh = function() { - if (ws) { - ws.close(); - } - }; - } - - /** - * An event listener to be called when the WebSocket connection's readyState changes to OPEN; - * this indicates that the connection is ready to send and receive data. - */ - ReconnectingWebSocket.prototype.onopen = function(event) {}; - /** An event listener to be called when the WebSocket connection's readyState changes to CLOSED. */ - ReconnectingWebSocket.prototype.onclose = function(event) {}; - /** An event listener to be called when a connection begins being attempted. */ - ReconnectingWebSocket.prototype.onconnecting = function(event) {}; - /** An event listener to be called when a message is received from the server. */ - ReconnectingWebSocket.prototype.onmessage = function(event) {}; - /** An event listener to be called when an error occurs. */ - ReconnectingWebSocket.prototype.onerror = function(event) {}; - - /** - * Whether all instances of ReconnectingWebSocket should log debug messages. - * Setting this to true is the equivalent of setting all instances of ReconnectingWebSocket.debug to true. - */ - ReconnectingWebSocket.debugAll = false; - - ReconnectingWebSocket.CONNECTING = WebSocket.CONNECTING; - ReconnectingWebSocket.OPEN = WebSocket.OPEN; - ReconnectingWebSocket.CLOSING = WebSocket.CLOSING; - ReconnectingWebSocket.CLOSED = WebSocket.CLOSED; - - return ReconnectingWebSocket; -}); \ No newline at end of file diff --git a/webOverlay/lib/tokenTransformer.js b/webOverlay/lib/tokenTransformer.js deleted file mode 100644 index fa6ece3c..00000000 --- a/webOverlay/lib/tokenTransformer.js +++ /dev/null @@ -1,302 +0,0 @@ -function transformTokens(tokens) { - const t = tokens; - return { - settings: { - showInterface: t['ingameInterfaceIsEnabled'] || 0, - }, - menu: { - state: t['rawStatus'], - skinFolder: t['skin'], - gameMode: t['gameMode'], - isChatEnabled: t['chatIsEnabled'], - bm: { - time: { - firstObj: t['firstHitObjectTime'], - current: t['time'] * 1000, - full: t['totaltime'], - mp3: t['totaltime'], - }, - id: t['mapid'], - set: t['mapsetid'], - md5: t['md5'], - rankedStatus: t['rankedStatus'], - metadata: { - artist: t['artistRoman'], - title: t['titleRoman'], - mapper: t['creator'], - difficulty: t['diffName'], - }, - stats: { - AR: t['mAR'], - CS: t['mCS'], - OD: t['mOD'], - HP: t['mHP'], - SR: t['liveStarRating'], - BPM: { - min: t['minBpm'], - max: t['maxBpm'], - }, - fullSR: t['mStars'], - memoryAR: t['AR'], - memoryCS: t['CS'], - memoryOD: t['OD'], - memoryHP: t['HP'], - }, - path: { - full: `${t['dir']}\\${t['backgroundImageFileName']}`, - folder: t['dir'], - file: t['osuFileName'], - bg: t['backgroundImageFileName'], - audio: t['mp3Name'], - }, - }, - mods: { - num: t['modsEnum'], - str: t['mods'].replace(/,/g, ''), - }, - pp: { - 100: t['osu_mSSPP'], - 99: t['osu_m99PP'], - 98: t['osu_m98PP'], - 97: t['osu_m97PP'], - 96: t['osu_m96PP'], - 95: t['osu_m95PP'], - strains: t['mapStrains'], - }, - }, - gameplay: { - gameMode: t['gameMode'], - name: t['username'], - score: t['score'], - accuracy: t['acc'], - combo: { - current: t['combo'], - max: t['currentMaxCombo'], - }, - hp: { - normal: t['playerHP'], - smooth: t['playerHP'], - }, - hits: { - 300: t['c300'], - geki: t['geki'], - 100: t['c100'], - katu: t['katsu'], - 50: t['c50'], - 0: t['miss'], - sliderBreaks: t['sliderBreaks'], - grade: { - current: window.overlay.osuGrade[t['grade']], - maxThisPlay: 'A', //TODO: ? - }, - unstableRate: t['unstableRate'], - hitErrorArray: t['hitErrors'], - }, - pp: { - current: t['ppIfMapEndsNow'], - fc: t['noChokePp'], - maxThisPlay: t['ppIfRestFced'], - }, - rawKeyOverlay: t['keyOverlay'], - cachedKeyOverlay: null, - get keyOverlay() { - return this.cachedKeyOverlay !== null ? this.cachedKeyOverlay : (this.cachedKeyOverlay = convertSCKeyOverlay(this.rawKeyOverlay)); - }, - rawLeaderboard: t['leaderBoardPlayers'], - rawLeaderboardMainPlayer: t['leaderBoardMainPlayer'], - cachedLeaderboard: null, - get leaderboard() { - return this.cachedLeaderboard !== null - ? this.cachedLeaderboard - : (this.cachedLeaderboard = convertSCLeaderBoard(this.rawLeaderboard, this.rawLeaderboardMainPlayer)); - }, - resultsScreen: { - 300: t['c300'], - 100: t['c100'], - 50: t['c50'], - 0: t['miss'], - geki: t['geki'], - katu: t['katsu'], - name: t['username'], - score: t['score'], - maxCombo: t['combo'], - mods: { - num: t['modsEnum'], - str: t['mods'].replace(/,/g, ''), - }, - }, - //TODO: tourney will have to be done at some other time - tourney: { - manager: { - ipcState: 0, - bestOF: 0, - teamName: { - left: '', - right: '', - }, - stars: { - left: 0, - right: 0, - }, - bools: { - scoreVisible: false, - starsVisible: false, - }, - chat: null, - gameplay: { - score: { - left: 0, - right: 0, - }, - }, - }, - ipcClients: null, - }, - }, - }; -} - -function convertSCKeyOverlay(rawKeyOverlay) { - let keys = JSON.parse(rawKeyOverlay || '{}'); - - return { - k1: { - isPressed: keys.K1Pressed, - count: keys.K1Count, - }, - k2: { - isPressed: keys.K2Pressed, - count: keys.K2Count, - }, - m1: { - isPressed: keys.M1Pressed, - count: keys.M1Count, - }, - m2: { - isPressed: keys.M2Pressed, - count: keys.M2Count, - }, - }; -} - -function convertSCLeaderBoard(rawPlayers, rawMainPlayer) { - let players = JSON.parse(rawPlayers || '[]'); - let mainPlayer = JSON.parse(rawMainPlayer || '{}'); - - return { - hasLeaderboard: players.length > 0, - isVisible: mainPlayer.IsLeaderboardVisible || false, - ourplayer: convertSCPlayerSlot(mainPlayer), - slots: players.map((p) => convertSCPlayerSlot(p)), - }; -} - -function convertSCPlayerSlot(player) { - return { - name: player.Username, - score: player.Score, - combo: player.Combo, - maxCombo: player.MaxCombo, - mods: player.Mods ? player.Mods.Value : 0, //TODO: this should be returning mod string instead of enum - h300: player.Hit300, - h100: player.Hit100, - h50: player.Hit50, - h0: player.HitMiss, - team: player.Team, - position: player.Position, - isPassing: player.IsPassing, - }; -} - -function CreateProxiedReconnectingWebSocket(url) { - const tokensCache = {}; - - let proxy = { - //onopen, - //onclose, - //onerror, - //onmessage, - }; - const tokenNames = [ - 'acc', - 'AR', - 'artistRoman', - 'backgroundImageFileName', - 'c100', - 'c300', - 'c50', - 'chatIsEnabled', - 'combo', - 'creator', - 'CS', - 'currentMaxCombo', - 'diffName', - 'dir', - 'firstHitObjectTime', - 'gameMode', - 'geki', - 'grade', - 'hitErrors', - 'HP', - 'ingameInterfaceIsEnabled', - 'katsu', - 'keyOverlay', - 'leaderBoardMainPlayer', - 'leaderBoardPlayers', - 'liveStarRating', - 'mapid', - 'mapsetid', - 'mapStrains', - 'mAR', - 'maxBpm', - 'mCS', - 'md5', - 'mHP', - 'minBpm', - 'miss', - 'mOD', - 'mods', - 'modsEnum', - 'mp3Name', - 'mStars', - 'noChokePp', - 'OD', - 'osu_m95PP', - 'osu_m96PP', - 'osu_m97PP', - 'osu_m98PP', - 'osu_m99PP', - 'osu_mSSPP', - 'osuFileName', - 'playerHP', - 'ppIfMapEndsNow', - 'ppIfRestFced', - 'rankedStatus', - 'rawStatus', - 'score', - 'skin', - 'sliderBreaks', - 'time', - 'titleRoman', - 'totaltime', - 'unstableRate', - 'username', - ]; - - let rws = watchTokens(tokenNames, (values) => { - Object.assign(tokensCache, values); - proxy.onmessage({ data: transformTokens(tokensCache) }); - }); - - let origOnOpen = rws.onopen; - - rws.onopen = (ev) => { - origOnOpen(ev); - proxy.onopen(ev); - }; - rws.onclose = (ev) => proxy.onclose(ev); - rws.onerror = (ev) => proxy.onerror(ev); - //rws.onmessage = (ev) => proxy.onmessage(ev); - - return proxy; -} diff --git a/webOverlay/lib/utils.js b/webOverlay/lib/utils.js deleted file mode 100644 index 38e21242..00000000 --- a/webOverlay/lib/utils.js +++ /dev/null @@ -1,82 +0,0 @@ -Number.prototype.pad = function (size) { - var s = String(this); - while (s.length < (size || 2)) { s = "0" + s; } - return s; -} -Number.prototype.clamp = function(min, max) { - return Math.min(Math.max(this, min), max); - }; - -function mergeObjects(vueThis, target, source) { - for (const [key, value] of Object.entries(source)) { - if (target.hasOwnProperty(key)) - target[key] = value; - else - vueThis.$set(target, key, value); - } -} -function preloadImage(url, id, cb) { - let img = new Image(); - img.onload = () => cb(url, id); - img.src = url; -} - -function watchTokens(tokenList, onTokensUpdated) { - let rws = new ReconnectingWebSocket(`${window.overlay.config.getWs()}/tokens`, null, { - automaticOpen: false, - reconnectInterval: 3000 - }); - rws.watchedTokens = tokenList; - - rws.onopen = () => { - rws.send(JSON.stringify(rws.watchedTokens)) - }; - rws.onmessage = (eventData) => { - onTokensUpdated(JSON.parse(eventData.data)); - }; - - rws.AddTokens = (tokens) => { - rws.watchedTokens = [...new Set([...rws.watchedTokens, ...tokens])]; - if (rws.readyState === 1) - rws.send(JSON.stringify(rws.watchedTokens)) - } - rws.open(); - return rws; -} - -function watchTokensVue(tokenList, vueThis) { - return watchTokens(tokenList, (tokens) => { - mergeObjects(vueThis, vueThis.tokens, tokens); - }); -} -function _GetToken(rws, tokens, tokenName, decimalPlaces) { - tokens[tokenName];//hack to inform vue3 that we are dependant on tokens object values - if (tokens.hasOwnProperty(tokenName)) { - if (decimalPlaces !== undefined && decimalPlaces !== null) - return Number(tokens[tokenName]).toFixed(decimalPlaces); - return tokens[tokenName]; - } - if (rws.watchedTokens.indexOf(tokenName) === -1) - rws.AddTokens([tokenName]); - return ''; -} - -function _GetWebOverlaySettings() { - return fetch(`${window.overlay.config.getUrl()}/settings`) - .then((response) => response.json()) - .then((responseData) => JSON.parse(responseData.WebOverlay_Config)); -} - -function _IsInStatus(rws, tokens, osuStatuses) { - if (Array.isArray(osuStatuses)) - return osuStatuses.indexOf(_GetToken(rws, tokens, 'status')) > -1; - - return _GetToken(rws, tokens, 'status') == osuStatuses -} - -function _IsPlaying(rws, tokens) { - return _IsInStatus(rws, tokens, [window.overlay.osuStatus.Playing, window.overlay.osuStatus.ResultsScreen]); -} -function _IsWatching(rws, tokens) { - return _IsInStatus(rws, tokens, window.overlay.osuStatus.Watching); -} \ No newline at end of file diff --git a/webOverlay/overlays/README.txt b/webOverlay/overlays/README.txt deleted file mode 100644 index 164cc8af..00000000 --- a/webOverlay/overlays/README.txt +++ /dev/null @@ -1,7 +0,0 @@ -================= -Any edits to files in example overlays(folders starting with SC_) -provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlays itself can be modified as you want, just not in original folders. -Copy everything to a separate folder, remove SC_ from the name, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_BeatOsu/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_BeatOsu/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_BeatOsu/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_BeatOsu/components/App.js b/webOverlay/overlays/SC_BeatOsu/components/App.js deleted file mode 100644 index d6f07685..00000000 --- a/webOverlay/overlays/SC_BeatOsu/components/App.js +++ /dev/null @@ -1,47 +0,0 @@ -import background from './Background.js'; - -const app = { - name: 'App', - components: { - Background: background, - }, - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - }); - - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - let isMania = Vue.computed(() => getToken('gameMode') === 'OsuMania'); - let isPlayingOrWatching = Vue.computed(() => - _IsInStatus(data.rws, data.tokens, [window.overlay.osuStatus.Playing, window.overlay.osuStatus.ResultsScreen, window.overlay.osuStatus.Watching]) - ); - - data.rws = watchTokens([], (values) => { - Object.assign(data.tokens, values); - }); - - let mapTime = Vue.computed(() => { - let time = getToken('time') * 1000; - return Math.floor(time / 1000 / 60).pad() + ':' + Math.floor((time / 1000) % 60).pad(); - }); - - let mapTimePercent = Vue.computed(() => ((getToken('time') / (getToken('totaltime') / 1000)) * 100).clamp(0, 100)); - - const radius = 30; - const circumference = radius * Math.PI * 2; - let progressStyle = Vue.computed(() => `stroke-dashoffset: ${(1 - mapTimePercent.value / 100) * circumference}px`); - - return { - getToken, - isPlayingOrWatching, - isMania, - mapTime, - mapTimePercent, - progressStyle, - osuGrade: window.overlay.osuGrade, - }; - }, -}; - -export default app; diff --git a/webOverlay/overlays/SC_BeatOsu/components/Background.js b/webOverlay/overlays/SC_BeatOsu/components/Background.js deleted file mode 100644 index 18517b41..00000000 --- a/webOverlay/overlays/SC_BeatOsu/components/Background.js +++ /dev/null @@ -1,54 +0,0 @@ -const background = { - name: 'backgroundContainer', - template: ` -
- -
- `, - setup(props, context) { - const data = Vue.reactive({ - tokens: { backgroundImageLocation: '', md5: '', mapsetid: '' }, - backgroundUrl: '', - backgroundId: Number.MIN_SAFE_INTEGER, - rws: {}, - }); - const backgroundDiv = Vue.ref(null); - const boxStyle = Vue.computed(() => `background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)),url(${data.backgroundUrl});`); - - Vue.watch( - () => data.tokens.backgroundImageLocation, - () => { - let currId = (data.backgroundId += 1); - - let width = 1920, - height = 1080; - if (backgroundDiv.value) { - if (backgroundDiv.value.scrollWidth > 10) width = backgroundDiv.value.scrollWidth; - if (backgroundDiv.value.scrollHeight > 10) height = backgroundDiv.value.scrollHeight; - } - - preloadImage( - `${window.overlay.config.getUrl()}/backgroundImage?width=${width}&height=${height}&mapset=${data.tokens.mapsetid}&dummyData=${encodeURIComponent( - data.tokens.md5 - )}&crop=1`, - currId, - (url, id) => { - if (data.backgroundId !== id) return; - data.backgroundUrl = url; - } - ); - } - ); - Vue.onMounted(() => { - console.log(backgroundDiv.value); - }); - data.rws = watchTokens(['backgroundImageLocation', 'md5', 'mapsetid'], (values) => Object.assign(data.tokens, values)); - - return { - backgroundDiv, - boxStyle, - }; - }, -}; - -export default background; diff --git a/webOverlay/overlays/SC_BeatOsu/index.html b/webOverlay/overlays/SC_BeatOsu/index.html deleted file mode 100644 index 649ce3e8..00000000 --- a/webOverlay/overlays/SC_BeatOsu/index.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - pp Display Example - - - - - - - - - - - - - - -
-
-
-
- {{osuGrade[getToken('grade')]}} {{getToken('acc',2)}}% -
- -
- {{getToken('combo')}} Combo -
-
- - {{getToken('ppIfMapEndsNow',0)}}pp/{{getToken('ppIfRestFced',0)}}pp -
-
- -
-
- - - - - - - - -
- {{mapTime}} -
-
- -
-
-
- {{getToken('titleUnicode')}} - {{getToken('creator')}} -
- - {{getToken('artistUnicode')}} -
- -
- {{getToken('diffName')}} - {{getToken('mMainBpm')}} BPM - {{getToken('mods')}} -
-
-
- -
-
- - - diff --git a/webOverlay/overlays/SC_BeatOsu/main.css b/webOverlay/overlays/SC_BeatOsu/main.css deleted file mode 100644 index f5014544..00000000 --- a/webOverlay/overlays/SC_BeatOsu/main.css +++ /dev/null @@ -1,226 +0,0 @@ -body { - font-family: "Roboto Mono","Montserrat", sans-serif; - - color: white; - /* background: black; */ - - margin: 0; - - display: flex; - flex-direction: column; -} - -.overlay { - display: flex; - flex-direction: column; - - position: absolute; - left: 40px; - bottom: 40px; -} - -/* Beatmap */ - -.beatmap { - display: flex; -} - -.cover { - overflow: hidden; - border-radius: 6px; - position: relative; -} - -.image { - width: 90px; - height: 90px; -} - -.meta { - display: flex; - flex-direction: column; - - flex-grow: 1; - padding: 0 16px; -} - -.text { - flex-grow: 1; - - /* Fix text offset */ - transform: translate(0, -5px); -} - -.titles { - display: flex; - align-items: flex-end; -} - -.title { - font-size: 24px; - font-weight: 700; -} - -.subtitle { - font-size: 14px; - font-weight: 600; - margin: 0 4px 2px 4px; -} - -.artist { - display: block; - font-size: 16px; - font-weight: 400; - margin: 2px 0 0 0; -} - -.difficulty, .bpm, .mods, .ppIfRestFced{ - display: inline-block; - - font-size: 10px; - font-weight: 800; - text-transform: uppercase; - letter-spacing: 3px; -} - -.difficulty { - padding: 4px 5px 4px 8px; - - color: black; - background: white; - border-radius: 4px; -} - -.bpm { - margin: 0 8px; -} - -.mods { - margin: 0 0px; -} - -/* Progress */ - -.cover svg { - transform: rotate(-90deg); -} -.cover{ - - width: 90px; - height: 90px; -} -.cover div { - display: flex; - align-items: center; - justify-content: center; - - width: 90px; - height: 90px; -} - -.cover svg, .cover div { - position: absolute; - top: 0; - left: 0; -} - -.darken { - fill: black; - opacity: 0.5; -} - -.remaining, .progress { - fill: transparent; - stroke: white; - stroke-width: 4px; -} - -.remaining { - opacity: 0.25; -} - -.progress { - stroke-dasharray: 188.495px, 188.495px; - stroke-dashoffset: 188.495px; -} - -.progress-text { - font-size: 16px; - font-weight: 600; -} - -/* Performance */ - -.performance { - display: flex; - flex-direction: column; - margin: 0 0 20px 0; -} - -.performance-group { - margin: 4px 0 0 0; -} - -.performance-group .text { - display: inline-block; - - font-size: 22px; - font-weight: 600; -} - -.performance-group .subtext { - display: inline-block; - - font-size: 14px; - font-weight: 600; - letter-spacing: 2px; - text-transform: uppercase; - - opacity: 0.75; -} - -.score { - display: block; - font-size: 34px; - font-weight: 700; - letter-spacing: 2px; -} - -/* Animations and state */ - -.overlay { - --show: cubic-bezier(0.19, 1, 0.22, 1) 300ms; - --hide: cubic-bezier(0.55, 0.085, 0.68, 0.53) 200ms; -} - -.beatmap, .performance > * { - transition: - opacity var(--show), - transform var(--show); -} - -.overlay.hidden .beatmap, .overlay.hidden .performance > * { - opacity: 0; - transform: translate(0, 15px); - transition: - opacity var(--hide), - transform var(--hide); -} - -.performance > *:nth-child(3) { - transition-delay: 100ms !important; -} - -.overlay .performance > *:nth-child(2) { - transition-delay: 200ms !important; -} - -.overlay .performance > *:nth-child(1) { - transition-delay: 300ms !important; -} - -[v-cloak] { display: none; } - -.hide { - display: none; -} \ No newline at end of file diff --git a/webOverlay/overlays/SC_BeatOsu/main.js b/webOverlay/overlays/SC_BeatOsu/main.js deleted file mode 100644 index f9685ccb..00000000 --- a/webOverlay/overlays/SC_BeatOsu/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#overlay'); diff --git a/webOverlay/overlays/SC_Live Overlay/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_Live Overlay/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_Live Overlay/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_Live Overlay/components/App.js b/webOverlay/overlays/SC_Live Overlay/components/App.js deleted file mode 100644 index 570d3c3d..00000000 --- a/webOverlay/overlays/SC_Live Overlay/components/App.js +++ /dev/null @@ -1,104 +0,0 @@ -import background from './Background.js'; -import lineChart from './LineChart.js'; - -const app = { - name: 'App', - components: { - Background: background, - Linechart: lineChart, - }, - - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - settings: {}, - }); - - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - //either request all tokens upfront by filling their names in array - //or request them later using helper getToken method above - data.rws = watchTokens(['mapStrains'], (values) => { - Object.assign(data.tokens, values); - }); - - const getWebOverlaySettings = () => - fetch(`${window.overlay.config.getUrl()}/settings`) - .then((response) => response.json()) - .then((responseData) => JSON.parse(responseData.WebOverlay_Config)); - - getWebOverlaySettings().then((config) => { - Object.assign(data.settings, config); - }); - let mapStrains = Vue.computed(() => Object.entries(data.tokens.mapStrains || {})); - let isMania = Vue.computed(() => getToken('gameMode') === 'OsuMania'); - let isPlayingOrWatching = Vue.computed(() => - _IsInStatus(data.rws, data.tokens, [window.overlay.osuStatus.Playing, window.overlay.osuStatus.ResultsScreen, window.overlay.osuStatus.Watching]) - ); - - let ppValue = Vue.computed(() => { - if (isPlayingOrWatching.value) return getToken('ppIfMapEndsNow', 1); - if (data.settings.SimulatePPWhenListening) return getToken('simulatedPp', 1); - return 0; - }); - let mapProgress = Vue.computed(() => getToken('time') / (getToken('totaltime') / 1000)); - - return { - getToken, - - data, - - isPlayingOrWatching, - isMania, - mapStrains, - ppValue, - mapProgress, - }; - }, - computed: { - overlaySettings() { - if (Object.keys(this.data.settings).length === 0) return {}; - let s = this.data.settings; - - return { - backgroundColor: s.ChartColor, - chartProgressColor: s.ChartProgressColor, - imageDimColor: s.ImageDimColor, - artistTextColor: s.ArtistTextColor, - titleTextColor: s.TitleTextColor, - ppBackgroundColor: s.PpBackgroundColor, - hit100BackgroundColor: s.Hit100BackgroundColor, - hit50BackgroundColor: s.Hit50BackgroundColor, - hitMissBackgroundColor: s.HitMissBackgroundColor, - yAxesFontColor: s.HideChartLegend ? 'transparent' : 'white', - - simulatePPWhenListening: s.SimulatePPWhenListening, - hideDiffText: s.HideDiffText, - hideMapStats: s.HideMapStats, - hideChartLegend: s.HideChartLegend, - - chartHeight: s.ChartHeight, - }; - }, - progressChartSettings() { - return { - backgroundColor: this.overlaySettings.chartProgressColor, - yAxesFontColor: 'transparent', - }; - }, - chartStyle() { - if (Object.keys(this.overlaySettings).length === 0) return `height:200px`; - return `height:${this.overlaySettings.chartHeight}px;`; - }, - progressChartStyle() { - return `clip-path: inset(0px ${100 - this.mapProgress * 100}% 0px 0px);`; - }, - hitsStyle() { - if (!this.overlaySettings.ppBackgroundColor) return ``; - - let { ppBackgroundColor: pp, hit100BackgroundColor: h100, hit50BackgroundColor: h50, hitMissBackgroundColor: hMiss } = this.overlaySettings; - return `background: linear-gradient(to right, ${pp},${pp},${h100},${h100},${h50},${h50},${hMiss},${hMiss});`; - }, - }, -}; -export default app; diff --git a/webOverlay/overlays/SC_Live Overlay/components/Background.js b/webOverlay/overlays/SC_Live Overlay/components/Background.js deleted file mode 100644 index 046d04e9..00000000 --- a/webOverlay/overlays/SC_Live Overlay/components/Background.js +++ /dev/null @@ -1,57 +0,0 @@ -const background = { - name: 'backgroundContainer', - template: ` -
- -
- `, - props: { - dimcolor: {}, - }, - setup(props, context) { - const data = Vue.reactive({ - tokens: { backgroundImageLocation: '', md5: '', mapsetid: '' }, - backgroundUrl: '', - backgroundId: Number.MIN_SAFE_INTEGER, - rws: {}, - }); - const backgroundDiv = Vue.ref(null); - const boxStyle = Vue.computed(() => `background-image: linear-gradient(to bottom, ${props.dimcolor}, ${props.dimcolor}),url(${data.backgroundUrl});`); - - Vue.watch( - () => data.tokens.backgroundImageLocation, - () => { - let currId = (data.backgroundId += 1); - - let width = 1920, - height = 1080; - if (backgroundDiv.value) { - if (backgroundDiv.value.scrollWidth > 10) width = backgroundDiv.value.scrollWidth; - if (backgroundDiv.value.scrollHeight > 10) height = backgroundDiv.value.scrollHeight; - } - - preloadImage( - `${window.overlay.config.getUrl()}/backgroundImage?width=${width}&height=${height}&mapset=${data.tokens.mapsetid}&dummyData=${encodeURIComponent( - data.tokens.md5 - )}&crop=1`, - currId, - (url, id) => { - if (data.backgroundId !== id) return; - data.backgroundUrl = url; - } - ); - } - ); - Vue.onMounted(() => { - console.log(backgroundDiv.value); - }); - data.rws = watchTokens(['backgroundImageLocation', 'md5', 'mapsetid'], (values) => Object.assign(data.tokens, values)); - - return { - backgroundDiv, - boxStyle, - }; - }, -}; - -export default background; diff --git a/webOverlay/overlays/SC_Live Overlay/components/LineChart.js b/webOverlay/overlays/SC_Live Overlay/components/LineChart.js deleted file mode 100644 index fc7de0ef..00000000 --- a/webOverlay/overlays/SC_Live Overlay/components/LineChart.js +++ /dev/null @@ -1,119 +0,0 @@ - -const LineChart = { - name: 'LineChart', - template: ` -
- - -
- `, - props: { - points: {}, - settings: { - default: {} - } - }, - data: () => ({ - chart: {}, - defaultSettings: { - maxTicks: 3, - backgroundColor: 'rgba(255, 99, 132,0.6)', - yAxesFontColor: 'white' - } - }), - methods: { - updateChart() { - this.chart.data.labels = []; - this.chart.data.datasets.forEach((dataset) => { - dataset.data = []; - }); - - this.chart.data.labels = this.points.map(x => x[0]); - let values = this.points.map(x => x[1]) - this.chart.data.datasets.forEach((dataset) => { - dataset.data.push(...values); - - }); - - this.chart.update(); - } - }, - computed: { - - }, - watch: { - points() { - this.updateChart() - }, - settings() { - console.log('settings updated:', JSON.stringify(this.settings)); - let settings = { ...this.defaultSettings, ...this.settings }; - - this.chart.data.datasets[0].backgroundColor = settings.backgroundColor; - this.chart.options.scales.yAxes[0].ticks.fontColor = settings.yAxesFontColor; - - this.chart.update(); - } - - }, - mounted: function () { - let settings = { ...this.settings, ...this.defaultSettings } - var ctx = this.$refs.chart.getContext('2d'); - this.chart = new Chart(ctx, { - type: 'line', - - data: { - labels: ['0', '1', '2', '3'], - datasets: [{ - backgroundColor: settings.backgroundColor, - //borderColor: this.backgroundColor, - data: [0, 10, 20, 30] - }] - }, - - // Configuration options go here - options: { - maintainAspectRatio: false, - responsive: true, - legend: { - display: false - }, - scales: { - xAxes: [{ - ticks: { - display: false - }, - gridLines: { - zeroLineColor: 'transparent', - color: "transparent" - } - }], - yAxes: [{ - ticks: { - beginAtZero: true, - padding: -25, - fontColor: settings.yAxesFontColor, - maxTicksLimit: settings.maxTicks, - - }, - gridLines: { - zeroLineColor: 'transparent', - color: "transparent" - } - }] - }, - elements: { - point: { - radius: 0 - } - }, - //animation: { - // duration: 250 - //} - } - }); - } -} - - -export default LineChart \ No newline at end of file diff --git a/webOverlay/overlays/SC_Live Overlay/index.html b/webOverlay/overlays/SC_Live Overlay/index.html deleted file mode 100644 index fa07efa5..00000000 --- a/webOverlay/overlays/SC_Live Overlay/index.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - Live Overlay - - - - - - - - - - - -
- -
-

{{getToken('mapArtistTitle')}}

-
-

mapper {{getToken('creator')}}

-

difficulty {{getToken('diffName')}}

-
-
- -
-
-
-
SR{{getToken('mStars', 2)}}
-
CS{{getToken('mCS')}}
-
AR{{getToken('mAR')}}
-
OD{{getToken('mOD')}}
-
HP{{getToken('mHP')}}
-
- -
-
- -
-
-
-
- -
-
{{ppValue}}pp
-
{{getToken('geki')}}
-
{{getToken('c300')}}
-
{{getToken('katsu')}}
-
-

{{getToken('c100')}}

-
-
-

{{getToken('c50')}}

-
-
-

{{getToken('miss')}}

-
-
-
-
{{ppValue}}pp
-
-

{{getToken('c100')}}

-
-
-

{{getToken('c50')}}

-
-
-

{{getToken('miss')}}

-
-
-
- -
- - - diff --git a/webOverlay/overlays/SC_Live Overlay/main.css b/webOverlay/overlays/SC_Live Overlay/main.css deleted file mode 100644 index 2a3189b7..00000000 --- a/webOverlay/overlays/SC_Live Overlay/main.css +++ /dev/null @@ -1,229 +0,0 @@ -:root { - --animation-speed: 1.7s -} -* { - padding: 0px; - margin: 0px; - font-family: comfortaa; -} -.clipPathAnimation{ - transition: clip-path .3s; -} -.box { - height: 100%; - - -webkit-box-shadow: inset 0px 0px 28px 4px #0008; - -moz-box-shadow: inset 0px 0px 28px 4px #0008; - box-shadow: inset 0px 0px 28px 4px #0008; - background-repeat: no-repeat; - background-position: center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - transition: padding var(--animation-speed) ease; - overflow-y: hidden; - - display: flex; - flex-direction: column; - align-items: center; -} - -.inner { - display: flex; - flex-direction: column; - filter: drop-shadow(0px 0px 5px #000a); - width: 100%; - margin-top:10px; - z-index: 50; - -} -.right { - text-align: right; - margin-left: auto; -} -.app { - height: 100vh; - white-space: nowrap; - color: white; -} - -.outer { - min-width: 15%; - padding: 0px 2%; - display: flex; - justify-content: center; - flex-direction: column; - font-size: 15px; -} - -.title { - font-size: 20px; - align-items: center; - justify-content: center; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - transition: font-size var(--animation-speed) ease; - margin: 0 5px; -} - -.mapinfo { - font-size: 12px; - flex-direction: row; - display: flex; - text-align: center; - align-items: center; - justify-content: center; - transition: margin-top var(--animation-speed) ease, - padding var(--animation-speed) ease; -} - -.mapper { - padding-right: 15px; - flex: 0 1 auto; - opacity:1; - transition: flex var(--animation-speed) ease, - padding var(--animation-speed) ease, - opacity var(--animation-speed) ease; -} -.box-playing { - padding-top:2px; -} -.title-playing { - font-size: 12px; - transition: font-size var(--animation-speed) ease; -} -.mapinfo-playing { - padding-bottom: 2px; - - transition: margin var(--animation-speed) ease, - padding var(--animation-speed) ease; -} -.mapinfo-playing > .mapper { - text-align: left; - /*opacity:0;*/ - - padding-left:5px; - transition: flex var(--animation-speed) ease, - padding var(--animation-speed) ease, - opacity var(--animation-speed) ease; -} -.difficulty{ - transition: padding var(--animation-speed) ease; -} -.mapinfo-playing > .difficulty{ - padding-right:5px; - transition: padding var(--animation-speed) ease; -} - -.flexSpacer{ - flex: 1 1 auto; -} - - -.ds { - filter: drop-shadow(0px 0px 5px #0004); -} - -.hit-100 { -} - -.hit-50 { -} - -.hit-miss { -} - -.hit-text { - justify-self: center; -} - -.hit { - align-self: center; - padding: 5px 9px; - font-size: 18px; - margin-right: 10px; - border-radius: 200px; - width:25%; -} - -[v-cloak] { display: none; } - -.hide { - display: none; - z-index: -1; -} - -.bottom { - width: 100%; - display:flex; - flex-direction: row; - -} - - .bottom-content { - z-index: 9999; - } - -.hits { - display: flex; - flex: 1 1 auto; - margin:5px; - padding:5px; - text-align:center; - margin: -5px 5px 5px 5px; - font-weight: 600; -} - -.pp { - align-self: center; - width:25%; -} - -.mapStats{ - border-radius: 15px; - background: rgba(0,0,0,0.4); - padding: 10px; - background-repeat: no-repeat; - background-position: center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - margin-left: auto; - width: 60px; - margin-right:15px; - margin-bottom:25px; - text-align: end; - position: absolute; - right:0; - z-index: 99; - overflow: hidden; -} -.flexEnd{ - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -.mapStats strong{ - float: left; -} - -mapStat{ - float: right; -} - -.chart-container{ - position: relative; - margin-right: 5px; - margin-left: 1px; -} - - -@media screen and (max-height: 180px) { - .mapStats { - display:none; - } - } \ No newline at end of file diff --git a/webOverlay/overlays/SC_Live Overlay/main.js b/webOverlay/overlays/SC_Live Overlay/main.js deleted file mode 100644 index ec61c247..00000000 --- a/webOverlay/overlays/SC_Live Overlay/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#app'); diff --git a/webOverlay/overlays/SC_Map Example/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_Map Example/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_Map Example/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_Map Example/components/App.js b/webOverlay/overlays/SC_Map Example/components/App.js deleted file mode 100644 index 19c49c57..00000000 --- a/webOverlay/overlays/SC_Map Example/components/App.js +++ /dev/null @@ -1,39 +0,0 @@ -import background from './Background.js'; - -const app = { - name: 'App', - components: { - Background: background, - }, - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - }); - - const getToken = (tokenName, decimalPlaces) => - _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - //either request all tokens upfront by filling their names in array - //or request them later using helper getToken method above - data.rws = watchTokens([], (values) => { - Object.assign(data.tokens, values); - }); - - const totalTime = Vue.computed(() => { - let time = getToken('totaltime'); - return ( - Math.floor(time / 1000 / 60).pad() + - ':' + - Math.floor((time / 1000) % 60).pad() - ); - }); - - return { - getToken, - - totalTime, - }; - }, -}; - -export default app; diff --git a/webOverlay/overlays/SC_Map Example/components/Background.js b/webOverlay/overlays/SC_Map Example/components/Background.js deleted file mode 100644 index 18517b41..00000000 --- a/webOverlay/overlays/SC_Map Example/components/Background.js +++ /dev/null @@ -1,54 +0,0 @@ -const background = { - name: 'backgroundContainer', - template: ` -
- -
- `, - setup(props, context) { - const data = Vue.reactive({ - tokens: { backgroundImageLocation: '', md5: '', mapsetid: '' }, - backgroundUrl: '', - backgroundId: Number.MIN_SAFE_INTEGER, - rws: {}, - }); - const backgroundDiv = Vue.ref(null); - const boxStyle = Vue.computed(() => `background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)),url(${data.backgroundUrl});`); - - Vue.watch( - () => data.tokens.backgroundImageLocation, - () => { - let currId = (data.backgroundId += 1); - - let width = 1920, - height = 1080; - if (backgroundDiv.value) { - if (backgroundDiv.value.scrollWidth > 10) width = backgroundDiv.value.scrollWidth; - if (backgroundDiv.value.scrollHeight > 10) height = backgroundDiv.value.scrollHeight; - } - - preloadImage( - `${window.overlay.config.getUrl()}/backgroundImage?width=${width}&height=${height}&mapset=${data.tokens.mapsetid}&dummyData=${encodeURIComponent( - data.tokens.md5 - )}&crop=1`, - currId, - (url, id) => { - if (data.backgroundId !== id) return; - data.backgroundUrl = url; - } - ); - } - ); - Vue.onMounted(() => { - console.log(backgroundDiv.value); - }); - data.rws = watchTokens(['backgroundImageLocation', 'md5', 'mapsetid'], (values) => Object.assign(data.tokens, values)); - - return { - backgroundDiv, - boxStyle, - }; - }, -}; - -export default background; diff --git a/webOverlay/overlays/SC_Map Example/index.html b/webOverlay/overlays/SC_Map Example/index.html deleted file mode 100644 index 2043c096..00000000 --- a/webOverlay/overlays/SC_Map Example/index.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - Map Display Example - - - - - - - - - - -
-
-

- length {{totalTime}} -

-

- bpm {{getToken('mBpm')}} -

-
- -
-
-

- {{getToken('mapArtistTitle')}} -

-
-
-

- mapper {{getToken('creator')}} -

-

- difficulty {{getToken('diffName')}} -

-
-
- -
-

- CS {{getToken('mCS')}} / AR {{getToken('mAR')}} / OD - {{getToken('mOD')}} -

-

- Star Rating {{getToken('mStars', 2)}} -

-
-
- - - - \ No newline at end of file diff --git a/webOverlay/overlays/SC_Map Example/main.css b/webOverlay/overlays/SC_Map Example/main.css deleted file mode 100644 index 619475a1..00000000 --- a/webOverlay/overlays/SC_Map Example/main.css +++ /dev/null @@ -1,85 +0,0 @@ -* { - padding: 0px; - margin: 0px; - font-family: comfortaa; -} - -.app { - min-width: 995px; - white-space: nowrap; -} - -.box { - border-radius: 200px; - -webkit-box-shadow: inset 0px 0px 28px 4px #0008; - -moz-box-shadow: inset 0px 0px 28px 4px #0008; - box-shadow: inset 0px 0px 28px 4px #0008; - padding: 25px; - padding-left: 27px; - background-repeat: no-repeat; - background-position: center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - width: 55%; -} - -.inner { - display: flex; -} - -.app { - display: flex; - border-radius: 200px; - background-color: #eee; -} - -.outer { - min-width: 15%; - padding: 0px 2%; - color: #444; - display: flex; - justify-content: center; - flex-direction: column; - font-size: 15px; -} - -.right { - text-align: right; - margin-left: auto; -} - -.title { - font-size: 20px; - align-items: center; - justify-content: center; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; -} - -.inner { - flex-direction: column; - color: white; - filter: drop-shadow(0px 0px 5px #000a); -} - -.mapinfo { - font-size: 12px; - flex-direction: row; - display: flex; - text-align: center; - align-items: center; - justify-content: center; -} - -.mapper { - padding-right: 15px; -} - -[v-cloak] { display: none; } - -.hide { - display: none; -} \ No newline at end of file diff --git a/webOverlay/overlays/SC_Map Example/main.js b/webOverlay/overlays/SC_Map Example/main.js deleted file mode 100644 index 26e969c4..00000000 --- a/webOverlay/overlays/SC_Map Example/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App -}); - -app.mount('#app'); \ No newline at end of file diff --git a/webOverlay/overlays/SC_Map Overlay/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_Map Overlay/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_Map Overlay/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_Map Overlay/components/App.js b/webOverlay/overlays/SC_Map Overlay/components/App.js deleted file mode 100644 index 14b4e4d6..00000000 --- a/webOverlay/overlays/SC_Map Overlay/components/App.js +++ /dev/null @@ -1,73 +0,0 @@ -import background from './Background.js'; - -const app = { - name: 'App', - components: { - Background: background, - }, - // https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - settings: { - progressColor: 'yellow', - }, - }); - //map global _GetToken helper method - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - - //use helper _IsInStatus method to update isPlayingOrWatching value as necessary - let isPlayingOrWatching = Vue.computed(() => - _IsInStatus(data.rws, data.tokens, [window.overlay.osuStatus.Playing, window.overlay.osuStatus.ResultsScreen, window.overlay.osuStatus.Watching]) - ); - - //map pass percentage - let mapProgress = Vue.computed(() => ((getToken('time') / (getToken('totaltime') / 1000)) * 100).clamp(0, 100)); - - _GetWebOverlaySettings().then((config) => { - if (config.ChartProgressColor) data.settings.progressColor = config.ChartProgressColor; - }); - - //start websocket connection to SC with some predefined tokens - data.rws = watchTokens( - [ - 'mapStrains', - 'mapArtistTitle', - 'creator', - 'diffName', - 'mStars', - 'mCS', - 'mAR', - 'mOD', - 'mHP', - 'mBpm', - 'mods', - 'time', - 'totaltime', - 'status', - 'c100', - 'c50', - 'miss', - 'mapsetid', - 'status', - 'md5', - ], - (values) => { - Object.assign(data.tokens, values); - } - ); - - //return all data & computed vars & methods that we want to use elsewhere in this component - return { - data: data.tokens, - getToken, - isPlayingOrWatching, - mapProgress, - progressColor: Vue.computed(() => data.settings.progressColor), - - }; - }, -}; - -export default app; diff --git a/webOverlay/overlays/SC_Map Overlay/components/Background.js b/webOverlay/overlays/SC_Map Overlay/components/Background.js deleted file mode 100644 index 928e33ea..00000000 --- a/webOverlay/overlays/SC_Map Overlay/components/Background.js +++ /dev/null @@ -1,62 +0,0 @@ -const background = { - //unique name for this component - name: 'backgroundContainer', - //"html" to render instead of original tag ( in this case). - //Normally this would be in separate template tag(vue SFC) but because we use no build tools we have to use inline string. - template: ` -
- -
- `, - // https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api - setup(props, context) { - const data = Vue.reactive({ - tokens: { backgroundImageLocation: '', md5: '', mapsetid: '' }, - backgroundUrl: '', - backgroundId: Number.MIN_SAFE_INTEGER, - rws: {}, - }); - const backgroundDiv = Vue.ref(null); - - //function with will automatically monitor all dependant variables for changes and update its value whenever they change - //note that these variables have to be reactive(Vue.reactive)/refs(Vue.ref) - const boxStyle = Vue.computed(() => `background-image:url(${data.backgroundUrl});`); - - //we want to watch and trigger a function whenever data.tokens.backgroundImageLocation changes - Vue.watch( - //function returning value with should be watched for changes - () => data.tokens.backgroundImageLocation, - //method to execute when value defined above changes - () => { - var currId = (data.backgroundId += 1); - - let width = 1920, - height = 1080; - if (backgroundDiv.value) { - if (backgroundDiv.value.scrollWidth > 10) width = backgroundDiv.value.scrollWidth; - if (backgroundDiv.value.scrollHeight > 10) height = backgroundDiv.value.scrollHeight; - } - - preloadImage( - `${window.overlay.config.getUrl()}/backgroundImage?width=${width}&height=${height}&mapset=${data.tokens.mapsetid}&dummyData=${encodeURIComponent(data.tokens.md5)}&crop=true`, - currId, - (url, id) => { - if (data.backgroundId !== id) return; - data.backgroundUrl = url; - } - ); - } - ); - - //start websocket connection to SC with some predefined tokens - data.rws = watchTokens(['backgroundImageLocation', 'md5', 'mapsetid'], (values) => Object.assign(data.tokens, values)); - - //return all data & computed vars & methods that we want to use elsewhere in this file or in html template - return { - backgroundDiv, - boxStyle, - }; - }, -}; - -export default background; diff --git a/webOverlay/overlays/SC_Map Overlay/index.html b/webOverlay/overlays/SC_Map Overlay/index.html deleted file mode 100644 index c882a055..00000000 --- a/webOverlay/overlays/SC_Map Overlay/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - - Map Overlay - - - - - - - - - - - -
-
- - -
-
-
{{data.mapArtistTitle}}
-
{{data.diffName}} -
{{data.mods.split(",").join("")}}
-
-
-
-
-
AR
{{getToken('mAR',1)}}
-
CS
{{getToken('mCS',1)}}
-
OD
{{getToken('mOD',1)}}
-
HP
{{getToken('mHP',1)}}
-
BPM
{{getToken('mainBpm',0)}}
-
SR
{{getToken('mStars',2)}}
-
-
-
-
- - - - \ No newline at end of file diff --git a/webOverlay/overlays/SC_Map Overlay/main.css b/webOverlay/overlays/SC_Map Overlay/main.css deleted file mode 100644 index 0c76140d..00000000 --- a/webOverlay/overlays/SC_Map Overlay/main.css +++ /dev/null @@ -1,79 +0,0 @@ -.progress { - /*background-color: yellow;*/ - height: 15px; - transition: none; - margin-bottom: 40px; - border-radius: 10px; - opacity: 0; -} -.pg-enabled { - opacity: 1; -} -.attr { - margin-top: 30px; -} -.attritem { - display: inline-block; - background: rgba(0, 0, 0, 0.25); - margin: 10px; - padding: 10px; - border-radius: 0.8rem; -} -.attrtitle { - display: inline-block; - margin-right: 5px; - font-weight: bold; -} -.box { - border-radius: 2rem; - overflow: hidden; - width: 1000px; -} -body { margin: 0 } -* { - transition: all 1s; - transition-timing-function: ease; - color: white; - text-align: center; - text-shadow: 0px 0px 10px rgba(255, 255, 255, 1), 0px 0px 46px rgba(255, 255, 255, 1), 0px 0px 80px rgba(255, 255, 255, 1); - font-family: 'Comfortaa'; -} -.title { - font-size: 35px; -} -.diffname { - margin-top: 7.5px; - font-size: 25px; -} -.modcolor { - color: #dbdbdb; - display: inline-block; - text-shadow: 0px 0px 10px #dbdbdb, 0px 0px 46px #dbdbdb, 0px 0px 80px #dbdbdb; -} -.background { - transition: all .2s; - filter: brightness(50%); - width: 1000px; - height: 300px; - background-position: center; - background-repeat: no-repeat; - background-size: cover; -} -.move { - position: absolute; - top: 0px; - width: 1000px; - border-radius: 2rem; overflow: hidden; - height: 300px; -} -.move2 { - position: absolute; - top: 200px; - width: 1000px; -} - -[v-cloak] { display: none; } - -.hide { - display: none; -} \ No newline at end of file diff --git a/webOverlay/overlays/SC_Map Overlay/main.js b/webOverlay/overlays/SC_Map Overlay/main.js deleted file mode 100644 index ec61c247..00000000 --- a/webOverlay/overlays/SC_Map Overlay/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#app'); diff --git a/webOverlay/overlays/SC_Map Overlay/orginal file/app.svelte b/webOverlay/overlays/SC_Map Overlay/orginal file/app.svelte deleted file mode 100644 index 76b03940..00000000 --- a/webOverlay/overlays/SC_Map Overlay/orginal file/app.svelte +++ /dev/null @@ -1,157 +0,0 @@ - - - - -
- {#if data?.mAR != null && data?.mAR != "null"} - -
- -
-
-
-
-
{data?.mapArtistTitle}
-
{data?.diffName} - {#if data?.mods != "" && data?.mods != null && data?.mods != "None"} -
{`+${data.mods.split(",").join("")}`}
- {/if} -
-
-
-
-
AR
{data.mAR.toFixed(1)}
-
CS
{data.mCS.toFixed(1)}
-
OD
{data.mOD.toFixed(1)}
-
HP
{data.mHP.toFixed(1)}
-
BPM
{data.mBpm}
-
SR
{data.mStars.toFixed(2)}
-
-
-
- {/if} -
- - \ No newline at end of file diff --git a/webOverlay/overlays/SC_PP Counter/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_PP Counter/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_PP Counter/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_PP Counter/components/App.js b/webOverlay/overlays/SC_PP Counter/components/App.js deleted file mode 100644 index 1014176a..00000000 --- a/webOverlay/overlays/SC_PP Counter/components/App.js +++ /dev/null @@ -1,33 +0,0 @@ -import background from './Background.js'; - -const app = { - name: 'App', - components: { - Background: background, - }, - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - }); - - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - let isMania = Vue.computed(() => getToken('gameMode') === 'OsuMania'); - let isPlayingOrWatching = Vue.computed(() => - _IsInStatus(data.rws, data.tokens, [window.overlay.osuStatus.Playing, window.overlay.osuStatus.ResultsScreen, window.overlay.osuStatus.Watching]) - ); - //either request all tokens upfront by filling their names in array - //or request them later using helper getToken method above - data.rws = watchTokens([], (values) => { - Object.assign(data.tokens, values); - }); - - return { - getToken, - isPlayingOrWatching, - isMania, - }; - }, -}; - -export default app; diff --git a/webOverlay/overlays/SC_PP Counter/components/Background.js b/webOverlay/overlays/SC_PP Counter/components/Background.js deleted file mode 100644 index 18517b41..00000000 --- a/webOverlay/overlays/SC_PP Counter/components/Background.js +++ /dev/null @@ -1,54 +0,0 @@ -const background = { - name: 'backgroundContainer', - template: ` -
- -
- `, - setup(props, context) { - const data = Vue.reactive({ - tokens: { backgroundImageLocation: '', md5: '', mapsetid: '' }, - backgroundUrl: '', - backgroundId: Number.MIN_SAFE_INTEGER, - rws: {}, - }); - const backgroundDiv = Vue.ref(null); - const boxStyle = Vue.computed(() => `background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)),url(${data.backgroundUrl});`); - - Vue.watch( - () => data.tokens.backgroundImageLocation, - () => { - let currId = (data.backgroundId += 1); - - let width = 1920, - height = 1080; - if (backgroundDiv.value) { - if (backgroundDiv.value.scrollWidth > 10) width = backgroundDiv.value.scrollWidth; - if (backgroundDiv.value.scrollHeight > 10) height = backgroundDiv.value.scrollHeight; - } - - preloadImage( - `${window.overlay.config.getUrl()}/backgroundImage?width=${width}&height=${height}&mapset=${data.tokens.mapsetid}&dummyData=${encodeURIComponent( - data.tokens.md5 - )}&crop=1`, - currId, - (url, id) => { - if (data.backgroundId !== id) return; - data.backgroundUrl = url; - } - ); - } - ); - Vue.onMounted(() => { - console.log(backgroundDiv.value); - }); - data.rws = watchTokens(['backgroundImageLocation', 'md5', 'mapsetid'], (values) => Object.assign(data.tokens, values)); - - return { - backgroundDiv, - boxStyle, - }; - }, -}; - -export default background; diff --git a/webOverlay/overlays/SC_PP Counter/index.html b/webOverlay/overlays/SC_PP Counter/index.html deleted file mode 100644 index bccdaa13..00000000 --- a/webOverlay/overlays/SC_PP Counter/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - pp Display Example - - - - - - - - - - - -
- -
-
-
-

{{getToken('c100')}}

-
-
-

{{getToken('c50')}}

-
-
-

{{getToken('miss')}}

-
-
-
-
-

{{getToken('geki')}}

-
-
-

{{getToken('c300')}}

-
-
-

{{getToken('katsu')}}

-
-
-

{{getToken('c100')}}

-
-
-

{{getToken('c50')}}

-
-
-

{{getToken('miss')}}

-
-
-
-

0

-
-

{{getToken('ppIfMapEndsNow',1)}}pp

-
- -
- - - diff --git a/webOverlay/overlays/SC_PP Counter/main.css b/webOverlay/overlays/SC_PP Counter/main.css deleted file mode 100644 index 56cb5622..00000000 --- a/webOverlay/overlays/SC_PP Counter/main.css +++ /dev/null @@ -1,94 +0,0 @@ -* { - padding: 0px; - margin: 0px; - font-family: comfortaa; -} - -.hit-p300-mania { - background-color: rgba(50, 205, 50, 0.667); -} -.hit-300-mania { - background-color: rgba(50, 205, 50, 0.667); -} -.hit-200-mania { - background-color: rgba(138, 43, 226, 0.667); -} -.hit-100-mania { - background-color: rgba(138, 43, 226, 0.667); -} -.hit-50-mania { - background-color: rgba(255, 69, 0, 0.667); -} -.hit-miss-mania { - background-color: rgba(255, 69, 0, 0.667); -} - -.hit-100 { - background-color: rgba(50, 205, 50, 0.667); -} -.hit-50 { - background-color: rgba(138, 43, 226, 0.667); -} -.hit-miss { - background-color: rgba(255, 69, 0, 0.667); -} - -.hit-text { - color: white; - justify-self: center; - text-align: center; -} - -.hit { - padding: 7px 5px; - align-self: center; - text-align: center; - min-width: 45px; - font-size: 18px; -} - -.box { - border-radius: 200px -} - -.box { - padding: 25px; - padding-left: 27px; - background-repeat: no-repeat; - background-position: center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - -.hit:first-child { - border-radius: 50px 0px 0px 50px; -} -.hit:last-child { - border-radius: 0px 50px 50px 0px; -} - -.inner { - display: flex; -} - -.hits { - display: flex; -} - -.pp { - color: white; - margin-left: auto; - align-self: center; -} - -.ds { - filter: drop-shadow(0px 0px 5px #0004); -} - -[v-cloak] { display: none; } - -.hide { - display: none; -} \ No newline at end of file diff --git a/webOverlay/overlays/SC_PP Counter/main.js b/webOverlay/overlays/SC_PP Counter/main.js deleted file mode 100644 index ec61c247..00000000 --- a/webOverlay/overlays/SC_PP Counter/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#app'); diff --git a/webOverlay/overlays/SC_Template/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_Template/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_Template/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_Template/components/App.js b/webOverlay/overlays/SC_Template/components/App.js deleted file mode 100644 index 84f99a0b..00000000 --- a/webOverlay/overlays/SC_Template/components/App.js +++ /dev/null @@ -1,25 +0,0 @@ -const app = { - name: 'App', - components: {}, - // https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - }); - //map global _GetToken helper method - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - - //start websocket connection to SC - data.rws = watchTokens([], (values) => { - Object.assign(data.tokens, values); - }); - - //return all data & computed vars & methods that we want to use elsewhere in this component - return { - getToken, - }; - }, -}; - -export default app; diff --git a/webOverlay/overlays/SC_Template/index.html b/webOverlay/overlays/SC_Template/index.html deleted file mode 100644 index c55448c1..00000000 --- a/webOverlay/overlays/SC_Template/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - minimal template overlay - - - - - - - - - - - -
-
{{getToken('mapArtistTitle')}}
-
- - - diff --git a/webOverlay/overlays/SC_Template/main.css b/webOverlay/overlays/SC_Template/main.css deleted file mode 100644 index 7c4521e1..00000000 --- a/webOverlay/overlays/SC_Template/main.css +++ /dev/null @@ -1,17 +0,0 @@ -body { - margin: 0; -} -* { - color: black; - font-family: 'Comfortaa'; -} -.large { - font-size: 35px; -} -.hide { - display: none; -} - -[v-cloak] { - display: none; -} diff --git a/webOverlay/overlays/SC_Template/main.js b/webOverlay/overlays/SC_Template/main.js deleted file mode 100644 index ec61c247..00000000 --- a/webOverlay/overlays/SC_Template/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#app'); diff --git a/webOverlay/overlays/SC_Token/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_Token/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_Token/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_Token/components/App.js b/webOverlay/overlays/SC_Token/components/App.js deleted file mode 100644 index 99d3ebba..00000000 --- a/webOverlay/overlays/SC_Token/components/App.js +++ /dev/null @@ -1,50 +0,0 @@ -const app = { - name: 'App', - components: {}, - // https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - }); - //map global _GetToken helper method - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - - const urlParams = new URLSearchParams(window.location.search); - const tokenName = urlParams.get('token'); - const decimals = urlParams.get('decimals'); - - console.log(urlParams.get('token')); - //start websocket connection to SC - data.rws = watchTokens([], (values) => { - Object.assign(data.tokens, values); - }); - const baseUrl= window.location.origin+window.location.pathname+"?token="; - - const createExample = (text,token,decimals)=>{ - return { - text: text, - token: token, - decimals: decimals, - url: `${baseUrl}${token}`+(decimals ? `&decimals=${decimals}` : ``) - }; - }; - - //return all data & computed vars & methods that we want to use elsewhere in this component - return { - getToken, - tokenName, - decimals, - baseUrl, - examples:[ - createExample('text token:','mapArtistTitle'), - createExample('text token:','mapArtistTitleUnicode'), - createExample('numeric token(map AR):','mAR'), - createExample('numeric token, with defined amount of decimals(map AR):','mAR',2), - createExample('numeric token(map AR):','mAR'), - ] - }; - }, -}; - -export default app; diff --git a/webOverlay/overlays/SC_Token/index.html b/webOverlay/overlays/SC_Token/index.html deleted file mode 100644 index a0180ed6..00000000 --- a/webOverlay/overlays/SC_Token/index.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - Single token output - - - - - - - - - - - -
-
- {{getToken(tokenName, decimals)}} -
-
-
Set token name in overlay url!
-
examples:
-
-
{{ex.text}} {{ex.url}} - Result: {{getToken(ex.token,ex.decimals)}}
-
-
-
- - - diff --git a/webOverlay/overlays/SC_Token/main.css b/webOverlay/overlays/SC_Token/main.css deleted file mode 100644 index 7c4521e1..00000000 --- a/webOverlay/overlays/SC_Token/main.css +++ /dev/null @@ -1,17 +0,0 @@ -body { - margin: 0; -} -* { - color: black; - font-family: 'Comfortaa'; -} -.large { - font-size: 35px; -} -.hide { - display: none; -} - -[v-cloak] { - display: none; -} diff --git a/webOverlay/overlays/SC_Token/main.js b/webOverlay/overlays/SC_Token/main.js deleted file mode 100644 index ec61c247..00000000 --- a/webOverlay/overlays/SC_Token/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#app'); diff --git a/webOverlay/overlays/SC_URBar/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_URBar/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_URBar/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_URBar/components/App.js b/webOverlay/overlays/SC_URBar/components/App.js deleted file mode 100644 index a653b2ce..00000000 --- a/webOverlay/overlays/SC_URBar/components/App.js +++ /dev/null @@ -1,27 +0,0 @@ -import roundurbar from './roundURBar.js'; - -const app = { - name: 'App', - components: { roundurbar }, - // https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - }); - //map global _GetToken helper method - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - - //start websocket connection to SC with some predefined tokens - data.rws = watchTokens([], (values) => { - Object.assign(data.tokens, values); - }); - - //return all data & computed vars & methods that we want to use elsewhere in this component - return { - getToken, - }; - }, -}; - -export default app; diff --git a/webOverlay/overlays/SC_URBar/components/roundURBar.js b/webOverlay/overlays/SC_URBar/components/roundURBar.js deleted file mode 100644 index ebb90e8a..00000000 --- a/webOverlay/overlays/SC_URBar/components/roundURBar.js +++ /dev/null @@ -1,389 +0,0 @@ -//=======USER CONFIGURATION -const SCRoundURBarSettings = { - //hit colors, css color value - hitColors: { - hit300: '#add8e6c9', - hit100: '#008000c9', - hit50: '#ffa500c9', - }, - //arc colors, css color value - arcColors: { - hit300: '#add8e6', - hit100: '#008000', - hit50: '#ffa500', - }, - //color of current avg hit marker - hitMarkerColor: '#00ffffc9', - canvas: { - width: 600, - height: 100, - }, - //arc settings - when changing you might need to also adjust canvas settings above - arc: { - //x-center of the arc - x: 300, - //y-center of the arc - y: 720, - //arc radius - radius: 680, - //how long should the arc be, 0.01 - 2 - length: 0.25, - //width of the arc line - width: 8, - }, - //How many hits should be displayed at the same time - amountOfHitErrors: 40, - // add #type (eg. /#circle ) at the end of overlay url to change or change it here. accepted values: 'rectangle' | 'circle' | 'ellipse' - hitElementType: getHitTypeFromUrlHash('ellipse'), - //should UR bar hide itself when not playing? true/false - hideWhenNotPlaying: false, - //per-hitType hit configuration - hitElements: { - rectangle: { - //width of hit element - width: 3, - //height of hit element - height: 30, - //how far away should the hit be drawn from arc, negative values inside, positive values outside - distanceFromArc: 0, - marker: { - //how far away should current avg hit marker arrow be drawn from arc, negative values inside, positive values outside - distanceFromArc: 5, - //size of avg hit marker arrow - size: 8, - }, - //don't touch (: - drawFn: () => canvasHelpers.arc.drawRectangleAroundArc, - }, - circle: { - width: 6, - distanceFromArc: 12, - marker: { - distanceFromArc: 22, - size: 8, - }, - drawFn: () => canvasHelpers.arc.drawCircleAroundArc, - }, - ellipse: { - width: 2.5, - height: 8, - distanceFromArc: 13, - marker: { - distanceFromArc: 22, - size: 8, - }, - drawFn: () => canvasHelpers.arc.drawEllipseAroundArc, - }, - }, -}; -//=======END OF USER CONFIGURATION - - - -const canvasHelpers = (() => { - function drawAroundArc(x, y, deg, yOffset, ctx, drawFn) { - ctx.save(); - ctx.translate(x, y); - ctx.rotate(degrees_to_radians(deg + 90)); - ctx.translate(0, yOffset); - drawFn(ctx); - ctx.restore(); - } - function drawRectangleAroundArc(x, y, w, h, deg, yOffset, fillStyle, ctx) { - drawAroundArc(x, y, deg, yOffset, ctx, () => drawRectangle(-1 * (w / 2), -1 * (h / 2), w, h, fillStyle, ctx)); - } - function drawCircleAroundArc(x, y, w, h, deg, yOffset, fillStyle, ctx) { - drawAroundArc(x, y, deg, yOffset, ctx, () => drawCircle(0, 0, w / 2, w, 0, 2 * Math.PI, fillStyle, ctx)); - } - function drawEllipseAroundArc(x, y, w, h, deg, yOffset, fillStyle, ctx) { - drawAroundArc(x, y, deg, yOffset, ctx, () => drawEllipse(0, 0, w, h, 0,0, 2 * Math.PI,0, fillStyle, ctx)); - } - function drawRectangle(x, y, w, h, fillStyle, ctx) { - ctx.fillStyle = fillStyle; - ctx.fillRect(x, y, w, h); - } - function drawCircle(x, y, radius, width, startAngle, endAngle, fillStyle, ctx) { - ctx.beginPath(); - ctx.strokeStyle = fillStyle; - ctx.lineWidth = width; - ctx.arc(x, y, radius, startAngle, endAngle, false); - ctx.stroke(); - } - function drawEllipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,lineWidth,fillStyle,ctx){ - startAngle = startAngle * Math.PI; - endAngle = endAngle * Math.PI; - ctx.beginPath(); - ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, false); - ctx.lineWidth = lineWidth; - ctx.fillStyle = fillStyle; - ctx.fill(); - } - function drawArc(x, y, startAngle, endAngle, radius, strokeStyle, lineWidth, ctx) { - startAngle = startAngle * Math.PI; - endAngle = endAngle * Math.PI; - ctx.beginPath(); - ctx.arc(x, y, radius, startAngle, endAngle, false); - ctx.lineWidth = lineWidth; - ctx.strokeStyle = strokeStyle; - ctx.stroke(); - } - function drawArrowAroundArc(x, y, deg, yOffset, fillStyle, p1, p2, size, ctx) { - drawAroundArc(x, y, deg, yOffset, ctx, (ctx) => { - var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x); - var hyp = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y)); - - ctx.save(); - ctx.translate(p1.x, p1.y); - ctx.rotate(angle); - - // // line - // ctx.beginPath(); - // ctx.moveTo(0, 0); - // ctx.lineTo(hyp - size, 0); - // ctx.stroke(); - - // triangle - ctx.fillStyle = fillStyle; - ctx.beginPath(); - ctx.lineTo(hyp - size, size); - ctx.lineTo(hyp, 0); - ctx.lineTo(hyp - size, -size); - ctx.fill(); - - ctx.restore(); - }); - } - function clearCanvas(canvas, context) { - context.save(); - context.setTransform(1, 0, 0, 1, 0, 0); - context.clearRect(0, 0, canvas.width, canvas.height); - context.restore(); - } - function degrees_to_radians(degrees) { - return (degrees * Math.PI) / 180; - } - function radians_to_degrees(radians) { - return (radians * 180) / Math.PI; - } - - return { - arc: { - drawArc, - drawAroundArc, - drawRectangleAroundArc, - drawCircleAroundArc, - drawArrowAroundArc, - drawEllipseAroundArc - }, - degrees_to_radians, - radians_to_degrees, - drawRectangle, - drawCircle, - drawEllipse, - clearCanvas, - }; -})(); - -function odToMs(od) { - return { - hit300: (159 - 12 * od) / 2, - hit100: (279 - 16 * od) / 2, - hit50: (399 - 20 * od) / 2, - }; -} - -function scaleValue(value, from, to) { - var scale = (to[1] - to[0]) / (from[1] - from[0]); - var capped = Math.min(from[1], Math.max(from[0], value)) - from[0]; - return capped * scale + to[0]; -} - -function movingAverage(windowSize, values) { - if (!(windowSize > 0)) { - throw new Error('windowSize must be positive'); - } - if (!(values != null && values.length)) { - throw new Error('invalid array of values'); - } - let sum = 0.0; - const results = []; - for (let i = 0; i < values.length; i++) { - const val = values[i]; - sum += val; - if (i >= windowSize) { - sum -= values[i - windowSize]; - } - results.push(sum / Math.min(i + 1, windowSize)); - } - return results; -} - -function getHitTypeFromUrlHash(fallbackValue){ - const hash = (window.location.hash || '').toLowerCase(); - return ['#rectangle', '#circle', '#ellipse'].indexOf(hash)>-1 ? hash.substr(1) : fallbackValue; -} - -const roundurbar = { - name: 'roundurbar', - template: ` -
- - - -
- `, - setup(props, context) { - const data = Vue.reactive({ - tokens: { hitErrors: '', unstableRate: '', mOD: '' }, - rws: {}, - }); - data.rws = watchTokens(['hitErrors', 'unstableRate', 'mOD'], (values) => Object.assign(data.tokens, values)); - const isPlayingOrWatching = Vue.computed(() => _IsInStatus(data.rws, data.tokens, [window.overlay.osuStatus.Playing, window.overlay.osuStatus.Watching])); - const settings = SCRoundURBarSettings; - - //some calc - const arcStart = 1.5 - settings.arc.length / 2; - const arcEnd = 1.5 + settings.arc.length / 2; - const arcDiff = arcEnd - arcStart; - const rectDegOffset = -canvasHelpers.radians_to_degrees(arcDiff) * 1.572 + 90; - const x = settings.arc.x; - const y = settings.arc.y; - const hitSettings = settings.hitElements[settings.hitElementType]; - let hitsContext, barContext, AvgHitsArrowContext, arrowInterval, hitMsWindows=odToMs(1); - - let arrowAvg = 0; - const drawHitsArrow = () => { - canvasHelpers.clearCanvas(canvasAvgHitsArrowRef.value, AvgHitsArrowContext); - if (!data.tokens.hitErrors || data.tokens.hitErrors.length === 0) { - return; - } - - let avgErrorHits = data.tokens.hitErrors.slice(Math.max(data.tokens.hitErrors.length - 10, 0)); - avgErrorHits = movingAverage(2, avgErrorHits); - for (var i = 0; i < avgErrorHits.length; i++) { - arrowAvg = arrowAvg * 0.95 + avgErrorHits[i] * 0.05; - } - canvasHelpers.arc.drawArrowAroundArc( - x, - y, - getDegForHit(arrowAvg), - settings.arc.radius + hitSettings.marker.distanceFromArc, - settings.hitMarkerColor, - { x: 0, y: 5 }, - { x: 0, y: 0 }, - hitSettings.marker.size, - AvgHitsArrowContext - ); - }; - - //canvas dom element refs - const canvasBarRef = Vue.ref(null); - const canvasHitsRef = Vue.ref(null); - const canvasAvgHitsArrowRef = Vue.ref(null); - - Vue.onMounted(() => { - barContext = canvasBarRef.value.getContext('2d'); - hitsContext = canvasHitsRef.value.getContext('2d'); - AvgHitsArrowContext = canvasAvgHitsArrowRef.value.getContext('2d'); - arrowInterval = setInterval(drawHitsArrow, 33); - }); - - const getColorForHit = (hit) => { - let abs = Math.abs(hit); - if (abs <= hitMsWindows.hit300) return settings.hitColors.hit300; - if (abs <= hitMsWindows.hit100) return settings.hitColors.hit100; - return settings.hitColors.hit50; - } - const getDegForHit = (hit) => { - return ( - rectDegOffset + - canvasHelpers.radians_to_degrees( - scaleValue(hit.clamp(-hitMsWindows.hit50, hitMsWindows.hit50), [-hitMsWindows.hit50, hitMsWindows.hit50], [0, arcDiff * 3.142]) - ) - ); - }; - - //draw hit elements around arc circumference - const drawShapeFn = hitSettings.drawFn() - const drawHits = (hits, height = null) => { - hits = hits || []; - height = height || hitSettings.height; - hits.forEach((hitError) => { - drawShapeFn( - x, - y, - hitSettings.width, - height, - getDegForHit(hitError), - settings.arc.radius + hitSettings.distanceFromArc, - getColorForHit(hitError), - hitsContext - ); - }); - }; - - //Update arc whenever map OD value changes - Vue.watch( - () => data.tokens.mOD, - () => { - hitMsWindows = odToMs(data.tokens.mOD); - let arcTotal = Math.abs(arcStart - arcEnd); - - //radians taken on arc by each hit - let h300p = (hitMsWindows.hit300 / hitMsWindows.hit50) * arcTotal; - let h100p = ((hitMsWindows.hit100 - hitMsWindows.hit300) / hitMsWindows.hit50) * arcTotal; - let h50p = arcTotal - h300p - h100p; - - //draw arc sections - canvasHelpers.clearCanvas(canvasBarRef.value, barContext); - const drawArc = canvasHelpers.arc.drawArc; - const radius = settings.arc.radius; - const arcColors = settings.arcColors; - const arcWidth = settings.arc.width; - - let newArcStart = arcStart + h50p / 2; - drawArc(x, y, arcStart, newArcStart, radius, arcColors.hit50, arcWidth, barContext); - - let newArcEnd = newArcStart + h100p / 2; - drawArc(x, y, newArcStart, newArcEnd, radius, arcColors.hit100, arcWidth, barContext); - newArcStart = newArcEnd; - - newArcEnd = newArcStart + h300p; - drawArc(x, y, newArcStart, newArcEnd, radius, arcColors.hit300, arcWidth, barContext); - newArcStart = newArcEnd; - - newArcEnd = newArcStart + h100p / 2; - drawArc(x, y, newArcStart, newArcEnd, radius, arcColors.hit100, arcWidth, barContext); - newArcStart = newArcEnd; - - newArcEnd = newArcStart + h50p / 2; - drawArc(x, y, newArcStart, newArcEnd, radius, arcColors.hit50, arcWidth, barContext); - newArcStart = newArcEnd; - - canvasHelpers.clearCanvas(canvasHitsRef.value, hitsContext); - drawHits([0, -hitMsWindows.hit50, hitMsWindows.hit50, -hitMsWindows.hit100, hitMsWindows.hit100, -hitMsWindows.hit300, hitMsWindows.hit300]); - } - ); - - //Update drawn hitErrors whenever these change - Vue.watch( - () => data.tokens.hitErrors, - () => { - canvasHelpers.clearCanvas(canvasHitsRef.value, hitsContext); - if (!data.tokens.hitErrors || !(x && y)) return; - drawHits(data.tokens.hitErrors.slice(Math.max(data.tokens.hitErrors.length - settings.amountOfHitErrors, 0))); - } - ); - - return { - canvasBarRef, - canvasHitsRef, - canvasAvgHitsArrowRef, - width: settings.canvas.width, - height: settings.canvas.height, - show: Vue.computed(() => (settings.hideWhenNotPlaying ? isPlayingOrWatching.value : true)), - }; - }, -}; - -export default roundurbar; diff --git a/webOverlay/overlays/SC_URBar/index.html b/webOverlay/overlays/SC_URBar/index.html deleted file mode 100644 index f64e6c6d..00000000 --- a/webOverlay/overlays/SC_URBar/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - SC UR Bar - - - - - - - - - - - -
- -
- - - diff --git a/webOverlay/overlays/SC_URBar/main.css b/webOverlay/overlays/SC_URBar/main.css deleted file mode 100644 index be6917ab..00000000 --- a/webOverlay/overlays/SC_URBar/main.css +++ /dev/null @@ -1,17 +0,0 @@ -body { - margin: 0; -} -* { - color: black; - font-family: 'Comfortaa'; -} -.large { - font-size: 35px; -} -.hide { - display: none; -} - -[v-cloak] { - display: none; - } \ No newline at end of file diff --git a/webOverlay/overlays/SC_URBar/main.js b/webOverlay/overlays/SC_URBar/main.js deleted file mode 100644 index ec61c247..00000000 --- a/webOverlay/overlays/SC_URBar/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#app'); diff --git a/webOverlay/overlays/SC_bg/README - DON'T EDIT THIS OVERLAY.txt b/webOverlay/overlays/SC_bg/README - DON'T EDIT THIS OVERLAY.txt deleted file mode 100644 index 0db05a7d..00000000 --- a/webOverlay/overlays/SC_bg/README - DON'T EDIT THIS OVERLAY.txt +++ /dev/null @@ -1,5 +0,0 @@ -================= -Any edits to files in Example overlays provided with StreamCompanion WILL BE OVERWRITTEN or even removed in future StreamCompanion update. -================= - -The overlay itself can be modified as you want, just not in this folder. Copy everything to a separate folder one directory up, and work from there. \ No newline at end of file diff --git a/webOverlay/overlays/SC_bg/components/App.js b/webOverlay/overlays/SC_bg/components/App.js deleted file mode 100644 index 599fe1e9..00000000 --- a/webOverlay/overlays/SC_bg/components/App.js +++ /dev/null @@ -1,27 +0,0 @@ -import background from './Background.js'; - -const app = { - name: 'App', - components: { - Background: background, - }, - - setup(props, context) { - const data = Vue.reactive({ - tokens: {}, - rws: {}, - settings: {}, - }); - - const getToken = (tokenName, decimalPlaces) => _GetToken(data.rws, data.tokens, tokenName, decimalPlaces); - data.rws = watchTokens([], (values) => { - Object.assign(data.tokens, values); - }); - - return { - getToken, - data, - }; - } -}; -export default app; diff --git a/webOverlay/overlays/SC_bg/components/Background.js b/webOverlay/overlays/SC_bg/components/Background.js deleted file mode 100644 index df534108..00000000 --- a/webOverlay/overlays/SC_bg/components/Background.js +++ /dev/null @@ -1,55 +0,0 @@ -const background = { - name: 'backgroundContainer', - template: ` -
- -
- `, - props: { - dimcolor: { default: '#00000000' }, - }, - setup(props, context) { - const data = Vue.reactive({ - tokens: { backgroundImageLocation: '', md5: '', mapsetid: '' }, - backgroundUrl: '', - backgroundId: Number.MIN_SAFE_INTEGER, - rws: {}, - }); - const backgroundDiv = Vue.ref(null); - const boxStyle = Vue.computed(() => `background-image: linear-gradient(to bottom, ${props.dimcolor}, ${props.dimcolor}),url(${data.backgroundUrl});`); - - Vue.watch( - () => data.tokens.backgroundImageLocation, - () => { - let currId = (data.backgroundId += 1); - - let width = 1920, - height = 1080; - if (backgroundDiv.value) { - if (backgroundDiv.value.scrollWidth > 10) width = backgroundDiv.value.scrollWidth; - if (backgroundDiv.value.scrollHeight > 10) height = backgroundDiv.value.scrollHeight; - } - - preloadImage( - `${window.overlay.config.getUrl()}/backgroundImage?width=${width}&height=${height}&mapset=${data.tokens.mapsetid}&dummyData=${encodeURIComponent( - data.tokens.md5 - )}&crop=1`, - currId, - (url, id) => { - if (data.backgroundId !== id) return; - data.backgroundUrl = url; - } - ); - } - ); - - data.rws = watchTokens(['backgroundImageLocation', 'md5', 'mapsetid'], (values) => Object.assign(data.tokens, values)); - - return { - backgroundDiv, - boxStyle, - }; - }, -}; - -export default background; diff --git a/webOverlay/overlays/SC_bg/index.html b/webOverlay/overlays/SC_bg/index.html deleted file mode 100644 index 61fd7b5c..00000000 --- a/webOverlay/overlays/SC_bg/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - Background image - - - - - - - - - - - -
- - -
- - - diff --git a/webOverlay/overlays/SC_bg/main.css b/webOverlay/overlays/SC_bg/main.css deleted file mode 100644 index 36481f9c..00000000 --- a/webOverlay/overlays/SC_bg/main.css +++ /dev/null @@ -1,47 +0,0 @@ -:root { - --animation-speed: 1.7s; -} - -* { - padding: 0px; - margin: 0px; - font-family: comfortaa; -} - -.clipPathAnimation { - transition: clip-path 0.3s; -} - -.box { - height: 100%; - background-repeat: no-repeat; - background-position: center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - transition: padding var(--animation-speed) ease; - overflow-y: hidden; -} - -.inner { - display: flex; - flex-direction: column; - filter: drop-shadow(0px 0px 5px #000a); - width: 100%; - margin-top: 10px; - z-index: 50; -} - -.app { - height: 100vh; -} - -[v-cloak] { - display: none; -} - -.hide { - display: none; - z-index: -1; -} diff --git a/webOverlay/overlays/SC_bg/main.js b/webOverlay/overlays/SC_bg/main.js deleted file mode 100644 index ec61c247..00000000 --- a/webOverlay/overlays/SC_bg/main.js +++ /dev/null @@ -1,7 +0,0 @@ -import App from './components/App.js'; - -let app = Vue.createApp({ - ...App, -}); - -app.mount('#app'); diff --git a/webOverlay/overlays/static/README.txt b/webOverlay/overlays/static/README.txt deleted file mode 100644 index 413110b3..00000000 --- a/webOverlay/overlays/static/README.txt +++ /dev/null @@ -1,5 +0,0 @@ -Instructions: -download zip of this repository: https://github.com/l3lackShark/static -unpack it in this folder -run convert.bat ONCE -navigate to http://localhost:20727/ to see additional overlays ready to use diff --git a/webOverlay/overlays/static/convert.bat b/webOverlay/overlays/static/convert.bat deleted file mode 100644 index f7e0a7cb..00000000 --- a/webOverlay/overlays/static/convert.bat +++ /dev/null @@ -1,5 +0,0 @@ -fart.exe -r -c -C -- .\*.html "reconnecting-websocket.min.js\x22>" "reconnecting-websocket.min.js\x22>\n" -fart.exe -r -c -C -- .\*.js "new ReconnectingWebSocket" "CreateProxiedReconnectingWebSocket" -fart.exe -r -c -C -- .\*.js "JSON.parse(event.data)" "event.data" -fart.exe -r -c -C -- .\*.js "24050" "${window.overlay.config.port}" -fart.exe -r -c -C -- .\*.js "127.0.0.1" "${window.overlay.config.host}" \ No newline at end of file diff --git a/webOverlay/overlays/static/fart.exe b/webOverlay/overlays/static/fart.exe deleted file mode 100644 index 075563cd..00000000 Binary files a/webOverlay/overlays/static/fart.exe and /dev/null differ diff --git a/webOverlay/staticLoader.html b/webOverlay/staticLoader.html deleted file mode 100644 index d1e0eb89..00000000 --- a/webOverlay/staticLoader.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - - - StreamCompanion web overlay static loader - - - - - - - - - \ No newline at end of file