diff --git a/assets/images/danaids-icon.png b/assets/images/danaids-icon.png new file mode 100644 index 0000000..01d70b0 Binary files /dev/null and b/assets/images/danaids-icon.png differ diff --git a/assets/images/folder.png b/assets/images/folder.png new file mode 100644 index 0000000..d104efb Binary files /dev/null and b/assets/images/folder.png differ diff --git a/assets/images/prometheus-icon.png b/assets/images/prometheus-icon.png new file mode 100644 index 0000000..8499b84 Binary files /dev/null and b/assets/images/prometheus-icon.png differ diff --git a/assets/images/sisyphus-icon.png b/assets/images/sisyphus-icon.png index e40e1dd..894858e 100644 Binary files a/assets/images/sisyphus-icon.png and b/assets/images/sisyphus-icon.png differ diff --git a/assets/images/tantalus-icon.png b/assets/images/tantalus-icon.png new file mode 100644 index 0000000..0944d7f Binary files /dev/null and b/assets/images/tantalus-icon.png differ diff --git a/assets/images/water.png b/assets/images/water.png new file mode 100644 index 0000000..18f4e70 Binary files /dev/null and b/assets/images/water.png differ diff --git a/assets/images/zeno-icon.png b/assets/images/zeno-icon.png new file mode 100644 index 0000000..f77648a Binary files /dev/null and b/assets/images/zeno-icon.png differ diff --git a/css/style.css b/css/style.css index a1e0d16..0e5f425 100644 --- 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 index 9b9ea81..8b1b81b 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ - +
@@ -44,12 +44,64 @@
Sisyphus
+
+ +
Danaids
+
+ +
+ +
Tantalus
+
+ +
+ +
Prometheus
+
+ +
+ +
Zeno
+
+ + + + +
Set the slider to 10.
+ + + +
+
Drag "water.png" to the "Bath" folder.
+
+ +
water.png
+
+ +
+ +
Bath
+
+
+ + + +
+
Select a food or drink:
+ +
+ + diff --git a/js/script.js b/js/script.js index 607b7be..347f8e1 100644 --- 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 index 8056af1..83c517d 100644 --- 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