Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

A lot of work, added some audio support and bot tags

Browse source
This commit is contained in:
MathMan05 2024-06-19 13:40:05 -05:00
parent 921dbcf0dd
commit 457b3dde6c
10 changed files with 167 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.js
View file

@ -12,6 +12,7 @@ let debugging=true;
app.use('/', (req, res) => { app.use('/', (req, res) => {
if(debugging&&req.path.startsWith("/service.js")){ if(debugging&&req.path.startsWith("/service.js")){
res.send("console.log(\"Hi :3\");"); res.send("console.log(\"Hi :3\");");
return;
} }
if(fs.existsSync(`${__dirname}/webpage${req.path}`)) { if(fs.existsSync(`${__dirname}/webpage${req.path}`)) {
res.sendFile(`./webpage${req.path}`, {root: __dirname}); res.sendFile(`./webpage${req.path}`, {root: __dirname});

83
webpage/audio.js Normal file
View file

@ -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();

6
webpage/index.html
View file

@ -1,7 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="/style.css" rel="stylesheet" type="text/css" /> <link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/> <link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
@ -21,6 +22,7 @@
<script src="/localuser.js"></script> <script src="/localuser.js"></script>
<script src="/markdown.js"></script> <script src="/markdown.js"></script>
<script src="/fullscreen.js"></script> <script src="/fullscreen.js"></script>
<script src="/audio.js"></script>
<div id="loading" class="loading"><div id="centerdiv"><img src="/bitmap.svg" width="1in" height="1in"><h1>Jank Client is loading</h1><h2>This shouldn't take long</h2></div></div> <div id="loading" class="loading"><div id="centerdiv"><img src="/bitmap.svg" width="1in" height="1in"><h1>Jank Client is loading</h1><h2>This shouldn't take long</h2></div></div>
<table id="page" cellspacing="0" cellpadding="0"> <table id="page" cellspacing="0" cellpadding="0">
@ -32,7 +34,7 @@
<h2 id="serverName">Server Name</h2> <h2 id="serverName">Server Name</h2>
</td> </td>
<td colspan="2" class="servertd servernamediv"> <td colspan="2" class="servertd servernamediv">
<h2 id="channelname">Channel</h2> <span id="mobileback" hidden=true></span><span id="channelname">Channel</span>
</td> </td>
</tr> </tr>

13
webpage/index.js
View file

@ -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"); const messages=document.getElementById("messages");

2
webpage/localuser.js
View file

@ -395,7 +395,7 @@ class localuser{
var reader = new FileReader(); var reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
console.log(this.headers); console.log(this.headers);
reader.onload = () =>{ reader.onload = ()=>{
fetch(info.api.toString()+"/v9/users/@me",{ fetch(info.api.toString()+"/v9/users/@me",{
method:"PATCH", method:"PATCH",
headers:this.headers, headers:this.headers,

1
webpage/login.html
View file

@ -1,5 +1,6 @@
<body> <body>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/style.css" rel="stylesheet" type="text/css" /> <link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/> <link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
</head> </head>

5
webpage/login.js
View file

@ -1,3 +1,4 @@
const mobile=isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
function setTheme(){ function setTheme(){
const name=localStorage.getItem("theme"); const name=localStorage.getItem("theme");
if(!name){ if(!name){
@ -88,8 +89,8 @@ const instancein=document.getElementById("instancein");
let timeout=0; let timeout=0;
async function checkInstance(e){ async function checkInstance(e){
try{ try{
verify.innerText="Checking Instance" verify.innerText="Checking Instance";
instanceinfo=await setInstance(instancein.value) instanceinfo=await setInstance(instancein.value);
localStorage.setItem("instanceinfo",JSON.stringify(instanceinfo)); localStorage.setItem("instanceinfo",JSON.stringify(instanceinfo));
verify.innerText="Instance is all good" verify.innerText="Instance is all good"
if(checkInstance.alt){checkInstance.alt();} if(checkInstance.alt){checkInstance.alt();}

7
webpage/message.js
View file

@ -123,7 +123,12 @@ class cmessage{
username.innerText=this.author.username; username.innerText=this.author.username;
const userwrap=document.createElement("tr") const userwrap=document.createElement("tr")
userwrap.appendChild(username) 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"); const time=document.createElement("span");
time.innerText=" "+formatTime(new Date(this.timestamp)); time.innerText=" "+formatTime(new Date(this.timestamp));
time.classList.add("timestamp") time.classList.add("timestamp")

1
webpage/register.html
View file

@ -1,5 +1,6 @@
<body> <body>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/style.css" rel="stylesheet" type="text/css" /> <link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/> <link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
</head> </head>

66
webpage/style.css
View file

@ -8,12 +8,17 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.collapse{
width:0px !important;
overflow: hidden;
max-width: 0px !important;
}
#TOS{ #TOS{
width: fit-content !important; width: fit-content !important;
} }
.imgfit { .imgfit {
max-width: 80vw; max-width: 80vw;
max-height: 80vh; max-height: 80dvh;
width: auto; width: auto;
height: auto; height: auto;
} }
@ -157,12 +162,12 @@ h2 {
#neunence { #neunence {
vertical-align: top; vertical-align: top;
overflow: auto; overflow: auto;
height: 9vh; height: 9dvh;
} }
#servers { #servers {
vertical-align: top; vertical-align: top;
height: 100vh; height: 100dvh;
overflow-x: hidden; overflow-x: hidden;
} }
@ -192,7 +197,7 @@ img {
#page { #page {
height: 100%; height: 100%;
width: 100%; width: 100vw;
} }
.message { .message {
@ -232,7 +237,7 @@ p {
#channels { #channels {
background-color: var(--channels-bg); background-color: var(--channels-bg);
height: calc(100vh - .9in); height: calc(100dvh - .9in);
width: 2.5in; width: 2.5in;
overflow: auto; overflow: auto;
user-select: none; user-select: none;
@ -283,7 +288,7 @@ div {
font-size: 16px; font-size: 16px;
padding: 3px; padding: 3px;
border-radius: .25cm; border-radius: .25cm;
width: 100%; width: -webkit-fill-available;
height: .5in; height: .5in;
z-index: -100; z-index: -100;
} }
@ -426,7 +431,7 @@ p {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
height: calc(100vh - .1in - var(--servertd-height)); height: calc(100dvh - .1in - var(--servertd-height));
} }
.timestamp { .timestamp {
@ -598,8 +603,9 @@ textarea {
button { button {
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--textarea-bg); background-color: var(--message-bg-hover);
color: var(--primary-text); color: var(--primary-text);
border-color:var(--timestamp-color);
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
font-size: .45cm; font-size: .45cm;
@ -607,6 +613,7 @@ button {
border-width: 0px .00in .03in 0; border-width: 0px .00in .03in 0;
border-radius:.03in; border-radius:.03in;
margin: .02in .05in; margin: .02in .05in;
box-shadow: 0px 0px .03in var(--black);
} }
button:active{ button:active{
border-width: 0px; border-width: 0px;
@ -616,14 +623,17 @@ button:disabled{
border-width:0px; border-width:0px;
} }
button:disabled:hover{ 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 { button:hover {
background-color: var(--primary-bg); background-color: var(--primary-bg);
} }
input::file-selector-button { input::file-selector-button {
transition: background .1s ease-in-out; 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); color: var(--primary-text);
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
@ -637,8 +647,8 @@ input[type="file"] {
background:transparent; background:transparent;
} }
select{ select{
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--textarea-bg); background-color: var(--message-bg-hover);
color: var(--primary-text); color: var(--primary-text);
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
@ -646,7 +656,9 @@ select{
cursor: pointer; cursor: pointer;
border-width: 0px .00in .03in 0; border-width: 0px .00in .03in 0;
border-radius:.03in; border-radius:.03in;
border-color:var(--timestamp-color);
margin: .02in .05in; margin: .02in .05in;
box-shadow: 0px 0px .03in var(--black);
} }
#logindiv { #logindiv {
position: absolute; position: absolute;
@ -849,4 +861,34 @@ span {
font-size:.25in; font-size:.25in;
font-weight:bold; font-weight:bold;
text-shadow: .01in .01in .02in var(--black); 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;
} }