mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 02:30:42 -08:00
Code Issues Projects Releases Wiki Activity

style changes

Browse source
This commit is contained in:
David Botton 2021-02-01 12:05:57 -05:00
parent 79a31fba88
commit a46f5dbf6f
8 changed files with 39 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

6
tutorial/01-tutorial.lisp
View file

@ -30,9 +30,8 @@
; and prevent garbage collection of our CLOG-Objects
; until no longer needed.
;; To see all the events one can set and the many properties and styles that
;; exist, take a look through the CLOG manual or the file clog-element.lisp
;;; To see all the events one can set and the many properties and styles that
;;; exist, take a look through the CLOG manual or the file clog-element.lisp
(defun start-tutorial () ; Define the function called start-tutorial
"Start turtorial." ; Optional docstring to describe function
@ -44,6 +43,5 @@
;; #' tells common lisp to pass the function
;; to intialize and not to execute it.
;; Open a browser to http://12.0.0.1:8080 - the default for CLOG apps
(open-browser))

10
tutorial/02-tutorial.lisp
View file

@ -6,7 +6,6 @@
(defun on-new-window (body)
"On-new-window handler."
;; Give your app a name that apears in the browser tab/window
(setf (title (html-document body)) "Tutorial 2")
;; The CLOG-body object gives you access to a number of other CLOG-Objects
@ -16,18 +15,16 @@
;; (location body) is the CLOG-Location object
;; (navigator body) is the CLOG-Navigator object
(let ((hello-element
;; CREATE-SECTION is a lispier way of create any of the HTML 5
(let ((hello-element
;; CREATE-SECTION is a lispier way of creating any of the HTML 5
;; section elements:
;;
;; :address :article :aside :header :main :nav :hgroup
;; :p :pre :section :blockquote :h1 :h2 :h3 :h4 :h5 :h6
;;
;; Take a look at clog-element-common.lisp or the clog-manual
(create-section body :h1 :content "Hello World! (click me!)")))
(let ((x 0)) ; A closure - each call to on-new-window will
(set-on-click hello-element ; create a different version of this closer.
(lambda (obj)
@ -41,6 +38,5 @@
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))

15
tutorial/03-tutorial.lisp
View file

@ -6,12 +6,9 @@
(defun on-new-window (body)
"On-new-window handler."
(setf (title (html-document body)) "Tutorial 3")
(setf (title (html-document body)) "Tutorial 3")
(let ((hello-element
(create-section body :h1 :content "Hello World! (click me!)")))
(let ((x 0))
(set-on-click hello-element
(lambda (obj)
@ -23,13 +20,11 @@
(sleep x)))))
(run body)))
;; Running this version of the last tutorial and clicking quickly on the (click me!)
;; will demonstrate an important aspect of CLOG, events can happen in _parallel_.
;; This means that appropriate precautions to thread protect data should be taken
;; and that events do not wait for previous event handlers to complete.
;;; Running this version of the last tutorial and clicking quickly on the (click me!)
;;; will demonstrate an important aspect of CLOG, events can happen in _parallel_.
;;; This means that appropriate precautions to thread protect data should be taken
;;; and that events do not wait for previous event handlers to complete.
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))

9
tutorial/04-tutorial.lisp
View file

@ -6,23 +6,18 @@
(defun my-on-click (obj) ; obj in any event is the target of the event
(setf (color obj) (rgb 0 255 0))) ; this makes it possible to reuse events
; RGB is a helper function for colors
; RGB is a helper function for color
(defun on-new-window (body)
"On-new-window handler."
(setf (title (html-document body)) "Tutorial 4")
;; The same handler my-on-click is set no both targets
(set-on-click (create-section body :h1 :content "Hello World! (click me!)")
#'my-on-click)
(set-on-click (create-section body :h3 :content "Click me too!")
#'my-on-click)
(run body))
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))

7
tutorial/05-tutorial.lisp
View file

@ -12,20 +12,15 @@
(setf (color (connection-data-item obj "changer")) "green"))
(defun on-new-window (body)
"On-new-window handler."
"On-new-window handler."
(setf (title (html-document body)) "Tutorial 5")
(set-on-click (create-section body :h1 :content "Hello World! (click me!)")
#'my-on-click)
(setf (connection-data-item body "changer")
(create-section body :h1 :content "I change"))
(run body))
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))

4
tutorial/06-tutorial.lisp
View file

@ -9,7 +9,6 @@
(unless (connection-data-item obj "isRunning") ; So we toggle a connection-data-item
(setf (connection-data-item obj "isRunning") t) ; in order to turn on and off the flashing.
(setf (text obj) "(click me to stop!)")
;; When looping in an event or thread always check if the connection is still
;; valid to close down the event or thread.
(loop
@ -27,15 +26,12 @@
(defun on-new-window (body)
"On-new-window handler."
(setf (title (html-document body)) "Tutorial 6")
(set-on-click (create-section body :h1 :content "(click me to start!)")
#'my-on-click)
(run body))
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))

41
tutorial/07-tutorial.lisp
View file

@ -13,78 +13,71 @@
(handler-case ; Disconnects from the browser can be handled gracefully using the condition system.
(progn
(setf (title (html-document body)) "Tutorial 7")
;; Show a "splash" screen
(setf (hiddenp (prog1
(create-section body :h2
:content "KILL Darth's Tie Fighter - Click on it!")
(sleep 2))) t)
(sleep 2))) t)
;; Setup main game
(let* ((mover (create-div body :content "(-o-)"))
bounds-x bounds-y mover-x mover-y)
(flet ((set-bounds ()
(setf bounds-x (parse-integer (width (window body)) :junk-allowed t))
(setf bounds-y (parse-integer (height (window body)) :junk-allowed t))))
(set-bounds)
(setf mover-x (random bounds-x))
(setf mover-y (random bounds-y))
;; Capture browser size changes to adjust playing field
(set-on-resize (window body)
(lambda (obj)
(declare (ignore obj))
(set-bounds))))
;; Setup our "mover". Darth
(setf (positioning mover) :fixed)
(set-on-click mover #'on-click)
;; Get Darth moving!
(bordeaux-threads:make-thread ; In addtion to the main task (the on-new-window)
(lambda () ; and the task created for each event like clicks
(loop ; threads can be created as needed.
(unless (validp body)
(loop ; threads can be created as needed and used with
(unless (validp body) ; CLOG.
(return))
(when (connection-data-item body "done")
(return))
(return))
(sleep .5)
(setf (text mover) ")-o-(")
(sleep .2)
(setf (text mover) "(-o-)"))
(setf (inner-html mover) "<H1>GAME OVER</H1>")))
;; Check of browser still connected while running game loop
(loop
(unless (validp body)
(return))
(when (connection-data-item body "done")
(return))
(return))
(setf (top mover) (format nil "~Apx" mover-y))
(setf (left mover) (format nil "~Apx" mover-x))
(setf (left mover) (format nil "~Apx" mover-x))
(if (= (random 2) 0)
(incf mover-y (random 10))
(decf mover-y (random 10)))
(if (= (random 2) 0)
(incf mover-x (random 10))
(decf mover-x (random 10)))
(decf mover-x (random 10)))
(when (< mover-x 0)
(setf mover-x 0))
(when (> mover-x bounds-x)
(setf mover-x bounds-x))
(setf mover-x bounds-x))
(when (< mover-y 0)
(setf mover-y 0))
(when (> mover-y bounds-y)
(setf mover-y bounds-y))
(setf mover-y bounds-y))
(sleep .02))))
(error (c)
(format t "Lost connection.~%~%~A" c))))
;; There is no reason to run (run body) here as we check for (validp body)
;; and once the connection dies so does the on-new-window thread.
;;; There is no reason to run (run body) here as we check for (validp body)
;;; and once the connection dies so does the on-new-window thread.
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))

30
tutorial/08-tutorial.lisp
View file

@ -26,15 +26,12 @@
(bordeaux-threads:with-lock-held ((drag-mutex app)) ; Insurce the first event received
(unless (in-drag-p app) ; to drag is the only one, ie only
(setf (in-drag-p app) t) ; the innermost box is dragged.
(let* ((mouse-x (getf data ':screen-x)) ; Use the screen coordinents not
(mouse-y (getf data ':screen-y)) ; the coordents relative to the obj
(obj-top (parse-integer (top obj) :junk-allowed t))
(obj-left (parse-integer (left obj) :junk-allowed t)))
(obj-left (parse-integer (left obj) :junk-allowed t)))
(setf (drag-x app) (- mouse-x obj-left))
(setf (drag-y app) (- mouse-y obj-top))
(if (eq (getf data ':event-type) :touch)
(progn
(set-on-touch-move obj 'on-mouse-move)
@ -48,19 +45,16 @@
(defun on-mouse-move (obj data)
(let* ((app (connection-data-item obj "app-data"))
(x (getf data ':screen-x))
(y (getf data ':screen-y)))
(y (getf data ':screen-y)))
(setf (top obj) (format nil "~Apx" (- y (drag-y app))))
(setf (left obj) (format nil "~Apx" (- x (drag-x app))))))
(defun on-mouse-leave (obj)
(let ((app (connection-data-item obj "app-data")))
(setf (in-drag-p app) nil)
(set-on-touch-move obj nil)
(set-on-touch-end obj nil)
(set-on-touch-cancel obj nil)
(set-on-mouse-move obj nil)
(set-on-mouse-up obj nil)
(set-on-mouse-leave obj nil)))
@ -71,48 +65,42 @@
(defun on-new-window (body)
(let ((app (make-instance 'app-data))) ; Create our "App-Data" for this instance
(setf (connection-data-item body "app-data") app)) ; of our App.
(setf (connection-data-item body "app-data") app)) ; of our App.
(setf (title (html-document body)) "Tutorial 8")
(let* ((div1 (create-div body))
(div2 (create-div div1))
(div3 (create-div div2))
(dir (create-div div1 :content "<b>Click and drag the boxes</b>")))
;; Abosulute allows fixed positioning relative to parent
(setf (positioning dir) :absolute)
(setf (bottom dir) 0)
;; borders
(set-border div1 :medium :solid :blue)
(set-border div2 :thin :dotted :red)
(set-border div3 :thick :dashed :green)
;; sizes
(setf (width div1) 400)
(setf (width div2) 300)
(setf (width div3) 200)
(setf (width div3) 200)
(setf (height div1) 400)
(setf (height div2) 300)
(setf (height div3) 200)
;; Fixed positioning allows direct positioning relative
;; to the entire window.
(setf (positioning div1) :fixed) ; It's location relative to window
(setf (overflow div1) :hidden) ; Clip the contents
(set-on-touch-start div1 'on-mouse-down)
(set-on-mouse-down div1 'on-mouse-down)
(setf (positioning div2) :absolute) ; It's location relative to is parent container
(setf (overflow div2) :hidden)
(set-on-touch-start div2 'on-mouse-down)
(set-on-mouse-down div2 'on-mouse-down)
(setf (positioning div3) :absolute)
(set-on-touch-start div3 'on-mouse-down)
(set-on-mouse-down div3 'on-mouse-down)
(run body)))
(defun start-tutorial ()
"Start turtorial."
(initialize #'on-new-window)
(open-browser))