checkbox to hide games that have already been rated; general code cle…

…anup
iftechfoundation · Jul 4, 2024 · b9a7412 · b9a7412
1 parent 4a7518d
commit b9a7412
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 96 deletions.
diff --git a/IFComp-Dev/docker-compose.yml b/IFComp-Dev/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3.2'
 services:
     app:
         build:

diff --git a/IFComp/root/lib/site/header b/IFComp/root/lib/site/header
@@ -68,13 +68,13 @@ END;
               </li>
               <li>
                 <input type="checkbox"
-                       class="custom-control-input" hidden id="dark_mode_toggle" />
+                       class="custom-control-input" hidden id="dark_mode_toggle">
                     <a href="#"><label id="dark_mode_override" style="cursor: pointer;"
                        class="custom-control-label mode-toggle-link"
                        for="dark_mode_toggle">Dark Mode</label></a>
               </li>
           </ul>
-          <form class="navbar-form navbar-right" role="form" action="[% form_action %]" method="POST">
+          <form class="navbar-form navbar-right" action="[% form_action %]" method="POST">
             <button type="submit" id="[% button_id %]" class="btn btn-success">[% button_label %]</button>
           </form>
 

diff --git a/IFComp/root/lib/site/html b/IFComp/root/lib/site/html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
  <head>
   <title>[% meta.title or site.title %]</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,11 +8,11 @@
   <link href="/static/css/ifcomp.css" rel="stylesheet">
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
 
-  <style type="text/css">
+  <style>
 [% PROCESS ttsite.css %]
   </style>
 
- <script type="text/javascript">
+ <script>
     var dark_mode_toggle;
     var dark_mode_override;
     var iftf_logo;

diff --git a/IFComp/root/src/_current_entry_row.tt b/IFComp/root/src/_current_entry_row.tt
@@ -136,10 +136,6 @@
 
 </div>
 
-<style>
-.play-button { display: inline-block }
-</style>
-
 [% BLOCK guide_link %]
 <a href="/about/file_formats" target="_ifcomp_format_guide">(See guide)</a>
 [% END %]
diff --git a/IFComp/root/src/_filter_entries.tt b/IFComp/root/src/_filter_entries.tt
@@ -3,10 +3,12 @@
 const $playtimeSelect = document.querySelector('.playtime-select');
 const $styleSelect = document.querySelector('.style-select');
 const $platformSelect = document.querySelector('.platform-select');
+const $excludeRated = document.getElementById('exclude-rated');
 
 var filter_style = new Array();
 var filter_playtime = new Array();
 var filter_platform = new Array();
+var filter_rated = false;
 
 $("#no-visible-games").hide();
 
@@ -16,15 +18,15 @@ function updateDisplay() {
     $('div[id ^= "entry-"]').show();
     if (filter_style.length !== 0) {
         $('[id ^= "entry-"').filter(":visible").each(function() {
-            if (!filter_style.includes($(this).attr('ifcomp-style'))) {
+            if (!filter_style.includes($(this).attr('data-ifstyle'))) {
                 $(this).hide();
                 count -= 1;
             }
         });
     }
     if (filter_playtime.length !== 0) {
         $('[id ^= "entry-"').filter(":visible").each(function() {
-            if (!filter_playtime.includes($(this).attr('ifcomp-playtime'))) {
+            if (!filter_playtime.includes($(this).attr('data-ifplaytime'))) {
                 $(this).hide();
                 count -= 1;
             }
@@ -35,7 +37,7 @@ function updateDisplay() {
             var found = false;
             filter_platform.forEach(entry => {
                 entry.split(",").forEach(p => {
-                    if (p === $(this).attr('ifcomp-platform')) { found = true; }
+                    if (p === $(this).attr('data-ifplatform')) { found = true; }
                 })
             });
             if (!found) {
@@ -44,6 +46,14 @@ function updateDisplay() {
             }
         });
     }
+    if (filter_rated) {
+        $('[id ^= "entry-"').filter(":visible").each(function() {
+            if ($(this).attr('data-ifrating')) {
+                $(this).hide();
+                count -= 1;
+            }
+        });
+    }
 
     if (count == 0) {
         $('div[id = "no-visible-games"]').show();
@@ -63,6 +73,7 @@ $playtimeSelect.onchange = function () {
 }
 
 $styleSelect.onchange = function() {
+    console.log(this.value);
     if (this.value == "style-all") {
         $(this).val([]);
         filter_style = new Array();
@@ -82,5 +93,10 @@ $platformSelect.onchange = function() {
     updateDisplay();
 }
 
+$excludeRated.addEventListener('change', (event) => {
+    filter_rated = event.currentTarget.checked;
+    updateDisplay();
+})
+
 </script>
 [% END %]
diff --git a/IFComp/root/src/_rating_controls.tt b/IFComp/root/src/_rating_controls.tt
@@ -1,11 +1,11 @@
 [% IF c.user.get_object.can_vote_for(entry) %]
 
     <div class="rating-controls" style="float: right;">
-        <p>Your rating: <select data-entry="[% entry.id %]" class="rating-select">
+        <span>Your rating: <select data-entry="[% entry.id %]" class="rating-select" aria-label="Rating for [% entry.title %]">
             <option value="0">None</option>
             [% number = 1 %]
             [% WHILE number <= 10 %]
-                <option value="[% number %]" [% IF rating_for_entry.${entry.id} == number %] selected="1" [% END %] >[% number %]</option>
+                <option value="[% number %]"[% IF rating_for_entry.${entry.id} == number %] selected[% END %]>[% number %]</option>
                 [% number = number + 1 %]
             [% END %]
         </select>
@@ -15,7 +15,7 @@
         <span id="rating-status-[% entry.id %]-spinner" class="label label-default waiting" style="display:none">Submitting...</span>
         <span id="rating-status-[% entry.id %]-success" class="label label-success success" style="display:none">Rating recorded!</span>
         <span id="rating-status-[% entry.id %]-failure" class="label label-danger danger" style="display:none">Rating not recorded! (Uh oh. Contact [email protected] about this, please.)</span>
-        </p>
+        </span>
     </div>
 
 [% END %]
diff --git a/IFComp/root/src/author_name.tt b/IFComp/root/src/author_name.tt
@@ -3,7 +3,7 @@
 [% ELSIF entry.author_pseudonym %]
     <span itemprop="name">[% entry.author_pseudonym | html %]</span>
     [% IF entry.email && !suppress_links %]
-        <a href="mailto:[% entry.email %]"><img src="/static/images/email.svg" class="author-link" alt="[% entry.email %]" /></a>
+        <a href="mailto:[% entry.email %]"><img src="/static/images/email.svg" class="author-link" alt="[% entry.email %]"></a>
     [% END %]
 [% ELSIF suppress_links %]
     [% entry.author.name | html %]
@@ -14,9 +14,9 @@
 [% BLOCK name_and_links %]
     [% IF entry.author.url %]<a href="[% entry.author.url | html %]">[% END %]<span itemprop="name">[% entry.author.name | html %]</span>[% IF entry.author.url %]</a>[% END %]
     [% IF entry.author.twitter %]
-        <a href="http://twitter.com/[% entry.author.twitter | html %]"><img src="/static/images/twitter.svg" class="author-link" alt="@[% entry.author.twitter | html %]" /></a>
+        <a href="http://twitter.com/[% entry.author.twitter | html %]"><img src="/static/images/twitter.svg" class="author-link" alt="@[% entry.author.twitter | html %]"></a>
     [% END %]
     [% IF entry.email || entry.author.email_is_public %]
-        <a href="mailto:[% entry.email || entry.author.email | html %]"><img src="/static/images/email.svg" class="author-link" alt="[% entry.email || entry.author.email | html %]" /></a>
+        <a href="mailto:[% entry.email || entry.author.email | html %]"><img src="/static/images/email.svg" class="author-link" alt="[% entry.email || entry.author.email | html %]"></a>
     [% END %]
 [% END %]
diff --git a/IFComp/root/src/ballot/index.tt b/IFComp/root/src/ballot/index.tt
@@ -1,7 +1,3 @@
-<style>
-.rating-controls { display: none }
-</style>
-
 <div class="container">
 
 <div class="jumbotron">
@@ -21,15 +17,15 @@
 
 </div>
 <div class="col-sm-3">
-<a href="[% c.uri_for( '/static/downloads/IFComp' _ current_comp.year _ '.zip' ) %]"><img class="img-responsive hidden-xs download-img-link" src="[% c.uri_for( '/static/images/download_all.svg' ) %]" alt="Download all the entries" /></a>
+<a href="[% c.uri_for( '/static/downloads/IFComp' _ current_comp.year _ '.zip' ) %]"><img class="img-responsive hidden-xs download-img-link" src="[% c.uri_for( '/static/images/download_all.svg' ) %]" alt="Download all the entries"></a>
 </div>
 </div> <!-- .row -->
 
 <h1 class="page-header">Judge the games</h1>
 
 <div class="row">
 <div class="col-sm-2">
-<a href="/ballot/vote"><img class="img-responsive hidden-xs judge-img-link" src="[% c.uri_for( '/static/images/judge.svg' ) %]" alt="Judge the entries" /></a>
+<a href="/ballot/vote"><img class="img-responsive hidden-xs judge-img-link" src="[% c.uri_for( '/static/images/judge.svg' ) %]" alt="Judge the entries"></a>
 </div>
 
 <div class="col-sm-10">
@@ -155,35 +151,31 @@
 <div class="row">
     <div class="col-sm-3"></div>
 
-    <div class="col-sm-2" align=center>
-    <p><u>Playtime</u></p>
-    <select multiple size=8 class="playtime-select">
-    <option value="playtime-all">All</option>
-    <option value="15 minutes or less">15 minutes or less</option>
-    <option value="half an hour">Half an Hour</option>
-    <option value="one hour">One Hour</option>
-    <option value="an hour and a half">An Hour and a Half</option>
-    <option value="two hours">Two Hours</option>
-    <option value="longer than two hours">Longer than Two Hours</option>
-    <option value="other">No Playtime Specified</option>
-    </select>
-
+    <div class="col-sm-2" style="text-align: center;">
+        <p><u>Playtime</u></p>
+        <select multiple size=8 class="playtime-select">
+            <option value="playtime-all">All</option>
+            <option value="15 minutes or less">15 minutes or less</option>
+            <option value="half an hour">Half an Hour</option>
+            <option value="one hour">One Hour</option>
+            <option value="an hour and a half">An Hour and a Half</option>
+            <option value="two hours">Two Hours</option>
+            <option value="longer than two hours">Longer than Two Hours</option>
+            <option value="other">No Playtime Specified</option>
+        </select>
     </div>
 
-
-
-    <div class="col-sm-2" align=center>
-    <p><u>Style</u></p>
-    <select multiple size=4 class="style-select">
-    <option value="style-all">All</option>
-    <option value="parser">Parser</option>
-    <option value="choice">Choice</option>
-    <option value="other">Other</option>
-    </select>
+    <div class="col-sm-2" style="text-align: center;">
+        <p><u>Style</u></p>
+        <select multiple size=4 class="style-select">
+            <option value="style-all">All</option>
+            <option value="parser">Parser</option>
+            <option value="choice">Choice</option>
+            <option value="other">Other</option>
+        </select>
     </div>
 
-
-    <div class="col-sm-2" align=center>
+    <div class="col-sm-2" style="text-align: center;">
     <p><u>Platform</u></p>
     <select multiple size=8 class="platform-select">
     <option value="platform-all">All</option>
@@ -237,16 +229,18 @@
 
 </div>
 
-<div class="row" align=center style="padding-top: 1em;">
+<div class="row" style="text-align: center; padding-top: 1em;">
 <p>NOTE: you can use Ctrl-click / &#8984;-Click to select multiple items from the lists above. Clicking on "All" at the top will clear the selections</p>
+<p><input type="checkbox" id="exclude-rated"/> <label for="exclude-rated">Hide entries that you've already rated</label></p>
 </div>
 
 [% FOR entry IN entries %]
     [% IF entry.is_qualified %]
         <div itemscope itemtype="https://schema.org/VideoGame" class="well" id="entry-[% entry.id %]"
-             ifcomp-style="[% IF entry.style %][% entry.style %][% ELSE %]other[% END %]"
-             ifcomp-playtime="[% IF entry.playtime %][% entry.playtime %][% ELSE %]other[% END %]"
-             ifcomp-platform="[% IF entry.platform %][% entry.platform %][% ELSE %]other[% END %]"
+             data-ifstyle="[% IF entry.style %][% entry.style %][% ELSE %]other[% END %]"
+             data-ifplaytime="[% IF entry.playtime %][% entry.playtime %][% ELSE %]other[% END %]"
+             data-ifplatform="[% IF entry.platform %][% entry.platform %][% ELSE %]other[% END %]"
+             [% IF rating_for_entry.${entry.id} %]data-ifrating="[% rating_for_entry.${entry.id} %]"[% END %]
              >
             [% INCLUDE _entry_title.tt include_permalink = 1 %]
             [% INCLUDE _current_entry_row.tt %]
@@ -256,7 +250,7 @@
 
 <div class="row" id="no-visible-games">
     <div class="well">
-        <p align=center><strong>No games match your chosen criteria</strong></p>
+        <p style="text-align: center;"><strong>No games match your chosen criteria</strong></p>
     </div>
 </div>
 

diff --git a/IFComp/root/src/ballot/vote.tt b/IFComp/root/src/ballot/vote.tt
@@ -1,7 +1,3 @@
-<style>
-.rating-controls { display: none }
-</style>
-
 <div class="container">
 
 <div class="jumbotron">

diff --git a/IFComp/root/src/ttsite.css b/IFComp/root/src/ttsite.css
@@ -1,4 +1,7 @@
 
+.rating-controls { display: none }
+
+.play-button { display: inline-block }
 
 .error {
     color: #F11;