gopher-proxy – /0/hosted/screwlisps-kitten/lispgames/NicCLIM-example-html-table.page.md

---
layout: ../Site.layout.js
---
# NicCLIM Example of making an HTML table for this site
<table>
 <tr><td>🦉</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td>🍋🌽🕊🌿</td><td>🐬🌱</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>🥦</td><td></td><td></td><td>🪵</td></tr>
 <tr><td></td><td>🍐</td><td>🦢🦢🦭</td><td>🐛🐛</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>🍈</td><td>🪷🌲</td><td>🍑</td></tr>
 <tr><td></td><td></td><td>🌷</td><td>🦀</td><td></td><td></td><td></td><td></td><td></td><td></td><td>🫐</td><td>🦃</td><td>🥥🦢</td><td>🪰</td><td>🐡🐥</td><td>🥜</td></tr>
 <tr><td></td><td>🌹</td><td></td><td>🍏</td><td>🪳</td><td>🌾</td><td>🦭</td><td></td><td></td><td></td><td></td><td></td><td>🐣</td><td>🌳</td><td></td><td></td></tr>
 <tr><td></td><td></td><td>🦃</td><td>🐋</td><td>🥦🌱🦀🪱</td><td></td><td></td><td></td><td>🕸</td><td>🪳</td><td>🐙🫐</td><td></td><td></td><td></td><td>💐</td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>🐚🍃</td><td>🎄</td><td></td><td></td><td>🍃🕊🕷🌱</td><td>🌻🍀</td><td>🥒</td><td></td></tr>
 <tr><td></td><td></td><td></td><td>🧚</td><td>🍋</td><td></td><td>🐋</td><td></td><td></td><td></td><td></td><td></td><td></td><td>🐣🐙</td><td></td><td></td></tr>
</table>

Let us begin taking NicCLIM more practically. And make a life-filled ASCII table element for this site's banner. This also moves towards a general theory of automata for our NicCLIM spacetime-box tiles.

I guess https://lispy-gopher-show.itch.io/nicclim links us to https://screwlisp.small-web.org/lispgames/trying-nicclim-v2/ for advice on what to do. I'll `eww` into that in emacs. By the way, `eww` + [Eduardo's `eev-mode`](http://anggtwu.net/#eev) is *great*- navigate a site, tap `f8` on the ee-bullet lines I wasa looking for...

# Setup

On that webpage, I tapped f8 on

```
• (setq inferior-lisp-program "ecl")
• (slime)
• (setq eepitch-buffer-name "*slime-repl ECL*")

(ensure-directories-exist #p"~/GAME/")

(uiop:chdir "~/GAME/")
(uiop:chdir "~/GAME/")

;; I guess I forgot the critical lines!
(ql:quickload :mcclim)
(compile-file "~/Downloads/nicclim.lisp" :load t)
;; Which we downloaded from my first link, and
(in-package :nicclim)
```

since I guess this is my conventional working directory, and the lisp image's purpose is to be running NicCLIM.

# Creating a map inside a `spacetime-box`

Remembering that we are borrowing [spacetime from Olum](https://screwlisp.small-web.org/lispgames/spacetime-boxes-nicclim/) for our distributed game spacetime volumes and time evolution.

## Making one 2D layer

```
(rect-file "NATURE" 16 8 ())
```

## Put that into a `spacetime-box`

```
(defparameter *box* (make-instance 'spacetime-box))

(with-slots
      (dims times.contentses insward-facets)
    *box*
  (setf dims '(16 8 1)
	times.contentses '((0 nature))
	inward-facets
	`((
	   ((0 15) (0 7) (0 0))
	   (0 0 0)
	   ,*box*)
	  ))
  )	
```

that seems like it calls for a lot of polish, but I have not decided what that polish would be like yet. Hence just directly exposing the `spacetime-box` instance's slots. It seems like a spacetime box could be created solely with a list of layers that would be inside it, or even a formula for creating new layers to put inside it. Not the topic right now though.

# Open the `nature` layer for editing with NicCLIM

```
(enclose-map "NATURE")
```

<img src="../nicclim-spacetime-screenie.png">

this is a great  starting point and all, but let us switch to

# Programmatically populating nature with unicode

## [My own unicode character collection from before](/lispgames/cl-unicode-chicken-sudoku/)

```
(defvar *some-characters* "🪴🌳🎄🌲🌴⸙🍃🥬🥕🥦🍁🍀🍂🍉🍏🍎🍍🌵🌿🥗🥒🥔🍈🍌🎋🍄🪵🥝🫐🫒🍠🍓🥥🍋🍇🥜🪷🍑🍐🎃🥒🌾🌽🌹⚘💮💐🎕🥀🏶🏵🌱🌻🌷🫘🐛🪱🦋🪲🐝🪰🐞🐜🦟🕷🦀🦞🪳🐌🐚🦂🕸🦐🧚🐥🐦🦅🐔🐓🦆🦢🐤🐣🦃🕊🐧🦉🦫🦩🦚🦤🐡🐟◉🍥🎣🐠🦈🦫🐉⥿🐙🦑🐚🦭🐋🐬🪸🦀")
```

## Start the app in the background

```
(require :bordeaux-threads)
(bt:make-thread
   (lambda () (enclose-map "NATURE")))
```

## A random walk loop to place clusters of animals.

```
(loop
  :with n-clusters := (random #o30)
  :with current-n := 0
  :with x := 0
  :with y := 0
  :with (xlim ylim zlim) := (slot-value *box* 'dims)
  :while (< current-n n-clusters) :do
    (loop
      :with d := 5
      :with -d/2 := (-(truncate 5 2))
      :with no-chars := (length *some-characters*)
      :for sym := (make-symbol
		   (let ((idx (random no-chars)))
		     (subseq *some-characters*
			     idx (1+ idx))))
      :for m := 0
      :for dx := (+ -d/2 (random d))
      :for dy := (+ -d/2 (random d))
      :for new-x := (+ x dx)
      :for new-y := (+ y dy)
      :when (and (< 0  new-x xlim)
		 (< 0 new-y ylim))
	:do (multiple-value-setq
		(x y)
	      (values new-x new-y))
	    (incf m)
	    (block insert-symbol
	      (loop
		:for cmd :in `((set-cur1 ,sym)
			       (jump ,new-x ,new-y)
			       (push-cur1))
		:do
		   (execute-frame-command
		    *nic* ; from enclose-map
		    cmd)
		   (sleep 1)))
      :while (< m current-n)
      :finally (incf current-n)))
  
```

The gif is quite boring, because [McCLIM](https://mcclim.common-lisp.dev/main.html) focuses on frequently used, language unicode symbols and doesn't render almost all of these emojis.

<img src="../nicclim-map-rec.gif">

### Stopping that interactively!

What I did, when I realised that it was going to be a while before it stopped on its own was `C-c C-c` in my emacs repl, followed by:

```
(bt:all-threads)
;; the new application-frame thread was the first thread
(bt:destroy-thread (first *))
ABORT
```

and then

```
(execute-frame-command *nic* '(com-writef nature))
```

to salvage the situation.

### State of the layer now

Literally, `NATURE` is now

```
NIC> (execute-frame-command *nic* '(log-map))
(#:🦉)	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL
NIL	NIL	(#:🍋 #:🌽 #:🕊 #:🌿)	(#:🐬 #:🌱)	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	(#:🥦)	NIL	NIL	(#:🪵)
NIL	(#:🍐)	(#:🦢 #:🦢 #:🦭)	(#:🐛 #:🐛)	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	(#:🍈)	(#:🪷
                                                                             #:🌲)	(#:🍑)
NIL	NIL	(#:🌷)	(#:🦀)	NIL	NIL	NIL	NIL	NIL	NIL	(#:🫐)	(#:🦃)	(#:🥥 #:🦢)	(#:🪰)	(#:🐡
                                                                         #:🐥)	(#:🥜)
NIL	(#:🌹)	NIL	(#:🍏)	(#:🪳)	(#:🌾)	(#:🦭)	NIL	NIL	NIL	NIL	NIL	(#:🐣)	(#:🌳)	NIL	NIL
NIL	NIL	(#:🦃)	(#:🐋)	(#:🥦 #:🌱 #:🦀 #:🪱)	NIL	NIL	NIL	(#:🕸)	(#:🪳)	(#:🐙 #:🫐)	NIL	NIL	NIL	(#:💐)	NIL
NIL	NIL	NIL	NIL	NIL	NIL	NIL	NIL	(#:🐚 #:🍃)	(#:🎄)	NIL	NIL	(#:🍃 #:🕊 #:🕷 #:🌱)	(#:🌻
                                                                           #:🍀)	(#:🥒)	NIL
NIL	NIL	NIL	(#:🧚)	(#:🍋)	NIL	(#:🐋)	NIL	NIL	NIL	NIL	NIL	NIL	(#:🐣 #:🐙)	NIL	NIL
```

Which I guess we would like to turn into

# an html table.

```
(slot-value *nic* 'table-list)
(loop
  :initially (princ "<table>")
  :repeat (length *)
  :for row :in * :do
    (fresh-line)
    (loop
      :initially (princ " <tr>") :do
	(loop :for cell :in row :do
	  (princ "<td>")
	  (mapc 'princ cell)
	  (princ "</td>"))
	(loop-finish)
      :finally (princ "</tr>"))
  :finally (terpri) (princ "</table>"))
		    
```

Soo


<table>
 <tr><td>🦉</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 <tr><td></td><td></td><td>🍋🌽🕊🌿</td><td>🐬🌱</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>🥦</td><td></td><td></td><td>🪵</td></tr>
 <tr><td></td><td>🍐</td><td>🦢🦢🦭</td><td>🐛🐛</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>🍈</td><td>🪷🌲</td><td>🍑</td></tr>
 <tr><td></td><td></td><td>🌷</td><td>🦀</td><td></td><td></td><td></td><td></td><td></td><td></td><td>🫐</td><td>🦃</td><td>🥥🦢</td><td>🪰</td><td>🐡🐥</td><td>🥜</td></tr>
 <tr><td></td><td>🌹</td><td></td><td>🍏</td><td>🪳</td><td>🌾</td><td>🦭</td><td></td><td></td><td></td><td></td><td></td><td>🐣</td><td>🌳</td><td></td><td></td></tr>
 <tr><td></td><td></td><td>🦃</td><td>🐋</td><td>🥦🌱🦀🪱</td><td></td><td></td><td></td><td>🕸</td><td>🪳</td><td>🐙🫐</td><td></td><td></td><td></td><td>💐</td><td></td></tr>
 <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>🐚🍃</td><td>🎄</td><td></td><td></td><td>🍃🕊🕷🌱</td><td>🌻🍀</td><td>🥒</td><td></td></tr>
 <tr><td></td><td></td><td></td><td>🧚</td><td>🍋</td><td></td><td>🐋</td><td></td><td></td><td></td><td></td><td></td><td></td><td>🐣🐙</td><td></td><td></td></tr>
</table>

# Conclusions

That was pretty great. I should keep making those latin squares from before as well.

# Fin.

See [you on the Mastodon thread please](https://gamerplus.org/@screwlisp/115245557313951212).

Share where and how occurs to you and as you like.