From e6b6caf619b0c8d6400e7c61698970f4634e19a5 Mon Sep 17 00:00:00 2001 From: amelia Date: Thu, 12 May 2022 12:30:24 -0500 Subject: updated some designs & fixed a piece --- index.html | 221 +++++++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 172 insertions(+), 49 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 49df165..e03ffec 100644 --- a/index.html +++ b/index.html @@ -80,6 +80,79 @@ input { box-sizing: border-box; width: 100% } + + +/* please note, i didn't make this button, i dont do frontend */ +button{ + padding: 0.6em 2em; + border: none; + outline: none; + color: rgb(255, 255, 255); + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +button:before { + content: ""; + background: linear-gradient( + 45deg, + #ff0000, + #ff7300, + #fffb00, + #48ff00, + #00ffd5, + #002bff, + #7a00ff, + #ff00c8, + #ff0000 + ); + position: absolute; + top: -2px; + left: -2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + -webkit-filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing-button-85 20s linear infinite; + transition: opacity 0.3s ease-in-out; + border-radius: 10px; +} + +@keyframes glowing-button-85 { + 0% { + background-position: 0 0; + } + 50% { + background-position: 400% 0; + } + 100% { + background-position: 0 0; + } +} + +button:after { + z-index: -1; + content: ""; + position: absolute; + width: 100%; + height: 100%; + background: #222; + left: 0; + top: 0; + border-radius: 10px; +} + +/* Parent background */ + + @@ -97,7 +170,7 @@ input { [{},{},{},{},{},{},{},{},{}], [{},{},{},{},{},{},{},{},{}], [{},{},{},{},{},{},{},{},{}], - [{},{},{},{},{},{},{},{},{}], + [{},{},{'piece':'bridger','icon':'br+','color':'black','loc':{'z':0}},{},{},{'piece':'rook','icon':'r','color':'black','loc':{'z':0}},{},{},{}], ] //board //boardUnder @@ -130,6 +203,18 @@ input { //boardOver var peer = new Peer(); var conn = null +peer.color=null +//popup func +document.write('') + function popup(msg,timeUp){ + let element = document.getElementById('modal') + element.innerHTML=msg + + element.style.display='block' + setTimeout(function() { element.style.display='none' }, timeUp); + } + + //popup func function ihate(con,hops){ if(con.peerConnection.connectionState=='connected'){ return(true) @@ -145,27 +230,36 @@ function lonelyMf(){ //mf has a negative snapscore let elem = document.getElementsByClassName('join-online')[0] elem.style.display='none' + document.getElementById("main").style.webkitFilter = "blur(0px)"; + document.getElementById("bblock").style.display='none'; + peer.color='a' //he probably covers his mouth when he laughs //doesnt even use ctrl-shift-a } -function peerCon(id){ +function peerCon(id,again = true){ conn = peer.connect(id) console.log(conn) + popup('attempting connection '+'(testing the water)'.fontsize('1.5px'),5000) setTimeout(() => { if(conn.peerConnection.connectionState!='connected'){ - + popup('

connection failed!

',2000) console.log(conn.peerConnection.connectionState) let elem = document.getElementsByClassName('join-online')[0] - elem.innerHTML='your key is
'+peer.id+'<\/b>
or, enter someone else\'s

' + elem.innerHTML='your key is
'+peer.id+'<\/b>
or, enter someone else\'s

' } else { + if(peer.color==null){ + peer.color='white' + } let elem = document.getElementsByClassName('join-online')[0] + document.getElementById("main").style.webkitFilter = "blur(0px)"; elem.style.display='none' - conn.send(JSON.stringify({'type':'con','id':peer.id})) + document.getElementById("bblock").style.display='none'; + conn.send(JSON.stringify({'type':'con','id':peer.id,'color':'black','s':again})) } }, 5000); } @@ -176,7 +270,7 @@ function setb(m,o,u){ loadb() } peer.on('connection', function(con) { - console.log(con) + con.send({'type':'err'}) con.on('data', function(data){ @@ -190,7 +284,14 @@ peer.on('connection', function(con) { } else if(data.type=='err'){ console.log(data) } else if(data.type=='con'){ - peerCon(data.id) + if(data.s){ + + peerCon(data.id,false) + if(peer.color==null){ + peer.color=data.color + } + popup('you are '+peer.color+'!', 5000) + } //console.log('connect') } @@ -206,14 +307,15 @@ function foo(){ },1000); } else { let elem = document.getElementsByClassName('join-online')[0] - elem.innerHTML='your key is
'+peer.id+'<\/b>
or, enter someone else\'s

' + elem.innerHTML='your key is
'+peer.id+'<\/b>
or, enter someone else\'s

' } } foo() document.write('
') + //colors - var board1 = '#232323' + var board1 = '#2b2b2b' var board2 = '#ff6633' var highlight1 = '#177013' var highlight2 = '' @@ -245,20 +347,7 @@ document.write('
') return(ret) } //functions - //board - - //popup func - document.write('
') - function popup(msg,timeUp){ - let element = document.getElementById('modal') - element.innerHTML=msg - - element.style.display='block' - setTimeout(function() { element.style.display='none' }, timeUp); - } - - //popup func - //del temp + //board //del temp function deltemp(){ for(let x in boardMain){ for(let y in boardMain[x]){ @@ -309,6 +398,7 @@ document.write('
') //move //show moves function showmoves(row,col,z){ + let board = boardMain if(z==1){ @@ -316,8 +406,9 @@ document.write('
') } else if(z==-1) { board=boardUnder } + if(board[row][col].color==peer.color||peer.color=='a'){ let elem = document.getElementById(row+''+col) - + elem.style.backgroundColor="#aa8800" elem.addEventListener('click', function(){ deltemp();loadb(); } ) let piece = board[row][col] @@ -342,42 +433,66 @@ document.write('
') for(let r = row;r!=board.length;r++){ let elem = document.getElementById(r+''+col) if(board[r][col]!=null&&board[r][col].color==board[row][col].color&&r+''+col!=row+''+col){break} - if(elem!=null&&[r][col]!='temp'&&board[r][col]!=''&&r+''+col!=row+''+col){ + if(board[r][col]!=null&&elem!=null&&[r][col]!='temp'&&board[r][col]!=''&&r+''+col!=row+''+col){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,r,col,z,z) } ) } + color=board[row][col].color + if(board[r][col]!=null&&board[r][col].color!=color&&(board[r][col].color=='black'||board[r][col].color=='white')||board[r][col]!=null&&board[r][col]==''){ + + break + } } for(let r = row;r!=-1;r--){ let elem = document.getElementById(r+''+col) - if(elem!=null&&board[r][col].color==board[row][col].color&&r+''+col!=row+''+col){break} + if(board[r][col]!=null&&elem!=null&&board[r][col].color==board[row][col].color&&r+''+col!=row+''+col){break} if(elem!=null&&[r][col]!='temp'&&board[r][col]!=''&&r+''+col!=row+''+col){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,r,col,z,z) } ) } + color=board[row][col].color + if(board[r][col]!=null&&board[r][col].color!=color&&(board[r][col].color=='black'||board[r][col].color=='white')||board[r][col]!=null&&board[r][col]==''){ + + break + } } for(let c = col;c!=board[row].length;c++){ let elem = document.getElementById(row+''+c) if(board[row][c].color==board[row][col].color&&row+''+c!=row+''+col){break} - if(elem!=null&&[row][c]!='temp'&&board[row][c]!=''&&row+''+c!=row+''+col){ + if(board[row][c]!=null&&elem!=null&&[row][c]!='temp'&&board[row][c]!=''&&row+''+c!=row+''+col){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,row,c,z,z) } ) } + color=board[row][col].color + if(board[row][c]!=null&&board[row][c].color!=color&&(board[row][c].color=='black'||board[row][c].color=='white')||board[row][c]!=null&&board[row][c]==''){ + + break + } } for(let c = col;c!=-1;c--){ let elem = document.getElementById(row+''+c) if(board[row][c].color==board[row][col].color&&row+''+c!=row+''+col){break} - if(elem!=null&&[row][c]!='temp'&&board[row][c]!=''&&row+''+c!=row+''+col){ + if(board[row][c]!=null&&elem!=null&&[row][c]!='temp'&&board[row][c]!=''&&row+''+c!=row+''+col){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,row,c,z,z) } ) } + color=board[row][col].color + if(board[row][c]!=null&&board[row][c].color!=color&&(board[row][c].color=='black'||board[row][c].color=='white')||board[row][c]!=null&&board[row][c]==''){ + + break + } } //console.log(row + ''+board.length) break; case'bridger': elem = document.getElementById(row+1+''+col)//maybe change to string + let samep = (elem!=null&&board[row+1][col]!=null&&board[row][col].color==board[row+1][col].color) + //console.log(samep) if(elem!=null&&board[row+1][col]!=''){ + if(!samep){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,row+1,col,z,z) } ) + } }else { if(board[row+1]==undefined){ board.push([]) @@ -395,10 +510,13 @@ document.write('
') loadb() showmoves(row,col,z) } + elem = document.getElementById(row-1+''+col)//maybe change to string + samep = (row!=0&&col!=0&&board[row-1][col]!=undefined&&board[row][col].color==board[row-1][col].color) if(elem!=null&&board[row-1][col]!=''){ + if(!samep){ elem.style.backgroundColor=highlight1 - elem.addEventListener('click', function(){ move(row,col,row-1,col,z,z) } ) + elem.addEventListener('click', function(){ move(row,col,row-1,col,z,z) } )} }else if(row>0) { if(board[row-1]==undefined){ board.push([]) @@ -417,34 +535,35 @@ document.write('
') showmoves(row,col,z) } elem = document.getElementById((row+1)+''+(col+1))//maybe change to string - - if(elem!=null){ + samep = (board[row+1][col+1]!=null&&board[row][col].color==board[row+1][col+1].color) + if(elem!=null&&!samep){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,row+1,col+1,z,z) } ) } elem = document.getElementById((row+1)+''+(col-1))//maybe change to string - - if(elem!=null){ + samep = (col!=0&&board[row+1][col-1]!=null&&board[row][col].color==board[row+1][col-1].color) + if(elem!=null&&!samep){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,row+1,col-1,z,z) } ) } elem = document.getElementById((row-1)+''+(col+1))//maybe change to string - - if(elem!=null){ + samep = (row!=0&&board[row-1][col+1]!=null&&board[row][col].color==board[row-1][col+1].color) + if(elem!=null&&!samep){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,row-1,col+1,z,z) } ) } elem = document.getElementById((row-1)+''+(col-1))//maybe change to string - - if(elem!=null){ + samep = (row!=0&&col!=0&&board[row-1][col-1]!=null&&board[row][col].color==board[row-1][col-1].color) + if(elem!=null&&!samep){ elem.style.backgroundColor=highlight1 elem.addEventListener('click', function(){ move(row,col,row-1,col-1,z,z) } ) } elem = document.getElementById((row)+''+(col+1))//maybe change to string - + samep = (board[row][col+1]!=null&&board[row][col].color==board[row][col+1].color) if(elem!=null&&board[row][col+1]!=''){ + if(!samep){ elem.style.backgroundColor=highlight1 - elem.addEventListener('click', function(){ move(row,col,row,col+1,z,z) } ) + elem.addEventListener('click', function(){ move(row,col,row,col+1,z,z) } )} }else if(col!=0) { if(board[row][col+1]==undefined){ for(let xx = board[row].length;xx!=col+1;xx++){ @@ -457,10 +576,11 @@ document.write('
') showmoves(row,col,z) } elem = document.getElementById((row)+''+(col-1))//maybe change to string - + samep = (col!=0&&board[row][col-1]!=null&&board[row][col].color==board[row][col-1].color) if(elem!=null&&board[row][col-1]!=''){ + if(!samep){ elem.style.backgroundColor=highlight1 - elem.addEventListener('click', function(){ move(row,col,row,col-1,z,z) } ) + elem.addEventListener('click', function(){ move(row,col,row,col-1,z,z) } )} }else { board[row][col-1]={'type':'temp','life':-1} @@ -470,11 +590,12 @@ document.write('
') break; } - } + }}// //show moves //display board - document.write('
') + document.write('
') + document.write('
') function loadb(){ let element = document.getElementById('main') board=boardMain @@ -538,9 +659,10 @@ lengths.indexOf(Math.max(...lengths)); } }else{ if(primary){ - bod+=(''+board[r][c].icon+'') + + bod+=(''+board[r][c].icon+'') }else{ - bod+=(''+board[r][c].icon+'') + bod+=(''+board[r][c].icon+'') } } //primary=!primary @@ -553,12 +675,13 @@ lengths.indexOf(Math.max(...lengths)); } bod+=('') - bod+=('
+
') - bod+=('
-
') - bod+=('
▲
') - bod+=('
▼
') + element.innerHTML = bod } + document.write('
+
') + document.write('
-
') + document.write('
▲
') + document.write('
▼
') //display board //zoom button //zoom button -- cgit v1.2.3