MVP Wallpaper Setter

scripts/scene.js

@@ -0,0 +1,169 @@
+let socket
+let socketStatus = false
+
+let jsonValid = (json) => {
+    try {
+        JSON.parse(json);
+        if (json == null) {
+            return false;
+        }
+    } catch (e) {
+        return false;
+    }
+    return true;
+}
+
+let setWallpaper = (path) => {
+    console.log(`Setting wallpaper to ${path}`)
+    let wallpaper = document.getElementById('wallpaper')
+    // wallpaper.src = path
+    wallpaper.style.backgroundImage = `url(${path})`
+}
+
+let dumpStorage = () => {
+    console.log('%cDumping Local Storage', 'color: #EBCB8B; font-family: monospace; font-size: 18px;')
+    console.log('  Member:' + localStorage.getItem('member'))
+    // console.log('  Token' + localStorage.getItem('token'))
+    console.log('  System:' + localStorage.getItem('systemId'))
+    console.log('  Socket:' + localStorage.getItem('socket'))
+    console.log('  Wallpapers:' + localStorage.getItem('wallpapers'))
+}
+
+let grabLatestFronter = () => {
+    let systemId = localStorage.getItem('systemId')
+    if (systemId != null) {
+        var xhr = new XMLHttpRequest()
+        xhr.withCredentials = true
+        xhr.addEventListener("readystatechange", function() {
+        if(this.readyState === 4) {
+            // console.log(this.responseText)
+            let fronter = JSON.parse(this.responseText).members[0].id
+            localStorage.setItem('member', fronter)
+            console.log(`%cFronter: ${fronter}`, 'color: #ECEFF4; font-family: monospace;')
+            pickWallpaper()
+        }
+        })
+        xhr.open("GET", "https://api.pluralkit.me/v2/systems/"+systemId+"/fronters")
+        xhr.send()
+    }else{
+        localStorage.setItem('member', 'null')
+    }
+}
+
+let pickWallpaper = () => {
+    let wallpapers = localStorage.getItem('wallpapers')
+    if (jsonValid(wallpapers)) {
+        wallpapers = JSON.parse(localStorage.getItem('wallpapers'))
+    } else {
+        wallpapers = []
+        console.log('%cWallpapers not found in Local Storage', 'color: #BF616A; font-size: 18px; font-family: monospace;')
+    }
+    // for (let index = wallpapers.length-1; index >= 0; index--) {
+    //     if (!wallpapers.includes(localStorage.getItem('member'))) {
+    //         wallpapers.splice(index, 1)
+    //     }
+    // }
+    let validWallpapers = []
+    wallpapers.forEach(wp => {
+        if (wp.includes(localStorage.getItem('member'))) {
+            validWallpapers.push(wp)
+        }
+    })
+    let wallpaper = "file:///" + validWallpapers[Math.floor(Math.random() * validWallpapers.length)]
+    if (validWallpapers.length == 0) {
+        wallpaper = "https://picsum.photos/3840/2160"
+    }
+    setWallpaper(wallpaper)
+}
+
+let loadSocket = () => {
+    console.log('%cLoading Socket', 'color: #ECEFF4; font-family: monospace;')
+    if (socket){
+        try {
+            socket.close()
+        } catch (error) {
+            console.log('%cSocket not found', 'color: #BF616A; font-size: 18px; font-family: monospace;')
+        }
+    }
+    socket = new WebSocket(localStorage.getItem('socket'))
+    socket.onopen = (e) => {
+        console.log('%cSocket Opened', 'color: #A3BE8C; font-size: 18px; font-family: serif;')
+        socketStatus = true
+    }
+    socket.onmessage = (e) => {
+        console.log('%cMessage Received', 'color: #ECEFF4; font-family: monospace;')
+
+        // e.data contains member ID
+        // console.dir(e)
+        localStorage.setItem('member', e.data)
+        pickWallpaper()
+
+        // Copilot-generated Code
+        // let data = JSON.parse(e.data)
+        // if (data.type === 'wallpaper') {
+        //     setWallpaper(data.path)
+        // }
+    }
+    socket.onclose = (e) => {
+        console.log('%cSocket Closed', 'color: #BF616A; font-size: 18px; font-family: serif;')
+        socketStatus = false
+        setTimeout(() => {
+            loadSocket()
+        }, 1200)
+    }
+    socket.onerror = (e) => {
+        console.log('%cSocket Error', 'color: #BF616A; font-size: 18px; font-family: monospace;')
+        console.dir(e)
+    }
+}
+
+window.wallpaperPropertyListener = {
+    applyUserProperties: function(properties) {
+        // Grab PKit token, System ID, and Socket URI
+        // if (properties.token) {
+        //     // config.token = properties.token.value
+        //     localStorage.setItem('token', properties.token.value)
+        // }
+        if (properties.systemid) {
+            // config.systemId = properties.systemid.value
+            localStorage.setItem('systemId', properties.systemid.value)
+        }
+        if (properties.uri) {
+            // config.socket = properties.uri.value
+            localStorage.setItem('socket', properties.uri.value)
+        }
+        dumpStorage()
+        // Reload Socket
+        if (socketStatus) {
+            socketStatus = false
+            socket.close()
+        }
+        loadSocket()
+    },
+    userDirectoryFilesAddedOrChanged: function(propertyName, changedFiles) {
+        // Do something with the list of added files here
+        // console.dir(propertyName)
+        console.dir(changedFiles) // Array of filepaths added
+        let wallpapers = localStorage.getItem('wallpapers')
+        if (jsonValid(wallpapers)) {
+            wallpapers = JSON.parse(localStorage.getItem('wallpapers'))
+        } else {
+            wallpapers = []
+            console.log('%cWallpapers not found in Local Storage', 'color: #BF616A; font-size: 18px; font-family: monospace;')
+        }
+        changedFiles.forEach((file) => {
+            if (!wallpapers.includes(file)) {
+                wallpapers.push(file)
+            }
+        })
+        localStorage.setItem('wallpapers', JSON.stringify(wallpapers))
+    },
+}
+
+window.onload = () => {
+    console.log("%cPage Loaded.", "background: #2E3440; color: #A3BE8C; font-size: 24px;")
+    // Set default member
+    dumpStorage()
+    grabLatestFronter()
+    loadSocket()
+}