Skip to content

Instantly share code, notes, and snippets.

@Legend-of-iPhoenix

Legend-of-iPhoenix/archives.html Secret

Last active August 31, 2019 15:32
Show Gist options
  • Save Legend-of-iPhoenix/6df265526b35d6f916eda8f52b23b3e0 to your computer and use it in GitHub Desktop.
Save Legend-of-iPhoenix/6df265526b35d6f916eda8f52b23b3e0 to your computer and use it in GitHub Desktop.
Download ZIP
Demo mockup for the Cemetech Archives. Thanks to commandblockguy for giving me some small styling tweaks and suggestions. Now mobile friendly. Kinda sorts now.
Raw
archives.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://www.cemetech.net/forum/templates/Cemetech6/stylesheet.css?10">
<script>
/*
Helper class, represents a file in the archives.
Data is an object (in this case a DOMStringMap from an element.dataset):
- downloads: number of downloads.
- update: some form of something I can parse as a JS Date.
- scores: space-separated list of the number of people who rated the file with a score.
- ex. "1 2 3 4 5 6 7 8 9 10" means that 1 person gave it a 1/10, 2 people gave it a 2/10, etc.
*/
class ArchiveFile {
constructor(id, data) {
this.id = id;
this.name = document.querySelector("#" + id + " .archive_info a").innerText;
let downloads = data.downloads;
let scores = data.scores;
let lastUpdate = data.update;
this.downloads = parseInt(downloads);
this.scores = scores.split(" ").map(x=>parseInt(x)); // split and parse as integers
this.lastUpdate = new Date(lastUpdate);
}
// http://www.evanmiller.org/how-not-to-sort-by-average-rating.html
calculateScore() {
// calculated from a confidence level of .95, see link above.
const z = 1.9599639715843482;
const z2 = z * z;
let positive = this.scores.reduce((acc, score, index) => {
return acc + (score * (index / 10));
}, 0);
let cnt = this.scores.reduce((acc, score) => {
return acc + score;
}, 0);
let phat = positive / cnt;
return (phat + z2/(2 * cnt) - z * Math.sqrt((phat * (1 - phat) + z2/(4 * cnt))/cnt))/(1 + z2/cnt);
}
moveTo(index) {
let id = this.id;
let element = document.getElementById(id);
let parent = element.parentElement;
// move the node
parent.insertBefore(element, parent.children[index]);
}
toString() {
return this.name;
}
}
let files = [];
window.addEventListener("load", function() {
files = Array.from(document.querySelectorAll(".archive_file"));
files = files.map(file => {
return new ArchiveFile(file.id, file.dataset);
});
sortArchivesByRating();
});
function sortArchivesByRating() {
files.sort((a, b) => b.calculateScore() - a.calculateScore());
files.map((file, index) => file.moveTo(index));
}
function sortArchivesByDownloads() {
files.sort((a, b) => b.downloads - a.downloads);
files.map((file, index) => file.moveTo(index));
}
function sortArchivesByName() {
files.sort(); // toString on an archive file gives the name.
files.map((file, index) => file.moveTo(index));
}
function sortArchivesByLastUpdate() {
files.sort((a, b) => b.lastUpdate - a.lastUpdate);
files.map((file, index) => file.moveTo(index));
}
</script>
<style>
.archive_listing {
table-layout: fixed;
width: 100%;
}
.archive_listing tr > * {
padding: 5px;
border-right: 1px solid #aaa;
border-left: 1px solid #aaa;
}
.archive_actions {
box-sizing: border-box;
}
.archive_link {
display: block;
float: right;
width: 100%;
text-align: center;
}
.archive_button > *:focus {
outline:0;
}
.archive_button > button {
width: 100%;
/* 25% height, 10px container padding, 1em for text */
padding: calc(25% - 10px - 1em);
/* 25% padding on top to center, minus the 1em for the "More Info" link */
margin-top: calc(25% - 1em);
border: 1px solid black;
border-radius: 10px;
text-align: center;
cursor: pointer;
font-weight: bold;
font-size: 1.5em;
color: white;
background: linear-gradient(#a2685e, #7b291b, #7b291b, #a2685e) #7b291b;
}
.archive_image > img {
box-sizing: border-box;
max-width: 100%;
max-height: 100%;
border: 1px solid black;
}
.archive_desc {
width: 50%;
vertical-align: middle;
overflow: hidden;
}
.archive_head th {
text-align: center;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
}
.archive_file:first-child > td {
border-top: 1px solid #aaa;
}
.archive_file:last-child > td {
border-bottom: 1px solid #aaa;
}
@media all and (max-width: 60em) {
.archive_desktop {
display: none;
}
}
@media all and (max-width: 30em) {
.archive_listing {
font-size: 90%;
}
}
</style>
</head>
<body>
<p> Buttons because I can't be bothered to implement a &lt;select&gt;: </p>
<p> <button onclick="sortArchivesByRating()">Rating</button>
<button onclick="sortArchivesByDownloads()">DL's</button>
<button onclick="sortArchivesByName()">Name</button>
<button onclick="sortArchivesByLastUpdate()">Last Update</button> </p>
<table class="archive_listing">
<thead class="archive_head">
<tr>
<th style="width: 16.66%;" class="archive_desktop"> Actions </th>
<th style="width: 16.66%;" class="archive_desktop"> Image </th>
<th style="width: 16.66%;"> Info </th>
<th style="width: 50%;"> Description </th>
</tr>
</thead>
<tbody>
<tr class="archive_file" id="file_0" data-update="2017-02-01T01:45:53.000Z" data-downloads="363357" data-scores="0 0 0 0 0 0 0 0 0 11">
<td class="archive_actions archive_desktop">
<a href="#" class="archive_button"> <button> Download </button> </a>
<a href="#" class="archive_link"> More Info </a>
</td>
<td class="archive_image archive_desktop">
<img src="https://www.cemetech.net/img/ss/002685.gif">
</td>
<td class="archive_info">
<h2> <a href="https://www.cemetech.net/programs/84pce/asm/games/PacManCE.zip">Pac-Man</a> </h2>
<p> Rated <b>10/10</b> with <b>11</b> ratings </p>
</td>
<td class="archive_desc">
<p> The original Pac-Man game, now on your CE! Features smooth graphics and gameplay. Source code is included. Enjoy! </p>
</td>
</tr>
<tr class="archive_file" id="file_1" data-update="2019-05-18T18:19:37.000Z" data-downloads="48129" data-scores="1 0 0 0 0 0 0 0 0 34">
<td class="archive_actions archive_desktop">
<a href="#" class="archive_button"> <button> Download </button> </a>
<a href="#" class="archive_link"> More Info </a>
</td>
<td class="archive_image archive_desktop">
<img src="https://www.cemetech.net/img/ss/003201.gif">
</td>
<td class="archive_info">
<h2> <a href="https://www.cemetech.net/programs/84pce/asm/games/oiram.zip">Oiram</a> </h2>
<p> Rated <b>10/10</b> with <b>35</b> ratings </p>
</td>
<td class="archive_desc">
<p> Oiram is Mario-style platformer for the CE. Includes many features and enemies. Source code is linked in readme. Enjoy! There's also a level editor to make your own levels here: https://github.com/mateoconlechuga/oiram-editor/releases/latest </p>
</td>
</tr>
<tr class="archive_file" id="file_2" data-update="2018-05-19T21:56:33.000Z" data-downloads="16841" data-scores="0 0 0 0 0 0 0 0 1 3">
<td class="archive_actions archive_desktop">
<a href="#" class="archive_button"> <button> Download </button> </a>
<a href="#" class="archive_link"> More Info </a>
</td>
<td class="archive_image archive_desktop">
<img src="https://www.cemetech.net/img/ss/002856.gif">
</td>
<td class="archive_info">
<h2> <a href="https://www.cemetech.net/programs/84pce/asm/games/1010.zip">1010! CE</a> </h2>
<p> Rated <b>10/10</b> with <b>4</b> ratings </p>
</td>
<td class="archive_desc">
<p> 1010! is a puzzle game, similar to Tetris, where you place tiles on a 10 by 10 grid and try to clear rows and columns. Try to survive as long as possible! Features include all of the gameplay of 1010, a dark mode, smooth graphics, high score, the ability to see your tile buffer and much more! Updated to use the latest version of the C Graphics Library. Source code is included. </p>
</td>
</tr>
<tr class="archive_file" id="file_3" data-update="2018-08-29T21:32:03.000Z" data-downloads="581" data-scores="0 0 0 0 0 0 0 1 0 0">
<td class="archive_actions archive_desktop">
<a href="#" class="archive_button"> <button> Download </button> </a>
<a href="#" class="archive_link"> More Info </a>
</td>
<td class="archive_image archive_desktop">
<img src="https://www.cemetech.net/img/ss/000004.gif">
</td>
<td class="archive_info">
<h2> <a href="https://www.cemetech.net/programs/84pce/asm/games/AttackoftheSnails.zip">Attack of the Snails</a> </h2>
<p> Rated <b>8/10</b> with <b>1</b> rating </p>
</td>
<td class="archive_desc">
<p> This is a game that is easy to play but hard to master! Evade "aggressive" snails that come in increasingly fast waves! Features fancy animations, an epic custom font, and much more! Check the readme and the thread for details: https://cemete.ch/t14895 </p>
</td>
</tr>
<tr class="archive_file" id="file_4" data-update="2019-05-23T22:46:54.000Z" data-downloads="341" data-scores="0 0 0 0 0 0 0 0 1 2">
<td class="archive_actions archive_desktop">
<a href="#" class="archive_button"> <button> Download </button> </a>
<a href="#" class="archive_link"> More Info </a>
</td>
<td class="archive_image archive_desktop">
<img src="https://www.cemetech.net/img/ss/004257.gif">
</td>
<td class="archive_info">
<h2> <a href="https://www.cemetech.net/programs/84pce/asm/games/mahjong.zip">Mahjong Solitaire</a> </h2>
<p> Rated <b>10/10</b> with <b>3</b> ratings </p>
</td>
<td class="archive_desc">
<p> Mahjong Solitaire for the TI-84 Plus CE. Features 127 levels! Attempt to remove all 144 tiles from the board as quickly as possible. Also includes source code and a layout converter for Kyodai levels. </p>
</td>
</tr>
<tr class="archive_file" id="file_5" data-update="2018-12-26T05:12:13.000Z" data-downloads="27375" data-scores="0 0 0 0 0 0 0 0 5 10">
<td class="archive_actions archive_desktop">
<a href="#" class="archive_button"> <button> Download </button> </a>
<a href="#" class="archive_link"> More Info </a>
</td>
<td class="archive_image archive_desktop">
<img src="https://www.cemetech.net/img/ss/002565.gif">
</td>
<td class="archive_info">
<h2> <a href="https://www.cemetech.net/programs/84pce/asm/games/calcuzapti84ce.zip">Calcuzap 1066 for TI-84 Plus CE (color)</a> </h2>
<p> Rated <b>10/10</b> with <b>15</b> ratings </p>
</td>
<td class="archive_desc">
<p> A high performance shoot-em-up game in color. This version features 47 levels plus the mystery level, 9 selectable speeds, 3 selectable difficulty levels, saving the game, 5 types of power-ups including double cannon and triple cannon, and a high score table. Now with a starfield background too! </p>
</td>
</tr>
<br> <!-- it doesn't exist, I swear -->
</tbody>
</table>
</body>
</html>
@Legend-of-iPhoenix
Copy link
Author

If it wasn't inherently obvious, I give my express permission to the Cemetech staff to do whatever they want with this, whether it is using it in its entirety, improving upon it, changing it, making it worse, not using it at all, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment