1 files changed, 19 insertions, 6 deletions
diff --git a/shader-picker.html b/shader-picker.html
index 177bc76..9c3f50c 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -31,6 +31,7 @@ form { display: inline-block; }
 #gallery { clear: right; width:100%; padding: 0; }
 #gallery-images { display: block; max-height: 210px; overflow-y: auto; }
 #gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+#username { width: 40px; }
 </style>
 </head>
 <body>
@@ -70,6 +71,7 @@ form { display: inline-block; }
 
   gif delay <input type="text" id="framedelay" value="0.1s">
   background <input type="text" id="background" value="#fff">
+  your name here &rarr; <input type="text" id="username" value="">
   <br>
   <br>
   <button id="help">help</button>
@@ -108,6 +110,7 @@ form { display: inline-block; }
 <script type="text/javascript" src="js/gallery.js"></script>
 <script type="text/javascript" src="js/color.js"></script>
 <script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript">
 
@@ -165,6 +168,9 @@ function init(){
   gallery.init()
   console.log("gallery init")
 
+  user.init()
+  console.log("signed in as ", user.username)
+  
   document.getElementById('shader').addEventListener('input', shader_build);
   shader_build()
 
@@ -432,6 +438,7 @@ encoder.on("rendered-url", function(url){
   var image = new Image ()
   lastGif = image.src = url
   $("#rendered").append(image)
+  $("#uploaded-url").hide().val("")
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
   $("#render").html("render")
@@ -439,20 +446,27 @@ encoder.on("rendered-url", function(url){
   pause(true)
 })
 
+function get_filename(){
+  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
+  var username = get_username()
+  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
+  return filename.replace(/ /g,"_").replace(/-+/g,"-")
+}
 function save (){
   if (! lastGif) return;
-  var filename = document.getElementById("url").value.replace(/^.*\//,"").replace(/\.gif.*$/,"")
+  var filename = get_filename()
   var blob = dataUriToBlob(lastGif)
-  saveAs(blob, filename + "-" + (+new Date()) + ".gif");
+  saveAs(blob, filename);
 }
 
 function upload(){
-  var filename = document.getElementById("url").value.replace(/^.*\//,"").replace(/\.gif.*$/,"")
+  var filename = get_filename()
+  var username = get_username()
   var blob = dataUriToBlob(lastGif)
   uploadImage({
     blob: blob,
-    filename: filename + "-" + (+new Date()) + ".gif",
-    username: "",
+    filename: filename,
+    username: username,
     success: function(data){
     
       // data.url
@@ -461,7 +475,6 @@ function upload(){
 
       console.log(data);
       status("uploaded");
-      
       $("#uploaded-url").show().focus().val(data.url)
     },
     error: function(data){