A lot of work, added some audio support and bot tags
This commit is contained in:
MathMan05
parent
921dbcf0dd
commit
457b3dde6c
10 changed files with 167 additions and 18 deletions
83
webpage/audio.js
Normal file
83
webpage/audio.js
Normal 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();
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
<script src="/localuser.js"></script>
|
||||
<script src="/markdown.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>
|
||||
<table id="page" cellspacing="0" cellpadding="0">
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
<h2 id="serverName">Server Name</h2>
|
||||
</td>
|
||||
<td colspan="2" class="servertd servernamediv">
|
||||
<h2 id="channelname">Channel</h2>
|
||||
<span id="mobileback" hidden=true></span><span id="channelname">Channel</span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<body>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -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();}
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<body>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue