Added total drink counters for #2, other Sass and JS tweaks!

content/css/_counters.sass

@@ -0,0 +1,13 @@
+[data-counter]:after
+	content: attr(data-counter)
+	position: relative
+	display: inline-block
+	left: 10px
+	font-size: 16px
+
+#total
+	position: absolute
+	right: 1rem
+
+[data-counter]:after, #total
+	font-family: monospace

content/css/_lists.sass

@@ -15,8 +15,3 @@ ul
 	ul
 		li
 			text-align: center
-			&[data-counter]:after
-				content: attr(data-counter)
-				position: relative
-				display: inline-block
-				left: 10px

content/css/stylesheet.sass

@@ -3,3 +3,4 @@
 @import _layout
 @import _lists
 @import _links
+@import _counters

content/index.html

@@ -1,7 +1,7 @@
 <ul>
 	<% sorted_articles.each do |post| %>
 		<li>
-			<h1><%= link_to post[:title], post.path %></h1>
+			<h1><%= link_to post[:title], post.path, :'data-counter' => '0' %></h1>
 			<time datetime="<%= post[:created_at] %>" title="<%= post[:created_at] %>">
 				<%= pretty_date(post[:created_at]) %>
 			</time>

content/js/game.js

@@ -1,14 +1,18 @@
-// Globally available data and helper functions
-
-// "Parameterize" a string similar to Ruby
-// https://www.w3resource.com/javascript-exercises/javascript-string-exercise-7.php
-const string_parameterize = function (str1) {
-	return str1.trim().toLowerCase().replace(/[^a-zA-Z0-9 -]/, '').replace(/\s/g, '-');
-};
-
 // Gets the name of the specific game
 const game_name = string_parameterize(document.getElementById('title').innerText);
 
+// Add to the total drink count
+function incrementTotal() {
+	// Reference the counter
+	const total_elem = document.getElementById('total');
+
+	// Increment the counter
+	total_elem.innerText++;
+
+	// Add it to localStorage
+	localStorage.setItem(`drinking-game-${game_name}-total-count`, total_elem.innerText);
+}
+
 // The individual 'drink!' function
 function drink(game) {
 	// Increments the counter
@@ -19,6 +23,9 @@ function drink(game) {
 
 	// Save to localStorage
 	localStorage.setItem(`drinking-game-${game_name}-${drink_name}`, game.parentElement.dataset.counter);
+
+	// Add to grand total
+	incrementTotal();
 }
 
 // Load saved drinks from localStorage
@@ -39,6 +46,13 @@ function fetchDrinks() {
 			current_drink.parentElement.dataset.counter = current_drink_count;
 		}
 	});
+
+	// Fetch total counter value if set
+	const total_drink_count = localStorage.getItem(`drinking-game-${game_name}-total-count`);
+
+	if (total_drink_count > 0) {
+		document.getElementById('total').innerText = total_drink_count;
+	}
 }
 
 // Run fetchDrinks after DOM is loaded

content/js/global.js

@@ -0,0 +1,7 @@
+// Globally available data and helper functions
+
+// "Parameterize" a string similar to Ruby
+// https://www.w3resource.com/javascript-exercises/javascript-string-exercise-7.php
+const string_parameterize = function (str1) {
+	return str1.trim().toLowerCase().replace(/[^a-zA-Z0-9 -]/, '').replace(/\s/g, '-');
+};

content/js/index.js

@@ -0,0 +1,21 @@
+function fetchTotalDrinks() {
+	const games = Array.from(document.getElementsByTagName('a'));
+
+	games.forEach(function(game) {
+		// Get current drink name from text
+		const game_name = string_parameterize(game.innerText);
+
+		// Get current drink value from localStorage
+		const game_count = localStorage.getItem(`drinking-game-${game_name}-total-count`);
+
+		// Set counter to localStorage value if set
+		if (game_count > 0) {
+			game.dataset.counter = game_count;
+		}
+	})
+}
+
+// Run fetchTotalDrinks after DOM is loaded
+document.addEventListener('DOMContentLoaded', function(event) {
+	fetchTotalDrinks();
+});

layouts/default.html

@@ -11,8 +11,11 @@
     <main>
       <%= yield %>
     </main>
+    <script src="/js/global.js"></script>
     <% if @item[:title] %>
       <script src="/js/game.js"></script>
+    <% else %>
+      <script src="/js/index.js"></script>
     <% end %>
   </body>
 </html>

layouts/header.html

@@ -4,6 +4,7 @@ <h1>
 			<span id="title">
 				<%= @item[:title] %>
 			</span>
+			<span id="total">0</span>
 		<% else %>
 			<%= title %>
 		<% end %>