<html>
<head>
<meta charset="UTF-8">
<title>Coloured Nicks</title>
<!-- Load the player -->
<script type="text/javascript" src="player.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="riscy.css">
<link rel="stylesheet" type="text/css" href="topics.css">
</head>
<body>
<div class="title riscy">
<span class="episode_name">Coloured Nicks</span>
<div class="menu quotes">
<span>Quotes ▼</span>
<div class="mouse_catcher"></div>
<div class="refs quotes_container">
<span data-id="α" class="ref">
<span class="ref_content">
<div class="source">Quote 1</div>
<div class="ref_title">Stay RISCY, everyone</div>
<div class="quote_byline">—miotatsu, Wed Nov 16 21:03:26 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="176" class="timecode"><span class="ref_index">[α]</span><span class="time">2:56</span></span>
</div>
</span>
<span data-id="β" class="ref">
<span class="ref_content">
<div class="source">Quote 2</div>
<div class="ref_title">I dream of nice things</div>
<div class="quote_byline">—miotatsu, Fri Dec 2 21:00:05 2016</div>
</span>
<div class="ref_indices">
<span data-timestamp="312" class="timecode"><span class="ref_index">[β]</span><span class="time">5:12</span></span>
</div>
</span>
</div>
</div>
<div class="menu references">
<span>References ▼</span>
<div class="mouse_catcher"></div>
<div class="refs references_container">
<a data-id="https://en.wikipedia.org/wiki/Logic_gate" href="https://en.wikipedia.org/wiki/Logic_gate" target="_blank" class="ref">
<span class="ref_content">
<div class="source">Wikipedia</div>
<div class="ref_title">Logic gate</div>
</span>
<div class="ref_indices">
<span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[4]</span><span class="time">10:24</span></span>
</div>
</a>
<a data-id="0-7356-0505-X" href="http://www.charlespetzold.com/code/" target="_blank" class="ref">
<span class="ref_content">
<div class="source">Charles Petzold (Microsoft Press)</div>
<div class="ref_title">Code: The Hidden Language of Computer Hardware and Software</div>
</span>
<div class="ref_indices">
<span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span>
</div>
</a>
<a data-id="0-7356-0505-Y" href="http://www.charlespetzold.com/code/again" target="_blank" class="ref">
<span class="ref_content">
<div class="source">Charles Petzold (Microsoft Press)</div>
<div class="ref_title">Code Again: The Hidden Language of Computer Hardware and Software</div>
</span>
<div class="ref_indices">
<span data-timestamp="60" class="timecode"><span class="ref_index">[3]</span><span class="time">1:00</span></span>
</div>
</a>
<a data-id="https://handmade.network/" href="https://handmade.network/" target="_blank" class="ref">
<span class="ref_content">
<div class="ref_title">Handmade Network</div>
</span>
<div class="ref_indices">
<span data-timestamp="754" class="timecode"><span class="ref_index">[5]</span><span class="time">12:34</span></span><span data-timestamp="992" class="timecode"><span class="ref_index">[6]</span><span class="time">16:32</span></span>
</div>
</a>
</div>
</div>
<div class="menu filter">
<span><img src="hues_HCL.png"></span>
<div class="filter_container">
<div class="filter_mode inclusive">Filter mode: </div>
<div class="filters">
<div class="filter_topics">
<div class="filter_title">Topics</div>
<div class="filter_content hardware">
<span class="icon category hardware"></span><span class="text">hardware</span>
</div>
<div class="filter_content mathematics">
<span class="icon category mathematics"></span><span class="text">mathematics</span>
</div>
</div>
<div class="filter_media">
<div class="filter_title">Media</div>
<div class="filter_content blackboard">
<span class="icon">🖌</span><span class="text">Blackboard</span>
</div>
<div class="filter_content authored">
<span class="icon">🗪</span><span class="text">Chat Comment</span>
</div>
<div class="filter_content default">
<span class="icon">🖮</span><span class="text">Programming</span>
</div>
<div class="filter_content rant">
<span class="icon">💢</span><span class="text">Rant</span>
</div>
<div class="filter_content research">
<span class="icon">📖</span><span class="text">Research</span>
</div>
</div>
</div>
</div>
</div>
<div class="menu credits">
<div class="mouse_catcher"></div>
<span>Credits</span>
<div class="credits_container">
<span class="credit">
<a class="person" href="http://riscy.tv/" target="_blank">
<div class="role">Host</div>
<div class="name">Mio Iwakura</div>
</a>
<a class="support" href="http://patreon.com/miotatsu" target="_blank"><img src="patreon_logo.png"></a>
</span>
<span class="credit">
<a class="person" href="http://miblodelcarpio.co.uk" target="_blank">
<div class="role">Annotator</div>
<div class="name">Matt Mascarenhas</div>
</a>
<a class="support" href="http://patreon.com/miblo" target="_blank"><img src="patreon_logo.png"></a>
</span>
</div>
</div>
<div class="help">
<span>?</span>
<div class="help_container">
<span class="help_key">?</span><h1>Keyboard Navigation</h1>
<h2>Global Keys</h2>
<span class="help_key">W</span>, <span class="help_key">A</span>, <span class="help_key">P</span> / <span class="help_key">S</span>, <span class="help_key">D</span>, <span class="help_key">N</span> <span class="help_text">Jump to previous / next marker</span><br>
<span class="help_key">V</span> <span class="help_text">Reset filter</span> <span class="help_key">z</span> <span class="help_text">Toggle filter mode between "inclusive" and "exclusive"</span>
<h2>Menu toggling</h2>
<span class="help_key">q</span> <span class="help_text">Quotes</span>
<span class="help_key">r</span> <span class="help_text">References</span>
<span class="help_key">f</span> <span class="help_text">Filter</span>
<span class="help_key">c</span> <span class="help_text">Credits</span>
<h2>Movement</h2>
<div class="help_paragraph">
<div class="key_block">
<div class="key_column" style="flex-grow: 1">
<span class="help_key">a</span>
</div>
<div class="key_column" style="flex-grow: 2">
<span class="help_key">w</span><br>
<span class="help_key">s</span>
</div>
<div class="key_column" style="flex-grow: 1">
<span class="help_key">d</span>
</div>
</div>
<span class="help_text">/</span>
<div class="key_block">
<div style="flex-grow: 1">
<span class="help_key">←</span>
</div>
<div style="flex-grow: 2">
<span class="help_key">↑</span><br>
<span class="help_key">↓</span>
</div>
<div style="flex-grow: 1">
<span class="help_key">→</span>
</div>
</div>
<span class="help_text">/</span>
<div class="key_block">
<span class="help_key">h</span>
<span class="help_key">j</span>
<span class="help_key">k</span>
<span class="help_key">l</span>
</div>
</div>
<br>
<h2>Quotes and References Menus</h2>
<span style="width: auto" class="help_key">Enter</span><span class="help_text">Jump to timecode</span><br>
<h2>References and Credits Menus</h2>
<span class="help_key">o</span><span class="help_text">Open URL (in new tab)</span>
<h2>Filter Menu</h2>
<span class="help_key">x</span>, <span style="width: auto" class="help_key">Space</span><span class="help_text">Toggle category and focus next</span><br>
<span class="help_key">X</span>, <span style="width: auto; margin-right: 0px" class="help_key">Shift</span><span style="width: auto" class="help_key">Space</span><span class="help_text">Toggle category and focus previous</span><br>
<span class="help_key">v</span><span class="help_text">Invert topics / media as per focus</span>
<h2>Credits Menu</h2>
<span style="width: auto" class="help_key">Enter</span>, <span class="help_key">o</span><span class="help_text">Open URL (in new tab)</span><br>
</div>
</div>
</div>
<div class="player_container">
<div class="video_container" data-videoId="ug5WkCROkOk"></div>
<div class="markers_container riscy">
<div data-timestamp="60" class="marker authored cat_hardware research" data-ref="https://en.wikipedia.org/wiki/Logic_gate,0-7356-0505-X,0-7356-0505-Y">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
<div class="progress faded">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">1:00</span><span class="author" style="color: hsl(257, 87%, 26%);">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: hsl(83, 75%, 26%); text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding circuit design he saw in Code<sup>2</sup><sup>,3</sup><span class="categories"><div class="category hardware"></div></span></div>
</div>
</div>
<div data-timestamp="176" class="marker default" data-ref="α">
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">2:56</span>“Stay RISCY, everyone”<sup>α</sup></div>
</div>
</div>
<div data-timestamp="312" class="marker blackboard rant cat_mathematics" data-ref="β">
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
<div class="progress faded">
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>β</sup><span class="categories"><div class="category mathematics"></div></span></div>
</div>
</div>
<div data-timestamp="624" class="marker default" data-ref="https://en.wikipedia.org/wiki/Logic_gate">
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: hsl(26, 83%, 26%); text-decoration: none">milton</a> forum post<sup>4</sup></div>
</div>
</div>
<div data-timestamp="642" class="marker rant">
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
<div class="progress faded">
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
</div>
</div>
<div data-timestamp="754" class="marker default" data-ref="https://handmade.network/">
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">12:34</span>Something about the Handmade.Network<sup>5</sup></div>
</div>
</div>
<div data-timestamp="992" class="marker default" data-ref="https://handmade.network/">
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
<div class="progress faded">
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
</div>
<div class="progress main">
<div class="content"><span class="timecode">16:32</span>Something else about the Handmade.Network<sup>6</sup></div>
</div>
</div>
</div>
</div>
<script>
var menuState = [];
// TODO(matt): Do all this conditional stuff in hmml_to_html.c
var quotesMenu = document.querySelector(".quotes_container");
if(quotesMenu)
{
menuState.push(quotesMenu);
var quoteItems = quotesMenu.querySelectorAll(".ref");
for(var i = 0; i < quoteItems.length; ++i)
{
quoteItems[i].addEventListener("mouseenter", function(ev) {
mouseOverQuotes(this);
})
};
var lastFocusedQuote = null;
}
var referencesMenu = document.querySelector(".references_container");
if(referencesMenu)
{
menuState.push(referencesMenu);
var referenceItems = referencesMenu.querySelectorAll(".ref");
for(var i = 0; i < referenceItems.length; ++i)
{
referenceItems[i].addEventListener("mouseenter", function(ev) {
mouseOverReferences(this);
})
};
var lastFocusedReference = null;
var lastFocusedIdentifier = null;
}
var filterMenu = document.querySelector(".filter_container");
if(filterMenu)
{
menuState.push(filterMenu);
var lastFocusedCategory = null;
var lastFocusedTopic = null;
var lastFocusedMedium = null;
var filter = filterMenu.parentNode;
var filterModeElement = filter.querySelector(".filter_mode");
filterModeElement.addEventListener("click", function(ev) {
toggleFilterMode();
});
var filterMode = filterModeElement.classList[1];
var filterItems = filter.querySelectorAll(".filter_content");
for(var i = 0; i < filterItems.length; ++i)
{
filterItems[i].addEventListener("mouseenter", function(ev) {
navigateFilter(this);
})
filterItems[i].addEventListener("click", function(ev) {
filterItemToggle(this);
});
}
// TODO(matt): Generate this
var filterState = {
"hardware": { "type": "topic", "off": false },
"mathematics": { "type": "topic", "off": false },
"blackboard": { "type": "medium", "off": false },
"authored": { "type": "medium", "off": false },
"default": { "type": "medium", "off": false },
"rant": { "type": "medium", "off": false },
"research": { "type": "medium", "off": false },
};
}
var creditsMenu = document.querySelector(".credits_container");
if(creditsMenu)
{
menuState.push(creditsMenu);
var lastFocusedCreditItem = null;
var creditItems = creditsMenu.querySelectorAll(".person, .support");
for(var i = 0; i < creditItems.length; ++i)
{
creditItems[i].addEventListener("mouseenter", function(ev) {
if(this != lastFocusedCreditItem)
{
lastFocusedCreditItem.classList.remove("focused");
lastFocusedCreditItem = this;
focusedElement = lastFocusedCreditItem;
focusedElement.classList.add("focused");
}
})
}
}
var sourceMenus = document.querySelectorAll(".menu");
var helpButton = document.querySelector(".help");
var helpDocumentation = helpButton.querySelector(".help_container");
helpButton.addEventListener("click", function(ev) {
handleMouseOverMenu(this, ev.type);
})
var focusedElement = null;
var focusedIdentifier = null;
var player = new Player(document.querySelector(".player_container"), onRefChanged);
window.addEventListener("resize", function() { player.updateSize(); });
document.addEventListener("keydown", function(ev) {
var key = ev.key;
if(ev.getModifierState("Shift") && key == " ")
{
key = "capitalSpace";
}
if(handleKey(key) == true && focusedElement)
{
ev.preventDefault();
}
});
for(var i = 0; i < sourceMenus.length; ++i)
{
sourceMenus[i].addEventListener("mouseenter", function(ev) {
handleMouseOverMenu(this, ev.type);
})
sourceMenus[i].addEventListener("mouseleave", function(ev) {
handleMouseOverMenu(this, ev.type);
})
};
var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
for (var i = 0; i < refTimecodes.length; ++i) {
refTimecodes[i].addEventListener("click", function(ev) {
if (player) {
var time = ev.currentTarget.getAttribute("data-timestamp");
mouseSkipToTimecode(player, time, ev);
}
});
}
var refSources = document.querySelectorAll(".refs .ref"); // This is for both quotes and refs
for (var i = 0; i < refSources.length; ++i) {
refSources[i].addEventListener("click", function(ev) {
if (player) {
player.pause();
}
});
}
var testMarkers = document.querySelectorAll(".marker");
</script>
</body>
</html>