-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathindex.html
60 lines (57 loc) · 2.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<body>
<h1>CHIP-8 Archive</h1>
<p>This page collects programs written for the
<a href="https://en.wikipedia.org/wiki/CHIP-8">Chip8</a> platform which have been placed under
a <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">Creative Commons Zero</a>
"No Rights Reserved" license. If you've written anything that you would like to contribute,
submit a pull request to our <a href="https://github.com/JohnEarnest/chip8Archive">GitHub Page</a>!</p>
<div id="sorts"><a href="?sort=event">Sort By Category</a>
<a href="?sort=platform">Sort By Platform</a><a href="?sort=author">Sort By Author</a>
<a href="?sort=date">Sort by Date</a><a href="?sort=alpha">Sort A-Z</a></div>
<div id="categories"></div>
</body>
<style>
body{font-family:Helvetica;margin-left:10%;margin-right:10%;margin-top:5%;}
.heading,h1{font-family:Futura;}
.category{margin-bottom:30px;background:gray;border-radius:14px;background:lightgray;overflow:hidden;}
.entries{display:flex;flex-wrap:wrap;justify-content:space-evenly;}
.entries a{color:inherit;text-decoration:inherit;}
.heading{font-size:30px;font-weight:bold;text-align:center;background:gray;padding:10px;}
.entry{width:25%;padding:15px;border-radius:7px;background:gray;margin:20px;}
.title{font-weight:bold;}
.screen img{width:100%;margin-top:5px;margin-bottom:5px;}
.category,.entry,.screen img{border:1px solid black;}
.desc{font-size:14px;overflow:hidden;}
#sorts{display:flex;justify-content:space-between;margin:30px;}
</style>
<script>
dc=(c,x)=>`<div class='${c}'>${x}</div>`
an=x=>`<a name="${x}" href="#${x}">${x}</a>`
send=(u,t)=>{let r=new XMLHttpRequest();return r.open('GET',u),r.responseType=t,r.send(),r}
ajax=(u,t,f)=>{let r=send(u,t);r.onreadystatechange=_=>r.readyState==4&&f(r.response)}
sort=new URLSearchParams(document.location.search).get('sort')||'event'
ajax('programs.json','json',p=>{
let c = Object.keys(p).reduce((x,y)=>{
const e=sort=='event'?p[y].event||'Uncategorized':
sort=='platform'?p[y].platform||'Unknown':
sort=='date'?p[y].release||'1977-01-01':
sort=='alpha'?p[y].title: p[y].authors[0]
return x[e]=(x[e]||[]).concat([p[y]]),p[y].slug=y,x
}, {})
const flat = _=> Object.keys(c).sort().map(x => c[x]).reduce((x,y)=>x.concat(y))
if (sort == 'date' ) c={'Sorted By Release Date':flat()}
if (sort == 'alpha') c={'Sorted Alphabetically':flat()}
const k = sort=='event'?Object.keys(c):Object.keys(c).sort()
document.querySelector('#categories').innerHTML = k.map(x=>
dc('category',dc('heading',an(x))+dc('entries',c[x].map(
x=>`<div class='entry'>
<a href='play.html?p=${x.slug}'>
<div class='title'>${x.title}</div>
<div class='screen'><img src='src/${x.slug}/${x.images[0]}'></img></div>
<div class='desc'>${x.desc}</div>
</a>
</div>`
).join('')))
).join('')
})
</script>