From 5cf58cd47e5293007334cbce71c47dc53014a69c Mon Sep 17 00:00:00 2001 From: Pippin Barr Date: Mon, 28 Jan 2019 07:35:05 -0500 Subject: [PATCH] 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.) --- assets/images/danaids-icon.png | Bin 0 -> 307 bytes assets/images/folder.png | Bin 0 -> 617 bytes assets/images/prometheus-icon.png | Bin 0 -> 355 bytes assets/images/sisyphus-icon.png | Bin 524 -> 449 bytes assets/images/tantalus-icon.png | Bin 0 -> 349 bytes assets/images/water.png | Bin 0 -> 673 bytes assets/images/zeno-icon.png | Bin 0 -> 383 bytes css/style.css | 1 + index.html | 54 ++++++++++++++- js/script.js | 105 ++++++++++++++++++++++++++---- process/to-do.md | 21 +++--- 11 files changed, 157 insertions(+), 24 deletions(-) create mode 100644 assets/images/danaids-icon.png create mode 100644 assets/images/folder.png create mode 100644 assets/images/prometheus-icon.png create mode 100644 assets/images/tantalus-icon.png create mode 100644 assets/images/water.png create mode 100644 assets/images/zeno-icon.png diff --git a/assets/images/danaids-icon.png b/assets/images/danaids-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..01d70b051213b1c5eb32ac1a2a897bcccfa83f37 GIT binary patch literal 307 zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D$|-g>$?hEy=V zo$kojY{0`Zx$A$u98NqwdB(P5{7eE33@i!^j2sROKxTttE0w5cXwzAlQB8CXsU-eA--llBSqIJ^<)aRyIUKbLh*2~7Yy$alj4 literal 0 HcmV?d00001 diff --git a/assets/images/folder.png b/assets/images/folder.png new file mode 100644 index 0000000000000000000000000000000000000000..d104efb3ce434db495b336b59efbf45f953010d7 GIT binary patch literal 617 zcmV-v0+#)WP)Px%BS}O-RCodHT5WcNAQ0U2c`vyc{7 zfFdw50=LrQopax%ZMW@~ev02=+fV8BS82mu+D-2k0_Lr??>5c-Ju9h|5{6g6?(vs0 zADTWMo|&Cz!?85?KJ;_85>x?9+aJG|O_y zy1Qg{Z$8ge7Mh7rpzP%Xp2k!G2}GG2dzq`Jl)CE-yuWjyz$LQ8Q~?>nliT%}HQaZr z{)oc!QJ^XSNc-p=JBbGb70^)9PGe0sq#+ZoGl`o`nybpC@HW*$36PT}f z!t)V=x!r=em-_g9tPRYo2MBtmXMW7etJSOl<`IqYYpLd0@^Ymf061DPC0)8!?!7~4 z9MP|Oz%N*cq6Yw>UX%dWUnc>&-=PS^fP{Jg6wwRwQps}nhk6l*S3t5Cz#c#%dDR?a zAL{{l0^;xrh_e93#8sKjc^HvLX)mKHK*Ewk@~X;E1xSWP-n|DvxuWiv4(|bR9RNs{ z`I7%*Vy)v_y?Dardj}|$TWe$+*-9x=;a_z%=KqK(=v5J5qpa>`eAA!IRQ&vHwXw5S300000NkvXXu0mjf D=Z+Ko literal 0 HcmV?d00001 diff --git a/assets/images/prometheus-icon.png b/assets/images/prometheus-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..8499b8450eb7f6573e47172c3c64fc803aeae28f GIT binary patch literal 355 zcmV-p0i6DcP)Px$9Z5t%RCodHn86N%FbqTK#Q*p*#-@;YE9Sl4I3!tAJOMVKg@?j56QHo=md5jI z$_mMT&f3xwzUEgTY#CXD2_Rc&SdKgay<~mU>Cl@sy#1p=o&X#0h#R6Nc><;c3kb-s zfc@)C@&wob5LenV6F|FKP?$UcpieHd19pJafiJ2&3}xJ!yL|uv002ovPDHLkV1hj8 BkQ)F1 literal 0 HcmV?d00001 diff --git a/assets/images/sisyphus-icon.png b/assets/images/sisyphus-icon.png index e40e1dd047b36fcda4e6a7bdbfe9e1645cfa32ef..894858eb3ddb14d1c91a801c566628ba11752df7 100644 GIT binary patch literal 449 zcmV;y0Y3hTP)Px$dr3q=RCodHm{AggAPhunr^oCadY0b7d$z+*WSj(yftYdQ7sVp%<}ElbkGa=x z;NzEp&!R^?sRi0d13(K;vPa}gvk~NYnx$svhQ&?u>wk z-I3>jCxEh0RY|o6RO3Q4>piKlACYc&0^kiOD7YYh5KZ?O!4m*)fLjEtY|n}iJOS_q z9FD*&1g+7qj)x}z-hjgqu%Z@qJUjtuKvXon*7ce>k;liSvSJHx%Yop9uB4x%R!htid{7 z&{4Wstr>xaV-UCC31D*}lwQ3b2+#5C?&^al0N#KuA_A|G+#ew{#ftt7izaXRh}X7kcr9d{8@jd^9;o^%{!~?&RW;8`;^KVJWD&# z?|b@KUqeHg$2M7}Tc2)ht*WYU>Ak7DW6@&ooHPLe@d*tL3@7@3eaR?Q7tae`6Q$Gs zC06b^FAgf2mg%{YgR_gOAIyU*yilO#Kfc!eszK5y!Nkt)3-_}hyxw8NuuZL zv`vyMx3v@)85t+&FDRdUeLaWqzmE~;#hWtb26sDhad98 zq_L@%RlgLw;G|S27Ql4o(%qxWPbU<}1ukw|f1jr*R#brD7jx@YwVH3ogck#&m%-E3 K&t;ucLK6UWvC_Z* diff --git a/assets/images/tantalus-icon.png b/assets/images/tantalus-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..0944d7f2654c63db12dae3e8fefab7a400186f80 GIT binary patch literal 349 zcmV-j0iyniP)Px$7fD1xRCodHm_Z5xF$_hk3y!(_aj&L0az+f{8p3aHl6 zXg#kXGCG9P1Lu?6$bGZ!a(Q3@7g6yID4=+Q-SQ$s&<*zGhGhePx%TS-JgRCodHn!!#3F$_do)IUPv|Id6AsDRMh!&Fl{X|nAq?g1Eq?q1B^bFJ5#jbGjY+p~aEI@-9_kLHBs9bn%BvYTb& zig%9ME3fk~r(S<~2b}pvNR@GlDUNeiafc^QY`s2xZVvLwySxLo_W)G}MYEB9ly2<< zPd|}-Yh)hngO~d94hTO7sDjZMg~6dTXX=`#K0E65%K@{V22t8=^w|zzu5!RE2cYn) zMjToWSk(bIb9o1Bp9E2a$UVaOS?}6he^x99sIqSJ{N{zv-mf)xl7;@XW7AImtbf0(b*W|h@oWiE zjwpsk#dh6O!Ufz - +
@@ -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