view.html

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>



<ul class=ul>	
<li><a href="index.html">Back</a></li>
<li><a href='new.html'>Create</a></li>
<li><a id="we"></a></li>
<li><a id="wea"></a></li>
</ul>

<div class=omega><div><h1 id="name"></h1><h3 id="mppr"></h3>
<button class=play onclick="gotothegame()">Go︎</button>
<div id="wwwe">
<a onclick=dw()>Download</a> or 
<a id="mem" onclick="sure()">Delete</a></div>

<div class=huge>
<div class=mega>Length: <strong id=0></strong></div>
<div class=mega>Starts with <strong id=1></strong></div>
</div>
<div class=huge>
<div class=mega>Best accuracy: <strong id=2></strong></div>
<div class=mega>Difficulty <tiny>(According to mapper)</tiny>: <strong id=3></strong></div>
</div>
<div class=huge>
<div class=mega>Attempts: <strong id=4></strong></div>
<div class=mega>Click window: <strong id=5></strong></div>
</div>
<div class=huge>
<div class=mega>Song: <strong id=8></strong> by <strong id=9></strong></div>
</div></div>
<a class=space onclick="wh()">Advanced</a><br>
<div id="www">

</div	>

<!--<button class=eee>More stats</button>-->
</div></div>


<script>
function dw(){
    const text = mapss[id].split("޶޶޶").slice(0,6).join('޶޶޶') ;
    const element = document.createElement('a');
    const file = new Blob([text], {type: 'text/plain'});
    element.href = URL.createObjectURL(file);
    element.download = document.getElementById("name").innerHTML.split(" ").join("_")
+".1pix";
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  
  }
function sure(){
Swal.fire({
  title: "Are you sure?",
  showCancelButton: true,
  showDenyButton: true,
  showConfirmButton: false,
  denyButtonText: "Yes"
}).then((result) => {
  /* Read more about isConfirmed, isDenied below */
 if (result.isDenied){
Swal.fire({
  title: "Are you REALLY sure?",
  showCancelButton: true,
  showDenyButton: true,
  showConfirmButton: false,
  denyButtonText: "Yes"
}).then((result) => {
  /* Read more about isConfirmed, isDenied below */
 if (result.isDenied){
Swal.fire({
  title: "This level is probably peak, think deeply before you delete this!",
  showCancelButton: true,
  showDenyButton: true,
  showConfirmButton: false,
  denyButtonText: "I did!",
  cancelButtonText: "Wait, no!"
}).then((result) => {
  /* Read more about isConfirmed, isDenied below */
 if (result.isDenied){
 w=localStorage.getItem("maps").split("杧杧杧")
w.splice(id,1)
localStorage.setItem("maps",w.join("杧杧杧"))
location.href="index.html"
}});
}});
}});
}
function wh(){
if(document.getElementById('www').innerHTML!="\n\n"){
document.getElementById('www').innerHTML="\n\n"
}
else{
document.getElementById('www').innerHTML="<div class=huge><div class=mega>Description: <strong id=116></strong></div></div><div class=huge><div class=mega>CPS floor <tiny>(ctrlr)</tiny>: <strong id=6></strong></div><div class=mega>CPS cap <tiny>(spmmr and ctrlr)</tiny>: <strong id=7></strong></div></div	><div class=huge><div class=mega>BPM: <strong id=10></strong></div><div class=mega>Average accuracy: <strong id=12></strong></div></div><div class=huge><div class=mega>Gamemodes: <br><strong id=11></strong></div>"
document.getElementById(6).innerHTML=mapperm[id][4].slice(2,4)*1+" CPS"
document.getElementById(116).innerHTML=mapperm[id][5].split("|||")[0]
document.getElementById(12).innerHTML=Math.round(find(mapperm[id][2])[3]/100)+"%"

document.getElementById(7).innerHTML=mapperm[id][4].slice(0,2)*1+" CPS"
document.getElementById(10).innerHTML=mapperm[id][8].split("|||")[4]
document.getElementById(11).innerHTML=[Math.floor(mapperm[id][7]**2/1000000/1000),blouh(mapperm[id][3].split('').map(item=>item.codePointAt(0)-1))].flat().reduce((all,one,i) => {
   const ch = Math.floor(i/2); 
   all[ch] = [].concat((all[ch]||[]),one); 
   return all
}, []).map(item=>["clckr","scrlr","swppr","spmmr","ctrlr"][item[0]]+" for "+Math.round(item[1]/100)/10+"s").join("<br>"+/*Math.round((mme[0].reduce((a,b)=>a+b)+1234)/100)/10+"s"+*/"Gamemode transition<br>")
}
}

function www(num){
if (num<=11&&num>=0){return num}else if (num<=15&&num>=0){return "Extreme "+(num-11)} else{return "???"}
}
id=parent.document.URL.substring(parent.document.URL.indexOf('?')+4, parent.document.URL.length);
function gotothegame(){
location.href="play?id="+id
}
// Source - https://stackoverflow.com/a/69025039
// Posted by Shalom Alexander
// Retrieved 2026-04-12, License - CC BY-SA 4.0



//maps=[["Map 0000000",49,10.67,191919],["sup3r 3p1c l3v3l",9,4,919191],["SUPER IMPOSSIBLE",0.9,17,112334]]

extract()
if (mapperm[id][1].includes("yours")){
document.getElementById("we").innerHTML="Edit"
document.getElementById("we").href="edit.html?id="+id
document.getElementById("wea").innerHTML="Change metadata"
document.getElementById("wea").href="new.html?id="+id
}

function blouh(e){
ee=[...e].map(item=>item*1)
sum=0
streak=0
for (x=0;x<ee.length;x++){
if (ee.slice(x,x+5).join("w")=="1000w0w1000w0w1000"){
ee.splice(x,5,3000)
}
else if (ee.slice(x,x+3).join("w")=="1000w0w234"){
ee.splice(x,3,1234)
}
}
indices=[0]
for (m in ee){
if (ee[m]==3000||ee[m]==1234){
indices.push(m*1)
}
}
mme=[]
indices.forEach(i => 
mme.push(ee.slice(i,indices[indices.indexOf(i)*1+1]))
  );
  final=[]
  for (r=0;r<mme.length;r++){
  if (r%2==0){
  
  final.push(mme[r].reduce((a,b)=>a+b)-(1234*(r!=0)))
  }
  else{
  final.push(mme[r].length/2-1)
  }
  }
  return final
}


document.title=mapperm[id][0]+" - 1PIX"
document.getElementById("name").innerHTML=mapperm[id][0]
sd=mapperm[id][5].split("|||")[1]
if (sd==""){sd="???"}
document.getElementById("mppr").innerHTML="By "+sd
tot=0
mapperm[id][3].split("").forEach((item)=>tot+=item.codePointAt(0)-1)
tot/=1000
tot=Math.round(tot)
bg=tot%60+"s"
if (tot>=60){
bg=Math.floor(tot/60)+"m "+bg
}
document.getElementById(0).innerHTML=bg
document.getElementById(1).innerHTML=["clckr","scrlr","swppr","spmmr","ctrlr"][Math.floor(mapperm[id][7]**2/1000000/1000)]
document.getElementById(2).innerHTML=Math.round(find(mapperm[id][2])[0]/100)+"%"
if (find(mapperm[id][2])[0]==10000){
document.getElementById(2).innerHTML="FC"
}
document.getElementById(3).innerHTML=www(parseInt(mapperm[id][9],16))+["*",""][((parseInt(mapperm[id][9],16)>=12)*1)]
document.getElementById(4).innerHTML=Math.round(mapperm[id][2].length/4-1)
document.getElementById(5).innerHTML=Math.round(mapperm[id][7]**2/1000000%1000)+" ms"
ss=mapperm[id][8].split("|||")
for (x in ss){
if (ss[x]==""){ss[x]="???"}
}
document.getElementById(8).innerHTML=ss[1]
document.getElementById(9).innerHTML=ss[2]

function extract(){
mapperm=[]
mapss=localStorage.getItem("maps").split("杧杧杧")
mapss=mapss.filter((x)=>x!='')
for (x in mapss){
io=mapss[x].split("޶޶޶")
q=[]
theid=io[3]

q.push(io[0])
q.push(io[6])
//q.push((io[3].charCodeAt(0)-913)/10)
q.push(io[7])
q.push(io[4].slice(0,-6))
q.push(io[2])
q.push(io[1])
q.push(x)
q.push(io[4].slice(-6,-1))
q.push(theid)
q.push(io[4].slice(-1))

mapperm.push(q)
}
}



function find(hh){
r={'noth':'0000','fcfc':'10000'}
kj=hh.match(/.{1,4}/g) ?? []
sum=0
kj.filter(item=>item!="noth").map(item => r[item] !== undefined ? r[item] : item).map(item=>item*1).forEach(item=>sum+=item)
return [Math.max(...kj.map(item => r[item] !== undefined ? r[item] : item).map(item=>item*1)),kj.reduce((total,x) => total+(x=="fcfc"), 0),kj.reduce((total,x) => total+(x=="noth"), 0)-1,sum / kj.length-1]
}
</script>

<style>     
h1{
color:#FFFFFF;
text-align:center;
}
html{
background-color:#101010;
font-family: Verdana;
color: white;
font-size:20px;
}
.e{
float:right;
}
.a{
float: left;
}    
input{
font-family: Verdana;
border:none;
}
button{
padding:20px;
border: none;
border-radius:10px;
font-size:30px;
transition: 0.3;

}
button:hover{
background:#dddddd;
}
.mega{
margin-bottom: 2vh;
margin-top: 2vh;
padding:10px;
height:100px;
color: #ffffff;
border-radius:10px;
width: 400px;
background-color: #a0a0a000;
display:inline;

}
.huge{
background-color:#222222;
padding:10px;
width: 700px;
margin: 0 auto;

}
.p{
font-size:12px;
}

.omega{
margin-top: 0px;
text-align:center;

}
#bigbig{
width:40%;
margin-left: 30%;
padding:  40px 0 40px 0;
background-color:#00000000;
}
tiny{
font-size:14px;
}
.play{
width:150px;
height:150px;
font-size:80px;
margin:30px;
color:#000000;
border-radius:30px;
}
.eee{
margin:10px;
background-color:#eeeeee;
}
a{
color: #c4e8e8;
text-decoration:none;
transition: 0.4s;

}
a:hover{
transition: 0.4s;

color: #ec2d2d;
}
#we{
float:right;	
}
#wwwe{
margin-top:0px;
margin-bottom:25px;
}
#mem{
color:#f22d2d;
transition:0.4s;

float:center;text-align:center;	margin:0 auto;
}
#mem:hover{
font-size:30px;transition:0.4s;
}
div{
margin:10px;
  transition: opacity 1s, display 1s allow-discrete;
}
.ul {
margin:0 auto;
  list-style-type: none;
  max-width:650px;
  padding: 7;
  background-color: #3333337f;
  display: flex;
  border-radius:10px;
  
}

.ul li a {
  display: block;
  padding: 5px 24px 14px;
  margin-top:9px;
  text-decoration: none;
}

.ul li a:hover {
  background-color: #11111100;
}
</style>