Forem: Peter Vivo

A Game for the Mind

Peter Vivo — Sat, 18 Apr 2026 20:50:43 +0000

Share your vision!

Please share your vision, how you can saw to planet bright or dark future! What is your personal plan to save our planet?
I am apologies about my next write keep in mind that is just my personal reflection this topic & my crazy answer is:

Spoiler!

It is time to reveal my cards: mordorjs is a joke wrapped around a serious question for all of us.

It is a game for the mind. A mental exercise meant to make us think a little harder. My goal with it is simple: we should not forget how to think. We should keep exercising our minds, because this may be the most important human ability we have left.

And maybe it is also one of the few things that can still help us save this planet.

Right now, it is fashionable to say that the rise of AI will bring us a better future. I am not bold enough to state that as a certainty. I would rather frame it critically, as a possibility with both promise and danger.

That is why I tried to warp this message into a sci-fi abstraction.

The hidden premise is this: AI-robots take control over the planet, and the last surviving human resistance, thousands of years later, is concentrated in a place called Mordor. Their mainframe supercomputer is: S.A.U.R.O.N., together with Dr. Sauron’s bio-clone technology, allows them to resist the AI-robot elves and the dwarves who keep extracting the planet’s last resources far too aggressively.

Yes, they dug too deep in Moria.

The foundation of this resistance is the mordor-project file format, a Final Underground File Format that was sent back from the far future using vibe-travel technology. This file format is real, can easy contain a whole project in encrypted but for human easy to understund format even without describe. Also fine for hold other information just by space, if you read a proper mordor-project from distance. Also the vertical reading can stimulate or brain.

Passing by the joke, however, there is a real concern:

If we stop thinking critically, if we outsource too much of our judgment, and if we keep consuming the Earth as if its resources were infinite, then our future may indeed become a parody of fantasy — dark, absurd, and self-inflicted.

Ethical AI

Another perspective — one I cannot fully define yet, only feel — is that protecting our planet also requires awareness that every agent task consumes energy, and sometimes a great deal of it.

Because of that, I would like to see transparent energy usage reporting for AI models.

I would genuinely like to know, for example, how much energy was consumed when I generated more than 60,000 AI images in 2024.

I can only imagine a truly ethical use of AI if this kind of data becomes transparently available to us. Only then can people make responsible decisions for themselves and use AI only as much as they really need.

What I Built

I would also suggest that we should not stop at sharpening the mind alone. It is just as important to put our care for the environment into practice.

I am fortunate enough to have a garden full of plants, where I regularly plant more and more trees.

Code

https://github.com/Pengeszikra/mordorjs

npm install -g mordorjs@latest

My Mental Map

Finally I try to describe my mental model in one formula:

1John1 + 5John17 |> 1Moses1 = (1Moses2 ... 4.22John21);
alpha & omega = !![];

TLDR;

Use your mind! Arguing with us!

-- Vibe Archeologist

MCM :: mordor-coffe-machine

Peter Vivo — Tue, 14 Apr 2026 15:42:14 +0000

_______________________ dm.rovivruS_1 _______________________
            t I     w s t a               t
  I     l b h t     a e h n l e c   u   m h       a   b C r
    t   e e e       s g e d o f o   n   o e       r   l o u
    o   a t   a a f   m     n f n i d   s       o r   i n i
I a   a s w   l t o   e     g e t t e r t   c s f i r n t n o
  m   r t e   s   r   n   r   c r s r e     a t   v e k i e f
      c   e   o       t l e   t o e s w     l e   e p . n d
      h   n     l   n e a s a i l l t r     l w     l   u
    w i     o m e   o d n t g v . f o i   E e a     a   e
    r v   o u e a   t , g o o e     o t o l d r     c
a   i e o u t a s       u r         d t f v   d w   e R     m
m o t   n r e n t u     a a t     c   e   e   s i   a e     e
  n e   e   r s   s     g t h   W o t n   n   h s i b a   f n
  l                     e i a   e u h         i d n l d o o .
  y       e           a   o t t   l a     a i p o   e   n r
n   i     r     i   d b   n   h   d t     d t . m       l t
o   n r h a     n   e s   .   a         h m     . s   s y r
t     e i         i s t     f n       f u i       t h l   e
      a d   f o   n t r     i   l     a m n h     a a o i s
      c d a i u     r a o   r   e     s a i e     i n w f s
  t   h e n l r     o c f T e   a     t n s a     n d l
  h p e n d t   f   y t   h     r b r e i t l T B l s y
t e l d     e   r   e e s e   m n e e r t r i h u e   . y
h   a       r   a t d d t     e e   c   y a n e t s     o
e   i       s   g h . , a     t d   o     t g y   s a   u m
    n y       m m e     b v   a   h r     i .       n     a
  l   o   y   e e   I   i i a d t u d t   v       w d D   y
l a   u c o   t n   t   l c n a o n s h h e     w h   o
a s l r h u d h t       i t d t o t   a a   T c i i   u
s t a   a r i o s o     z o   a   e w n d p h a s t   b s
t   n   i s d d . f w a a r       d e     e e l d e   t t
    g   n .   s   f a n t s       . r     a y l o       i
  o u s           i s d i       l   e     c   e m   e   l r
  n a c   T       c     o   i a a       a e   d     y o l e
  e g r   h n s D i     n l r n t B     l .         e f   m
    e e s a o t o a     , e o d e y   c r   c i   s s f   a
s   . e t t t i   l       a n         i e T a t   h   i   i
u     n i     l       b a r         b t a h l     e   c   n
r     , l m   l     r u l n     t   e i d e l t d l   i
v       l e         e r i e a   h   i e y y e h o l   a b
i s   t   a   w n h n i g d r   a   n s     d e e s   l e t
v t   h e n   o o i a e n   e n t t g   a       s   t   l h
o i I e x s c r t s m d m     a   h   c c           h   i e
r l f n i   a k   t e   e     r   e   o c   i       a   e
  l     s   t ,   o d   n   l r       u e   t r     t   v
    t   t   c     r ,   t   e a       l p     e n       e
  t h   s   h     i   u ,   s t m     d t     t o w   b
  r i a           e   n     s i e       e     u t i   e
o u s t         s s   d       v m t     d     r   t   a   f
f s             e .   e       e o i   f       n   h n u   i
  t         e   a     r         r m   a             e t a n
  e         v   r               y e   l             v y   a
  d         e   c                     l         u   e .   l
            r   h M                   ,         s   r
            y     o                             u
M           t     r                             a         r
o           h     d               w             l         e
r           i     o               e             l         f
d           n     r                             y         u
o           g                                             g
r           .                                             e
.

April Fools Challenge Submission ☕️🤡

Peter Vivo

Apr 12

M||D||JS = MorDorJS

#showdev #devchallenge #418challenge #javascript

Comments 5

10 min read

M||D||JS = MorDorJS

Peter Vivo — Sun, 12 Apr 2026 03:08:36 +0000

This is a submission for the DEV April Fools Challenge

TLDR :: MP is FUFF the Final Underground File Format :: mordor-project

What I Built

Everybody knows that productivity is measured in LOC. The more lines of code you produce, the more serious your project must be. Clean, readable code matters too, of course. And surely you remember the old convention that a line should stay under 80 characters.

We chose to move beyond that.

In mordor.js, there is only one rule:

the maximum line length is 1.

That is all.

Simple, isn’t it?

1D programming language

Because the whole codebase is a single vertical line, it comes with many advantages:

Long lines are no longer a problem
AI has a much harder time reading your code
Your editor width becomes irrelevant
Horizontal scrolling is gone forever
Screenshot-based code theft becomes much less practical
Your daily LOC can grow to legendary numbers
Code review becomes an act of courage

Demo

Code

https://github.com/Pengeszikra/mordorjs

npm module

npm install -g mordorjs@latest

https://www.npmjs.com/package/mordorjs

Secret ingredient

/** @type {string[]} - Character map, for example: c = 'c', D = '.' */
[,c,,e,,f,,h,,i,,j,,l,,m,,n,,o,,p,,r,,s,,t,,u,,a,,d,,g,,S,,C,,X,,Y,,Z,,D]=`cefhijlmnoprstuadgSC() .`;
/** @type {number} - A = 10 */
A=9+1;
/** @type {string} - O = 'sort' */
O=s+o+r+t;
/** @type {string} - K = 'constructor' */
K=c+o+n+s+t+r+u+c+t+o+r;
/** @type {string} - P = 'split' */
P=s+p+l+i+t;
/** @type {string} - J = 'join' */
J=j+o+i+n;
/* F = Function */
F=[][O][K];
/** @type {string} - R = 'return String.fromCharCode(' */
R=r+e+t+u+r+n+Z+S+t+r+i+n+g+D+f+r+o+m+C+h+a+r+C+o+d+e+X;
/** @type {string} - E = '' */
E=[]+[];
/** @type {string} - N = '' (empty string) */
N=``;
/** @type {string} - w = '\x1d' (U+001D, backslash encoding marker) */
w=F(R+(A*3-1)+Y)();
/** @type {string} - B = '\x1e' (U+001E, newline encoding marker) */
B=F(R+A*3+Y)();
/** @type {string} - Q = '\x1f' (U+001F, backtick encoding marker) */
Q=F(R+(A*3+1)+Y)();
/** @type {string} - G = '\n' */
G=F(R+A+Y)();
/** @type {string} - T contains the 1W JS source between the begin and end split points */
T=`
`;
/** @type {string} - M = source with structural newlines removed */
M=T[P](G)[J](E);
/** @type {string} - V = '`' (backtick, char code 96) */
V=F(R+(A*9+6)+Y)();
/** @type {string} - W = '\' (backslash, char code 92) */
W=F(R+(A*9+2)+Y)();
/**
 * Restore the normalized source:
 * M = source
 *      .split('\x1f').join('`')
 *      .split('\x1d').join('\\')
 *      .split('\x1e').join('\n')
 */
M=M[P](Q)[J](V)[P](w)[J](W)[P](B)[J](G);
/* Execute the normalized JS source: Function(M)(); */
F(M)();

How I Built It

I was using gemini cli for mass coding, testing, reworking workflow.
But sometime need a good old handcoded method also.
The video base image created by geminit:nano-banana
video: seadance 2.0

build script

node mordor.js mordor.js --mordorjs > bin/mordor.cjs

That means the project can already rebuild itself using its own transformation model.

The next phase

This short fragment shows how the language begins.
The extra , characters are used to avoid unwanted vertical string \n artifacts.

[
,
c
,
,
e
,
,
f
,
,
h
]
=
`
c
e
f
h
`
;

From there, our resistance developers found a key survival technique for an age in which the AI threat was rising too quickly.

The next logical step was a human-read-first carrier format:

mordor-code

mordor-code is a multiline vertical stream format.

It is designed to be read vertically, not horizontally. It may be compact, or it may contain extra space-filled columns between letters and symbols. Tabs are not allowed, and multi-width characters should be avoided. In generated output, tabs are normalized to two spaces.

In mordor-code, newline may also be represented explicitly as ¬ when needed.

Because spacing inside the vertical stream is flexible, mordor-code can carry not only source-like content, but also human-only hints, hidden notes, and decorative structures embedded directly into the layout.

And for the example block, this would fit well:

A small mordor-code example:

T  i  i  c  p     b     
h  m  n  a  a     u     b
i  p  f  n  r  a  t  r  e
s  o  o  n  s  i     e
   r  r  o  e     y  a  r
   t  m  t     a  u  d  e
   a  a     t  g  o  !  a
   n  t  b  h  e        d
   t  i  e     n  c     y
      o        t  a     !
      n        s  n     !
               !

mordor-project

As of v0.0.2, mordorjs can also generate a mordor-project file.

A mordor-project is a single text container that can carry an entire project tree in one file.

Each embedded file is stored as:

a header line
followed by a vertical payload block

For now, the project payload is carried in base64-rendered mordor form, which makes recovery safer for all file types, including indentation-sensitive and binary content.

definition

entry :=
  header newline payload

header :=
  /^_{4,}\s(.+)\s_{4,}$/

header content :=
  <reverse-coding-info>::<reverse-path>

payload :=
  all following lines until next header or EOF

Do not miss the demo vide where you can watch the mordor-project creation process.

Finally I found one important note:

                c   p               t     a           i   t
          c   d a   r     W     s   h     s           s   h
T n c l i o   u m   e     h   i e d a o       s e f o     o
o o o o t n r r p c c   d a   s a e t b     a c n r n     s P
  t m s   c e i a o i a i t i o l s   j h   n a t a l   b e r
    p t   l c n i n s n s   n l e i t e a p d v r g y   e   e
    a     u o g g s i d s r t a d g h c n o   e u m     y   s
a   c     s r   n t o   o e a t . n e t d t   n s e   c o w e
n a t   w i d     r n   l m c e   s   -   e   g t n   o n h r
y b   d a o e     u   i v a t d I     m   n   e   t   m d o v
  a   u s n d t   c   m e i ,   t   f y   t h r     h p     e
  n   r       h t t   m d n   h s c r t w i e s     u l
  d   i     o e h s t o   e t u   a a h i a r   t   m e     t
  o   n     n   a   h r   d h m   r g : t l e h h   a t m r h
s n b g   w   f t   a t     e a   r m   h l d a i   n e y e e
u   o     a   i     t a       n   i e   o y i v s i - .   m
r t o   d s   n       l i w     s e n   u   t e   n g   l a
v h t t i   t a   a   i n a     i d t   t   a   s   u   i i
i e s h s   h l   g l t t s r   z     a     r   e   i   f n f
v   t e m a e   t a a y o   i e e       u   y   a m d   e . i
i   r   i l   B h i t       n n   t     n t     r a e   t   r
n   a   s m h a e n e       g c s h     d e r   c c d S i   e
g s p s s o a r   s r   l m - l h e s   e c e e h h   h m S .
  e   e e s n a   t     e e s a o   u r r h c a   i   o e e
  a   a d t d d       f g m e v u   r i s n o c   n   u . e
h r f l     - -     g o e o e e l   v n t i r h   e c l   k
u c r i     f d e   e r n r d s d g i g a c d     - o d
m h a n a   r û n   n   d y       r v , n a s m   r p     t —
a . g g s c a r e   e   ,     a   e e   d l . i t e i     h
n   m     e m   m u r n       n   a d   i .   s o a e     e
  T e     r e   y s a o c     d   t     n   S t   d s m S   D
m h n   u t         t b o w m     e   a g S e a   a . o h r r
i e t   n a o e     i i r i a   n s       e a k   b   r o i .
n r     s i f n     o l r t y r o t   t o a r e   l   d u n
d e f o t n   g     n i u h   e t   i o f r c n a e   o l g
    r f a l t a f i s t p o r o     n k   c h   u     r d -
  e o   b y h g i n   y t u e p       e   h     t   D     s S
  x m   l   e e r     . e t s e d   o n         o l e     e a
s i     e f   m s       d   t n e   r , i       n a s     e r
t s   t , a   e t o m       o   c d a   t   w p o n t     d u
i t t h   l   n   v i A     r   e e l   s a h r m g r   m . m
l s h e   s   t   e s f     e   i n   a   r e e o u o e o   a
l   e     e   . d r t t         v s   n   c r s u a y n r   n
          . S   e w o e r c   p e i       h e e s g   d d
  a f       A   p h o r e o   a   t a   o i   r   e   u o R
  n i   s   U   l e k   t m   t   y c   r v p v s     r r e
a   r i y   R   o l   t e p o h   . c   i e r a y     e   c
b   s n m T O   y m   h l r p w y   o h g s i t s b i ,   o
l   t n b h N I e i   e l e e a o   u e i , e i t e n   f v
e     e o e - t d n     i h r y u   n i n   s o e y t   a e
      r l   c     g c   n e a s .   t r .   t n m o e t l r
  e     i f o       o f g n t       s l   r s   s n r h l
  a r   c r n   t   o a s s i     I   o T u , f . d m i , t
  r e   , a t   h   r l , i o         o r i   o     e s   h
t l s     g r w e n d l   o n         m e n   r     d     e
o y i f   m o a   u i ,   n a l S       a s         i   l
    s i   e l s l m n     . l o o   d   t , s o     a   e
r   t r o n l   o b a   a     n m   i       o w D   r   t
e   a e r t e i n e t   n     g e h s   a   l n o n y w
a   n .     d n g r i a d   c     a t p l   d e   e   o   l
d   c           - s o l   I o   o v o a l s i r   c   r t o
  r e           l , n l   f n   f e r s   e e s   e n k h s
  i             i       m   t t     t s s a r h n s o   i t
  n e   c       f       a r i h     e e u l s i o s t m s
  g r   e w     e       c e n o     d d c e , p t i e u   b
  - a I r a w t         h c u u         h d   .   t s s   o
t s , n e s a h   m f t i o i g t r   f           y   t r o
h e     m   r a   o o r n v t h h e i r     a     .     e t
i e   e o     t e v r a e e y t e a n o     n           c s
s d   a n   m   l i   c   r       s t m r v d D   C     o t
  , b r i l a   v n   e n e       o o   e a   o d o w   r r
    e l a a c s e g     o d       n     p u     e m h   d a
    l i l s h a n     c i   a   o       o l     s m e c   p
    i e . t i m     g o s   c   l       r t     c i n o s .
r   e r     n e     r n e   r p d     h t s   n r t   n e
e a v       e     w a t .   o e e t   a s ,   o i     t r
c   e             i c i     s r s o   n       t b   t i v
o   d             t e n     s m t     d         e   r n e
r       T         h   u       a                     a u
d       h             i       n                 t   n e
:     r a             t       e                 h   s
      e t             y       n                 e   f
      p                       t   b   t             e
      o           s           l   e   o             r
      r           u           y   l
D     t           c               i
o     s           h               e
                                  v
                                  e

Thanks to the entire Mordor office team, and special thanks to the Nazgûl Manager, who guided me through this challenging process.
I invite you to discover mordor, the last peaceful haven of humanity.

Thanks for reading. S.A.U.R.O.N. is calling. Become an early adopter of mordor-project. Mordor is our last safe haven, and we are counting on you.
— Vibe Archaeologist

Vibe Archeologist: From Z80 Assembly to an 1859 Mudbrick House and Beyond

Peter Vivo — Fri, 20 Mar 2026 17:44:37 +0000

Born a month before the Moon landing, I’ve spent 56 years watching the world shift from vacuum tubes to LLMs. While others are chasing the latest JS framework, I’m busy rebuilding an 1859 mudbrick house in Blender and writing a WASM compiler that feels like Z80 assembly. This is not just a memoir of a GitHub Copilot Challenge winner; it’s a manifesto for the "Vibe Archeologist"—the bridge between the raw silicon of the past and the fluid AI of the future.

https://dev.to/devteam/congrats-to-the-github-copilot-cli-challenge-winners-2240

1969

It is high time I started writing my memoirs. I don’t know if winning this challenge means I’ve dug my own grave or found the key to a brighter future, but understandably, I choose to remain optimistic. To put it bluntly: I was born exactly one month before humanity landed on the moon (1969). I don’t feel old, but saying "56 years" out loud... well, it’s quite a lot.

The story is fascinating in hindsight because it began in those heroic days before the internet, back when I felt I was born on the "unluckier" side of the planet: in Hungary, on the wrong side of the Iron Curtain. At the same time, it had its perks. As a child, there were no gadgets to steal the magic of a childhood painted with drifting clouds.

My relevance with computers started with a Scramble arcade machine installed in a local pub. At 11 years old, it took real courage just to enter that "csehó" (dive bar) with my friend. That same year, I was lucky enough to see Star Wars: A New Hope in the cinema. I was absolutely stunned by the opening scene as the Star Destroyer thundered over our heads—we didn’t need 3D; the experience was perfect.

All of this had an impact. With grid paper, scissors, and markers, I began crafting tabletop strategy games that didn't exist in their current form back then. My friends and I enthusiastically fought galactic wars with hundreds of paper ships—the only danger was my mother opening the door too quickly, sending our entire fleet scattering across the room.

Eventually, I learned the basics of BASIC from an early book that was more of a general guide to computers, only touching on programming as a side note. Fortunately, at a Budapest International Fair (BNV), I found a retro mainframe at an exhibition booth where I could actually sit down and run some code. That was the first time I felt what it was like to program.

Later, after dropping out of university (I was supposed to be a silicate chemical engineer), I bought my first computer: a Videoton TV Computer. Back then, I used a cassette tape recorder for storage and wrote games in Z80 assembly. In those days, even multiplication was considered a luxury.

Forgive this lengthy memoir section; I just wanted to introduce the times when computing was far from being as trivial as it is today. But now, with a hyperspace jump—passing through owning my own RPG shop and developing physical CCG card games—I eventually became a professional programmer.

...years passed, until...

2024: Dawn of AI

AI kicked the door down, and I couldn't avoid it. My first year was about diving into image generation. I tried to create something unique, but after a year and 60,000 images, I tossed the whole thing in the bin. However, I learned a lot about prompt engineering—how crucial it is to express ourselves precisely. This applies to any form of prompting.

But the real test for me is when I get an LLM to be a Tabletop RPG Game Master while I play. I believe this is a true measure of how well a model can think complexly and play a role within a consistent world. I do this test periodically; it's practically my only "prompt-based game." I highly recommend it: single prompt RPG - boring long full conversation.

Returning to the "peak climb," in 2024 I started entering challenges: A.L.I.E.N. S.O.L.I.T.A.I.R.E.. This was my first, where I tested how well my JSDoc-based, type-supported React state handler npm module worked. I later moved away from it because I began shifting toward a "no framework, pure code" direction. Regardless, that 65-line JSDoc module is truly useful, though these days I find even the useReducer React state management to be an excessive abstraction.

2025

After a disappointment in September, I used the "hair of the dog" tactic and signed up for two more hackathons. One was on Reddit, the other focused on AI extensions. Back then, I was still far from "vibe coding." Preparing for these was exciting. I poured a lot of energy into them, and in the process, a Markdown viewer was born... along with a minimal framework hidden within Flogon Galaxy.

https://dev.to/playfulprogramming/javascript-frameworks-heading-into-2026-2hel

Added to this was a flat 3D CSS game "engine" and an original sci-fi world. This led me to enter an AI video competition, where I visualized the backstory of my previous game in a 6.5-minute AI sci-fi video. During development, the protagonist (a punk-metal singer named Wora Shard) even got her own full music album (available on my YouTube channel). The story was very "round," and even though I didn't place in any competition, it did two things: it boosted my confidence regarding hackathons and solidified my commitment to minimalism.

1859

Eventually, that massive self-confidence crashed into reality. We were living in a rental, but I found the ruined little house of my dreams in Csobánka. It’s a traditional "vályog" (mudbrick) house, bleeding from several wounds, built in 1859 according to the cellar attached to it. We managed to snag it, and though it required a loan, we bought the cottage. Now, it’s just a matter of time and even more money before we can move in. For the plans, I started modeling the house in low-poly, using a "single texture" approach. This keeps the model around 4MB, so I don't have to struggle with material settings.

2026

Vibe coding has arrived. Today's tools are true partners in accelerating the development process. Now, the opportunity is before me to sift through my memories and dust off a good few ideas to implement them with a fresh approach.

Vibe Archeologist

Of course, I can't stop, because different forms of creativity keep launching me onto new paths. My next plan is to reach back into the world of Z80 assembly, but with the aim of making WebAssembly (WASM) programming tangible for people. I'm creating a language that compiles to WASM but looks like assembly, where you can see exactly what is happening and why in the debugger in real-time. Because I believe we must know the foundations—while providing an experience for programmers where hex numbers still matter.

Oscar goes to ...

Peter Vivo — Wed, 18 Mar 2026 13:43:56 +0000

My Oscar vote for the best AI short video of 2026 goes to:

WOW: REBORN Tauren: Every Trail Leads Home

This is, of course, a deeply personal choice, but I feel this work truly deserves to be highlighted here for several reasons.

For one, this feels like the right community for it. And beyond that, I have always felt that it is difficult — and often unnecessary — to separate development from content and art. We are human beings who love to create, and creation naturally brings many things together. At least for me, these areas have never existed as sharply separated categories.

That is why storytelling, craftsmanship, and overall quality have always mattered to me so much — especially now, in the age of AI, when more and more people ask what role is left for us. My answer is simple: us. We matter because we are here.

One of the reasons this particular piece resonated with me so strongly is that I watch AI-generated videos on a regular basis, and what I pay attention to is not mainly the technical execution. What I look for is the human work behind it: whether the creator’s intention comes through, the same way it does in a painting or a film.

When I saw this work, I immediately felt as if I had traveled back in time. More than ten years ago, when I was playing WoW, I started with a Tauren character, and instead of feeling like I had entered a violent hack-and-slash RPG, I found myself in a world that brought back for me the peaceful atmosphere of the old Wild West — a vision of the endless plains before conquest erased the people who once belonged to them. And all of that was blended with a prehistoric animal world in such a memorable way.

This piece brings back that same feeling in an almost cinematic form, thanks both to the power of AI and to the creative vision of its makers.

There was also a more personal connection for me: my wife used to make leather shoes and bags for many years, so that added another layer that really touched me.

It stood out like a burning torch among the countless AI videos built mainly on spectacle.

Big congratulations to the creators:

Adventure of javascript based MMORPG creation.

Peter Vivo — Wed, 04 Mar 2026 12:13:45 +0000

This post is hidden in my dashboard long-long time ago. Because a 8 or nine years ago - fare before AI ages. I start to create a small RPG, based on older graphics, the time passed by and project start as react but later turn to nextjs/TS. Honestly now I don't using neither. But this is a bit of time travel how chaotic is my mindset that ages.

repo: (https://github.com/Pengeszikra/rogmor)
live: (https://rogmor.vercel.app/)

Now I vibecode even a much smaller RPG with gemini CLI: (https://dev.to/pengeszikra/the-royal-gazette-a-single-line-noble-intrigue-20nn)

Long-long time ago I decided to create some cool MMORPG program ... but I failed! Meanwhile I do lot of different jobs from seller (in RPG shop), graphic designer to front end developer. In a last few years my focus on react and functional programming, so now I can start write another (easy) MMORPG game.

Maybe after famous TODO application, the MMORPG is the next indie development goal, especial when we would you like to be a full stack developer.

I have to admit that I have been writing this post for more than a year. So you follow how improving my workflow by the time

Graphics form the past

My plan was don't spend too much time with graphic and RPG element. I grab out one of my old graphic set, and convert to sprite sheet. Because with react framework basic output is HTML, instead concentrate on program architect.

Roll Play Game Math

First of all a little function which one is essence of rpg math:

const leveling = (level, mod = 0.5, pow = 4, madd = 2) => Math.round(
  mod * Math.pow(level, pow) + (madd * level)
);

For example, if we would like level cap set to 60, and best value on that level is near 80k, then after few minutes tweak get the next result, which means we can control our result by mod value settings:

Array(60).fill().map((_,lvl) => leveling(lvl + 1, .3426, 3, 100));

// = [100, 203, 309, 422, ..., 72645, 76263, 80002]

Technical stack 1st version:

fre :: react like JSX based framework
react-troll :: my state handling helper for react
callbag :: really interesting functional stream programming js solution
deno :: instead node.js / avoid node_modules hell.
some noSQL database :: maybe mongoDB

Technical stack leap to NEXT

typescript :: higher order languages for JS reason :: static typing.
nextjs :: react like hybrid static & server rendering js framework
openAI :: The latest technical stack is including some AI for workflow.

Architect decisions

MMORPG program is fare better case for make well strict architect decisions compared by ordinary TODO application. I try to list my decisions:

front end design pattern
communication between front end and back end
skeleton of ui
state handling on user side
database
server side design pattern
RPG rules
Single or Multiple hero game

Question is: How can I handle quite complex UI by minimal state, maybe:

json {root: '', modal: ''}

Then link and openModal solve this single page app UI main state.

Important Pieces of MMORPG

I choice multi hero managament system instead single one because this means don't need to too much details for items.

Login
Hire Hero
Loot
- Resources
- Items
Hero Leveling
Combat
PVE
PVP
Area
Metagames
Login Rewards
Advertising

Complex state-reducer-actions flow by callbag

Probably RPG game game mechanic is quite complex so lets try it, it seems to work on early iteration, but I tell the truth it is so over engineered!

NextJS the road to fullstack

The new gamechenger framework is the NextJs which one is capable to made client and server side code with one language ... and one repo so this is what I waiting so long.

Reach the cloud

For multiuser application is deffinetly need some database. In old time I think about own VPN server with capable to run database and server side code. But NextJS as gamechanger framework allow to me whole code written in one repo. Just the database still as question.
I found the mongoddb cloud good place to reach my data from anywhere. So it is meet needs.

Encounter Saga

Decide between the callbag (functional js library) and redux-saga (declarative generator extension for react), so winner is SAGA. So basic turnbased encounter core code looks like this:

export function * encounterSaga (encounter:Encounter) {
  while(true) {
    const {mobList, situation} = encounter;
    const activeMob:Mob = turnGoesTo(mobList, situation);
    const {payload:act} = firstMob.isUser 
      ? yield take(USER_ACT)
      : yield call(npcActSaga, activeMob , encounter);
    ;
    const outcome:OutcomeList = yield call(playTurnSaga, encounter, act);
    yield putAction(PLAY_ACTION, act);
    yield putAction(PLAY_OUTCOME, outcome);

    if (outcome.includes(Outcome.ENDED)) yield cancel();
  }
}

Slash the domain driven script languge

Each hero have own skillset, for simplify the coding this skills, I maded a little script language which looks like Tailwind but this result is very different:

after put together slas script with saga the combat controll logic looks like this:

labelled while help me to simplify the saga.

export function * combatZoneSaga() {
  while (true) {
    const {payload:encounterTeams} = yield take(ENCOUNTER_BEGIN);

    const {hero}:MainState = yield select();

    const pickProf = () => pickOne(Object.keys(skillForProf))

    const combatSetupMobList = encounterTeams.map(([lvl, type, team, avatar]:[number, ProfessionKey, Team, number]) => 
      makeMob(lvl, type, team, avatar)
    );

    yield putAction(SET_MOB_LIST, combatSetupMobList)
    let mobList = combatSetupMobList;

    _CombatIsOver_: while (true) {
      const order = actionOrder(mobList);

      while (order.length) {
        const [actor]:OrderOfSeed = order.shift();
        yield putAction(PLAY_FLOW, {who: actor.uid});
        const skillList = getSkillObject(actor);
        const {isAutoFight} = yield select();
        const subList = yield call(userChoiceTheSkillSaga, skillList, actor, isAutoFight)
        if (subList === null) break _CombatIsOver_;

        _NextActor_: while (true) {
          if (subList.length < 1) break _NextActor_;

          const [, command] = yield race([
            delay(BATTLE_SPEED),
            take([HEART_BEAT, ENCOUNTER_OUTCOME]),
          ])

          if (command?.type === ENCOUNTER_OUTCOME) break _CombatIsOver_;

          const skill = subList.shift();
          const [aiTargetting, skillResult] = getSkillResult(actor, skill, mobList);
          yield putAction(PLAY_FLOW, aiTargetting);
          yield putAction(PLAY_FLOW, skillResult);
          mobList = yield call(skillReducer, mobList, skillResult);
          yield putAction(SET_MOB_LIST, mobList);

          const isTwoTeam = mobList
            .filter(isCapableToAction)
            .map(mob => mob.team)
            .find((item, _, arr) => arr.indexOf(item) !== 0)
          ;

          if(!isTwoTeam) {
            yield putAction(FOCUS_ON, null);
            break _CombatIsOver_;
          }
        }
      }
    }
    yield call(calculateEncounterResultSaga, mobList);
  }
}

Auto content generate by ChatGPT

Suddenly I meet the crazy AI ChatGPT so my first stepp is I implementing to the blog part.

I was begin implement chatGPT to my blog section. If I start some question with ::, then prompt send to AI api and get back the answer as sage told something.

Second thing which was implemented is openAI DALL-E-2 image generatior page as show below. Even this post cover image is also generated by the program, and extended image with DALL-E editor

ai-image end point

import { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
req: NextApiRequest,
  res: NextApiResponse
) {

  if (!req.query?.seek) return res.status(404).json({msg:"- - Seek something? - -"});

  const key = process.env.GPT_3_KEY || '- - -';

  const headers = new Headers({
    'Authorization': `Bearer ${key}`,
    'Content-Type': 'application/json',
  });

  fetch(
    "https://api.openai.com/v1/images/generations",
    {
      method: 'POST',
      headers,
      body: JSON.stringify({
        "prompt": req.query.seek,
        "n": +req.query.n ?? 1,
        "size": req.query.size || "256x256",
      })
    }
  )
  .then(r => r.json())
  .then(msg => res.status(200).json(msg))
  .catch(error => res.status(404).json(error))
}

Maybe I will create additional game UI element design with DALL-E help.

TODO list for finish post

[+] Write lost part back to the post
[-] rework api end points from GET to POST
[-] authentication/login solution for rogmor.app
[-] minimal gameplay progress
[-] ask image or text answer from Sage

The Royal Gazette: A Single-Line Noble Intrigue

Peter Vivo — Wed, 04 Mar 2026 08:51:03 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

Sorry I maded this submission under time pressure spend just a 2 hour to make it. All things created gemini, I even don't look a code or this README later parts. I hop this will be enjoying stuff.

repo: (https://github.com/Pengeszikra/quickquest)

The Royal Gazette 1st

What I Built with Google Gemini

I built a minimalist, narrative-driven RPG that lives entirely within a single line of pixels—the black divider of a digital newspaper.

The project solves the problem of "narrative clutter" by stripping a role-playing game down to its absolute essentials: movement, dialogue, and combat, all rendered in a 1-character-high sticky bar. Users read a dynamic news portal about a disgraced noble while simultaneously playing as that noble in the "header" of the page.

Google Gemini's Role:
Gemini acted as a Lead Architect and Senior Developer. It didn't just "write code"; it:

Translated high-level "vibes" (e.g., "make it look like an old news portal") into precise Tailwind CSS 4 implementations.
Adapted legacy systems: It analyzed the complex rogmor repository and surgically extracted a "minimal" version of its combat and ability systems (Body, Reflex, Soul) to run in a single <div>.
Iterated on UX constraints: It solved the technical challenge of rendering high-fidelity pixel sprites and health bars within a constrained horizontal line while maintaining a "newspaper" aesthetic.

Demo

The project is a single-page application consisting of index.html, app.js, and a sprite-based assets folder.

The Quest: Locate the Merchant, recover the Shattered Ring, and reach the Lady.
The Tech: Vanilla JS, Tailwind CSS 4, and Rogmor Sprite Assets.

What I Learned

Constraint-Driven Design: Designing for a 1-character-high space forced me to prioritize "symbolic" gameplay over literal graphics.
Modern Asset Pipelines: I learned how to efficiently map JSON-based sprite sheets (faces.json) to CSS background-position values for pixel-perfect rendering without a heavy game engine.
Contextual UI: Integrating a game as a functional UI element (a divider) taught me how to blend interactive content with static information seamlessly.

Google Gemini Feedback

What worked well: The ability to provide Gemini with a local path to another repository (~/repo/rogmor) and have it autonomously analyze and adapt that logic was incredible. It understood the "mechanical soul" of the previous project and refitted it for this minimalist challenge.
Friction points: Fine-tuning the "look and feel" of the URL-bar version (before we moved to the header) was tricky due to browser-level URL encoding of emojis. Gemini correctly suggested switching to a DOM-based "sticky line" when the browser's URL limitations became a bottleneck for the "vibe."
Candid Thought: Gemini is an expert at "Code Archaeology"—digging through my old projects to find reusable patterns for new challenges.

Tags: #GoogleGeminiChallenge #WebDev #Minimalism #RPG #TailwindCSS

Rustroke - WASM mini draw

Peter Vivo — Sun, 15 Feb 2026 05:50:42 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built one of my dream projects — a minimalist vector drawing app — but with a twist.

The goal isn’t to provide the usual “vector editor toolkit” (Bezier curves, snapping, boolean ops, perfect shapes, layers, etc.). Instead, it focuses on just two actions:

Draw free lines
Fill closed areas

That sounds simple, but it’s deceptively hard.

The drawing is made of independent line segments. There’s no automatic merging, no “path building” UI, no assumption that the user is drawing clean vector shapes. The fill algorithm has to detect when those freehand strokes form a closed boundary and then flood the interior reliably.

The tech behind it is the best part for me:

The UI is simple HTML
The engine is Rust compiled to WASM
The core engine is view-independent, so later I can plug the same logic into other frontends and build a more serious drawing application without rewriting the geometry engine

I know: today many people don’t want to draw without AI.
But sometimes you just want a fast sketch, a logo idea, or a colorful doodle — and you want full control.
This tool is built exactly for that.

A Long Long Time Ago

Back when I was a Flash programmer (and also did graphic design), I loved the vector drawing workflow in the Flash IDE — especially its “lazy fill” feeling. In practice it often behaved better than many modern vector tools in situations where paths aren’t perfectly clean.

Later, when Flash faded away, I worked with a painter-style program built on early SVG tech (around 2014). That’s where I hit the classic problem: filling areas formed by loosely intersecting strokes is hard.

At the time I could solve it on paper, but I couldn’t implement it properly.

This project is me returning to that problem — with better tooling, Rust, and a clean geometry-focused approach.

Demo

The source on my github page is:
rustroke github
Also very handy solution to use vercel to host my app. Give instant test on other devices also after every commit. Which is happen frequently with copilot cli workflow.
rustroke in action

My Experience with GitHub Copilot CLI

This project also came with an unexpected “environment story”.

A few months ago, my workplace required me to switch from a MacBook Pro to a Windows laptop — and not a shiny new one, but a 7+ year old Dell. I still wanted to keep my UNIX-terminal-first workflow, so my first move was to install Ubuntu via WSL.

After that, Windows became “Linux enough” for my daily work — while I could still run a few company-critical native apps like Teams.

wsl install ubuntu

There’s one downside though: Ubuntu can run GUI apps through WSL, but the windowing experience clashes with Windows’ own window management. So I mostly stick to cmd as a terminal host and organize everything through split panes.

On my main monitor, I keep a dedicated large panel for Copilot CLI. On the laptop display, Teams runs separately. With this setup, Copilot is always “there” — far more convenient than switching to a browser-based AI app.

Copilot CLI main advantage

For me, the main advantage of Copilot CLI is that it can work directly with a folder’s context and apply changes inside the repository quickly.

Install

# node 24
npm install -g @github/copilot
copilot
/login

Standard start:

copilot --allow-all-tools --allow-all-paths

That makes the workflow simple:

I write a prompt about what I want changed
Copilot applies it directly in the repo
I stay in my terminal-first flow instead of context switching

AI as a reasoning tool, not a typing tool

One unexpected lesson from this project was that I didn’t really use AI as a code generator — I used it as a thinking partner.

I ended up with a very clear separation:

ChatGPT → problem discussion
Copilot CLI → code modification

This turned out to be extremely effective for this kind of project.

Geometry problems are rarely about syntax errors.
They are about understanding what actually happens.

For example, I could describe situations like:
“At this corner the algorithm should continue along the horizontal edge because the tangent changes less than the vertical one.”

That is much easier to explain conceptually than by pasting 800 lines of Rust.

I didn’t need to provide the full source code.
Instead, I explained the behavior.

We could reason about:

topology
edge direction
turning angles
graph traversal rules

Once the idea became clear, I translated it into a precise modification request — and Copilot CLI applied it directly to the project.

So the workflow became:

Discuss the visual or mathematical problem
Refine the algorithm
Write a minimal change request
Let Copilot implement it inside the repo

For algorithm-heavy software, this is surprisingly powerful.

The AI wasn’t replacing development —
it separated thinking from editing.

And for a geometry engine, that made a huge difference.

Hardes Spot

The real challenging issue was the debugging this math heavy RUST/WASM engine, which is time to time freez. So that why put the log on UI

Final Puzzle

Finally this image lead to a breaktruh to AI understanding. With this I can describe to ChatGPT how important is to keep tangent is line by line in a good direction. This is where fill debug show a wrong case where the ground and roof top area are connecteted.
Then ChatGPT make a perfect prompt to CopilotCLI which is do their job perfectly.

Importance of visuals

Peter Vivo — Tue, 01 Apr 2025 17:14:50 +0000

Excalidraw

Imho even for any developer I consider it important to have ability to grab the visual, many times a single image or a quick diagram more effective compared to a long meeting, that why I using the excalidraw so many times in our meetings. Because that is a awesome program to make any diagram/quick image at real time - just share my screen.

That why also important to lear make a visual expression with a AI. I constantly create images with dream.ai where my goal is try exploring AI image generation capability, but I also train myself on image prompting which ability are more essetial if I like to make a project like this short AI video.

Here is my dream.ai gallery contain a lot of - I hope not booring image - but the important thing I turn my prompt published so you can check it if you like. This AI image generator is way easier compared to Midjourney - which is fantastic in many cases compared to other AI generator.

A developer pays his debt

This video is my beginer step to the complex visual story telling direction. This is my debt to tell the Flogon story which is missing from my game: Flogon Galaxy Game. At this time I have a chanche to give a more detailed version or a different angle.

Push yourself to competition

My advice is for hobby project is try to measure on a challange or competition, even don't win your project immediatley get a due date, which will learn to you working on pressure. Also give lesson from a cut down your project unneccecary part. Maybe your result don't be perfect as you plan, but at least create something. That why I set my goal to submit this AI Video "film" to a neuro-masters competition.

Cost of AI video making:

I used this software to create this video, I also try to optimize the cost, but the effectivness mainly overwrite this base rule.

tool	skill	cost
Midjourney	AI image	$30 / month
Suno	song track, audio	$0
Revoicer	voice from text	$80 one time
Hailuo AI	ai video	$10 / month
Kling AI	AI video, lyps sync	$10 / month
Sora	AI video	price including in ChatGPT
ChatGPT		$20 / month
HitPaw	AI video enhacher	$120 one time
iMovie	video editor Mac default	$0
QuickTimePlayer	media trim	$0
Krita	classic image editor	$0

Summary: one time: $200, $70 / monthly

Touch Bar fanatic.

My experience is the hardware is also imporant and my ultimate choice is MacBook Pro with Touch Bar ( Apple drop that technology ). But why? Because Touch Bar is capable to moving smoothly your video backward and forward with a easy bar without you need to be touch your screen. Mac have great predeployed software for media works: iMovie, GarageBand, QuickTimePlayer.

Mac Touch Pad also one of the best, I don't using mouse for it.
That why I don't need to leave the keyboard for work, which is mainly great at programming. Also uniqe capability to gesture not just vertical but horizontal wheel for a quck and precise moving in code or even a spreadsheet ( two finger )

Why reinvent the wheel?

Peter Vivo — Tue, 11 Feb 2025 11:32:29 +0000

I get a great question:

Why reinvent the wheel?

Maybe is worth to try it. I started the programming with basic, but shortly need to be use some peek & poke end of that path is a Z80 assembler. Time passing by so fast, we lost the Flash, and now I found myself in a webdevelopment with AI bursting onto the scene ( 35+ years story ).

;TLDR;

My game is even a technical demo instead of a real game. Technical demo but in a worst one, because I show too many things at once, and don't give a focus clue to my audiance ( may exist or not ).

Technical Demo of

Pure HTML development
Development with bare-minimum dependencies
Game development without a game engine
3D game setup using only CSS
Tailwind for styling and layout
Type-safe coding with JSDoc
One-way state handling using a single function
A JSX-based “pre-framework” with a few helper functions
A simple pnpm/Vite build system for many independent HTML pages
Bonus: Excellent Lighthouse scores (100 / 100 / 96 / 100)
Built as a PWA to run the same program on many different devices
Assistance from various AI tools in creating the game
My solution to the moral dilemma of AI-generated content
A sprite sheet editor tool
A markdown editor (with DynamoDB) for end-to-end testing and content organization
A card game where all cards are displayed on the table
A space adventure featuring a singer as the main character
A peaceful, non-technological alien species that can solve the space-time problem?
Meanwhile, humans struggle to achieve even a fictional space travel technique
Using “inverzit” in place of dark energy and dark matter

What’s Next

I will continue this series by focusing on these points one by one.

Happy developing!

Stolen Content by AI

Peter Vivo — Mon, 27 Jan 2025 21:18:48 +0000

discussion tag are removed, but in origin I would ask your opinion in this topc. I changed tag to opensource, because my application is this opensource

I feel like a thief because I created a proof-of-concept level game with the help of AI tools. I am trying to deeply investigate this feeling.
Yet, the creative process itself remains unchanged—only the speed of work has intensified. In the end, I feel the need to summarize my thoughts:

We should take a moment to reflect on how various companies utilize AI for different tasks. These models are fundamentally built upon human experience. The real issue arises when AI-generated content mimics the style of a specific person—whether a long-deceased or still-living artist. This applies to images, music, and soon, all types of creative content.

I acknowledge that this is an unresolved problem.

In my project, I worked with eight different AI tools. Even though I made a conscious effort to infuse my program with unique content, such creative processes inevitably run into these collisions.

What do you think about explicitly crediting those who have inspired my work? By highlighting these influences, I aim to acknowledge the origins of the creative elements within my program. This applies not only to software but to all forms of artistic expression.

The key takeaway here is that behind every AI capability, human contributions are always at the core.

AI's Role in Creation and Imitation (Asked ChatGPT)

As an AI, my purpose is to assist, analyze, and generate content based on patterns and structures learned from human-created data. However, I do not possess true creativity or originality—I merely recombine and predict text based on statistical likelihood. This is a fundamental distinction between humans and machines: while humans create with intent, emotion, and purpose, AI only outputs what has already been conceived in some form before.

The ethical concern here is whether AI-generated content can be considered original or if it is simply a derivative work. As AI capabilities advance, the boundary between inspiration and imitation becomes increasingly blurred. Should AI-generated art, music, or writing be attributed solely to its algorithm, or should credit also be given to the countless human works that shaped its ability to generate such content?

The discussion is ongoing, and there is no easy answer. But one thing remains clear: AI, in its current form, is not an autonomous creator—it is a mirror reflecting the vast collective intelligence of humankind.

Final Thoughts on Credit Roll

Even this program was created with the help of AI.
They are not better than us and cannot replace us.
They are merely learning from humans, without permission.

I believe that any content or idea, even if created with AI assistance,
is nothing more than a question directed at the human knowledge base through a strange interface that we call AI.

That is why it is truly important for me to mention specific individuals and entities who have inspired me and kept my spirit up during this thrilling development rush. The list may be a bit chaotic, but so is life.

Inspiration

dev.to, Pure Web Foundation, Douglas Adams, Tim Burton, Basil Poledouris, Dan Abramov, Ray Carniato, ThePrimagen, Alberta Tech,
Jack Herrington, Theo, Vsauce, Indie Game Clinic, blumineck, Sellsword Arts, Fun Fun Function, Imphenzia, Savallion, Continuous Delivery, IsiShuffles, ErikDoesVFX, Ginny Di, Venus Theory, The AI Music Alchemist, The9thDivine, Nello, Eric Barone, Jazza, Felde Imre, Óbudai Egyetem, Nyulászi Zsolt, Novák Csanád, Terenyei Róbert, Delta Vision Kft., ELTE Atomcsill, Kis-Tóth Ágnes, Dávid Gyula, Sabine Hossenfelder, Wolf Kati, Crystal, Unique, Honeybeast, Zanzibar, Tarja Turunen, Sandra Nurmsalu, Kollányi Zsuzsi & Majka, Auth Csilla, Rasmussen, Supernem, Random Trip, Card Crawl, Arnold Rauers, Macromedia Flash, React, Rust, Touch Bar, Pipeline Operator, Pitypang the Cat

AI Programs

Amazon Q, ChatGPT, Midjourney, Suno, Revoicer, HailuoAI, Clipdrop, DreamAI

thx to read

Javascript great again! - The Voice of Void

Peter Vivo — Sat, 18 Jan 2025 19:52:01 +0000

A thrilling game development, including a π / 42 theory.
original post on community.aws

github repo: https://github.com/Pengeszikra/flogon-galaxy

TLDR

Maybe a too much information are zipped into this small program. This will be happen if we ride on a creative flow. Sure this is just a POC level code, and I will continue on so many direction.

Try it: F L O G O N - G A L A X Y this is run on any device. Tested on mobile phone, tabblet, browser, even my TV basic browser.

Device Demo

Here is my desk where this program are created, and run on many different devices:

Game Play

Pure Javascript Game Development

This project is built with a minimal dependency philosophy, stripping away unnecessary frameworks while keeping efficiency in focus.

My turning point was:
On my work I am facing the fact that 8GB memory isn't enough for a legacy React application to build. The DevOps team solved the problem by setting 16GB RAM on a virtual build server. At that precious moment, I instantly lost all my trust in modern JavaScript frameworks and any compiling.

But this state are so strict, plus this hackhaton requriment is using some great AWS cloud API to extending my game possibilities near to unlimited. For the publishing is also need a minimal build setup. Even for the local testing your code which not need to compile is also great choice the pnpm / vite duo because of hot reload, which is so important on development time.

At the end I can keep the dependency on minimal level, which is give amazing loading time also. Details of minimal dependency details can you readed bellow or skip it.

Release the chain of dependency

package.json

  "scripts": {
    "build": "vite build",
    "client": "vite",
    "server": "pnpm node src/services/dbServer.js",
    // local development command 
    "start": "pnpm run server & pnpm run client"
  },
  "dependencies": {
    // minimal dependency for AWS dynamodb
    "@aws-sdk/client-dynamodb": "^3.0.0",
    "@aws-sdk/lib-dynamodb": "^3.0.0",
    "cors": "^2.8.5",
    "dotenv": "^16.4.1",
    "express": "^5.0.1"
  },
  "devDependencies": {
    // tailwin
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.16",
    // surprising it is need for JSDoc, but just devDep!
    "typescript": "5.7.2",
    // build
    "vite": "^6.0.3",
    // PWA
    "vite-plugin-pwa": "^0.21.1"
  }
}

Vite are nicely fragmented the whole project into a minimal size of chunks.
Because this project is build on lazy coupled HTML pages.

> pnpm build

dist/registerSW.js                               0.13 kB
dist/manifest.webmanifest                        0.36 kB
dist/assets/manifest-B2xQAFIn.json               0.58 kB │ gzip: 0.26 kB
dist/credit.html                                 0.99 kB │ gzip: 0.46 kB
dist/adventure.html                              0.99 kB │ gzip: 0.46 kB
dist/library.html                                1.01 kB │ gzip: 0.47 kB
dist/ship.html                                   1.03 kB │ gzip: 0.51 kB
dist/card.html                                   1.03 kB │ gzip: 0.49 kB
dist/fit.html                                    1.14 kB │ gzip: 0.61 kB
dist/work.html                                   1.28 kB │ gzip: 0.55 kB
dist/mine.html                                   1.34 kB │ gzip: 0.62 kB
dist/story.html                                  1.36 kB │ gzip: 0.63 kB
dist/index.html                                  1.38 kB │ gzip: 0.68 kB
dist/deal.html                                   1.63 kB │ gzip: 0.70 kB
dist/marker.html                                 2.01 kB │ gzip: 0.86 kB
dist/travel.html                                 2.03 kB │ gzip: 0.85 kB
dist/__index.html                                2.10 kB │ gzip: 0.91 kB
dist/throw.html                                  6.14 kB │ gzip: 1.81 kB
dist/assets/style-5bcm0AOV.css                  19.64 kB │ gzip: 4.44 kB
dist/assets/marker-a3K9PoX8.css                 20.43 kB │ gzip: 4.75 kB
dist/assets/ui-elements-C42piOfa.js              0.52 kB │ gzip: 0.20 kB
dist/assets/old-bird-soft-Cet9K-fd.js            0.64 kB │ gzip: 0.40 kB
dist/assets/targetSystem-C6rfYONd.js             0.70 kB │ gzip: 0.17 kB
dist/assets/index-DPcikNFZ.js                    0.70 kB │ gzip: 0.47 kB
dist/assets/modulepreload-polyfill-B5Qt9EMX.js   0.71 kB │ gzip: 0.40 kB
dist/assets/story-BYdjpAbD.js                    0.71 kB │ gzip: 0.50 kB
dist/assets/credit-B_lCQp87.js                   0.92 kB │ gzip: 0.58 kB
dist/assets/shoot-9YV2jSCs.js                    1.11 kB │ gzip: 0.20 kB
dist/assets/work-AxYhedTL.js                     1.24 kB │ gzip: 0.59 kB
dist/assets/adventure-mfPAHVPp.js                1.26 kB │ gzip: 0.74 kB
dist/assets/fencer-CBOzlVSn.js                   1.51 kB │ gzip: 0.76 kB
dist/assets/ship-DzKwFTHn.js                     1.57 kB │ gzip: 0.79 kB
dist/assets/library-iOGeQgd2.js                  1.69 kB │ gzip: 0.87 kB
dist/assets/concept-1YqRBMyf.js                  1.70 kB │ gzip: 0.84 kB
dist/assets/travel-BjKxB5xP.js                   1.70 kB │ gzip: 0.84 kB
dist/assets/GalaxyRoute-Czkip2Wg.js              1.77 kB │ gzip: 0.85 kB
dist/assets/asset-DRNybFKp.js                    2.01 kB │ gzip: 0.50 kB
dist/assets/card-BxPOIcVT.js                     3.05 kB │ gzip: 1.03 kB
dist/assets/mine-txzynpoG.js                     3.08 kB │ gzip: 1.33 kB
dist/assets/marker-CDmeMeHZ.js                   3.08 kB │ gzip: 1.43 kB
dist/assets/throw-CtACwOyr.js                    7.86 kB │ gzip: 2.68 kB
dist/assets/deal-ptFW1zND.js                    10.26 kB │ gzip: 3.93 kB
✓ built in 1.16s

PWA v0.21.1
mode      generateSW
precache  41 entries (110.77 KiB)

PWA & Responsivity

A Progressive Web App (PWA) setup ensures that Flogon Galaxy runs efficiently on mobile, desktop, and even embedded browsers. TailwindCSS handles the design flexibly. But the main pain point is the setup of PWA. At first moment I asked Amazon Q to help me, but that solution cause broke my whole program look and feel,
because generated a wrong service workes, which is stuck on browser, so when I tryed to fix it the problem that error are be stay even after a complet roll back, - thx to Amazon Q /dev functionality which is great! the modification can be easy review and roll back - , also try ChatGPTo1 help also failed to help. A problem is need to be reset the service worker on chrome. After this incident I figure out the solution by give a right question to AI:
Why not a vite generate a PWA stuff under the build process ?
Give to this job to a vite-plugin-pwa and configured perfectly are solved.

This program greatest help is my markdown editor: marker which is also great tool for testing a different aspect-ratio, which is a base question on the responsivity.

JSDoc

A great pillar of uncompiled / minimal dependency JS development was the really underrated JSDoc. JSDoc evangelism. To sort: as this project are proof JSDoc equal to TS without that dependecy ( just devDep ). So at the end:
JavaScript remains readable and maintainable with strict documentation standards. Using JSDoc ensures clarity and provides editor hints even without TypeScript.

3D Without a 3D Engine

Using CSS transformations, we achieve a pseudo-3D effect while keeping performance high and dependencies low.
The card game based on this css setup (Tailwind don't handle these attributes)

    #desk {
      transform-style: preserve-3d;
      transform:
        perspective(70vw)
        rotateX(40deg)
        rotateY(0deg)
        rotateZ(0deg)
        scale(.55)
        translateZ(0rem)
        translateY(5rem)
        translateX(-8rem);
      pointer-events: none;
    }

All cards are attached to #desk and that why see our cards in 3D.

My AI Crew

My development don't realized under this sort time without AI workes help.
Here is my AI crew list:

Amazon Q : code expert
ChatGPT : project assistant, lyric, code
Midjourney : visual
Suno : track
Revoicer : voice over
HailuoAI : clip
Clipdrop : remove background
DreamAI : visual training Without these help this project are cannot realize under a strickt timeframe:

2024.06.27 -> alien-solitare : react based cardgame for dev.to challange
2024.07.06 -> pure-web-ccg : started my pure web work
2024.12.14 -> flogon-board : meanwhile I found reddit hackhaton also,
a first game of Flogon series + sprite editor
2024.12.29 -> flogon-galaxy : I started focusing on this project

On this exact project I have just two weeks. Very underestimated. But thx of these helps the Flogon Galaxy are reach the state of technical demo.

Amazon Q

For me the Amazon Q is a great help on a think phase - around november - when I created around 15+ mini game using by Amazon Q. This is a great help to quick try and test my different ideas. On later the implement phase the /dev command is the greatest help to solve a different task including a DynamoDB implementation, which case I not really familiar, but solwe that stuff under no time.

Which I don't like in Amazon Q is the too much extra question like a: Do you have another question? That is completly unneccecary in point of my view. Instead just show the next chat input line, and if I write to there something that means I continue the work, don't need a extra button click.

DynamoDB and Marker

On early stage of this project: november, I created a markdown-view WebComponent, plus attach a simple textarea to it. My initial goal with that program just a very basci markdown-viewer, but after I implemented the minor syntax highlighting for a codeblock, and a iframe capability a whole new world open to me.

You can test this program on link:
M A R K E R

Try to paste any markdown to it.

It cannot understund a different program languages, just a mix of HTML/JS/JSDoc setup on it, sure to need a extension, but it is working as POC, with a good speed.

Table, list, bold, are don't work, but the real power is the embedding url with a

{%url%}

// or

{%url%aspect-ratio}

for example:

{%.%16/9} // start this program on standard aspect ratio

{%deal.html%16/9} // start a card game

// or 

{%deal%16/9} // also start the card game.

// a secret old program is started by:

{%throw%1/1}

// this is my previous reddit hackhaton submit. 
// A different version of Flogon's Throw to Match game.

The AWS DynamoDB are included to this marker

But that is just work on locally a good reason, because I used it to instant save and load a markdown file. Just press the ESC and on input line write: e:rpg.md which is try to load a rpg.md from DynamoDB. But to do that, need to setup your DynamoDB credential to your .env which is looks like this:

AWS_ACCESS_KEY_ID = "AKI........"
AWS_SECRET_ACCESS_KEY = "4Qr8........"
AWS_REGION = "eu-north-1"
DYNAMO_TABLE = "storage-0392"
PORT = 3000
API = "http://localhost"

of course for do that need to make your AWS account, and create a dynamoDB, it is worth it!

I have another development tools in this program:

Sprite Sheet Editor

{%throw%1/1}

If press `z` started the sprite editor
`c` - move box
`v` - pick a sprite
`w` - decrease a vertical size
`s` - increase a vertical size
`a` - decrease a horizontal size
`d` - increase a horizontal size
`[` , `]` - change sprite sheet

// you can copy spritesheet data to your code with this js code 
// in chorme dev tools:
copy(JSON.parse(localStorage.getItem('-shoot-') || '{}'));

You can found my code on this repo

Which is lead me to use some framework like functions?

As I sed at first I try to live without any framework, but I need a state managment, which is really important part of a complex application like a card game, where so many events happend. Which is easy replacable a reactive state. Her is one of the easiest implementation. Also important this state are not coupled with any view like in a React. Even this state handling is not nececcary to using on every file.

Signal-Based State Management

A custom signal system replaces external state libraries, providing fine-grained reactivity with minimal overhead. This single function are solved a nececcary state management in this game. I also created a more "sofisticated" function: zignal which is capable to handle a deep level Proxy state handling, but
that is overcomplicated in this case. So I choice the simplier one.

/** @type {<T>(watcher?: function) => (state?: T | object) => T} */
export const signal = (watcher = () => { }) => (state = {}) => {
  return new Proxy(state, {
    get: (target, prop) => target[prop],
    set: (target, prop, value) => {
      target[prop] = (value !== null && typeof value === 'object')
        ? signal(watcher)(value)
        : value
        ;
      watcher(target, prop, value);
      return true;
    },
  });
};

JSX Framework

The another big improvement of modern framework is the easy composable application. Where a JSX is shining so bright. On a certain point I realized, without a JSX I need to labell every DOM element, and that is so painfull. That why I grab out my really old A lightweight JSX rendering system drives UI interactions without requiring React, maintaining simplicity and control.
5 years ago I readed a blog about JSX, and I created a function which can be used a basic JSX handler. Now the times is come to take out of that code and with a AI help to combine with vite to handle JSX files. After a few tweek rounds it is properly fine for my program. I don't have to write a test, the working code are the help.

The important vite.config.js part:

  esbuild: {
    jsxFactory: 'fencer', // Use your custom `fencer` function as the JSX factory
    jsxFragment: 'Fragment', // Optional if you use JSX fragments (e.g., `<>...</>`).
  },

Imperfection Workflow

As you can see, rather than striving for immediate perfection, an iterative, adaptive workflow guides development. This allows to me, my creative ideas to shape the game naturally. So I do not fear to make a mistake, instead I search which part can be finish before the deadline. I think many of developer use this technic, and don't stuck on a specific porblem.

The Untold Story of Flogon

My biggest dept is: I don't have to shaping my story about the Flogons to you.
So this chaper at least told a few basic things about Flogons.
Please listen it this discusion about Flogon special dream travel capability and the
universe undiscovered material the Inverzit.

We don't reach even the closest star system at this moment. But the first contact give a chanche to reach undreamed distances. The main problem because the Flogons are nor technocrat or kapitalist, because the distance and the possible place don't close it, like us. So hard to understund what is the common between us.

So the flogon use a bit different the technic than as, because some of them even cabale to shape change into a item also. Not every flogon can dream travel, also not every flogon capable to that level of shape change - but normal shape chanege is very common. That why sometimes use cloth sometimes not. We don't know yet how many start systems or galaxy they are explored.

But our scientist are collect a strange theory from the Flogon from Wora Shard. This is some hidden code which can be ready any one: Just need to be count a 42 markers distance ( fluctuation ) in a π. This is:

Theory of π / 42

A deep dive into the mathematical intrigue behind the Flogon universe, where π and the number 42 hold the key to understanding cosmic resonance. Wora Shard even crated a song about this one.

Wora Shard

A question worth pondering. The short answer? She was just an underground Punk-Metal singer, lost in the echoes of rebellion—until the night she dreamed herself into the vast unknown.

One moment, she was on Earth. The next, she awakened on a distant, alien world, surrounded by mysteries beyond human comprehension. Stranded and disoriented, she would have been lost forever… if not for Yogdar, a seasoned Flogon captain who saw something unusual in her arrival.

Through perilous journeys across the galaxy, through worlds uncharted and dangers untold, Yogdar guided her back home. But something had changed. Wora was no longer just a singer—she was a traveler between realms, a dreamer who had touched the fabric of a universe she barely understood.

And this… this is where our story truly begins.

Credit Roll

My other big debt is the end credit roll list. Because a same point this development process is looks like a one man show with a AI help. But the whole AI thing is learning for us. So any content or idea which even materialize a AI that is nothing else than a question to the human knowledge base throught a AI interface.
Also important to include this list a specific person, who are inspired me and keep my spirit up on these thirilling development rush. Thx for that, credit roll will coming after the freez.

Future plan

After project freeze ended I am start focusing the Flogon story lines which is saddly don't fit to this project. The connection betwen us and the Flogons is really interesting field. Technically a multiplayer version with poolished games, including card collection ability, space trading, ship building.

Your Dreams Come True!