Some DOM stuff, VIEW

extras/body.html

@@ -10,10 +10,14 b''
     <div id="qsp-objs" class="qsp-frame">&nbsp;</div>
   </div>
   <div class="qsp-col qsp-col3">
-    <a href="javascript:SugarQSP.lib.savegame()"><img id="qsp-btn-save"></a>
-    <a href="javascript:SugarQSP.lib.opengame()"><img id="qsp-btn-load"></a>
+    <a id="qsp-btn-save"><img></a>
+    <a id="qsp-btn-open"><img></a>
   </div>
 </div>
 
 <div id="qsp-dropdown">
 </div>
+
+<div id="qsp-image-container">
+  <img id="qsp-image">
+</div>

extras/default.css

@@ -94,10 +94,21 b''
     height: 50px;
 }
 
-#qsp-btn-save {
+#qsp-btn-save img {
     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACSklEQVRoge3ZPWgUQRjG8V/iRRFU/GoEQdSohSgWWqQSooVgK9iJFiKCnYV2BkFQsBRBQQwWVsHKIoWxEOzEwmhhogbRMhhFicTvYm+JCUlmZzabRLN/OPaWeZ+ZeW7feXf2lpqampqamnRaImKP4hA2VjCP27hbpoNGwbib2IPreB+IPYY7M7SvxWYM4QNO4QqWyQxVRgdeYnnB+K5A+wUcbB7z+O14hxPx08toLRDTgfv4mjrIJFrwwMS0HsABXMTxlE6LpNYqfE7pPJIBdOKhLM1uxIiLrpG5YtC4GSLMVGGkLdD+GpfxAuvxaVL7oCzN+jCG7iKDVmHkKS5hSSBuJ3bg6hRt+Zrpa553z8bEuoQrUVXk1exwKLBI1ZpPBnAL+0KBqanVim1Ykaifji+yNfIrVphipB1n8BgjCfqZ2IrTuIZXMcIUIydxFj8TtEW4JysW52JEKWtkVHUm4EdzjChSrkgLlmJXghb6m8ep9MN4K25XjvTF3sCaElrT6McS+0w2Mirb+JWhrH4CC/0+UpjUK7Ia5/86f4IeHMHeEvPJ+4km1chHE43k9KROpCyLPrViym8/vjW/b5Jt3acjL7/RzEX5bRg3sjKg+2fK7/PmZ9aZzdTqxwYzp06IBZFaDeHUCbFgUquy1Anx35TfRWXkd+WzCBOcQxEjQ7JH0PmiHW9CQUWM9Mr+Y+osO6ME8nF7Q4FFn8T2y14VDMt2vsFfqCRbZBvTdbLXFI9CgphHyjbsVu4+EcMInuH7HI1XU1NTU7OI+QMFe2N82rtssgAAAABJRU5ErkJggg==');
 }
 
-#qsp-btn-load {
+#qsp-btn-open img {
     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAACCklEQVRoge3Yz6sNYRzH8deVexNxSaEoroWFUuomOceSPVnIwsbSxs6Psrgphf9AsrZR7kJWsroUlrZKKZRSl4USGouZk9Npzp1n5pm5x4/nXdNzpvP9Pp/v95nv82OGRCKRSCQS/w8zuIn3yGpe37CEQ6sedQk38BA7G/jO4BQ+YEebQZUxVfH/OxzGVSxX2D4o2mO4jmt4jpNFe6d5mPFkRbvQ0H9h6OqUtR33/xXr0celGn4/sYjXoQ5dJ3ILB7AOW2r4bcIj7GsrkEFpXWyrwwbaf15nXWqv6SqK1abuHDmPjV0EMobhBWIZt8cZVu0j2ZDNHF7gblRozdiO49g1zqDOEzmKJ7gcGVQTzmLDSgZ1Eunh2dD9aewpsXtctH3cwzn5ALysoVWlXZvhleMV5ovfU8J363mciAliRLsRg0Q244vfT3A/zgT2cQHbImIY1S4ldPk9Ii+NH8V9H08DfbfiY6BtiHYpoYmMBr4bbwN9YzfVoEELnew9+blpwBv5u0oI9wPtQrUbkWFaXqOzsZ01IFg7pLQOyp/A58igmhCsHZJInYndNsHa/0wiVWTy9/a5NjprQGvag0Qmwd462iGltdQ8lihqlVVIIn/9/CAvrajDWgTRB8VhMt1/aSljVr4RToc6hJTWioe1jujJD4rfQx2qRvuTyX1JuTIh3UQikUgkEhPnF+1xZ9hHnLjAAAAAAElFTkSuQmCC');
 }
+
+#qsp-image-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    display: none;
+    justify-content: center;
+    align-items: center;
+}

src/api.ps

@@ -21,6 +21,22 b''
      title
      "</a>"))
 
+(defm (root api init-dom) ()
+  ;; Save/load buttons
+  (let ((btn (document.get-element-by-id "qsp-btn-save")))
+    (setf (ps:@ btn onclick) this.savegame)
+    (setf (ps:@ btn href) "#"))
+  (let ((btn (document.get-element-by-id "qsp-btn-open")))
+    (setf (ps:@ btn onclick) this.opengame)
+    (setf (ps:@ btn href) "#"))
+  ;; Close image on click
+  (setf (ps:@ (document.get-element-by-id "qsp-image-container") onclick)
+        (this.show-image nil))
+  ;; Close the dropdown on any click
+  (setf window.onclick
+        (lambda (event)
+          (setf (ps:@ (api-call get-frame :dropdown) style display) "none"))))
+
 ;; To be used in saving game
 (defm (root api stash-state) (args)
   (setf (root state-stash)
@@ -285,3 +301,48 b''
      :do (when (ps:@ v ended)
            (ps:delete (ps:@ (root playing) k)))))
 
+(defm (root api show-image) (path)
+  (let ((img (document.get-element-by-id "qsp-image")))
+    (cond (path
+           (setf img.src path)
+           (setf img.style.display "flex"))
+          (t
+           (setf img.src "")
+           (setf img.style.display "hidden")))))
+
+;;; Saves
+
+(defm (root api opengame) ()
+  (let ((element (document.create-element :input)))
+    (element.set-attribute :type :file)
+    (element.set-attribute :id :qsp-opengame)
+    (element.set-attribute :tabindex -1)
+    (element.set-attribute "aria-hidden" t)
+    (setf element.style.display :block)
+    (setf element.style.visibility :hidden)
+    (setf element.style.position :fixed)
+    (setf element.onchange
+          (lambda (event)
+            (let* ((file (elt event.target.files 0))
+                   (reader (ps:new (*file-reader))))
+              (setf reader.onload
+                    (lambda (ev)
+                      (block nil
+                             (let ((target ev.current-target))
+                               (unless target.result
+                                 (return))
+                               (api-call base64-to-state target.result)
+                               (api-call unstash-state)))))
+              (reader.read-as-text file))))
+    (document.body.append-child element)
+    (element.click)
+    (document.body.remove-child element)))
+
+(defm (root api savegame) ()
+  (let ((element (document.create-element :a)))
+    (element.set-attribute :href (+ "data:text/plain;charset=utf-8," (api-call state-to-base64)))
+    (element.set-attribute :download "savegame.sav")
+    (setf element.style.display :none)
+    (document.body.append-child element)
+    (element.click)
+    (document.body.remove-child element)))

src/intrinsic-macros.lisp

@@ -137,6 +137,9 b''
 
 ;;; 18img
 
+(ps:defpsmacro view (&optional path)
+  `(api-call show-image ,path))
+
 ;;; 19input
 
 ;;; 20time
@@ -148,3 +151,15 b''
      (api-call new-local ,(string (second var)))
      ,@(when expr
          `((set ,var ,expr)))))
+
+;;; 22for
+
+;;; misc
+
+(ps:defpsmacro opengame (&optional filename)
+  (declare (ignore filename))
+  `(api-call opengame))
+
+(ps:defpsmacro savegame (&optional filename)
+  (declare (ignore filename))
+  `(api-call savegame))

src/intrinsics.ps

@@ -250,9 +250,9 b''
 
 ;;; 18img
 
-(defm (root lib refint) ())
-
-(defm (root lib view) ())
+(defm (root lib refint) ()
+  ;; "Force interface update" Uh... what exactly do we do here?
+  )
 
 ;;; 19input
 
@@ -278,6 +278,8 b''
 
 ;;; 21local
 
+;;; 22for
+
 ;;; misc
 
 (defm (root lib rgb) ())
@@ -288,37 +290,3 b''
 
 (defm (root lib killqst) ())
 
-(defm (root lib opengame) (&optional filename)
-  (let ((element (document.create-element :input)))
-    (element.set-attribute :type :file)
-    (element.set-attribute :id :qsp-opengame)
-    (element.set-attribute :tabindex -1)
-    (element.set-attribute "aria-hidden" t)
-    (setf element.style.display :block)
-    (setf element.style.visibility :hidden)
-    (setf element.style.position :fixed)
-    (setf element.onchange
-          (lambda (event)
-            (let* ((file (elt event.target.files 0))
-                   (reader (ps:new (*file-reader))))
-              (setf reader.onload
-                    (lambda (ev)
-                      (block nil
-                             (let ((target ev.current-target))
-                               (unless target.result
-                                 (return))
-                               (api-call base64-to-state target.result)
-                               (api-call unstash-state)))))
-              (reader.read-as-text file))))
-    (document.body.append-child element)
-    (element.click)
-    (document.body.remove-child element)))
-
-(defm (root lib savegame) (&optional filename)
-  (let ((element (document.create-element :a)))
-    (element.set-attribute :href (+ "data:text/plain;charset=utf-8," (api-call state-to-base64)))
-    (element.set-attribute :download "savegame.sav")
-    (setf element.style.display :none)
-    (document.body.append-child element)
-    (element.click)
-    (document.body.remove-child element)))

src/main.ps

@@ -24,12 +24,9 b''
 ;; Launch the game from the first location
 (setf window.onload
       (lambda ()
+        (api-call init-dom)
         (funcall (ps:getprop (root locs)
                              (ps:chain *object (keys (root locs)) 0))
                  (list))
         (values)))
 
-;; Close the dropdown on any click
-(setf window.onclick
-      (lambda (event)
-        (setf (ps:@ (api-call get-frame :dropdown) style display) "none")))