ConSSS Wars — Official Website

This repository is conssswars.com — the official marketing website for the game ConSSS Wars: Echoes of Chainoa（鏈州英雄傳：鏈之迴響）, a turn-based tactical RPG set in the world of Chainoa and built on Sui.

It is a single static page (one index.html) that introduces the game, the team, and links out to everywhere else: the playable build, the event page, and community channels. There is no build step — the site is hand-written HTML, CSS, and vanilla JavaScript, presented through a Chainoa-themed "FantasyUI" panel design system, and is bilingual (English / Traditional Chinese).

• Production: https://conssswars.com (hosted on Cloudflare Pages)
• Play the game: https://play.conssswars.com

What the page covers

As a one-page introduction, index.html is organized into linked sections:

• Hero — title art, tagline, and the primary "Play now" call to action.
• About the game — premise, setting, and the post-victory commemorative-NFT flow.
• Generals — the playable hero roster (portraits, names, roles).
• The five talents — the game's core attribute/affinity axes.
• Screenshots — environment gallery with a full-size lightbox.
• Features — what players will find in the game.
• Team — the people behind the project and their links.
• Ways to Help — donation wallet plus a sponsors & collaborations contact.

External links surfaced across the page include the playable build (play.conssswars.com), the official social channels (X, Discord), and a collaboration email.

Hackathon integration points (Tatum × Build on Sui with Walrus)

This site is a static marketing page and does not call Walrus or Tatum directly — it is the project's front door. The hackathon integrations live in the linked repositories below; this table maps where Walrus and Tatum are used across ConSSS Wars:

Tech	Where it's used	How	Repo
Walrus	The event hub consss.wal.app is itself a Walrus Site — served from decentralized storage so published event rules can't be silently changed (player protection).	site-builder publishes the page to Walrus; SuiNS consss resolves to the site object.	official-limit-time-event
Walrus	In-game commemorative NFT metadata (the battle-log JSON) is stored on Walrus; the returned blob id is pinned on-chain as the Chronicle's metadata_blob_id, and the NFT Display resolves it through a Walrus aggregator.	Browser uploads to a Walrus publisher, then mints.	play (bridge/src/walrus.js), contracts
Tatum	play.conssswars.com routes all Sui JSON-RPC through the Tatum gateway.	A same-origin Cloudflare Pages Function injects the Tatum API key server-side (x-api-key) and forwards to sui-mainnet.gateway.tatum.io, with a public-fullnode fallback; the key never reaches the browser.	play (functions/[[path]].js → /rpc)

Features

• Single-page layout — every section above lives in one index.html; the nav scrolls to in-page anchors.
• Bilingual (i18n) — English (en) and Traditional Chinese (zh-TW). All copy lives in i18n.js; markup is wired with data-i18n* attributes. Language is chosen via a header toggle and persisted in localStorage; first-time visitors are matched to their browser locale (zh* → 繁體中文). The hero title image and SEO/Open Graph metadata also swap with the active language.
• FantasyUI panel system — ornate Chainoa frames and buttons rendered with CSS border-image 9-slice art (chainoa-panel, chainoa-btn and variants). Panels use borders only (no fill) so frame art is not stretched across wide boxes.
• Ken Burns background — a fixed-viewport slideshow (ken-burns.js) crossfades four environment paintings behind the page while content scrolls over them. Honors prefers-reduced-motion.
• Screenshot lightbox — gallery thumbnails open full-size in a native <dialog> (screenshot-lightbox.js), closeable via the close button, backdrop click, or Escape.
• Mobile navigation — below 720px the header collapses to a Menu / 選單 drawer with large touch targets (mobile-nav.js); closes on link tap, Escape, or resize back to desktop.
• Donation helper — copy-to-clipboard for the project's Sui wallet address (donate.js).
• SEO-ready — canonical link, Open Graph / Twitter cards, and VideoGame JSON-LD structured data, computed at runtime for the current page and language; robots.txt and sitemap.xml point at the production domain.
• Typography & icons — Noto Sans TC + Source Serif 4 (Google Fonts) and Font Awesome (CDN).

Local Development

No build step or dependencies — just serve the directory over HTTP (opening index.html via file:// will not work because of relative asset paths).

# Python
python -m http.server 8080

# or Node
npx serve .

Then open http://localhost:8080.

To verify the mobile layout, use your browser's device toolbar (or a real device) at widths below 720px.

Project Structure

Path	Purpose
index.html	Single-page layout and all section markup (English, baked by scripts/build-i18n.mjs)
zh/index.html	Generated Traditional Chinese page — do not edit by hand, rebuild with scripts/build-i18n.mjs
styles.css	Chainoa-themed styling and the 9-slice panel system
i18n.js	Language switcher runtime (redirect + toggle between / and /zh/)
scripts/i18n-strings.mjs	All UI copy (en / zh-TW) — the single source of truth for both pages
scripts/build-i18n.mjs	Bakes strings into index.html (en) and zh/index.html (zh-TW), incl. per-language JSON-LD
llms.txt	Site summary for AI assistants / answer engines (GEO)
ken-burns.js	Fixed-viewport background crossfade slideshow
screenshot-lightbox.js	Full-size screenshot dialog
mobile-nav.js	Mobile menu drawer
donate.js	Copy donation wallet address to clipboard
_headers	Cloudflare Pages cache rules (no edge/browser caching for HTML/JS/CSS)
robots.txt, sitemap.xml	SEO / crawler directives
assets/	Logos, title art, and favicon
assets/ui/	9-slice panels, buttons, talent icons, sponsor-chest art
assets/environments/	Background and screenshot paintings
assets/characters/	Hero portraits
scripts/sync-assets.ps1	Re-copy in-game art from the Godot project into assets/
scripts/bump-asset-version.ps1	Stamp a fresh asset-version into index.html for cache busting

Deployment

The site is hosted on Cloudflare Pages as a static deployment of the repository root — there is no build command, the files are served as-is. The _headers file sets no-cache / no-store for HTML, JS, and CSS so updates are picked up immediately at the edge and in browsers.

The Pages project (consss-web) is not git-connected — pushing to GitHub does not deploy. Deploy with wrangler after bumping the asset version and rebaking the two language pages (order matters — zh/index.html inherits the fresh asset-version from index.html):

.\scripts\bump-asset-version.ps1   # or on Linux/WSL: sed the asset-version meta in index.html
node scripts/build-i18n.mjs
npx wrangler pages deploy . --project-name=consss-web --branch=main

This updates the asset-version meta tag in index.html; the page appends it as a ?v= query string when loading CSS and JS. Being plain static files, the site can also be served from any other static host (GitHub Pages, etc.).

SEO / AEO / GEO

On-page work is done in-repo: content for both languages is baked into static HTML (/ en, /zh/ zh-TW) so search engines and AI crawlers that don't run JavaScript see everything; hreflang alternates, absolute og:*/Twitter cards, JSON-LD (Organization + WebSite + VideoGame + FAQPage), an on-page FAQ, sitemap.xml with language alternates, an AI-crawler-friendly robots.txt, and llms.txt.

Off-page checklist (manual, needs owner accounts):

1. Google Search Console — verify conssswars.com (DNS TXT via Cloudflare), submit sitemap.xml, then use URL Inspection → Request Indexing for / and /zh/.
2. Bing Webmaster Tools — import from Search Console, submit the sitemap (Bing also feeds ChatGPT/Copilot answers).
3. Backlinks — the biggest lever for ranking #1: itch.io page, Sui/Walrus/Tatum ecosystem directories & hackathon showcase pages, X bio links, Discord, awesome-sui lists, gaming wikis/press. Every reputable link to conssswars.com helps.
4. Consistency — always use the phrase “the first blockchain history RPG game / 第一款區塊鏈歷史RPG遊戲” in social bios, posts, and store pages so engines associate the query with the brand.
5. After deploying, re-test with Google Rich Results Test and the X Card Validator.

Conventions

• Editing copy: add or change strings in scripts/i18n-strings.mjs under both the en and zh-TW keys, reference them in index.html markup with data-i18n="key.name" (text), data-i18n-content (meta tags), data-i18n-alt (image alt), or data-i18n-aria (ARIA labels), then run node scripts/build-i18n.mjs to bake both pages.
• Refreshing game art: when the in-game UI or portraits change, re-copy them with scripts/sync-assets.ps1, which pulls from the Godot project's asset folder.
• Cache busting: always run scripts/bump-asset-version.ps1 after changing CSS or JS, before deploying.
• Accessibility: keep skip links, ARIA labels, focus styles, and prefers-reduced-motion handling intact when editing.