We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.
If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”
Customize cookie preferences
We use cookies and similar tools (collectively, "cookies") for the following purposes.
Essential
Essential cookies are necessary to provide our site and services and cannot be deactivated. They are usually set in response to your actions on the site, such as setting your privacy preferences, signing in, or filling in forms.
Performance
Performance cookies provide anonymous statistics about how customers navigate our site so we can improve site experience and performance. Approved third parties may perform analytics on our behalf, but they cannot use the data for their own purposes.
Allowed
Functional
Functional cookies help us provide useful site features, remember your preferences, and display relevant content. Approved third parties may set these cookies to provide certain site features. If you do not allow these cookies, then some or all of these services may not function properly.
Allowed
Advertising
Advertising cookies may be set through our site by us or our advertising partners and help us deliver relevant marketing content. If you do not allow these cookies, you will experience less relevant advertising.
Allowed
Blocking some types of cookies may impact your experience of our sites. You may review and change your choices at any time by selecting Cookie preferences in the footer of this site. We and selected third-parties use cookies or similar technologies as specified in the AWS Cookie Notice.
Your privacy choices
We display ads relevant to your interests on AWS sites and on other properties, including cross-context behavioral advertising. Cross-context behavioral advertising uses data from one site or app to advertise to you on a different company’s site or app.
To not allow AWS cross-context behavioral advertising based on cookies or similar technologies, select “Don't allow” and “Save privacy choices” below, or visit an AWS site with a legally-recognized decline signal enabled, such as the Global Privacy Control. If you delete your cookies or visit this site from a different browser or device, you will need to make your selection again. For more information about cookies and how we use them, please read our AWS Cookie Notice.
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. Including a punk-metal singer who is lost in the space. That why have this game origin song track!
Try it: https://flogon-galaxy.vercel.app/ this is run on any device. Tested on mobile phone, tabblet, browser, even my TV basic browser.
Device Demo
Thx, for the this webapp are PWA it is run on any modern browser, even on my flat TV basic browser also. Here is my desk where this program are created, and run on many different devices:
Game Play
The most advanced part of this game is the game! Surprise. It is 3D card solitare game which is run a IDE or user controlled mode also. The game rule founded on ship library and the Pitch video ( at end )
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.
"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.
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.
Image not found
I inserted 3 app into my doc with a different aspect ratio the last one is the basic /fit.html the insert code is: {%fit%16/4}
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)
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.
Image not found
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.
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
{%.%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:
1 2 3 4 5 6
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
1
{%throw%1/1}
1 2 3 4 5 6 7 8 9 10 11 12
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-') || '{}'));
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.
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:
1 2 3 4
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.
Image not found
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.
The Pitch
Credit Roll
Finally, my 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.
Image not found
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.
