I fear that this is going to be encountered more and more often:
Message Box:
Before you dig in, note that while sites built in Webflow work in all modern browsers, we don’t actively support use of the Designer in Mozilla Firefox.
For the best experience, use the Designer in Chrome or Safari.
If you’d like to see us support this browser, let us know about any bugs you run into.
Happy designing!
Just use the live site link, it'll work in any browser. Only the Designer (the tool that you work in to build the websites) don't work in Firefox, every published site does.
Amazing. Some of the buttons don't quite register or click on time but the functionality seems to work all the same. Couldn't quite figure out how to found a city or move my warrior.
This thing loads faster than my actual copy of Civ VI.
I have it running on Arch Linux about as well as MacOS. Which plainly speaking means absolutely awful.
My biggest frustration is that the game crashes when it attempts to submit a play by cloud turn if webhooks are turned on. And it has for a year now. With no indication it will ever be fixed.
And don't get me started with the game on MacOS completely ignoring mouse clicks for the right third of the screen.
I tried it on several Ubuntu versions and it was completely unplayable. Extreme lag in single player and even attempting to start a multiplayer game will freeze. I was able to play it on Fedora 32 (I suspect the more up to date kernel probably helped) but it had to be in the lowest settings. Of course I also have an Nvidia card so I probably asked for it.
They also completely broke cross platform play a while back, although there was a hack to "fix" it (fix meaning per-turn de-syncs)
My browser is dying here so I'm not able to really get a feel for how it plays...
I wonder, is the AI any better? (obviously this effort maybe isn't about AI).
I've played a lot of Civ but VI really turned me off with the AI's random decisions to just rage quite / inability to actually fight a war with ANY coherent effort.
yeah even if it is just state transition, a good, depth UX is a huge part of a game coding budget.
as a solo hobbyist game developer that can dedicate a couple hour/week a tool like this can save me months of tedious work, as long as establishing a two way data channel between the ux state and the game state is easy enough.
This is a very interesting showcase of what seems like a capable no code tool. I dont think I've ever seen this much power in one, especially a web based one, in fact most no-code developed apps ive used are nothing more than plain old forms, hardly worthy of the app title.
I played with some random no code tool I could find a few years ago, mostly in the mobile sphere and they seemed very bad producing bloated cookie cutter applications. Ivenever beleived no-code tools would ever see much adoption but I'm not sure anymore.
Ironically a large part of my current job is writing code that runs on/interacts with a no/low code platform.
I would advise developers worried about these kind of tools to focus on the skill that really differentiates a developer who is basically effective from one who isn't, which is data modeling.
These things shine a spotlight on your high level data skills because you can't just code around bad database design decisions early in the project.
When the data is exported, your low level attention to detail and consistency come into focus. Did you encode Yes/No questions consistently? Were there free text fields where there should have been predefined options?
These low code/no code options are just revealing that coding was never the hard part of making software.
Ironically a large part of my current job is writing code that runs on/interacts with a no/low code platform.
Could you please elaborate? What tools do you interact with? Is this mostly backend work, getting the data out of no code tools for further processing?
I work with QuickBase and a few others. Data cleaning/import/export like you said are a big part of it but the larger aspect is client side JavaScript and working with whatever embedded language the platform has.
The other part is building custom apps that run alongside the no-code app, often backed by the API. I've implemented some fun things like transactions that lock so you don't have simultaneous write problems and full text search.
If you are in that business, the distinguishing features that I would look for is being able to use the relational model, an API or way to run code, and regulatory compliance (HIPAA, FERPA, 21 CFR Part 11). Native transactions would be a miracle (for instance update a record and associated child records and roll back if validation fails).
Depends on the jurisdiction, and the law being broken.
Standard Caveat: Not a lawyer. Also this is based on US Law.
This isn't the game itself, just the Game UI recreated in Webflow.
So while it doesn't recreate the game per-se, it does use image assets which are likely copyrighted by Firaxis.
In my limited legal understanding--assuming the author did not first seek permission to use game assets, the author could claim defense by Fair Use doctrine, that allows copyrighted materials to be used in limited cases. For example using a short clip from a movie as part of a movie review, or an excerpt from a book in a book report.
In this case, the author could claim the images were used to teach people how to use Webflow, but again my limited legal opinion is that Firaxis could counter that claim by pointing out the author isn't a teacher, and this is not part of any sort of educational series.
The author could instead claim that the images were used as part of research into the capabilities of Webflow. Again, there Firaxis could simply counter that this was not done in conjuction with any research, and no research materials were published.
As I mentioned at the very beginning of the prototype, it was developed for educational and inspirational purposes. Nothing is being sold, many sections of the UI have been redesigned/reinterpreted to create a better experience in my subjective opinion as a product designer, and ultimately this project is a tribute to Civilization, not a ripoff.
Civilization's official twitter account congratulated me already on Twitter and I hope my work inspires more people to dive into nocode tools.
A real pity, in my opinion. It would have been great if they'd built a highly polished web-based frontend for FreeCiv, rather than an ultimately unusable (though still very impressive) tech-demo full of trademark violations, that will presumably soon disappear under an avalanche of entirely justified legal threats. It would have been a good deal more work, admittedly.
Civilization is originally a desktop-only game with a complex UI. Please feel free to clone my prototype, make it fully responsive, and attach a more appropriate joke in the 404 page :)
Was somewhat janky but quite impressive nonetheless. Whats not as clear is .. how easy is it to make this UI in webflow. I can easily imagine making this in React.. how much less time would it take in webflow? Or is the appeal purely accessibility to non devs.
I developed this in two weeks during my spare time and it was a breeze. The hardest part was extracting all the assets from the game one by one manually by screenshoting, editing, and uploading.
My desktop PC is a ~2009 dual core machine, but this is actually almost usable, the main annoyance being the slow mouse cursor. Everything else just works fine. Impressive.
Is it me or does the whole thing feel a little... sluggish (on firefox), even on the main menu? I get it's supposed to be no-code so it's not optimized, but the whole thing feels significantly more sluggish compared to the feature set it offers.
There's also some differences from the original
* there's a weird parallax effect if you move the mouse around
* the cursor rotates when you hover over an element, so it ends up pointing straight up
* the menu opening/closing transitions
* when you're creating a new SP game, the leader/civilization information that you get when hovering over a civilization is missing
* none of the sliders work (they "work" when you hover over them, but they don't stick after your release your mouse or leave the hover area)
This is the largest Webflow project ever made, it completely pushes it the edge and runs entirely on one screen. So you might notice lags depending on what machine and browser you use. This is not a typical website or a reflection of Webflow projects in general.
I'm a product designer and I love Civilization.
I made some personal additions to the prototype that I felt looked and worked better in my subjective opinion.
I integrated nearly every feature, left out some details because the project was already too heavy. But things like the leader info could be easily added.
The sliders aren't meant to work but can easily be set up with logic. I left it out to avoid confusion.
In addition to making additions to the prototype, I also discovered dozens of mistakes across the UI and fixed many of them or completely replaced them.
I'm genuinely super confused. This could be done in Flash in a couple hours. Am I missing something or is this just mostly static images with button transitions? Like what you could do in Powerpoint.
Webflow engineer here. (On the accessibility team.)
We are on a mission to dramatically make it easier to build for the web and are hiring across a bunch of roles: https://boards.greenhouse.io/webflow.
Feel free to reach out with questions about the roles. Contact me at (my first name) at webflow.com.
Hi everyone! Sarkis here, the creator of the project.
Thanks a lot for sharing it along with your kind words and constructive feedback. Happy to answer any questions you have. I'm a product designer specializing in software prototypes and MVPs. I'm on a mission to unlock and share the full potential of nocode tools.
Unfortunately, they are often viewed as primitive website builders. So I rebuilt Civilization VI's entire UI and UX to demonstrate how far you can push nocode today. This is the largest cloneable Webflow project ever released featuring 12,400 elements, 1800 styles, 1200 assets, and 400 interactions. The interface can easily be hooked up to a backend to incorporate functionality. This is not a playable game but a demonstration of how far we can push nocode. It took roughly two weeks during my spare time.
This prototype is a loving tribute to Sid Meier and one of my favorite games of all time. I've integrated all 46 leaders along with their soundtracks and nearly every feature in the game. The project stands at a whooping 124GB and runs on one single screen. So yes, you may notice lags from time to time depending on what machine you're using.
The next time someone tries to dismiss nocode or asks you what's possible, just ping them this link.
76 comments
[ 5.4 ms ] story [ 129 ms ] threadApparently he's having a livestream the 29th showing how he did it.
Message Box: Before you dig in, note that while sites built in Webflow work in all modern browsers, we don’t actively support use of the Designer in Mozilla Firefox. For the best experience, use the Designer in Chrome or Safari. If you’d like to see us support this browser, let us know about any bugs you run into. Happy designing!
https://civilization.webflow.io/
https://news.ycombinator.com/showhn.html
https://www.youtube.com/watch?v=ZXAGmosa7R8
This thing loads faster than my actual copy of Civ VI.
My biggest frustration is that the game crashes when it attempts to submit a play by cloud turn if webhooks are turned on. And it has for a year now. With no indication it will ever be fixed.
And don't get me started with the game on MacOS completely ignoring mouse clicks for the right third of the screen.
They also completely broke cross platform play a while back, although there was a hack to "fix" it (fix meaning per-turn de-syncs)
https://i.imgur.com/zAlvIcv.png
Had I instead got a minimum wage job, I'd have £4,000 more money.
But to your point, isn't what you described most of the web?
I wonder, is the AI any better? (obviously this effort maybe isn't about AI).
I've played a lot of Civ but VI really turned me off with the AI's random decisions to just rage quite / inability to actually fight a war with ANY coherent effort.
I don't think it does.
Still, Civilization games have impressively complex UI, so even to approximate that is quite a task.
as a solo hobbyist game developer that can dedicate a couple hour/week a tool like this can save me months of tedious work, as long as establishing a two way data channel between the ux state and the game state is easy enough.
I played with some random no code tool I could find a few years ago, mostly in the mobile sphere and they seemed very bad producing bloated cookie cutter applications. Ivenever beleived no-code tools would ever see much adoption but I'm not sure anymore.
I would advise developers worried about these kind of tools to focus on the skill that really differentiates a developer who is basically effective from one who isn't, which is data modeling.
These things shine a spotlight on your high level data skills because you can't just code around bad database design decisions early in the project.
When the data is exported, your low level attention to detail and consistency come into focus. Did you encode Yes/No questions consistently? Were there free text fields where there should have been predefined options?
These low code/no code options are just revealing that coding was never the hard part of making software.
Could you please elaborate? What tools do you interact with? Is this mostly backend work, getting the data out of no code tools for further processing?
The other part is building custom apps that run alongside the no-code app, often backed by the API. I've implemented some fun things like transactions that lock so you don't have simultaneous write problems and full text search.
If you are in that business, the distinguishing features that I would look for is being able to use the relational model, an API or way to run code, and regulatory compliance (HIPAA, FERPA, 21 CFR Part 11). Native transactions would be a miracle (for instance update a record and associated child records and roll back if validation fails).
I'm thinking about picking up some freelance work in this area. Not really sure where to start
Standard Caveat: Not a lawyer. Also this is based on US Law.
This isn't the game itself, just the Game UI recreated in Webflow.
So while it doesn't recreate the game per-se, it does use image assets which are likely copyrighted by Firaxis.
In my limited legal understanding--assuming the author did not first seek permission to use game assets, the author could claim defense by Fair Use doctrine, that allows copyrighted materials to be used in limited cases. For example using a short clip from a movie as part of a movie review, or an excerpt from a book in a book report.
In this case, the author could claim the images were used to teach people how to use Webflow, but again my limited legal opinion is that Firaxis could counter that claim by pointing out the author isn't a teacher, and this is not part of any sort of educational series.
The author could instead claim that the images were used as part of research into the capabilities of Webflow. Again, there Firaxis could simply counter that this was not done in conjuction with any research, and no research materials were published.
Civilization's official twitter account congratulated me already on Twitter and I hope my work inspires more people to dive into nocode tools.
I'll need to check out some of the no-code tools again, the world has come a long way from WYSIWYG html tools.
OTOH I'm willing to bet that if someone built Civ 6 in a no/low code tool the API costs would be astronomical.
Everything will eventually end up in a browser :)
There's also some differences from the original
* there's a weird parallax effect if you move the mouse around
* the cursor rotates when you hover over an element, so it ends up pointing straight up
* the menu opening/closing transitions
* when you're creating a new SP game, the leader/civilization information that you get when hovering over a civilization is missing
* none of the sliders work (they "work" when you hover over them, but they don't stick after your release your mouse or leave the hover area)
I'm a product designer and I love Civilization.
I made some personal additions to the prototype that I felt looked and worked better in my subjective opinion.
I integrated nearly every feature, left out some details because the project was already too heavy. But things like the leader info could be easily added.
The sliders aren't meant to work but can easily be set up with logic. I left it out to avoid confusion.
In addition to making additions to the prototype, I also discovered dozens of mistakes across the UI and fixed many of them or completely replaced them.
Webflow engineer here. (On the accessibility team.) We are on a mission to dramatically make it easier to build for the web and are hiring across a bunch of roles: https://boards.greenhouse.io/webflow.
Feel free to reach out with questions about the roles. Contact me at (my first name) at webflow.com.
Thanks a lot for sharing it along with your kind words and constructive feedback. Happy to answer any questions you have. I'm a product designer specializing in software prototypes and MVPs. I'm on a mission to unlock and share the full potential of nocode tools.
Unfortunately, they are often viewed as primitive website builders. So I rebuilt Civilization VI's entire UI and UX to demonstrate how far you can push nocode today. This is the largest cloneable Webflow project ever released featuring 12,400 elements, 1800 styles, 1200 assets, and 400 interactions. The interface can easily be hooked up to a backend to incorporate functionality. This is not a playable game but a demonstration of how far we can push nocode. It took roughly two weeks during my spare time. This prototype is a loving tribute to Sid Meier and one of my favorite games of all time. I've integrated all 46 leaders along with their soundtracks and nearly every feature in the game. The project stands at a whooping 124GB and runs on one single screen. So yes, you may notice lags from time to time depending on what machine you're using. The next time someone tries to dismiss nocode or asks you what's possible, just ping them this link.
Civilization.webflow.io
Learn more on Webflow.com/sarkis
Follow my work on Twitter.com/sarkisbuniatyan
Watch the masterclass tomorrow on YouTube https://www.youtube.com/watch?v=ZXAGmosa7R8