From 457b3dde6c087e2187d8d29da6e25d237633002d Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Wed, 19 Jun 2024 13:40:05 -0500 Subject: [PATCH] A lot of work, added some audio support and bot tags --- index.js | 1 + webpage/audio.js | 83 +++++++++++++++++++++++++++++++++++++++++++ webpage/index.html | 6 ++-- webpage/index.js | 13 +++++++ webpage/localuser.js | 2 +- webpage/login.html | 1 + webpage/login.js | 5 +-- webpage/message.js | 7 +++- webpage/register.html | 1 + webpage/style.css | 66 +++++++++++++++++++++++++++------- 10 files changed, 167 insertions(+), 18 deletions(-) create mode 100644 webpage/audio.js diff --git a/index.js b/index.js index 6b1c719..d215953 100755 --- a/index.js +++ b/index.js @@ -12,6 +12,7 @@ let debugging=true; app.use('/', (req, res) => { if(debugging&&req.path.startsWith("/service.js")){ res.send("console.log(\"Hi :3\");"); + return; } if(fs.existsSync(`${__dirname}/webpage${req.path}`)) { res.sendFile(`./webpage${req.path}`, {root: __dirname}); diff --git a/webpage/audio.js b/webpage/audio.js new file mode 100644 index 0000000..374fd87 --- /dev/null +++ b/webpage/audio.js @@ -0,0 +1,83 @@ +class voice{ + constructor(wave,freq){ + this.audioCtx = new (window.AudioContext || window.webkitAudioContext)(); + this.info={wave:wave,freq:freq} + this.playing=false; + this.myArrayBuffer=this.audioCtx.createBuffer( + 1, + this.audioCtx.sampleRate, + this.audioCtx.sampleRate, + ); + this.buffer=this.myArrayBuffer.getChannelData(0); + this.source = this.audioCtx.createBufferSource(); + this.source.buffer = this.myArrayBuffer; + this.source.loop=true; + this.source.start(); + this.updateWave(freq); + } + get wave(){ + return this.info.wave; + } + get freq(){ + return this.info.freq; + } + set wave(wave){ + this.info.wave=wave; + this.updateWave() + } + set freq(freq){ + this.info.freq=freq; + this.updateWave() + } + updateWave(){ + const func=this.waveFucnion(); + for (let i = 0; i < this.buffer.length; i++) { + this.buffer[i]=func(i/this.audioCtx.sampleRate,this.freq); + } + + } + waveFucnion(){ + switch(this.wave){ + case "sin": + return (t,freq)=>{ + return Math.sin(t*Math.PI*2*freq); + } + case "triangle": + return (t,freq)=>{ + return Math.abs((4*t*freq)%4-2)-1; + } + case "sawtooth": + return (t,freq)=>{ + return ((t*freq)%1)*2-1; + } + case "square": + return (t,freq)=>{ + return (t*freq)%2<1?1:-1; + } + case "white": + return (t,freq)=>{ + return Math.random()*2-1; + } + case "noise": + return (t,freq)=>{ + return 0; + } + } + } + play(){ + if(this.playing){ + return; + } + this.source.connect(this.audioCtx.destination); + this.playing=true; + + } + stop(){ + if(this.playing){ + this.source.disconnect(); + this.playing=false; + } + } +} +const audio=new voice("triangle",101); +//audio.play(); diff --git a/webpage/index.html b/webpage/index.html index e5cc364..f836f67 100644 --- a/webpage/index.html +++ b/webpage/index.html @@ -1,7 +1,8 @@ - + + @@ -21,6 +22,7 @@ +

Jank Client is loading

This shouldn't take long

@@ -32,7 +34,7 @@

Server Name

diff --git a/webpage/index.js b/webpage/index.js index 9787740..138b156 100644 --- a/webpage/index.js +++ b/webpage/index.js @@ -497,6 +497,19 @@ document.getElementById("messagecontainer").addEventListener("scroll",(e)=>{ } // }) +if(mobile){ + document.getElementById("channelw").onclick=function(){ + document.getElementById("channels").parentNode.classList.add("collapse"); + document.getElementById("servertd").classList.add("collapse"); + document.getElementById("servers").classList.add("collapse"); + } + document.getElementById("mobileback").innerText="#"; + document.getElementById("mobileback").onclick=function(){ + document.getElementById("channels").parentNode.classList.remove("collapse"); + document.getElementById("servertd").classList.remove("collapse"); + document.getElementById("servers").classList.remove("collapse"); + } +} /* { const messages=document.getElementById("messages"); diff --git a/webpage/localuser.js b/webpage/localuser.js index e917b9f..c3c3c4b 100644 --- a/webpage/localuser.js +++ b/webpage/localuser.js @@ -395,7 +395,7 @@ class localuser{ var reader = new FileReader(); reader.readAsDataURL(file); console.log(this.headers); - reader.onload = () =>{ + reader.onload = ()=>{ fetch(info.api.toString()+"/v9/users/@me",{ method:"PATCH", headers:this.headers, diff --git a/webpage/login.html b/webpage/login.html index 7ff0da1..4bf43ea 100644 --- a/webpage/login.html +++ b/webpage/login.html @@ -1,5 +1,6 @@ + diff --git a/webpage/login.js b/webpage/login.js index 65d3838..c8517af 100644 --- a/webpage/login.js +++ b/webpage/login.js @@ -1,3 +1,4 @@ +const mobile=isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); function setTheme(){ const name=localStorage.getItem("theme"); if(!name){ @@ -88,8 +89,8 @@ const instancein=document.getElementById("instancein"); let timeout=0; async function checkInstance(e){ try{ - verify.innerText="Checking Instance" - instanceinfo=await setInstance(instancein.value) + verify.innerText="Checking Instance"; + instanceinfo=await setInstance(instancein.value); localStorage.setItem("instanceinfo",JSON.stringify(instanceinfo)); verify.innerText="Instance is all good" if(checkInstance.alt){checkInstance.alt();} diff --git a/webpage/message.js b/webpage/message.js index 98bbb6a..cd0bf5a 100644 --- a/webpage/message.js +++ b/webpage/message.js @@ -123,7 +123,12 @@ class cmessage{ username.innerText=this.author.username; const userwrap=document.createElement("tr") userwrap.appendChild(username) - + if(this.author.bot){ + const username=document.createElement("span"); + username.classList.add("bot") + username.innerText="BOT"; + userwrap.appendChild(username) + } const time=document.createElement("span"); time.innerText=" "+formatTime(new Date(this.timestamp)); time.classList.add("timestamp") diff --git a/webpage/register.html b/webpage/register.html index 9a85662..74c4643 100644 --- a/webpage/register.html +++ b/webpage/register.html @@ -1,5 +1,6 @@ + diff --git a/webpage/style.css b/webpage/style.css index da26f18..1c1c907 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -8,12 +8,17 @@ body { margin: 0; padding: 0; } +.collapse{ + width:0px !important; + overflow: hidden; + max-width: 0px !important; +} #TOS{ width: fit-content !important; } .imgfit { max-width: 80vw; - max-height: 80vh; + max-height: 80dvh; width: auto; height: auto; } @@ -157,12 +162,12 @@ h2 { #neunence { vertical-align: top; overflow: auto; - height: 9vh; + height: 9dvh; } #servers { vertical-align: top; - height: 100vh; + height: 100dvh; overflow-x: hidden; } @@ -192,7 +197,7 @@ img { #page { height: 100%; - width: 100%; + width: 100vw; } .message { @@ -232,7 +237,7 @@ p { #channels { background-color: var(--channels-bg); - height: calc(100vh - .9in); + height: calc(100dvh - .9in); width: 2.5in; overflow: auto; user-select: none; @@ -283,7 +288,7 @@ div { font-size: 16px; padding: 3px; border-radius: .25cm; - width: 100%; + width: -webkit-fill-available; height: .5in; z-index: -100; } @@ -426,7 +431,7 @@ p { width: 100%; display: inline-block; grid-template-rows: auto 1fr; - height: calc(100vh - .1in - var(--servertd-height)); + height: calc(100dvh - .1in - var(--servertd-height)); } .timestamp { @@ -598,8 +603,9 @@ textarea { button { transition: background .1s ease-in-out; - background-color: var(--textarea-bg); + background-color: var(--message-bg-hover); color: var(--primary-text); + border-color:var(--timestamp-color); font-weight: bold; text-align: left; font-size: .45cm; @@ -607,6 +613,7 @@ button { border-width: 0px .00in .03in 0; border-radius:.03in; margin: .02in .05in; + box-shadow: 0px 0px .03in var(--black); } button:active{ border-width: 0px; @@ -616,14 +623,17 @@ button:disabled{ border-width:0px; } button:disabled:hover{ - background-color: var(--textarea-bg); + background-color: var(--message-bg-hover); + border-color:var(--timestamp-color); + color: var(--primary-text); } button:hover { background-color: var(--primary-bg); } input::file-selector-button { transition: background .1s ease-in-out; - background-color: var(--textarea-bg); + background-color: var(--message-bg-hover); + border-color:var(--timestamp-color); color: var(--primary-text); font-weight: bold; text-align: left; @@ -637,8 +647,8 @@ input[type="file"] { background:transparent; } select{ - transition: background .1s ease-in-out; - background-color: var(--textarea-bg); + transition: background .1s ease-in-out; + background-color: var(--message-bg-hover); color: var(--primary-text); font-weight: bold; text-align: left; @@ -646,7 +656,9 @@ select{ cursor: pointer; border-width: 0px .00in .03in 0; border-radius:.03in; + border-color:var(--timestamp-color); margin: .02in .05in; + box-shadow: 0px 0px .03in var(--black); } #logindiv { position: absolute; @@ -849,4 +861,34 @@ span { font-size:.25in; font-weight:bold; text-shadow: .01in .01in .02in var(--black); +} +#channelname{ + font-size:.2in; + font-weight:bold; +} +#mobileback{ + /* display:inline-block; */ + font-size:.3in; + font-weight:bold; + padding:.025in; + background:#06003f96; + width:.25in; + height:.25in; + text-align: center; + margin-right:.1in; + margin-left:.05in; + border-radius:.05in; + border:solid; + border-color:black; + border-width:.04in; +} +.bot{ + background:steelblue; + padding:.02in .05in; + border-radius:.05in; + border:solid black; + border-width:.03in; + font-weight:bold; + font-size:.125in; + margin-left:.025in; } \ No newline at end of file
-

Channel

+ Channel