Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/arcomage/arcomage-hd

Web-based, free and open source, remastered 3D clone of 3DO/NWC's 2000 card game Arcomage. 13 languages. Desktop or mobile Android iOS. Online or offline PWA. Against AI or Multiplayer (w/o server). 🧝👾🃏 (ts+react+redux+rxjs, CSS-based anim, WebRTC)
https://github.com/arcomage/arcomage-hd
3do arcomage card-game game game-clone might-and-magic minigame multiplayer nwc pwa react react-game redux redux-observable remaster rxjs tower-defense typescript typescript-game webrtc
Last synced: 6 days ago
JSON representation
Host: GitHub
URL: https://github.com/arcomage/arcomage-hd
Owner: arcomage
License: mit
Created: 2021-03-31T18:04:54.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-04-28T04:27:10.000Z (9 months ago)
Last Synced: 2025-01-08T18:07:47.410Z (13 days ago)
Topics: 3do, arcomage, card-game, game, game-clone, might-and-magic, minigame, multiplayer, nwc, pwa, react, react-game, redux, redux-observable, remaster, rxjs, tower-defense, typescript, typescript-game, webrtc
Language: TypeScript
Homepage: https://arcomage.github.io
Size: 49.6 MB
Stars: 133
Watchers: 5
Forks: 28
Open Issues: 23
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project

README

        


arcomage.github.io


ArcoMage HD - Open Source Card Game


**ArcoMage HD** is a web-based, free and open source, remastered 3D clone of 3DO and New World Computing's 2000 PC card game Arcomage, which appeared in the _Might and Magic_ RPG game series.

This non-profit fan-remake of the tower defense, resource management fantasy game is developed by [@tomchen](https://github.com/tomchen) with TypeScript + React + Redux + redux-observable + RxJS + CSS-based animations + WebRTC (see [§ Development](#development)). Please star the repo / follow me to support me.

It's available in 13 languages: English, French, German, Simplified Chinese, Traditional Chinese, Spanish, Italian, Russian, Czech, Polish, Brazilian Portuguese, Japanese, Ukrainian. ([§ Translation Credits](#translation-credits))

It supports latest       and other modern browsers. It works best in Chrome and Chrome's Blink engine-based browsers, and may or may not have performance issues in Safari & Firefox ([browser list](#browser-list)). Safari, Firefox, IE users can use [the Desktop Version](#desktop-version) instead. Read [What to do if the game is slow](https://github.com/arcomage/arcomage-hd/issues/66) for detailed solutions.

It supports desktop / tablet / mobile screen 🖥️💻📱. [It's a PWA, meaning you can install it and play it offline](#play-it-offline-pwa). It also has good [accessibility for disabled people](#keyboard-control--accessibility).

By default, you play against computer AI 🤖 in the Single Player Mode. You can switch to [Multiplayer Mode 🧑‍🤝‍🧑](#multiplayer-mode). Note that Multiplayer Mode doesn't work if both players are behind "bad", symmetric NAT ([detect your NAT type](https://tomchen.github.io/symmetric-nat-test/)). Click gear ⚙️ icon in the game to open the "Preferences" window so you can switch to Multiplayer Mode or change other settings.

Click to play it now













## Gameplay



Click to show game rules in text form

> Victory conditions vary per tavern. Build your tower, destroy your opponent's tower, or collect enough resources before your opponent does.

>

> Large yellow numbers in column are the productions. This is how many new units of a particular resource you will receive on your next turn. Small black numbers in column are the resources. This is how many units you have available to spend on your current turn.

>

> Cards: Each have their own cost to play, indicated in a small circle in the lower right corner of the card. The cost will be deducted from your resources according to the color of the card. Left click on a card plays the card. Right click on a card to discard without playing.

>

> Red represents your Quarry Generator which produces your Brick 🧱 resources, blue represents your Magic Generator which produces Gem 💎 resources, green represents your Dungeon (aka. Zoo) generator which produces Recruit (aka. Beast) 🐲 resources.

## Play It Offline (PWA)

The image and sound files, as well as the card and language settings, are automatically stored in your browser. In addition, you can install this "Progressive Web App" (PWA) on your computer or smartphone. Please refer to [Google Chrome's article](https://support.google.com/chrome/answer/9658361) and [Mozilla's article](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installing) on how to install a PWA.

Depending on your browser, you may need to press Ctrl + F5 to clear the cache files & reload arcomage.github.io webpage to have the latest version of the game.

PWA or not, some mobile browsers do not remove top and bottom bars in fullscreen mode but it is usually configurable.

## Desktop Version

**If you don't have performance issues playing ArcoMage HD in your browser, then you don't need the Desktop Version.**

Some browsers, such as Firefox and Safari, that are not Chrome's engine based, may (or may not) be a bit slow running ArcoMage HD. In this case, you can use the Desktop Version.

The Desktop Version is **merely a Google Chrome browser-like wrapper** that visits the URL [https://arcomage.github.io/](https://arcomage.github.io/).

[Click to download the Desktop Version (Windows)](https://github.com/arcomage/arcomage-hd/releases/download/v1.0.0-beta.26/ArcoMage.HD.Setup.1.0.0.7z)

### Browser List

Click to show a browser list to help you decide if you need the desktop version

_(\*: presumably so, though I didn't really test)_

🏆 Browsers based on Chrome's engine, [Blink](https://www.chromium.org/blink), are fully supported by ArcoMage HD (as of 2021). With an average CPU / GPU, you should be able to play the game without performance issues. You don't need ArcoMage HD's Desktop Version:

- Google Chromium

- Google Chrome

- Brave

- Microsoft Edge (new version, from 2019)

- Opera (from 2013) \*

- Android's native browser / WebView \*

- Samsung Internet

- Maxthon \*

- Vivaldi \*

- DuckDuckGo Privacy Browser

- Kiwi Browser

- Dolphin Browser

- QQ Browser \*

- Sogou Browser \*

- Baidu Browser \*

- 360's browsers \*

- WeChat's browser

- Yandex Browser \*

- UC Browser \*

- CM Browser \*

- SRWare Iron \*

- Beaker \*

- Naver Whale \*

- Puffin Browser \*

- etc.

_(If your Chrome-based browser does have performance issues, then the Desktop Version which is a Chrome wrapper cannot help, read the solutions in [What to do if the game is slow](https://github.com/arcomage/arcomage-hd/issues/66))_

✅ Browsers based on Firefox's [Gecko](https://hg.mozilla.org/), Safari's [WebKit](https://webkit.org/) and [Qt WebEngine](https://wiki.qt.io/QtWebEngine) rendering engines, are tested and can be used to play the game, but they may be slightly slower than Chrome-based browser, although it depends on your CPU / GPU. If you find these browsers slow, you may try ArcoMage HD's Desktop Version instead:

- Firefox

  - Pale Moon \*

  - SeaMonkey \*

  - K-Meleon \*

  - Tor Browser \*

  - etc.

- Safari 14+ (and/or iOS 14+) (v13- can run the game but can't see WebP images)

- Browsers based on Qt WebEngine

  - qutebrowser

  - Falkon

  - Dooble \*

  - etc.

❌ Browsers with other rendering engines are not supported, you must change to a Chrome-based browser or use ArcoMage HD's Desktop Version instead:

- Microsoft Internet Explorer (IE)

- Microsoft Edge (old version, before 2019) \*

- Opera (very old version, before 2013) \*

- Lynx \*

- NetSurf

- Links \*

- KaiOS browser \*

- etc.

❌ Very old browsers that [do not support ECMAScript 2015 (ES6)](https://caniuse.com/es6) and [WebP images](https://caniuse.com/webp), are also not supported.

### Other Remarks

Click to show other remarks on the desktop version

The Desktop Version is not expected to be updated. The Desktop Version's version number is different from ArcoMage HD's. Actually the Desktop Version may stay at v1.0.0 forever unless there's really something to update.

The first time you run ArcoMage HD Desktop Version, it downloads all the images and sound files silently. You should wait maybe 1 minute (depending on your Internet speed), before you can cut off Internet and play it completely offline.

If you install both Google Chrome and the Desktop Version, the Desktop Version will have independent storage. Clearing your Google Chrome's stored data will not reset the Desktop Version's settings.

## Keyboard Control & Accessibility

The game is fully controllable with keyboard. Use Tab (or Option (Alt) + Tab in Safari) to select a top-menu icon or a card, then Enter to open or use it, Delete / Backspace to discard a card.

Alt + R can reset visual effect settings.

Click to show the detailed keyboard control instruction & additional special "Access Key" usage (e.g. Alt + P: Preferences; Alt + 1: use the 1st card ...)

### Top Menu

Use Tab to select an icon (it's Option (Alt) + Tab in Safari), then Enter to open it. When the window is open, use Esc to close it.

Or with access key (only for opening a window):

- Alt + P: Preferences

- Alt + L: Language

- Alt + S: Sound & Graphics

- Alt + T: Toggle Fullscreen

- Alt + H: Help

- Alt + G: GitHub

When a window is open:

- Esc: (In Fullscreen Mode) exit the mode, or (not in Fullscreen Mode) cancel & close the current window

- Home or Alt + C: Cancel & close the current window

### Card

Use Tab to select a card (it's Option (Alt) + Tab in Safari), then Enter to **use** it, or Delete / Backspace to **discard** it.

Or with access key (only for using a card):

- Alt + 1: Use the 1st card

- Alt + 2: Use the 2nd card

- Alt + 3: Use the 3rd card

- Alt + ...: Use the nth card (n <= 9, you can't use the 10th or later cards with access key)

It could be other key instead of Alt

[The way to activate the accesskey depends on the browser and its platform](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey), it's "Alt + key" in Chrome Windows/Linux.

The game is [screen-reader](https://en.wikipedia.org/wiki/Screen_reader) compatible. It also supports [Reduce Motion (aka. "Show / Turn off animations")](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences) preference available in most operating systems and browsers.













## Multiplayer Mode

_(Currently it **can't connect two users who are both behind symmetric NAT** ([test if you're behind "bad", symmetric NAT](https://tomchen.github.io/symmetric-nat-test/)))_

### How To Use the Multiplayer Mode

https://user-images.githubusercontent.com/529949/115864733-941cbd00-a437-11eb-955d-f6a341c8ea64.mp4

Both players enable the "Multiplayer" Mode. Bob 🧝 must copy and **give his ID to Alice 👧 via Discord, forums, etc.**. Alice 👧 then enters Bob 🧝's ID and connects to Bob 🧝. Alice 👧 becomes the host 🏠 (i.e. technically it's her computer that deals cards) and Bob 🧝 is the guest 💼.

Click to show technical details

### Technical

In Multiplayer Mode, you are connected directly to your opponent (Peer to Peer, P2P) without server. However, we still need free public [STUN](https://en.wikipedia.org/wiki/STUN) servers (set up by Google and others) for the discovery of other peers. Once we use the ID assigned by the server to connect to each other, we are connected directly and don't need the server any more.

The game operates no servers at all, therefore it does not have a server that stores a "list of players online" so you can choose your opponent more easily. You have to instead give your ID to your opponent via Discord or other platforms.

See also [WebRTC (Web Real-Time Communication)](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) and [PeerJS library](https://peerjs.com/).

Because currently the game uses no [TURN](https://en.wikipedia.org/wiki/Traversal_Using_Relays_around_NAT) server, it can't connect two users who are both behind symmetric NAT (which is a rare case).

## Development

The stack:































































[TypeScript](https://www.typescriptlang.org/) + [React](https://reactjs.org/) + [Redux](https://redux.js.org/) + [redux-observable](https://redux-observable.js.org/) + [RxJS](https://rxjs.dev/). [PWA](https://web.dev/progressive-web-apps/) (using [Workbox](https://developers.google.com/web/tools/workbox)).

The game doesn't use [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), [rAF](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), or \ at all. Instead, it uses DOM & CSS-based animations which may be better for SEO and accessibility and make it more like "standard web app". CSS animation's performance is not as good as \'s, but still quite good in Blink-based browsers in modern devices.

P2P Multiplayer Mode without server (only uses [STUN](https://en.wikipedia.org/wiki/STUN) servers for the discovery of other peers) with [WebRTC](https://webrtc.org/) (using [PeerJS](https://peerjs.com/)).

Stereo sound. WebP & SVG images; images upscaled with the library [waifu2x](https://github.com/nagadomi/waifu2x) / [waifu2x-caffe](https://github.com/lltcggie/waifu2x-caffe). Card text extracted with the OCR library [tesseract.js](https://tesseract.projectnaptha.com/).

Dev scripts / tools are in the [`tools` folder](https://github.com/arcomage/arcomage-hd/tree/main/tools), see also [dev notes](https://github.com/arcomage/arcomage-hd/blob/main/devnotes.md) and `scripts` section in [`package.json`](https://github.com/arcomage/arcomage-hd/blob/main/package.json). [yarn](https://yarnpkg.com/) v1 is the package manager to use.








Google Lighthouse score


## Changelog & To Do

[To-do list](https://github.com/arcomage/arcomage-hd/projects/1)

[Changelog file](CHANGELOG.md)

## Translation Credits

- [Cards](https://github.com/arcomage/arcomage-hd/tree/main/src/i18n/cards): extracted from _Might and Magic VIII_ & _VI_ original games (or translated/retranslated) by:

  - English (`en`): [Black Rabite on GameFAQs](https://gamefaqs.gamespot.com/pc/929601-arcomage/faqs/44131)

  - Russian (`ru`) (retranslated): [rayburn](https://github.com/TombOfVARN)

  - Simplified Chinese (`zh-Hans`): (extracted) [Liar-zzy](https://github.com/Liar-zzy/Arcomage/blob/master/Arcomage.cpp), (fixed/retranslated) [Tom Chen](https://github.com/tomchen)

  - Polish (`pl`) (retranslated): [acidcave](https://www.arcomage.acidcave.net/czerwone_karty.html)

  - Czech (`cs`): Yym

  - Brazilian Portuguese (`pt-BR`) (translated): [mateuscv](https://github.com/mateuscv)

  - Japanese (`ja`) (translated): [Tom Chen](https://github.com/tomchen) with the help of [Google Translate](https://translate.google.com/) & [DeepL](https://www.deepl.com/translator)

  - Ukrainian (`uk`) (translated): [troyane](https://github.com/troyane)

  - All others: [Tom Chen](https://github.com/tomchen) with OCR tool [tesseract.js](https://tesseract.projectnaptha.com/) & [other scripts](https://github.com/arcomage/arcomage-hd/tree/main/tools)

  - Traditional Chinese (`zh-Hant`): converted from `zh-Hans` by [Tom Chen](https://github.com/tomchen) with [his scripts](https://github.com/arcomage/arcomage-hd/tree/main/tools/zhconvert) using [opencc-js](https://github.com/nk2028/opencc-js)

- [Main](https://github.com/arcomage/arcomage-hd/tree/main/src/i18n/main) string translators (some are from the original games):

  - Russian (`ru`): [rayburn](https://github.com/TombOfVARN)

  - Polish (`pl`): (partially by) Plamcia

  - Brazilian Portuguese (`pt-BR`): [mateuscv](https://github.com/mateuscv)

  - Ukrainian (`uk`): [troyane](https://github.com/troyane)

  - All others: [Tom Chen](https://github.com/tomchen) by himself and/or with the help of [Google Translate](https://translate.google.com/) & [DeepL](https://www.deepl.com/translator)

  - Traditional Chinese (`zh-Hant`): converted from `zh-Hans` by [Tom Chen](https://github.com/tomchen) with [his scripts](https://github.com/arcomage/arcomage-hd/tree/main/tools/zhconvert) using [opencc-js](https://github.com/nk2028/opencc-js)

- [Taverns](https://github.com/arcomage/arcomage-hd/tree/main/src/i18n/taverns): extracted from _Might and Magic VIII_ & _VI_ original games by [Tom Chen](https://github.com/tomchen) with [his script](https://github.com/arcomage/arcomage-hd/tree/main/tools/i18n-extraction). Except for:

  - Brazilian Portuguese (`pt-BR`) (translated): [mateuscv](https://github.com/mateuscv)

  - Japanese (`ja`) (translated): [Tom Chen](https://github.com/tomchen) with the help of [Google Translate](https://translate.google.com/) & [DeepL](https://www.deepl.com/translator)

  - Ukrainian (`uk`) (translated): [troyane](https://github.com/troyane)

_See also [I18N Issue Page](https://github.com/arcomage/arcomage-hd/issues/9)_

## Arcomage original game

Arcomage was initially developed by Stickman Games and later sold to The 3DO Company (3DO). The game appeared as a mini-game in _Might and Magic VII: For Blood and Honor_ (MM7) and _Might and Magic VIII: Day of the Destroyer_ (MM8), the seventh and eighth games in New World Computing (NWC)'s _Might and Magic_ (MM) series. (It's like _Gwent_ in _The Witcher_) NWC and its parent company, 3DO, also released a stand-alone version in 2000, which can be played in single player or multi player mode. The original stand-alone Arcomage has a resolution of 800 x 600 pixels and is usable in 16-bit color mode in Windows 10, but the graphics is unstable.

## Copyright

The code of the ArcoMage HD game: MIT License (c) 2021 [Tom Chen](https://tomchen.org/).

The assets, text, appearance and other copyrightable elements of the game: (c) 2001 The 3DO Company.

See [CREDIT.md file](CREDIT.md) for a detailed presentation of the copyright status, licenses and credit of the game's components.