ieants.cc Forums

Scryer: if no exact cardname found, now prints all cards that may match via autocomplete.

[tables=vsv]
[[``2022/04/04 - 2022/04/17``l]]
; update hints
; image commands ; raise to 9
; ccimg ; allow query string options for w=, h=
; cclist, ccrand ; resize images to h=523
; cclist, ccrand ; open cards in new tabs where target=cardname or creator or _blank
; seticon ; fix crash if invalid URL
; ##pad ; allow transparent background
; PW or Leveler ; fix crash if ability is blank
; vogon frames ; darken seams on green frames
; playing card ; art is see-through where rules texts are
; playing card ; text is white if background is black
; blending ; option for custom, premade blend masks
[/tables]

First enable CSS modifications at vivaldi://experiments

Then go to Vivaldi settings and choose a folder to store your custom css files. Create a .css file with the following code:


/* find bar */
.active.visible.webpageview .find-in-page {position:absolute; bottom:-1px; z-index:1; margin: 0 auto; left:0; right:0; max-width: fit-content; border-radius: calc(var(--radius) * 1.3); padding-left: 6px;}
.find-in-page .fip-input-label {display:none;}
.find-in-page > label:not(:hover) .fip-checkbox-label {font-size:0; padding:.5px; }
.find-in-page .fip-checkbox-label {font-size: 80%; transition: font-size .15s !important;}
.find-in-page > .toolbar.toolbar-group button svg {transform:rotate(90deg);}
.find-in-page > .button-toolbar button {fill:crimson;}
.find-in-page > .button-toolbar button:hover {fill:beige; background:crimson; box-shadow: 0 0 0 1.5px beige inset;}
/* compact mode */
.active.visible.webpageview .find-in-page:not(:focus-within):not(:hover) {opacity: .5; visibility:hidden;}
.active.visible.webpageview .find-in-page :is(input[type="search"], .fip-results) {visibility:visible;}
/* nomatch alert */
.find-in-page.fip-nomatches:focus-within input[type="search"] {color:maroon; background:pink; transition: 0s .15s !important;}
.find-in-page.fip-nomatches:focus-within {animation: jump 1.3s steps(2) .15s 4 !important;}
@keyframes jump {8% {transform:translateY(0);} 1%, 5% {transform:translateY(5px);} 3% {transform:translateY(-4px);}}


Sources:
[tables=list]
; https://forum.vivaldi.net/topic/28750/less-obstructive-compact-bottom-find-bar/1?lang=en-US
; https://forum.vivaldi.net/topic/10549/modding-vivaldi
[/tables]

Successfully sent VSV block via Node.js via Pug.

First, each HTML page must include vsv.js in the head, in order to transform VSV into DOM in the client browser.

VSV block should be sent inside a script element. This script will call VSV.mapTo.autoScript(). This function will automatically determine the VSV type (is it table, list, VML?), then insert it into the DOM before the current script element.

The custom filter for Pug looks like this. But first clean up the text so it escapes the brackets that are critical to VSV as the text is passed through the network. Backticks in javascript maintain the multiline text; so they should also be escaped.

VSV.pugFilters = {
'vsv':function (text, options) {
return "<script>VSV.mapTo.autoScript(`" + text.replace(/([`{[(<])/g, '\\$1') + "`);</script>";
}
};


Simply pass this filter to render:

res.render(myDoc, {filters: VSV.pugFilters});


Inside a pug file, include with vsv filter, like so:

include:vsv /public/atable.vsv
include:vsv /public/alist.vsv
include:vsv /public/mydoc.vml


Inline VSV block can be created like so, with indentation:

:vsv
[[vsvlist]]
,almonds
,banana
,cream pie


The client browser will receieve a script element with the above inner text from our filter. Upon reception, the script will execute, thus adding our VSV into the DOM.

2022/04/03

---

; new image manipulation command ; ##transparent,color,alpha
; color is HTML format: 6-hex-digits with leading hash #
; alpha is float between 0.0 and 1.0

Ex. turn cyan invisible
##transparent,#00ffff,0.0

---

; allow multiple images per field ; all image URLs ; delimiter double dollars $$

All image fields (seticon, typeicon, watermark, overlay, art) may accept multiple images. At the end of the URL, append $$ double dollars for each extra image. Each image can also have their own image manipulation commands. These commands go before the $$.

Not to be confused with double semicolons ;; that separates each half of a split card. $$ and ;; can work together to provide multiple images to one or both halves.

Ex. two images on top of each other
https://ieants.cc/magic/symbols/guilds/mana_rw.png$$https://ieants.cc/magic/symbols/guilds/mana_wu.png

Ex. two guild symbols side by side
https://ieants.cc/magic/symbols/guilds/mana_rw.png##pad,r,205##alpha,0.1618$$https://ieants.cc/magic/symbols/guilds/mana_wu.png##pad,l,205##alpha,0.1618

Here we pad images to "push" them to left or right. Then alpha the images.

Ex. each half of a split card gets two different watermarks (total 4 different watermarks)
https://ieants.cc/magic/symbols/guilds/mana_rw.png##pad,r,205##alpha,0.1618$$https://ieants.cc/magic/symbols/guilds/mana_wu.png##pad,l,205##alpha,0.1618;;https://ieants.cc/magic/symbols/guilds/mana_gw.png##pad,r,205##alpha,0.1618$$https://ieants.cc/magic/symbols/guilds/mana_br.png##pad,l,205##alpha,0.1618

1.68

; RegEx include https://ieants.cc/magic/scry.php

Possible to allow custom or user defined frames ?

[tables=list]
+Reasons
++ any possible frame may be created by anyone
++ l can't do them all myself
++ won't have to include into crowded drop down
+Concerns
++ Security
++ Methodology
++ Ease of use
++ Resources locations
++ Undiscovered additional rendering or other code
++ Special frames, i.e. split cards, flip, levelers, planeswalkers
+Ideas
++VSV / JSON file includes
+++URLs to
,,,, frame images
,,,, masks
,,,, fonts
,,,, custom mana
,,, PHP class ?
,,, options parameters to pass to functions
++API
,,, drawing functions
,,, rules box
[/tables]

Any comments and suggestions welcome.

Integrated Content Management and Propagation System

Requisite: An integrated, comprehensive web software system, with single control panel, to manage and propagate new posts, blogs, microblogs, images, files, etc. Connected to Fediverse, where other registered or anonymous users, may converse.

Details:

For easier administration, a single system that connects new website content, including posts, images, links. Such that updating new content automatically shares with rest of Internet or Fediverse.

For easier propagation of ideas and content to maximum netizens, using simple, consistent interface.

Suggestions:

; Hubzilla ; Drupal (with addons for ActivityPub) 

Source: https://en.wikipedia.org/wiki/Fediverse

2022/03/23

; new frames ; Vogon Deco ; Art Deco style, including fonts

In Vogon Deco, the P/T now also acts like Mana Cost. Use Mana Cost and P/T to display symbols in fixed positions on the card. Use space in Mana Cost or P/T to levae a position blank and advance to the next position. Mana Cost surrounds the art; P/T surrounds the rules.

Recommend you utilize Custom Mana to use your own symbols.

The symbols appear quite large, like some other CCGs. Vogon Deco is great frame if your CCG or card uses a lot of symbols. You can put even more (smaller) icons in the extra bar (which behaves like rules, so use rules syntax.)

Even for Magic, you can use icons for evergreen keywords, like flying, haste, trample, etc.

---

2022/03/24

; flavor text ; allow bold text with <>

---

2022/03/26

; use Stored Procedures

---

2022/03/27

; tribrid mana ; i/n/f = infinite ; c/h/a = chaos (planeswalk)

One idea for pseudo-simple tables. Beforehand, user must define the number of columns they want in the table. Default is 2, if not set by user. Then every data provided just fills cell by cell, row by row. When the amount of data in a row matches the column count, then move on to next row. Until all the data is incorporated. Of course, you can make a cell empty by writing empty strings or null values.

Also must declare how many header rows. Default is 0. Likewise, if enabled, data values become header cells, filling up to the column and header row limits. (in HTML, these are TH tags.) Then the rest is normal data, filled accordingly. (in HTML, these are TD tags.) Can use empty headers.

This way, data can be as simple or complex as you want. Series of simple data can be written as a simple list of values. Complex data can be child items, declared as sub-elements.

Called ftable for fill table. Fully functional in editor.

Ex.

[ftable
<
,columns,3
,headerRows,1
>
,Header 1,Header 2
[span
  ,complex Header3
]
,simple,row,here
,first column
,second column
[a
  ,complex third column is anchor element
]
]


Ex. try messing around with this ftable in the editor. modify the attributes settings. alter the data. create simple and complex data, and empty data.

[ftable
<
,columns,5
,headerRows,2
>
,header1,header2
,data1,data2
,data1,,,
[p
,new paragraph
[span
,this is a span
]
]
,data1,
[a
<#href#https://ieants.cc>
,new link
]
]


ftable will also accept vsvtable-style header rows and captions. Note only simple headers can created this way. Header rows created this way will not count against headerRows attribute. They will append a new row of headers, but will not interrupt the filling of the cells. They could also be used to create new header rows in the middle of a table.

In fact this may be the only way to create captions for ftables.

Ex.

[ftable
<
,columns,5
>
((``Caption``))
((Header1)) ((Header2))
((Header3)) ((Header4))
,data1,data2
,data3,data4
,data5,,,
]



Heck, try ftable or vsvtable within ftable.

[spoiler]


[div
[ftable
<
,columns,5
,headerRows,2
>
,data1,data2
,data3,data4
,data5,,,
[p
,new paragraph
[span
,this is a span
]
]
,data1,
[a
<#href#https://ieants.cc>
,new link
]
[ftable
<
,columns,5
,headerRows,2
>
,data1,data2
,data1,data2
,data1,,,
[p
,new paragraph
[span
,this is a span
]
]
,data1,
[a
<#href#https://ieants.cc>
,new link
]
[vsvtable

((``Demo``r))
[[Name]] {{Age}} ((Gender))
((each row of data can have different delimiter, no problem
,Hammie, 20.5, F
-Chow, Vivian-40-F
:Amuseum:25:M:
*Shena'Fu *18+5/12 *F
|Grndr-1245|21 months||

Fairy Nuff 14 K N/A
((``Guess these names :)``b))

]
]

]
[p
,outside parag
]

]


[/spoiler]