Added Danaids and Tantalus first drafts

? Danaids feels a little underwhelming right now, perhaps just too close to Sisyphus in the way it appears with the reversion? Though that's not necessarily a bad thing given they _all_ effectively telling the same fundamental story of infinitity and thus some sense of a "reset" that puts you back to square one. So it's not surprising you'd see that reflecting in the UI. That said, I think part of this project is surely to experiment with different UI ways of telling that. Danaids right now _is_ distinct from Sisyphus but I don't quite know. The other thing to say about it is that using the desktop metaphor inside the app is a tiny bit out of keeping with the rest, so I should think about that too? ? Tantalus came together very well I think. The reveal of the select menu containing only "None" or two greyed out options is kind of perfectly what Tantalus is all about. Reaching for something only to find it's unavailable. Available in the sense you can see it though. So that's pretty ideal. I have a "Submit" button there too to imply the idea you're trying to progress out of the screen. (This is something else Danaids doesn't actually give you? Really need to think about it. Hmm. ? While working on Danaids and also while thinking about comments on Twitter on the Sisyphus animated gif I posted, it occurred to me that there's something funny here about how a certain element of the punishment is coming through specifically in issues of usability and accessibility. People on Twitter have pointed out things like using the keyboard to input the slider by dragging it, holding it, and hitting enter to submit. I really like that they think that way, and then also that that courtesy hasn't been built into this interface for you - hell is poor usability? (Or, in a flipped sense, the interface is perfectly usable for being interface-punished.)
pippinbarr · Jan 28, 2019 · 5cf58cd · 5cf58cd
1 parent 51476d1
commit 5cf58cd
Show file tree

Hide file tree

Showing 11 changed files with 157 additions and 24 deletions.
diff --git a/assets/images/danaids-icon.png b/assets/images/danaids-icon.png
diff --git a/assets/images/folder.png b/assets/images/folder.png
diff --git a/assets/images/prometheus-icon.png b/assets/images/prometheus-icon.png
diff --git a/assets/images/sisyphus-icon.png b/assets/images/sisyphus-icon.png
diff --git a/assets/images/tantalus-icon.png b/assets/images/tantalus-icon.png
diff --git a/assets/images/water.png b/assets/images/water.png
diff --git a/assets/images/zeno-icon.png b/assets/images/zeno-icon.png
diff --git a/css/style.css b/css/style.css
@@ -15,6 +15,7 @@ body {
 }
 
 .icon {
+  padding: 10px;
   width: 100px;
   text-align: center;
 }

diff --git a/index.html b/index.html
@@ -36,20 +36,72 @@
 
 </head>
 
-<!-- Comment about the body of the HTML -->
+<!-- Icons -->
 
 <body>
   <div id="sisyphus-icon" class="icon">
     <img src="assets/images/sisyphus-icon.png">
     <div class="icon-label">Sisyphus</div>
   </div>
 
+  <div id="danaids-icon" class="icon">
+    <img src="assets/images/danaids-icon.png">
+    <div class="icon-label">Danaids</div>
+  </div>
+
+  <div id="tantalus-icon" class="icon">
+    <img src="assets/images/tantalus-icon.png">
+    <div class="icon-label">Tantalus</div>
+  </div>
+
+  <div id="prometheus-icon" class="icon">
+    <img src="assets/images/prometheus-icon.png">
+    <div class="icon-label">Prometheus</div>
+  </div>
+
+  <div id="zeno-icon" class="icon">
+    <img src="assets/images/zeno-icon.png">
+    <div class="icon-label">Zeno</div>
+  </div>
+
+  <!-- Apps -->
+
+  <!-- Sisyphus -->
+
   <div id="sisyphus-dialog" title="Sisyphus">
     <div class="instruction">Set the slider to 10.</div>
     <div id="sisyphus-slider-wrapper">
       <div id="sisyphus-slider"></div>
     </div>
   </div>
+
+  <!-- Danaids -->
+
+  <div id="danaids-dialog" title="Danaids">
+    <div class="instruction">Drag "water.png" to the "Bath" folder.</div>
+    <div id="water-icon" class="icon">
+      <img src="assets/images/water.png">
+      <div class="icon-label">water.png</div>
+    </div>
+
+    <div id="folder-icon" class="icon">
+      <img src="assets/images/folder.png">
+      <div class="icon-label">Bath</div>
+    </div>
+  </div>
+
+  <!-- Tantalus -->
+
+  <div id="tantalus-dialog" title="Tantalus">
+    <div class="instruction">Select a food or drink:</div>
+    <select name="nourishment" id="tantalus-menu">
+      <option selected>None</option>
+      <option disabled>Apple</option>
+      <option disabled>Water</option>
+    </select>
+  </div>
+
+
 </body>
 
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1,3 +1,5 @@
+"use strict";
+
 /*****************************************************
 
 Let's Play: Ancient Greek Punishment: It is as if Edition
@@ -20,27 +22,20 @@ https://github.com/simeydotme/jQuery-ui-Slider-Pips
 ******************************************************/
 
 
-let $sisyphusDialog;
-let $sisyphusSlider;
-let $sisyphusIcon;
-
 $(document).ready(function () {
 
   setupSisyphus();
+  setupDanaids();
+  setupTantalus();
+
+  // $('#tantalus-dialog').dialog('open');
 
 });
 
-// Set up Sisyphus dialog with instruction and slider
+// Set up Sisyphus icon and dialog with instruction and slider
 function setupSisyphus() {
 
-  // Set up  the icon
-  $sisyphusIcon = $('#sisyphus-icon');
-  $sisyphusIcon.draggable();
-  $sisyphusIcon.on('dblclick',function() {
-    $sisyphusDialog.dialog('open');
-  });
-
-  $sisyphusDialog = $('#sisyphus-dialog');
+  let $sisyphusDialog = $('#sisyphus-dialog');
 
   // Create the dialog to house the "app"
   $sisyphusDialog.dialog({
@@ -66,7 +61,7 @@ function setupSisyphus() {
   $('#sisyphus-submit').button('disable');
 
   // Store a reference to the slider for easy access
-  $sisyphusSlider = $('#sisyphus-slider');
+  let $sisyphusSlider = $('#sisyphus-slider');
 
 
   // Create the slider element with its options
@@ -125,4 +120,86 @@ function setupSisyphus() {
     rest: 'label',
     labels: ['0','1','2','3','4','5','6','7','8','9','10'],
   });
+
+  // Set up  the icon
+  let $sisyphusIcon = $('#sisyphus-icon');
+  $sisyphusIcon.draggable();
+  $sisyphusIcon.on('dblclick',function() {
+    $sisyphusDialog.dialog('open');
+  });
+}
+
+
+// Set up the Danaids app
+function setupDanaids() {
+  // Set up  the icon
+  let  $danaidsIcon = $('#danaids-icon');
+  $danaidsIcon.draggable();
+  $danaidsIcon.on('dblclick',function() {
+    $danaidsDialog.dialog('open');
+  });
+
+  let $danaidsDialog = $('#danaids-dialog');
+
+  // Create the dialog to house the "app"
+  $danaidsDialog.dialog({
+    closeOnEscape: false,
+    autoOpen: false
+  });
+  // Get rid of the 'x' button on the menu bar
+  $danaidsDialog.parent().find(".ui-dialog-titlebar-close").hide();
+
+  let $waterIcon = $('#water-icon');
+  $waterIcon.draggable({
+    revert: 'valid'
+  });
+  $waterIcon.css('margin','0 auto');
+
+  let $folderIcon = $('#folder-icon');
+  $folderIcon.droppable({
+    classes: {
+        "ui-droppable-hover": "ui-state-hover"
+      }
+  });
+  $folderIcon.css('margin','0 auto');
+}
+
+// Set up the Tantalus app
+function setupTantalus() {
+  // Set up  the icon
+  let  $tantalusIcon = $('#tantalus-icon');
+  $tantalusIcon.draggable();
+  $tantalusIcon.on('dblclick',function() {
+    $tantalusDialog.dialog('open');
+  });
+
+  let $tantalusDialog = $('#tantalus-dialog');
+
+  // Create the dialog to house the "app"
+  $tantalusDialog.dialog({
+    closeOnEscape: false,
+    autoOpen: false,
+    // You can specify buttons as an array of objects to get finer-grained control
+    // In this instance I want to assign an id for later reference
+    buttons: [
+      {
+        id: 'tantalus-submit',
+        text: 'Submit',
+        click: function () {
+          // Ha ha, the whole point is that you can't successfully click this button
+          console.log("This shouldn't be possible.");
+        }
+      }
+    ],
+  });
+  // We disable the button at the start
+  $('#tantalus-submit').button('disable');
+
+  let $tantalusMenu = $('#tantalus-menu');
+  $tantalusMenu.selectmenu();
+
+
+
+  // Get rid of the 'x' button on the menu bar
+  $tantalusDialog.parent().find(".ui-dialog-titlebar-close").hide();
 }
diff --git a/process/to-do.md b/process/to-do.md
@@ -11,18 +11,21 @@
 
 # Danaids
 
-- Dialog box with a file and a folder
-- Set the file to revert when you drag it anywhere
-- Have the folder highlight to at least show you're "succeeding in targeting it"
-- Icon on the desktop
-- Should these things have an initial instruction in a dialog and thereafter none except for a "Help" button?
-- Or even no explanation at all so you have to get Help? (May be too obtuse?)
+- ~~Dialog box with a file and a folder~~
+- ~~Set the file to revert when you drag it anywhere~~
+- ~~Icon on the desktop~~
+- ~~__NO, THE INSTRUCTION IS ALWAYS SO SIMPLE THAT IT CAN REMAIN PRESENT__ Should these things have an initial instruction in a dialog and thereafter none except for a "Help" button?~~
+- ~~__NO, THE POINT ISN'T TO CONTROVERT THE BASICS OF USABILITY AND ACCESSIBILITY__ Or even no explanation at all so you have to get Help? (May be too obtuse?)~~
+
+- Have the folder highlight to at least show you're "succeeding in targeting it"?
+- Consider how this one might be a touch underdone right now
 
 # Tantalus
 
-- Dialog box with a drop down with both options greyed out
-- Submit button that won't work if you haven't selected anything (maybe an error message?)
-- Also consider trying: checkboxes, radio buttons, disabled buttons at the bottom? All possible. Maybe make all of them launch at once as a way to just test which feels best?
+- ~~Dialog box with a drop down with both options greyed out~~
+- ~~Submit button that won't work if you haven't selected anything (maybe an error message?)~~
+- ~~__THE SELECT MENU IS PRETTY PERFECT__ Also consider trying: checkboxes, radio buttons, disabled buttons at the bottom? All possible. Maybe make all of them launch at once as a way to just test which feels best?~~
+- ~~Icon etc. for launching~~
 
 # Zeno