chore(deps): bump the npm_and_yarn group across 2 directories with 2 updates (#223)

Bumps the npm_and_yarn group with 1 update in the /app directory:
[vue-i18n](https://github.com/intlify/vue-i18n/tree/HEAD/packages/vue-i18n).
Bumps the npm_and_yarn group with 1 update in the /packages/constants
directory: [zod](https://github.com/colinhacks/zod).

Updates `vue-i18n` from 11.3.0 to 11.4.14
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/intlify/vue-i18n/releases">vue-i18n's
releases</a>.</em></p>
<blockquote>
<h2>v11.4.14</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🔒 Security Fixes</h3>
<ul>
<li>fix(shared): neutralize srcdoc attribute in sanitizeTranslatedHtml
by <a href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2679">intlify/vue-i18n#2679</a></li>
<li>fix(core-base): escape both list and named values with
escapeParameter by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2680">intlify/vue-i18n#2680</a></li>
<li>fix: ignore locales named after Object.prototype properties by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2681">intlify/vue-i18n#2681</a></li>
</ul>
<h3>👕 Refactoring</h3>
<ul>
<li>refactor(core-base): extract the resolved message format check by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2674">intlify/vue-i18n#2674</a></li>
<li>refactor(vue-i18n-core): remove dead branches in getCoreContext() by
<a href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2675">intlify/vue-i18n#2675</a></li>
<li>refactor(vue-i18n-core): share the fallbackContext handling in the
composer by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2676">intlify/vue-i18n#2676</a></li>
<li>refactor(vue-i18n-core): simplify flat JSON handling in
setLocaleMessage / mergeLocaleMessage by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2677">intlify/vue-i18n#2677</a></li>
<li>refactor(core-base): give the compile cache a proper type by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2678">intlify/vue-i18n#2678</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v11.4.13...v11.4.14">https://github.com/intlify/vue-i18n/compare/v11.4.13...v11.4.14</a></p>
<h2>v11.4.13</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>⚡ Improvement Features</h3>
<ul>
<li>fix(core-base): map locale unions without the UnionToTuple
round-trip by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2651">intlify/vue-i18n#2651</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v11.4.12...v11.4.13">https://github.com/intlify/vue-i18n/compare/v11.4.12...v11.4.13</a></p>
<h2>v11.4.12</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🐛 Bug Fixes</h3>
<ul>
<li>fix(core-base): cache locale chains by fallback identity by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2635">intlify/vue-i18n#2635</a></li>
<li>fix(vue-i18n-core): sync the core context when inheritLocale is
enabled by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2636">intlify/vue-i18n#2636</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v11.4.10...v11.4.12">https://github.com/intlify/vue-i18n/compare/v11.4.10...v11.4.12</a></p>
<h2>v11.4.10</h2>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🐛 Bug Fixes</h3>
<ul>
<li>fix(core-base): avoid throwing on AST keys in devtools groupId by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2603">intlify/vue-i18n#2603</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v11.4.9...v11.4.10">https://github.com/intlify/vue-i18n/compare/v11.4.9...v11.4.10</a></p>
<h2>v11.4.9</h2>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/intlify/vue-i18n/blob/v11.4.14/CHANGELOG.md">vue-i18n's
changelog</a>.</em></p>
<blockquote>
<h1>v11.4.14 (2026-10-10T11:06:13.502Z)</h1>
<p>This changelog is generated by <a
href="https://github.com/intlify/vue-i18n/releases/tag/v11.4.14">GitHub
Releases</a></p>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🔒 Security Fixes</h3>
<ul>
<li>fix(shared): neutralize srcdoc attribute in sanitizeTranslatedHtml
by <a href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2679">intlify/vue-i18n#2679</a></li>
<li>fix(core-base): escape both list and named values with
escapeParameter by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2680">intlify/vue-i18n#2680</a></li>
<li>fix: ignore locales named after Object.prototype properties by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2681">intlify/vue-i18n#2681</a></li>
</ul>
<h3>👕 Refactoring</h3>
<ul>
<li>refactor(core-base): extract the resolved message format check by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2674">intlify/vue-i18n#2674</a></li>
<li>refactor(vue-i18n-core): remove dead branches in getCoreContext() by
<a href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2675">intlify/vue-i18n#2675</a></li>
<li>refactor(vue-i18n-core): share the fallbackContext handling in the
composer by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2676">intlify/vue-i18n#2676</a></li>
<li>refactor(vue-i18n-core): simplify flat JSON handling in
setLocaleMessage / mergeLocaleMessage by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2677">intlify/vue-i18n#2677</a></li>
<li>refactor(core-base): give the compile cache a proper type by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2678">intlify/vue-i18n#2678</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v11.4.13...v11.4.14">https://github.com/intlify/vue-i18n/compare/v11.4.13...v11.4.14</a></p>
<h1>v11.4.13 (2026-10-02T11:01:59.781Z)</h1>
<p>This changelog is generated by <a
href="https://github.com/intlify/vue-i18n/releases/tag/v11.4.13">GitHub
Releases</a></p>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>⚡ Improvement Features</h3>
<ul>
<li>fix(core-base): map locale unions without the UnionToTuple
round-trip by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2651">intlify/vue-i18n#2651</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a
href="https://github.com/intlify/vue-i18n/compare/v11.4.12...v11.4.13">https://github.com/intlify/vue-i18n/compare/v11.4.12...v11.4.13</a></p>
<h1>v11.4.12 (2026-09-16T14:30:30.396Z)</h1>
<p>This changelog is generated by <a
href="https://github.com/intlify/vue-i18n/releases/tag/v11.4.12">GitHub
Releases</a></p>
<!-- raw HTML omitted -->
<h2>What's Changed</h2>
<h3>🐛 Bug Fixes</h3>
<ul>
<li>fix(core-base): cache locale chains by fallback identity by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2635">intlify/vue-i18n#2635</a></li>
<li>fix(vue-i18n-core): sync the core context when inheritLocale is
enabled by <a
href="https://github.com/kazupon"><code>@​kazupon</code></a> in <a
href="https://redirect.github.com/intlify/vue-i18n/pull/2636">intlify/vue-i18n#2636</a></li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/intlify/vue-i18n/commit/6bb9ebdeae4955cafb53e82bc461199f6186f573"><code>6bb9ebd</code></a>
release: v11.4.14</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/f6b3e75a16f43f4d9a7a567b1b36cd638e880831"><code>f6b3e75</code></a>
release: v11.4.13</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/87f3745072ca15cbd2d1eb8d030aed10639b0e3e"><code>87f3745</code></a>
release: v11.4.12</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/87510e2f9344e0734bfe9fbc7e0a2c509042e159"><code>87510e2</code></a>
release: v11.4.10</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/5128bf00a1e23fb1defb01ea80622dd6fedd1e21"><code>5128bf0</code></a>
release: v11.4.9</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/de2393bae16676a8a7c293bb493415e3085a521a"><code>de2393b</code></a>
release: v11.4.8</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/ceb0548cb421b8aaf237fecda0394d8fd3d75da7"><code>ceb0548</code></a>
release: v11.4.7</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/913bbfee3d0fe1b0ff321f9670ee7de5c0a5ae51"><code>913bbfe</code></a>
release: v11.4.6</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/6b97bfd57387b440d31e76af665cea4a5cdbd8d3"><code>6b97bfd</code></a>
release: v11.4.5</li>
<li><a
href="https://github.com/intlify/vue-i18n/commit/99fd4bcaf9e38b39857653eecf53b5038a6e8a49"><code>99fd4bc</code></a>
release: v11.4.4</li>
<li>Additional commits viewable in <a
href="https://github.com/intlify/vue-i18n/commits/v11.4.14/packages/vue-i18n">compare
view</a></li>
</ul>
</details>
<br />

Updates `zod` from 3.25.76 to 4.6.7
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/colinhacks/zod/releases">zod's
releases</a>.</em></p>
<blockquote>
<h2>v4.6.7</h2>
<h2>Commits:</h2>
<ul>
<li>b500a2ee95134f81d74da7911d7378dd2853d042 4.6.7</li>
</ul>
<h2>v4.6.6</h2>
<blockquote>
<p>Six malicious commits pushed to <code>main</code> on September 21
with a compromised git credential were reverted the same day in <a
href="https://redirect.github.com/colinhacks/zod/issues/6620">#6620</a>
and have since been removed from the history of <code>main</code>. None
were ever published to npm. The npm provenance for 4.6.6 names 284243fb,
the pre-rewrite copy of 9c219833 with identical contents.</p>
</blockquote>
<h2>Commits:</h2>
<ul>
<li>0cd3af5e9f50ad11bbcd4407a46a21b8848ba574 docs: load the en locale
directly in Zod Mini</li>
<li>9d5e60f162997b764b40d45aa02481888db50dea docs: import locales from
zod/locales, not z.locales</li>
<li>34a626f307871ecbb0123947559328dc52ed5e3e docs: tighten the z.locales
tree-shaking note</li>
<li>74304ce5b5796b5edb9a88ceb8e170b6ea3e82df release: stage npm versions
instead of publishing them (<a
href="https://redirect.github.com/colinhacks/zod/issues/6622">#6622</a>)</li>
<li>b2ef983e0711ff6517d6020b021071e2e5653efa docs: add Code for Japan to
bronze sponsors</li>
<li>8fb2faf0584828a6a027d8279db36f6f52784462 docs: crop the Code for
Japan logo and list it first in bronze</li>
<li>bacad518c41610d654658172d325874bf0ee6290 docs: square the Code for
Japan logo to match the other bronze tiles</li>
<li>c42596bd1c87e941d7241d10e012c5c196adcc10 release: hold the run on
the release-approval environment until the staged versions are approved
(<a
href="https://redirect.github.com/colinhacks/zod/issues/6638">#6638</a>)</li>
<li>a2ba4a67986a3e6b2b131be30084a2f460d9ea67 fix(types): declare record
output and input as members, not base type arguments (<a
href="https://redirect.github.com/colinhacks/zod/issues/6645">#6645</a>)</li>
<li>a0ebf970f2d752e5f58527cd2942ff48be4f46bd fix(v4): check array, set
and map size bounds before parsing elements (<a
href="https://redirect.github.com/colinhacks/zod/issues/6652">#6652</a>)</li>
<li>529f78dd9431b07f49647fee3aa0819b3f8b66b7 4.6.6</li>
<li>9c219833c3a3764fa1f1ea9c5ecec8254a63c0b1 ci: stage at verbose so a
failed OIDC token exchange says why</li>
</ul>
<h2>v4.6.5</h2>
<h2>Commits:</h2>
<ul>
<li>d2b135cfb7a3582b9eb515756b9166bcb9521f4a docs: add the 4.6.x patch
highlights to the 4.6 post</li>
<li>f1448f7cee00df9fe1e9ad84a000aa1828cc8bc1 docs: fold the 4.6.x patch
highlights into the 4.6 post's own sections</li>
<li>de65a5cb39ed22a507fac935788f718fa88d104f docs: lead the properties
section with the check and add a Zod Mini tab (<a
href="https://redirect.github.com/colinhacks/zod/issues/6598">#6598</a>)</li>
<li>56222cd1532c07bcb91b67df529cab4c0a215330 feat(instanceof): key the
.properties() shape off the instance type (<a
href="https://redirect.github.com/colinhacks/zod/issues/6600">#6600</a>)</li>
<li>ca0229a404818290e6cdcfefcd7eb2d04bcbb543 Revert &quot;feat: add
z.currencyCode() over a vendored ISO 4217 list, refreshed weekly by CI
(<a
href="https://redirect.github.com/colinhacks/zod/issues/6595">#6595</a>)&quot;</li>
<li>cc4cd4ee9c52fcaa10964e48cc144541e41a5ed9 Revert &quot;Revert
&quot;feat: add z.currencyCode() over a vendored ISO 4217 list,
refreshed weekly by CI (<a
href="https://redirect.github.com/colinhacks/zod/issues/6595">#6595</a>)&quot;&quot;</li>
<li>0f3f5ee3ca56c7574bf849e54f79e9a6e02562ee 4.6.5</li>
<li>59bbc03e10c636b9eb3c393dfeb552819774ec21 chore: re-pin the
integration peers to the workspace zod after the 4.6.5 bump</li>
</ul>
<h2>v4.6.4</h2>
<p>A patch on top of <a
href="https://github.com/colinhacks/zod/releases/tag/v4.6.3">4.6.3</a>.</p>
<ul>
<li><a
href="https://github.com/colinhacks/zod/commit/d6bc1e30"><code>d6bc1e30</code></a>
feat: add <code>z.currencyCode()</code> over a vendored ISO 4217 list,
refreshed weekly by CI (<a
href="https://redirect.github.com/colinhacks/zod/pull/6595">#6595</a>)</li>
<li><a
href="https://github.com/colinhacks/zod/commit/ad32d751"><code>ad32d751</code></a>
perf: <code>z.url()</code> rejects an invalid URL with
<code>URL.canParse()</code> instead of a throwing constructor, about 50x
faster; fewer allocations on the validation path (<a
href="https://redirect.github.com/colinhacks/zod/pull/6588">#6588</a>)</li>
<li><a
href="https://github.com/colinhacks/zod/commit/2bb08717"><code>2bb08717</code></a>
chore: re-pin the integration peers to the workspace zod after the 4.6.4
bump</li>
<li><a
href="https://github.com/colinhacks/zod/commit/f6e1701a"><code>f6e1701a</code></a>
chore(deps): bump next to 15.5.25 and vite to 7.3.6 (<a
href="https://redirect.github.com/colinhacks/zod/pull/6153">#6153</a>)</li>
</ul>
<h2>v4.6.3</h2>
<p>A patch on top of <a
href="https://github.com/colinhacks/zod/releases/tag/v4.6.2">4.6.2</a>.</p>
<ul>
<li><a
href="https://github.com/colinhacks/zod/commit/413cce9a"><code>413cce9a</code></a>
fix(v4): make z.properties() a check again (<a
href="https://redirect.github.com/colinhacks/zod/pull/6594">#6594</a>) —
removes the standalone <code>z.properties()</code> schema from 4.6.0;
<code>z.instanceof().properties()</code> and
<code>.check(...z.properties())</code> are unchanged</li>
<li><a
href="https://github.com/colinhacks/zod/commit/75d63ee1"><code>75d63ee1</code></a>
docs: show only the <code>.properties()</code> method form in the 4.6
post</li>
<li><a
href="https://github.com/colinhacks/zod/commit/46da9572"><code>46da9572</code></a>
docs: match the error-message examples to what the parsers emit</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/colinhacks/zod/commit/b500a2ee95134f81d74da7911d7378dd2853d042"><code>b500a2e</code></a>
4.6.7</li>
<li><a
href="https://github.com/colinhacks/zod/commit/9c219833c3a3764fa1f1ea9c5ecec8254a63c0b1"><code>9c21983</code></a>
ci: stage at verbose so a failed OIDC token exchange says why</li>
<li><a
href="https://github.com/colinhacks/zod/commit/529f78dd9431b07f49647fee3aa0819b3f8b66b7"><code>529f78d</code></a>
4.6.6</li>
<li><a
href="https://github.com/colinhacks/zod/commit/a0ebf970f2d752e5f58527cd2942ff48be4f46bd"><code>a0ebf97</code></a>
fix(v4): check array, set and map size bounds before parsing elements
(<a
href="https://redirect.github.com/colinhacks/zod/issues/6652">#6652</a>)</li>
<li><a
href="https://github.com/colinhacks/zod/commit/a2ba4a67986a3e6b2b131be30084a2f460d9ea67"><code>a2ba4a6</code></a>
fix(types): declare record output and input as members, not base type
argumen...</li>
<li><a
href="https://github.com/colinhacks/zod/commit/c42596bd1c87e941d7241d10e012c5c196adcc10"><code>c42596b</code></a>
release: hold the run on the release-approval environment until the
staged ve...</li>
<li><a
href="https://github.com/colinhacks/zod/commit/bacad518c41610d654658172d325874bf0ee6290"><code>bacad51</code></a>
docs: square the Code for Japan logo to match the other bronze
tiles</li>
<li><a
href="https://github.com/colinhacks/zod/commit/8fb2faf0584828a6a027d8279db36f6f52784462"><code>8fb2faf</code></a>
docs: crop the Code for Japan logo and list it first in bronze</li>
<li><a
href="https://github.com/colinhacks/zod/commit/b2ef983e0711ff6517d6020b021071e2e5653efa"><code>b2ef983</code></a>
docs: add Code for Japan to bronze sponsors</li>
<li><a
href="https://github.com/colinhacks/zod/commit/74304ce5b5796b5edb9a88ceb8e170b6ea3e82df"><code>74304ce</code></a>
release: stage npm versions instead of publishing them (<a
href="https://redirect.github.com/colinhacks/zod/issues/6622">#6622</a>)</li>
<li>Additional commits viewable in <a
href="https://github.com/colinhacks/zod/compare/v3.25.76...v4.6.7">compare
view</a></li>
</ul>
</details>
<details>
<summary>Maintainer changes</summary>
<p>This version was pushed to npm by <a
href="https://www.npmjs.com/~GitHub%20Actions">GitHub Actions</a>, a new
releaser for zod since your current version.</p>
</details>
<br />


Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore <dependency name> major version` will close this
group update PR and stop Dependabot creating any more for the specific
dependency's major version (unless you unignore this specific
dependency's major version or upgrade to it yourself)
- `@dependabot ignore <dependency name> minor version` will close this
group update PR and stop Dependabot creating any more for the specific
dependency's minor version (unless you unignore this specific
dependency's minor version or upgrade to it yourself)
- `@dependabot ignore <dependency name>` will close this group update PR
and stop Dependabot creating any more for the specific dependency
(unless you unignore this specific dependency or upgrade to it yourself)
- `@dependabot unignore <dependency name>` will remove all of the ignore
conditions of the specified dependency
- `@dependabot unignore <dependency name> <ignore condition>` will
remove the ignore condition of the specified dependency and ignore
conditions
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/linux-odyssey/linux-odyssey/network/alerts).

</details>

.dockerignore

@@ -1,3 +1,6 @@
-*/node_modules
+**/node_modules
 .git
-*/dist
+**/dist
+**/tsconfig.tsbuildinfo
+data
+postgres-data

.env.dev

@@ -0,0 +1,4 @@
+TESTING=true
+TESTING_USERNAME=alex
+TESTING_PASSWORD=Alex1234
+SECRET_KEY=b1d2e917-17b9-4fce-9055-082dee6ec5d6

.env.prod.sample

@@ -0,0 +1,50 @@
+HOST=localhost
+PORT=3000
+BASE_URL=https://example.com
+SECRET_KEY=YOU_SHOULD_CHANGE_THIS
+BACKEND_URL=http://backend:3000
+DOCKER_NETWORK=linux-odyssey-players
+
+MONGO_ROOT_PASSWORD=adminpassword
+MONGO_USER=commander
+MONGO_PASS=commander
+MONGO_DB=linux-odyssey
+MONGO_URL=mongodb://commander:commander@db:27017/linux-odyssey
+
+# Admin user credentials for analytics
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=admin
+ADMIN_HOST=0.0.0.0
+ADMIN_PORT=3001
+# ADMIN_BASE_URL=http://0.0.0.0:3001
+
+# Optional
+# CONTAINER_EXPIRY=60     # 60 minutes
+# SESSION_MAX_AGE=168      # 7 days
+# TRUSTED_PROXIES=1.2.3.4    
+# valid configurations see isIP & isIPRange in  https://github.com/validatorjs/validator.js?tab=readme-ov-file#validators
+
+# RATE_LIMIT_MAX_FAILED_ATTEMPTS=5
+# RATE_LIMIT_LOCKOUT_TIME=10
+
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+# SURVEY_URL=
+# BUG_REPORT_URL=
+
+# Docker related config
+# DOCKER_NETWORK=host
+# QUEST_IMAGE=linuxodyssey/quest-base
+# DOCKER_PREFIX=linuxodyssey/quest-
+
+# To mount quest folder from host into container, for development purpose
+# MOUNT_QUEST=true
+
+# LOG_PATH=
+
+# Testing, create a user with the following credentials, disable rate limiting
+# TESTING=true
+# TESTING_USERNAME=alex
+# TESTING_PASSWORD=Alex1234

.env.sample

@@ -0,0 +1,38 @@
+HOST=localhost
+PORT=3000
+BASE_URL=http://localhost:8000
+MONGO_URL=mongodb://localhost:27017/odyssey-test
+SECRET_KEY=sample-secret
+DOCKER_NETWORK=linux-odyssey-players-dev
+
+# Optional
+# BACKEND_URL=http://host.docker.internal:3000
+# CONTAINER_EXPIRY=60     # 60 minutes
+# SESSION_MAX_AGE=168      # 7 days
+# TRUSTED_PROXIES=1.2.3.4    
+# valid configurations see isIP & isIPRange in  https://github.com/validatorjs/validator.js?tab=readme-ov-file#validators
+
+# RATE_LIMIT_MAX_FAILED_ATTEMPTS=5
+# RATE_LIMIT_LOCKOUT_TIME=10
+
+# GOOGLE_CLIENT_ID=
+# GOOGLE_CLIENT_SECRET=
+# GITHUB_CLIENT_ID=
+# GITHUB_CLIENT_SECRET=
+# SURVEY_URL=
+# BUG_REPORT_URL=
+
+# Docker related config
+# DOCKER_NETWORK=host
+# QUEST_IMAGE=linuxodyssey/quest-base
+# DOCKER_PREFIX=linuxodyssey/quest-
+
+# To mount quest folder from host into container, for development purpose
+# MOUNT_QUEST=true
+
+# LOG_PATH=
+
+# Testing, create a user with the following credentials, disable rate limiting
+# TESTING=true
+# TESTING_USERNAME=alex
+# TESTING_PASSWORD=Alex1234

.eslintignore

@@ -2,4 +2,5 @@ vite.config.js
 .gitignore
 data
 mongo-init.js
-app/dist
+dist
+postgres-data

.eslintrc.js

@@ -2,24 +2,40 @@ module.exports = {
   root: true,
   env: {
     node: true,
-    jest: true,
   },
-  plugins: ['cypress'],
+  globals: {
+    Bun: 'readonly',
+  },
+  plugins: ['@typescript-eslint', 'cypress', 'vue'],
   extends: [
     'plugin:vue/vue3-essential',
     'airbnb-base',
     'plugin:prettier/recommended', // We added this
     'plugin:cypress/recommended',
   ],
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    // parser: 'babel-eslint',
+    parser: '@typescript-eslint/parser',
-    ecmaVersion: 13,
     sourceType: 'module',
   },
+
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts'],
+        moduleDirectory: ['node_modules', 'packages', 'server/src'],
+      },
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+    vue: {
+      version: '3.0', // Explicitly specify Vue 3
+    },
+  },
   rules: {
-    'no-console': 'warn',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'import/extensions': 'off',
     camelcase: ['error', { properties: 'never', ignoreDestructuring: true }],
     'no-param-reassign': ['error', { props: false }],
     'no-underscore-dangle': ['error', { allow: ['_id'] }],
@@ -29,5 +45,69 @@ module.exports = {
     'prettier/prettier': ['error', { endOfLine: 'auto', semi: false }],
     'import/prefer-default-export': 'off',
     'no-restricted-syntax': ['off', 'ForOfStatement'],
+    'lines-between-class-members': [
+      'error',
+      'always',
+      { exceptAfterSingleLine: true },
+    ],
+    'no-use-before-define': 'off',
+
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+        caughtErrors: 'all',
+        caughtErrorsIgnorePattern: '^_',
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+      },
+    ],
+
+    // Allow missing file extensions
+    'import/extensions': [
+      'off',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'no-unused-vars': 'warn',
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': 'error',
+    'no-empty-function': 'off',
+    '@typescript-eslint/no-empty-function': 'error',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+    'no-restricted-imports': ['error', '../*'],
+    'import/no-relative-packages': 'off',
+    'no-await-in-loop': 'off',
   },
+  overrides: [
+    {
+      files: ['**/tests/**/*.js', '**/tests/**/*.ts', '**/*.test.ts'],
+      rules: {
+        'import/extensions': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+    {
+      files: ['server/**/*.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+    {
+      files: ['**/packages/**/*.ts'],
+      rules: {
+        'no-restricted-imports': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+  ],
 }

.github/workflows/build-docker-image.yml

@@ -18,9 +18,9 @@ on:
 
     secrets:
       DOCKERHUB_USERNAME:
-        required: true
+        required: false
       DOCKERHUB_TOKEN:
-        required: true
+        required: false
 
 jobs:
   build-and-push:
@@ -42,6 +42,7 @@ jobs:
             type=semver,pattern={{version}}
 
       - name: Login to Docker Hub
+        if: always()
         uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -53,5 +54,5 @@ jobs:
           context: .
           file: ${{ inputs.dockerfilePath }}
           target: ${{ inputs.target }}
-          push: true
+          push: ${{ secrets.DOCKERHUB_USERNAME != '' }}
           tags: ${{ steps.meta.outputs.tags }}

.github/workflows/build.yml

@@ -24,7 +24,7 @@ jobs:
     uses: ./.github/workflows/build-docker-image.yml
     with:
       imageName: 'linuxodyssey/analytics'
-      dockerfilePath: './packages/analytics/Dockerfile'
+      dockerfilePath: './services/analytics/Dockerfile'
       target: prod
     secrets: inherit
 

.github/workflows/ci-checks.yml

@@ -2,15 +2,6 @@ name: CI Checks
 
 on:
   workflow_call:
-    secrets:
-      GOOGLE_CLIENT_ID:
-        required: true
-      GOOGLE_CLIENT_SECRET:
-        required: true
-      GH_CLIENT_ID:
-        required: true
-      GH_CLIENT_SECRET:
-        required: true
 
 jobs:
   ci:
@@ -20,35 +11,21 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3
+      - uses: oven-sh/setup-bun@v2
         with:
-          node-version: 20
+          bun-version: 1.3.14
 
       - name: Install dependencies
-        run: yarn install
+        run: bun install --frozen-lockfile
+
+      - name: Type check
+        run: bun run type-check
+
+      - name: Build
+        run: bun run build
 
       - name: Lint
-        run: yarn lint
+        run: bun run lint
 
       - name: Test
-        run: yarn test
+        run: bun run test
-
-  e2e:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v3
-
-      - name: Build Test Environment, Stage 1
-        run: docker-compose -f docker-compose.testing.yml build base backend app-test cypress
-
-      - name: Build Test Quests
-        run: docker-compose -f docker-compose.testing.yml run --rm backend yarn build:quests
-
-      - name: Run Cypress Tests
-        env:
-          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
-          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
-          GITHUB_CLIENT_ID: ${{ secrets.GH_CLIENT_ID }}
-          GITHUB_CLIENT_SECRET: ${{ secrets.GH_CLIENT_SECRET }}
-        run: docker-compose -f docker-compose.testing.yml run cypress

.github/workflows/codeql.yml

@@ -0,0 +1,103 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main", "dev" ]
+  pull_request:
+    branches: [ "main", "dev" ]
+  schedule:
+    - cron: '25 14 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: actions
+          build-mode: none
+        - language: go
+          build-mode: autobuild
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v7
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v4
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - name: Run manual build steps
+      if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v4
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/e2e.yml

@@ -0,0 +1,25 @@
+name: E2E Tests
+
+on:
+  workflow_dispatch:
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Build Test Environment, Stage 1
+        run: docker-compose -f docker-compose.testing.yml build base backend app-test cypress
+
+      - name: Build Test Quests
+        run: docker-compose -f docker-compose.testing.yml run --rm backend bun run build:quests
+
+      - name: Run Cypress Tests
+        env:
+          GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
+          GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
+          GITHUB_CLIENT_ID: ${{ secrets.GH_CLIENT_ID }}
+          GITHUB_CLIENT_SECRET: ${{ secrets.GH_CLIENT_SECRET }}
+        run: docker-compose -f docker-compose.testing.yml run cypress

.github/workflows/production.yml

@@ -12,10 +12,9 @@ concurrency:
 jobs:
   ci-checks:
     uses: ./.github/workflows/ci-checks.yml
-    secrets: inherit
 
   build:
-    # needs: ci-checks
+    needs: ci-checks
     uses: ./.github/workflows/build.yml
     secrets: inherit
 

.github/workflows/pull-request.yml

@@ -10,25 +10,7 @@ concurrency:
 jobs:
   ci-checks:
     uses: ./.github/workflows/ci-checks.yml
-    secrets: inherit
-
-  code_review:
-    permissions:
-      pull-requests: write
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Code Review GPT
-        uses: mattzcarey/code-review-gpt@v0.1.4-alpha
-        with:
-          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-          MODEL: 'gpt-4'
-          GITHUB_TOKEN: ${{ github.token }}
 
   build:
-    needs: ci-checks
     uses: ./.github/workflows/build.yml
     secrets: inherit

.github/workflows/staging.yml

@@ -12,10 +12,9 @@ concurrency:
 jobs:
   ci-checks:
     uses: ./.github/workflows/ci-checks.yml
-    secrets: inherit
 
   build:
-    # needs: ci-checks
+    needs: ci-checks
     uses: ./.github/workflows/build.yml
     secrets: inherit
 

.gitignore

@@ -1,3 +1,9 @@
+config 
+.quest
+tmp
+services/terminal-service/terminal-service
+bin
+
 # Logs
 logs
 *.log
@@ -52,6 +58,9 @@ web_modules/
 # TypeScript cache
 *.tsbuildinfo
 
+# TypeScript build
+built
+
 # Optional npm cache directory
 .npm
 
@@ -82,6 +91,7 @@ web_modules/
 .env.test.local
 .env.production.local
 .env.local
+.env.prod
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
@@ -132,3 +142,7 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+#screenshots
+tests/cypress/screenshots
+services/cmd-hook/cmd-hook

.prettierignore

@@ -1,2 +1,2 @@
 data/*
-app/dist
+dist

.vscode/launch.json

@@ -4,10 +4,10 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "File Graph Yarn Jest",
+      "name": "File Graph Tests",
-      "runtimeExecutable": "yarn",
+      "runtimeExecutable": "bun",
-      "args": ["test", "--runInBand"],
+      "args": ["test", "packages/file-graph"],
-      "cwd": "${workspaceFolder}/packages/file-graph",
+      "cwd": "${workspaceFolder}",
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen"
     }

.vscode/settings.json

@@ -1,4 +1,11 @@
 {
   "editor.tabSize": 2,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "yaml.schemas": {
+    "packages/game/quest.json": "quests/**/game.yml"
+  },
+  "[go]": {
+    "editor.defaultFormatter": "golang.go"
+  }
 }

README.md

@@ -3,35 +3,85 @@
 [![Production](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/production.yml/badge.svg)](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/production.yml)
 [![Staging](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/staging.yml/badge.svg)](https://github.com/linux-odyssey/linux-odyssey/actions/workflows/staging.yml)
 
+## TLDR
+
+    bun install
+    cp .env.sample .env
+    docker compose up -d
+    bun run dev
+
 ## Requirements
 
-- NodeJS
+- Bun: v1.3+
 - Docker
-- Yarn
+
+## Known Issues
+
+- MongoDB requires x86 architecture to run for v5+ versions. You can track [this issue](https://github.com/linux-odyssey/linux-odyssey/issues/166) for updates.
+
+Windows user please refer to [docs/windows-setup.md](docs/windows-setup.md) for setup instructions.
 
 ## Installation
 
     git clone https://github.com/lancatlin/linux-odyssey.git
     cd linux-odyssey
-    yarn install
+    bun install
 
-## Development
+## Project Structures
 
-Run everything (frontend, backend, db, swagger, quests):
+1. **app**: frontend
+2. **server**: backend
+3. **quests**: tutorials scripts for each quest
+4. **packages**: other packages
+   1. **analytics**: admin dashboard to analyze collected data
+   2. **constants**: some shared config values for app and server
+   3. **container**: the script run in container to capture users' command
+   4. **file-graph**: the algorithm to construct and modify file graph, used in both app and server
+   5. **models**: definitions of MondoDB collections (data schema)
+   6. **utils**: other utility code shared between packages
+   7. **game (in the future)**: core logic of game playing, will be extracted from server
+
+## Configuration
+
+The configuration is stored in the `.env` file. You can copy from the sample file.
+
+    cp .env.sample .env
+
+## Docker Setup
+
+### Docker compose files explaination
+
+1. **docker-compose.yml**: The one used for development. It sets up MongoDB and builds base quest image.
+2. **docker-compose.prod.yml**: The one used for production deployment. It has a Nginx service, a backend, a database, an analytics service, and creates isolated networks for player containers.
+3. **docker-compose.testing.yml**: Similar to production config, but sets up an one-time environment for end-to-end testing.
+
+### Common Development Setup
+
+This sets up a development database, and running development server for frontend and backend.
+
+Pull the latest images:
+
+    docker compose pull
+
+Start the containers:
 
-    docker compose build
     docker compose up -d
 
-If you want to enable social login, you should have OAuth client token in a `.env` file:
+This will start the db. it will automatically restarts by Docker.
 
-    docker compose --env-file .env up -d
+Building quest images:
 
-### Build Quest Images
+    docker compose build base
 
-In each quest folder, there is a `game.yml` file, which is the quest definition. And a optional `Dockerfile` to overwrite the base image. If you want to include additional files, put them in a `home` folder. The files in `home` will **not** be copied to the image automatically, you have to copy them in the `Dockerfile`.
+### Build Quest Images in Details
+
+In each quest folder, there is a `game.yml` file, which is the quest definition.
+
+If you want to include additional files, put them in a `home` folder. The files in `home` will be copied to the user's home on container creation automatically.
 
     quests/
     ├── Dockerfile      # Base image
+    ├── entrypoint.sh   # Entrypoint for the container
     ├── discover
     │   └── game.yml
     ├── helloworld
@@ -47,18 +97,60 @@ In each quest folder, there is a `game.yml` file, which is the quest definition.
         └── home
             └── ancient_scroll.txt
 
+An optional `Dockerfile` can overwrite the base image. You can use this to install additional dependencies or modify the environment.
+
+Customized `entrypoint.sh` for each quest is not yet supported.
+
 To build all quests:
 
-    yarn build:quests
+    bun run build:quests
 
 The base image is built with docker-compose, so you can use `docker compose build base` to rebuild it. Once you rebuild the base image, you have to rebuild all quests.
 
+### Optional: Mounting Host Directory
+
+To update the home content of a quest, simply re-create a new session will do. The home content is mounted and copied on container creation.
+
+To further improve the development experience, we can mount the host directory to the container in the pattern:
+
+    /path/to/linux-odyssey/quests/${quest_id}/home:/home/commander
+
+You can edit the files on your host, and the changes will be reflected in the container. This is disabled by default. To enable it, you can set the following environment variables:
+
+    MOUNT_QUEST=true
+
+### Optional: Mounting terminal service & cmd-hook
+
+To make the development of terminal services & cmd-hook smoother, we can enable `MOUNT_CLI` to mount the local binaries into container.
+
+    MOUNT_CLI
+
+And you can run `air` inside of `services/terminal-service` or `services/cmd-hook` to get auto recompiling.
+
+## Development
+
+Copy `.env.sample` to `.env` and customize it for your needs.
+
+Run dev server (frontend, backend):
+
+    bun run dev
+
+To develop analytics dashboard:
+
+    bun run analytics
+
+The default username and password is `alex` and `Alex1234`.
+
 ## Testing
 
+Unit tests:
+
+    bun run test
+
 Run Cypress locally, using the current development containers:
 
     docker compose up -d
-    yarn test:e2e
+    bun run test:e2e
 
 Run Cypress in container, create brand-new containers along with it:
 
@@ -71,76 +163,37 @@ Run Cypress in container, create brand-new containers along with it:
     # tearing off the containers
     ./docker-scripts.sh down
 
-### Deployment
+## Deployment
 
+Create production env
+
+    cp .env.prod.sample .env.prod
+
+Edit `.env.prod`
+
+    BASE_URL=https://yourdomain.com         # IMPORTANT to make login work
+    SECRET_KEY=xxxx                         # Change it to something safe!
+
+Start the service
+
+    # Build the images (only allowed for maintainers)
     docker compose -f docker-compose.prod.yml build
     docker compose -f docker-compose.prod.yml push
 
     # Server side
     docker compose -f docker-compose.prod.yml pull
+    bun run build:quests
     docker compose -f docker-compose.prod.yml up -d
 
+### Necessary Configuration
+
 To enable social login, you should have OAuth client token in a `.env` file:
-You can copy from `example.env`
+You can copy from `.env.sample`
 
-    # .env
+**YOU MUST CHANGE THE SECRET_KEY** in `.env` file.
-    BASE_URL=https://example.com
-    GOOGLE_CLIENT_ID=...
-    GOOGLE_CLIENT_SECRET=...
 
-To enable it:
+    SECRET_KEY=your-secret-key
 
-    docker compose --env-file .env -f docker-compose.prod.yml up -d
+You can generate a random key by running
 
-## Standalone App (without Docker)
+    bun run setup
-
-Source: `app/`
-
-    # Connect to dev server (https://odyssey.wancat.cc)
-    yarn app
-
-    # Connect to localhost (http://localhost:3000)
-    yarn app:local
-
-    # Connect to anyhost
-    API_ENDPOINT=http://example.com yarn app:local
-
-## Swagger
-
-    docker compose up -d swagger
-
-Open http://localhost:8080 to open Swagger
-
-## CLI terminal client (Docker not required)
-
-    yarn cli
-    Usage: client [options] [command]
-
-    Options:
-    -s, --session <string>  Session ID
-    -c, --create            Create a new session
-    -h, --host <string>     Server host (default: "http://localhost:3000")
-    --help                  display help for command
-
-    Commands:
-    list                    List all sessions
-
-connet to recent session:
-
-    yarn cli
-
-connect to new session:
-
-    yarn cli -c
-
-connect to specific session:
-
-    yarn cli -s 64d0de0367459c13004bc83f
-
-connect to other host:
-
-    yarn cli -h https://example.com
-
-list sessions:
-
-    yarn cli list

app/Dockerfile

@@ -1,28 +1,27 @@
 # Base stage
-FROM node:20-alpine as base
+FROM oven/bun:1.3.14-alpine AS build
+
 WORKDIR /app
-COPY package.json yarn.lock ./
+COPY package.json bun.lock ./
-COPY packages/file-graph/package.json ./packages/file-graph/package.json
-COPY packages/utils/package.json ./packages/utils/package.json
-COPY packages/constants/package.json ./packages/constants/package.json
 COPY app/package.json ./app/package.json
-RUN yarn install --frozen-lockfile
+COPY server/package.json ./server/package.json
+COPY services/analytics/package.json ./services/analytics/package.json
+COPY tests/package.json ./tests/package.json
+COPY packages/constants/package.json ./packages/constants/package.json
+COPY packages/file-graph/package.json ./packages/file-graph/package.json
+COPY packages/game/package.json ./packages/game/package.json
+COPY packages/models/package.json ./packages/models/package.json
+COPY packages/utils/package.json ./packages/utils/package.json
+RUN bun install --frozen-lockfile --filter app
 
-# Dev stage
+COPY tsconfig.json ./tsconfig.json
-FROM base as dev
+COPY server ./server
-WORKDIR /app/app
+COPY packages ./packages
-CMD [ "yarn", "dev:docker", "--host", "0.0.0.0" ]
-
-# Build stage
-FROM base as build
-COPY packages/file-graph ./packages/file-graph
-COPY packages/utils ./packages/utils
-COPY packages/constants ./packages/constants
 COPY app ./app
-RUN yarn build
+RUN bun run --filter app build
 
 # Production stage
-FROM nginx:stable-alpine as prod
+FROM nginx:stable-alpine AS prod
 COPY --from=build /app/app/dist /usr/share/nginx/html
 COPY deployment/nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80

app/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/icon_totem.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Linux Odyssey</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

app/package.json

@@ -2,28 +2,35 @@
   "name": "app",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "API_TARGET=http://homesrv.dala-banana.ts.net:3000 vite",
+    "dev": "vite",
-    "dev:local": "vite",
     "dev:docker": "API_TARGET=http://backend:3000 vite",
-    "build": "vite build",
+    "build": "vue-tsc && vite build",
+    "type-check": "vue-tsc",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@formbricks/js": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@linux-odyssey/constants": "*",
+    "@odyssey/constants": "workspace:*",
-    "@linux-odyssey/file-graph": "*",
+    "@odyssey/file-graph": "workspace:*",
-    "@linux-odyssey/utils": "*",
+    "@odyssey/game": "workspace:*",
-    "axios": "^1.6.0",
+    "@odyssey/utils": "workspace:*",
-    "echarts": "^5.4.3",
+    "@trpc/client": "^11.1.0",
+    "@types/dompurify": "^3.0.5",
+    "axios": "^1.20.0",
+    "dompurify": "^3.4.16",
+    "marked": "^10.0.0",
+    "pinia": "^2.1.7",
+    "reconnecting-websocket": "^4.4.0",
     "socket.io-client": "^4.7.1",
-    "validator": "^13.11.0",
+    "validator": "^13.15.22",
     "vue": "^3.3.4",
+    "vue-i18n": "11.4.14",
     "vue-router": "^4.2.4",
     "vue-toastification": "^2.0.0-rc.5",
     "vue3-lottie": "^3.2.0",
@@ -32,10 +39,15 @@
     "xterm-addon-fit": "^0.7.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@types/validator": "^13.11.9",
+    "@vitejs/plugin-vue": "^5.2.2",
+    "@vue/compiler-sfc": "^3.3.13",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.31",
+    "postcss": "^8.5.23",
     "tailwindcss": "^3.3.3",
-    "vite": "^4.4.0"
+    "typescript": "~5.7.2",
+    "vite": "^6.4.3",
+    "vue-tsc": "^2.2.8"
   }
 }

app/postcss.config.ts

@@ -1,4 +1,4 @@
-export default {
+module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

app/public/icon_totem.svg

@@ -0,0 +1,9 @@
+<svg width="638" height="732" viewBox="0 0 638 732" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0 0H638V732H0V0Z" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_379_14" transform="matrix(0.00126582 0 0 0.00110327 0 -0.000333748)"/>
+</pattern>
+<image id="image0_379_14" width="790" height="907" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>

app/src/components/AuthForm.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { computed, onMounted, ref } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import api from '../utils/api'
 
+const { t } = useI18n()
 const emit = defineEmits(['onSubmit', 'onChange'])
+
 defineProps({
   type: {
     type: String,
@@ -27,7 +30,7 @@ const password = ref('')
 const errorMessage = ref('')
 const toast = useToast()
 
-const availableMethods = ref({})
+const availableMethods = ref<{ [key: string]: boolean }>({})
 onMounted(async () => {
   const res = await api.get('/auth/available-methods')
   availableMethods.value = res.data
@@ -44,7 +47,7 @@ const success = () => {
   router.push({ name: 'map' })
 }
 
-const error = (err) => {
+const error = (err: string) => {
   errorMessage.value = err
 }
 
@@ -83,19 +86,35 @@ const handleChange = () => {
     errorMessage.value = 'Something went wrong'
   }
 }
+
+// Guest account currently disabled
+// const registerGuest = async () => {
+//   try {
+//     await api.post('/auth/register-guest')
+//     router.push({ name: 'map' })
+//   } catch (err) {
+//     console.error(err)
+//     toast.error('Something went wrong.')
+//   }
+// }
 </script>
 <template>
   <!-- login page -->
   <div
     class="bg-bg border-8 border-bg-primary flex flex-1 flex-col items-center justify-center rounded-3xl p-10"
   >
-    <h1 class="text-text-primary text-3xl font-black mb-2">{{ title }}</h1>
+    <div class="w-full flex items-center justify-center mb-2 gap-3">
-    <div class="text-error inline-flex justify-center items-center xl:hidden">
+      <img src="../img/icon_totem.svg" class="h-10" />
+      <h1 class="text-text-primary text-3xl font-black" id="title">
+        {{ title }}
+      </h1>
+    </div>
+    <div class="text-error inline-flex justify-center items-center md:hidden">
       <font-awesome-icon
         :icon="['fas', 'circle-exclamation']"
         class="px-1 text-sm"
       />
-      <span>建議使用電腦全螢幕執行</span>
+      <span>{{ t('authform.recommand_pc_fullscreen') }}</span>
     </div>
     <form @submit.prevent="handleSubmit()" class="w-full">
       <div v-if="socialLogin && hasSocialLogins">
@@ -109,10 +128,7 @@ const handleChange = () => {
             :icon="['fab', 'google']"
             class="text-text-secondary px-3 text-lg"
           />
-          <span class="font-medium">
+          <span class="font-medium"> {{ t('authform.google_login') }} </span>
-            <!-- Continue with Google -->
-            以 Google 繼續
-          </span>
         </a>
         <a
           id="GitHubLogin"
@@ -124,69 +140,46 @@ const handleChange = () => {
             :icon="['fab', 'github']"
             class="text-text-secondary px-3 text-lg"
           />
-          <span class="font-medium">
+          <span class="font-medium"> {{ t('authform.github_login') }} </span>
-            <!-- Continue with GitHub -->
-            以 GitHub 繼續
-          </span>
         </a>
         <p
           id="or"
           class="text-text-secondary flex justify-center mt-3"
           v-if="type === 'login' || type === 'register'"
         >
-          <!-- or -->
+          {{ t('authform.or') }}
-          或
         </p>
       </div>
       <div class="mb-6">
-        <!-- <input
-          type="text"
-          id="username"
-          ref="usernameInput"
-          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          :placeholder="type === 'login' ? 'Email / Username' : 'Username'"
-          v-model="username"
-          required
-          @input="handleChange()"
-          autocomplete="username"
-        /> -->
         <input
           type="text"
           id="username"
           ref="usernameInput"
           class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          :placeholder="type === 'login' ? '電子郵件 / 帳號名稱' : '帳號名稱'"
+          :placeholder="
+            t('authform.username') +
+            (type === 'login' ? ' / ' + t('authform.email') : '')
+          "
           v-model="username"
           required
           @input="handleChange()"
           autocomplete="username"
         />
-        <label
+        <p
-          class="text-sm font-normal text-text-secondary"
+          class="mx-1 text-xs font-normal text-text-secondary"
-          v-if="type === 'username' || type === 'register'"
+          id="NameRules"
+          v-if="type === 'register'"
         >
-          <p>可用小寫字母、數字、"_"和"-"</p>
+          {{ t('authform.username_rules') }}
-          <p>小寫字母開頭，至多32字元</p>
+        </p>
-        </label>
       </div>
       <div class="mb-6" v-if="type === 'register'">
-        <!-- <input
-          type="email"
-          id="email"
-          ref="emailInput"
-          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          placeholder="Email"
-          v-model="email"
-          required
-          @input="handleChange()"
-          autocomplete="email"
-        /> -->
         <input
           type="email"
           id="email"
           ref="emailInput"
           class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          placeholder="電子郵件"
+          :placeholder="t('authform.email')"
           v-model="email"
           required
           @input="handleChange()"
@@ -194,24 +187,22 @@ const handleChange = () => {
         />
       </div>
       <div class="mb-6" v-if="type === 'login' || type === 'register'">
-        <!-- <input
-          type="password"
-          id="password"
-          class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          placeholder="Password"
-          v-model="password"
-          required
-          @input="handleChange()"
-        /> -->
         <input
           type="password"
           id="password"
           class="my-4 bg-bg-primary text-text-primary bg- rounded-md block w-full px-3 h-10 shadow-sm focus:outline-none placeholder:text-text-line focus:ring-2 focus:ring-text-primary ring-1 ring-bg-secondary"
-          placeholder="密碼"
+          :placeholder="t('authform.password')"
           v-model="password"
           required
           @input="handleChange()"
         />
+        <p
+          class="mx-1 text-xs font-normal text-text-secondary"
+          id="PasswordRules"
+          v-if="type === 'register'"
+        >
+          {{ t('authform.password_rules') }}
+        </p>
       </div>
       <p
         id="ErrorDisplay"
@@ -225,46 +216,39 @@ const handleChange = () => {
         class="inline-flex justify-center rounded-lg font-black py-2 bg-text-primary text-bg w-full"
         type="submit"
       >
-        <span v-if="type === 'login'">
+        <span v-if="type === 'login'"> {{ t('authform.login') }} </span>
-          <!-- Log In -->
+        <span v-else> {{ t('authform.register') }} </span>
-          登入
-        </span>
-        <span v-else>
-          <!-- Sign Up -->
-          註冊
-        </span>
       </button>
 
       <p id="SwitchLoginRegister" class="text-text flex justify-center mt-3">
         <span id="CheckRegistered" v-if="type === 'register'">
-          <!-- Already have an account? -->
+          {{ t('authform.already_registered') }}
-          已經有帳號了嗎？
           <RouterLink
             id="SwitchtoLogin"
             class="text-text-primary font-bold"
             to="/login"
           >
-            <u>
+            <u> {{ t('authform.login') }} </u>
-              <!-- Log in -->
-              登入
-            </u>
           </RouterLink></span
         >
         <span id="CheckRegistered" v-else-if="type === 'login'">
-          <!-- Don't have an account? -->
+          {{ t('authform.not_registered') }}
-          還沒有帳號嗎？
           <RouterLink
             id="SwitchtoRegister"
             class="text-text-primary font-bold"
             to="/register"
           >
-            <u>
+            <u> {{ t('authform.register') }} </u>
-              <!-- Sign up -->
-              註冊
-            </u>
           </RouterLink></span
         >
       </p>
+      <!-- <button
+        id="register-guest"
+        class="rounded-lg py-2 mt-3 bg-bg-primary text-text-secondary w-full border-text-secondary border-2"
+        @click="registerGuest()"
+      >
+        {{ t('authform.continue_as_guest') }}
+      </button> -->
     </form>
   </div>
 </template>

app/src/components/ContactButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+  icons: {
+    type: Array,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  desciption: String,
+})
+</script>
+<template>
+  <div class="flex flex-col">
+    <a :href="url" target="_blank" class="h-10 w-10" :title="desciption">
+      <font-awesome-icon
+        :icon="icons"
+        :alt="title"
+        class="text-text-primary h-10 delay-130 hover:-translate-y-1 hover:scale-110"
+      />
+    </a>
+  </div>
+</template>

app/src/components/ControlPalette.vue

@@ -1,59 +0,0 @@
-<template>
-  <section class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between">
-    <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
-      <font-awesome-icon
-        :icon="['far', 'circle-question']"
-        class="text-text-disabled"
-      />
-      <p class="text-text-disabled inline ml-1">
-        <!-- Solution -->
-        解答
-      </p>
-    </button>
-    <button id="reset" class="bg-bg-secondary rounded-lg p-2" @click="reset">
-      <font-awesome-icon
-        :icon="['fas', 'arrow-rotate-left']"
-        class="text-text-primary"
-      />
-      <p class="text-text-primary inline ml-1">
-        <!-- Reset -->
-        重來
-      </p>
-    </button>
-    <button
-      id="continue"
-      class="bg-bg-secondary rounded-lg p-2"
-      @click="continuePlay"
-    >
-      <font-awesome-icon
-        :icon="['far', 'circle-right']"
-        class="text-text-primary"
-      />
-      <p class="text-text-primary inline ml-1">
-        <!-- Continue -->
-        繼續
-      </p>
-    </button>
-  </section>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toastification'
-import { createSession } from '../store/session'
-
-const router = useRouter()
-const reset = async () => {
-  console.log('resetting...')
-  await createSession()
-}
-const continuePlay = async () => {
-  try {
-    router.push({ name: 'map' })
-  } catch (err) {
-    // useToast().error('Failed to load map')
-    useToast().error('無法讀取地圖')
-    console.error(err)
-  }
-}
-</script>

app/src/components/DynamicBackground.vue

@@ -1,26 +1,34 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue'
 
 const cw = ref(0)
 const ch = ref(0)
-const fallingCharArr = ref([])
+const fallingCharArr = ref<
+  { value: string; x: number; y: number; speed: number }[]
+>([])
 const fontSize = ref(16)
 const maxColums = ref(0)
 const charArr = ['0', '1', '', '', '']
-const ctx = ref(null)
+const ctx = ref<CanvasRenderingContext2D | null>(null)
 
-const randomInt = (min, max) => {
+const randomInt = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min) + min)
 }
 
-const randomFloat = (min, max) => {
+const randomFloat = (min: number, max: number) => {
   return Math.random() * (max - min) + min
 }
 
-const draw = (point) => {
+const draw = (point: {
+  value: string
+  x: number
+  y: number
+  speed: number
+}) => {
   point.value = charArr[randomInt(0, charArr.length)].toUpperCase()
   if (point.y < 0) point.speed = randomFloat(10, 20)
 
+  if (ctx.value === null) return
   ctx.value.fillStyle = '#0F0'
   ctx.value.font = `${fontSize.value}px san-serif`
   ctx.value.fillText(point.value, point.x, point.y)
@@ -33,6 +41,7 @@ const draw = (point) => {
 }
 
 const update = () => {
+  if (ctx.value === null) return
   ctx.value.fillStyle = 'rgba(0,0,0,0.05)'
   ctx.value.fillRect(0, 0, cw.value, ch.value)
 
@@ -48,7 +57,7 @@ onMounted(() => {
   ch.value = document.documentElement.clientHeight
   maxColums.value = cw.value / fontSize.value
 
-  const canvas = document.querySelector('canvas')
+  const canvas = document.querySelector('canvas') as HTMLCanvasElement
   ctx.value = canvas.getContext('2d')
 
   canvas.width = cw.value
@@ -58,6 +67,8 @@ onMounted(() => {
     fallingCharArr.value.push({
       x: i * fontSize.value,
       y: randomFloat(-500, 0),
+      value: '',
+      speed: 0,
     })
   }
 

app/src/components/FileNode.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const props = defineProps({
   node: {
     type: Object,
@@ -20,7 +20,21 @@ function nodeClass() {
 </script>
 
 <template>
-  <a href="#" :class="nodeClass()">{{ node.discovered ? node.name : '???' }}</a>
+  <a href="#" :class="nodeClass()">
+    <font-awesome-icon
+      v-if="node.type === 'directory'"
+      :icon="['far', 'folder']"
+      class="text-text-primary size-8"
+    />
+    <font-awesome-icon
+      v-else
+      :icon="['far', 'file']"
+      class="text-text-primary size-8"
+    />
+    <br />
+    {{ node.discovered ? node.name : '???' }}
+    {{ node.name === '' && node.discovered ? '/' : '' }}
+  </a>
   <ul :class="nodeClass()" v-if="node.children && node.children.length > 0">
     <li :class="nodeClass()" v-for="child in node.children" :key="child.path">
       <FileNode :node="child" :pwd="pwd" />

app/src/components/GameHeaderPart.vue

@@ -1,139 +0,0 @@
-<script setup>
-import { defineProps, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useToast } from 'vue-toastification'
-import { logout } from '../utils/auth'
-import { bugReportUrl } from '../config'
-import { reset } from '../store/session'
-import userProfileStore, {
-  loadUserProfile,
-  resetUserProfile,
-} from '../store/userProfile'
-
-const router = useRouter()
-
-const toast = useToast()
-
-const handleLogout = async () => {
-  try {
-    await logout()
-    resetUserProfile()
-    reset()
-    router.push({ name: 'login' })
-  } catch (err) {
-    // toast.error('Failed to logout')
-    toast.error('登出失敗')
-    console.error(err)
-  }
-}
-const handleMap = async () => {
-  try {
-    router.push({ name: 'map' })
-  } catch (err) {
-    // toast.error('Failed to load map')
-    toast.error('無法讀取地圖')
-    console.error(err)
-  }
-}
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-})
-
-onMounted(async () => {
-  try {
-    await loadUserProfile()
-  } catch (err) {
-    // toast.error('Failed to load user profile')
-    toast.error('無法讀取使用者資料')
-  }
-})
-</script>
-
-<template>
-  <div id="header" class="bg-bg-secondary content-center h-full w-full p-1">
-    <div class="h-full flex items-center justify-center mx-3">
-      <div class="flex items-center gap-3">
-        <!-- <button id="stream" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'bars']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="backward" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'arrow-left']"
-            class="text-border h-full w-full"
-          />
-        </button> -->
-        <button
-          id="HeaderText"
-          class="text-text-primary inline-block font-bold whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          Linux Odyssey
-        </button>
-        <p
-          id="HeaderText"
-          class="text-text inline-block font-bold whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          {{ title }}
-        </p>
-      </div>
-      <div class="h-full w-full flex gap-3 items-center justify-end">
-        <!-- <button id="warning" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'triangle-exclamation']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="setting" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'gear']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <button id="fullscreen" class="flex items-center h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'expand']"
-            class="text-text-primary h-full w-full"
-          />
-        </button> -->
-        <p
-          id="UsernameText"
-          class="text-text inline-block whitespace-nowrap"
-          style="font-size: 2vh"
-        >
-          {{ userProfileStore.username }}
-        </p>
-        <button title="Map" @click="handleMap" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'map']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-        <a
-          title="Bug Report"
-          :href="bugReportUrl"
-          target="_blank"
-          class="h-5 w-5"
-        >
-          <font-awesome-icon
-            :icon="['fas', 'bug']"
-            class="text-text-primary h-full w-full"
-          />
-        </a>
-        <button title="Sign Out" @click="handleLogout" class="h-5 w-5">
-          <font-awesome-icon
-            :icon="['fas', 'arrow-right-from-bracket']"
-            class="text-text-primary h-full w-full"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>

app/src/components/HintPart.vue

@@ -1,77 +0,0 @@
-<script setup>
-import { ref, watch } from 'vue'
-import sessionStore from '../store/session'
-
-const current = ref(-1)
-watch(
-  () => sessionStore.session.hints,
-  (hints) => {
-    current.value = hints.length - 1
-  },
-  { deep: true }
-)
-
-const left = () => {
-  if (current.value > 0) {
-    current.value -= 1
-  }
-}
-
-const right = () => {
-  if (current.value < sessionStore.session.hints.length - 1) {
-    current.value += 1
-  }
-}
-</script>
-
-<template>
-  <div class="w-full flex items-center p-2">
-    <font-awesome-icon
-      :icon="['far', 'lightbulb']"
-      class="text-yellow-200 p-2 content-center"
-    />
-    <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
-      <!-- Hint -->
-      提示
-    </h1>
-    <div v-if="current !== -1" class="flex w-full justify-end items-end">
-      <button
-        class="p-2 m-1 w-1/8"
-        id="Lbutton"
-        @click="left"
-        :disabled="current <= 0"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'arrow-right']"
-          class="text-text"
-          rotation="180"
-        />
-      </button>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">
-        {{ sessionStore.session.hints.length }}
-      </p>
-      <button
-        class="p-2 m-1 w-1/8"
-        id="Rbutton"
-        @click="right"
-        :disabled="current === sessionStore.session.hints.length - 1"
-      >
-        <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
-      </button>
-    </div>
-  </div>
-  <div id="hint" class="bg-bg flex flex-wrap p-8">
-    <ul>
-      <li
-        v-for="hint in sessionStore.session.hints[current]"
-        :key="hint"
-        class="text-text font-xl whitespace-pre-wrap"
-      >
-        {{ hint }}
-      </li>
-    </ul>
-    <br />
-  </div>
-</template>

app/src/components/MarkdownText.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import markdown2HTML from '../utils/markdown'
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+})
+
+const html = computed(() => {
+  return markdown2HTML(props.content)
+})
+</script>
+
+<template>
+  <div class="markdown-content" v-html="html"></div>
+</template>
+
+<style scoped>
+.markdown-content {
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+}
+
+.markdown-content :deep(p) {
+  line-height: 1.5;
+}
+.markdown-content :deep(ol) {
+  list-style: decimal;
+  padding-left: 1em;
+  line-height: 1.2;
+}
+.markdown-content :deep(ul) {
+  list-style: disc;
+  padding-left: 1em;
+  line-height: 1.2;
+}
+.markdown-content :deep(pre) {
+  background-color: #2e3440;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  font-size: 0.9rem;
+  color: #d8dee9;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #4c566a;
+  line-height: 1.5;
+  font-family: 'monospace';
+}
+
+.markdown-content :deep(code:not(pre code)) {
+  background-color: #2e3440;
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.4rem;
+  font-size: 0.9rem;
+  color: #d8dee9;
+  font-family: 'monospace';
+}
+</style>

app/src/components/QuestIntro.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { ref, defineProps, onMounted } from 'vue'
+import MarkdownText from './MarkdownText.vue'
+import { trpc } from '../utils/trpc'
+
+const { t, locale } = useI18n()
+
+const props = defineProps({
+  questTitle: {
+    type: String,
+    required: true,
+  },
+  questId: {
+    type: String,
+    required: true,
+  },
+  questUnlocked: {
+    type: Boolean,
+    required: true,
+  },
+})
+const emit = defineEmits(['closeIntro'])
+const showIntro = ref(true) // Controls whether the modal is visible or not
+const router = useRouter()
+const toast = useToast()
+const { questTitle, questId, questUnlocked } = props
+const questInstruction = ref('')
+const questColor = ref('')
+const questTextColor = ref('')
+const closeModal = () => {
+  showIntro.value = false
+  emit('closeIntro', true)
+  router.push({ name: 'map' })
+}
+const handleQuests = (id: string) => {
+  if (questUnlocked) {
+    router.push({ name: 'game', params: { questId: id } })
+  } else {
+    toast.warning(t('quest.locked'))
+  }
+}
+const handleColour = () => {
+  if (questUnlocked) {
+    questColor.value = '#00ff00'
+    questTextColor.value = '#000000'
+  } else {
+    questColor.value = '#505050'
+    questTextColor.value = '#a0a0a0'
+  }
+}
+onMounted(async () => {
+  try {
+    const quest = await trpc.quests.getQuestDetail.query({
+      questId,
+      locale: locale.value,
+    })
+    questInstruction.value = quest.instruction
+  } catch (error) {
+    toast.error(t('quest.load_quest_instruction_failed'), error)
+  }
+  handleColour()
+})
+</script>
+
+<template>
+  <div v-if="showIntro" class="modal">
+    <div class="modal-content bg-bg-secondary rounded-lg">
+      <span class="close text-text content-between" @click="closeModal"
+        >&times;</span
+      >
+      <h2
+        id="QuestTitle"
+        class="text-2xl text-text mb-5 w-full inline-flex justify-center"
+      >
+        {{ questTitle }}
+      </h2>
+      <div class="w-full h-3/5 p-8">
+        <div class="px-5 whitespace-pre-wrap">
+          <MarkdownText
+            class="text-text markdown-content"
+            :content="questInstruction"
+          />
+        </div>
+      </div>
+      <a
+        id="StartAdventure"
+        target="_blank"
+        @click="handleQuests(questId)"
+        :style="{ backgroundColor: questColor, color: questTextColor }"
+        class="inline-flex justify-center rounded-lg text-base font-black py-3 mt-5 w-full"
+      >
+        {{ t('quest.start') }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1;
+}
+
+.modal-content {
+  position: relative;
+  margin: 10% auto;
+  padding: 20px;
+  width: 60%;
+  height: 50%;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 10px;
+  font-size: 30px;
+  cursor: pointer;
+}
+.markdown-content {
+  text-align: left;
+}
+</style>

app/src/components/QuestMap.vue

@@ -1,190 +1,254 @@
-<!-- eslint-disable no-console -->
+<script setup lang="ts">
-<script setup>
+import { useI18n } from 'vue-i18n'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
-import { use, init } from 'echarts/core'
+import { DAG } from '@odyssey/utils'
-import { GraphChart } from 'echarts/charts'
+import { trpc } from '../utils/trpc'
-import { SVGRenderer } from 'echarts/renderers'
+import useUserProfile from '../store/userProfile'
-import {
+import QuestIntro from './QuestIntro.vue'
-  TitleComponent,
-  TooltipComponent,
-  DataZoomComponent,
-} from 'echarts/components'
-import { DAG } from '@linux-odyssey/utils'
-import api from '../utils/api'
-import { NodeImage } from '../img/svg.js'
 
-const marginX = 200
+const { t, locale } = useI18n()
-const marginY = 65
+const store = useUserProfile()
-const chartContainer = ref(null)
-let chartInstance = null
-const fullwidth = window.screen.width
-
-use([
-  GraphChart,
-  SVGRenderer,
-  TitleComponent,
-  TooltipComponent,
-  DataZoomComponent,
-])
-
-async function getQuests() {
-  try {
-    const res = await api.get('/quests')
-    return res.data
-  } catch (err) {
-    console.error(err)
-
-    throw err
-  }
-}
-
-async function getProgress() {
-  try {
-    const res = await api.get('/users/me')
-    return res.data.progress
-  } catch (err) {
-    console.error(err)
-    throw err
-  }
-}
-
-const genOption = (nodes, edges) => ({
-  renderer: 'svg',
-  tooltip: {},
-  animationDurationUpdate: 1500,
-  animationEasingUpdate: 'quinticInOut',
-  // dataZoom: [
-  //   {
-  //     type: 'slider', // This type means "slider data zoom" which provides a slider bar for zooming
-  //     orient: 'vertical', // This makes the data zoom component vertical
-  //     start: 0, // The starting percentage of the window out of the data extent
-  //     end: 100, // The ending percentage of the window out of the data extent
-  //     show: true,
-  //   },
-  // ],
-  series: [
-    {
-      type: 'graph',
-      layout: 'none',
-      symbol: () => {
-        return NodeImage
-      },
-      symbolSize: [fullwidth / 10, fullwidth / 25],
-      roam: 'move',
-      zoom: 1,
-      label: {
-        show: true,
-        fontSize: fullwidth / 90,
-      },
-      edgeSymbol: ['pin', 'arrow'],
-      edgeSymbolSize: [2, 15],
-      edgeLabel: {
-        fontSize: 25,
-      },
-      data: nodes,
-      // links: [],
-      links: edges,
-      lineStyle: {
-        width: 3,
-        color: 'gray',
-        opacity: 4,
-        curveness: 0.08,
-      },
-      itemStyle: {
-        color: (params) => {
-          const {
-            data: { completed, unlocked },
-          } = params
-          if (completed) {
-            return '#00ff00'
-          }
-          if (unlocked) {
-            return '#ADADB5'
-          }
-          return '454552'
-        },
-      },
-    },
-  ],
-})
-
-function getOption(quests, progress) {
-  const dag = new DAG(quests)
-
-  const nodes = dag.getNodes().map((node) => ({
-    id: node._id,
-    name: node.title,
-    y: marginX * node.index - (marginX * dag.getLayer(node._id)) / 2,
-    x: marginY * node.layer * 2,
-    completed: progress[node._id]?.completed || false,
-    unlocked: node.requirements.every((req) => progress[req]?.completed),
-  }))
-  const lineAppearence = (node) => {
-    try {
-      const { unlocked } = node
-      return {
-        type: unlocked ? 'line' : 'dashed',
-        color: unlocked ? '#ADADB5' : '#454552',
-      }
-    } catch (err) {
-      console.error(err)
-      throw err
-    }
-  }
-  const edges = dag.getEdgesArray().map((edge) => ({
-    source: edge[0],
-    target: edge[1],
-    lineStyle: lineAppearence(nodes.find((node) => node.id === edge[1])),
-  }))
-  return genOption(nodes, edges)
-}
-
-const router = useRouter()
 const toast = useToast()
 
-function initChart(option) {
+const marginX = 120
-  chartInstance = init(chartContainer.value)
+const marginY = 120
-  chartInstance.setOption(option)
-  chartInstance.on('click', (params) => {
-    const {
-      data: { id, unlocked },
-    } = params
 
-    if (unlocked) {
+const nodeWidth = 160
-      router.push({ name: 'game', params: { questId: id } })
+const nodeHeight = 50
-    } else {
+
-      // toast.warning('You have not completed the previous quest yet!')
+const opened = ref<Node | null>(null)
-      toast.warning('你還沒完成前一個關卡!')
+type Node = {
-    }
+  id: string
-  })
+  title: string
+  x: number
+  y: number
+  index: number
+  completed: boolean
+  unlocked: boolean
+}
+
+type Edge = {
+  source: Node
+  target: Node
+}
+
+const graphData = ref<{ nodes: Node[]; edges: Edge[] }>({
+  nodes: [],
+  edges: [],
+})
+
+const isDragging = ref(false)
+const dragStartX = ref(0)
+const dragStartY = ref(0)
+const offsetX = ref(0)
+const offsetY = ref(0)
+
+function startDrag(event: PointerEvent) {
+  isDragging.value = true
+  dragStartX.value = event.clientX - offsetX.value
+  dragStartY.value = event.clientY - offsetY.value
+}
+
+function drag(event: PointerEvent) {
+  if (!isDragging.value) return
+  // Capture only once dragging starts so plain clicks still reach the node buttons
+  const el = event.currentTarget as HTMLElement
+  if (!el.hasPointerCapture(event.pointerId))
+    el.setPointerCapture(event.pointerId)
+  offsetX.value = event.clientX - dragStartX.value
+  offsetY.value = event.clientY - dragStartY.value
+}
+
+function endDrag() {
+  isDragging.value = false
+}
+
+async function computeGraphData() {
+  if (!store.progress) return
+
+  try {
+    const quests = await trpc.quests.getQuests.query({ locale: locale.value })
+
+    const dag = new DAG(quests)
+    const nodesValues = dag.getNodes()
+
+    const nodes = nodesValues.map((node) => ({
+      id: node.id,
+      title: node.title,
+      x: marginX * node.layer * 2,
+      // Centered on 0; the world container is anchored at the viewport's vertical center
+      y: (node.index - (dag.getLayer(node.id) + 1) / 2) * marginY,
+      completed: store.progress[node.id]?.completed || false,
+      unlocked: node.requirements.every(
+        (req: string) => store.progress[req]?.completed
+      ),
+      index: node.index,
+    }))
+
+    const edges = dag
+      .getEdgesArray()
+      .map((edge) => ({
+        source: nodes.find((n) => n.id === edge[0]),
+        target: nodes.find((n) => n.id === edge[1]),
+      }))
+      .filter(
+        (edge): edge is Edge =>
+          edge.source !== undefined && edge.target !== undefined
+      )
+
+    graphData.value = { nodes, edges }
+  } catch (error) {
+    console.error(t('quest_map.compute_graph_failed'), error)
+    toast.error(t('quest_map.load_quest_data_failed'))
+  }
+}
+function handleNodeClick(node: Node) {
+  opened.value = node
+}
+function closeIntro(close: boolean) {
+  if (close) {
+    opened.value = null
+  }
 }
 
 onMounted(async () => {
-  const quests = await getQuests()
+  await store.loadUserProfile()
-  const progress = await getProgress()
+  await computeGraphData()
-  const option = getOption(quests, progress)
+})
-  initChart(option)
+
+watch(() => store.progress, computeGraphData, { deep: true })
+watch(locale, () => {
+  opened.value = null
+  computeGraphData()
+})
+
+const edgePath = computed(() => {
+  return (source: Node, target: Node) => {
+    const mx = (source.x + target.x) / 2
+    return `M${source.x},${source.y}C${mx},${source.y} ${mx},${target.y} ${target.x},${target.y}`
+  }
+})
+
+const nodeStyle = computed(() => {
+  return (node: Node) => {
+    if (node.completed) return 'completed'
+    if (node.unlocked) return 'unlocked'
+    return 'locked'
+  }
+})
+
+const edgeStyle = computed(() => {
+  return (edge: Edge) => {
+    return edge.target.unlocked ? 'unlocked' : 'locked'
+  }
 })
 </script>
 
 <template>
   <div class="relative bg-black w-full h-full flex">
-    <img
+    <div
-      src="../img/catelogbg.svg"
+      class="flex place-content-center w-full bg-catelogbg bg-cover bg-scroll"
-      alt="bg"
-      class="p-2 stroke-2 scale-y-120 justify-center items-center"
-    />
-    <h1
-      class="p-4 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
-      style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
     >
-      <!-- Get through your linux journey! -->
+      <h1
-      踏上你的Linux冒險之旅吧！
+        class="p-10 absolute w-fit z-2 font-mono flex flax-wrap text-xl"
-    </h1>
+        style="width: 30%; height: 6%; font-size: 3vh; color: #00ff00"
-    <div class="flex flex-wrap absolute w-full h-full z-1">
+      >
-      <div ref="chartContainer" class="w-full h-full flex flex-wrap"></div>
+        {{ t('quest_map.intro') }}
+      </h1>
+      <div
+        class="absolute inset-0 overflow-hidden select-none"
+        :class="isDragging ? 'cursor-grabbing' : 'cursor-grab'"
+        style="touch-action: none"
+        @pointerdown="startDrag"
+        @pointermove="drag"
+        @pointerup="endDrag"
+        @pointercancel="endDrag"
+      >
+        <div
+          class="absolute top-1/2 left-0"
+          :style="{ transform: `translate(${offsetX}px, ${offsetY}px)` }"
+        >
+          <svg class="absolute overflow-visible pointer-events-none">
+            <path
+              v-for="edge in graphData.edges"
+              :key="`${edge.source.id}-${edge.target.id}`"
+              :d="edgePath(edge.source, edge.target)"
+              :class="['edge', edgeStyle(edge)]"
+            />
+          </svg>
+          <button
+            v-for="node in graphData.nodes"
+            :key="node.id"
+            type="button"
+            :class="['node', nodeStyle(node)]"
+            :style="{
+              left: `${node.x - nodeWidth / 2}px`,
+              top: `${node.y - nodeHeight / 2}px`,
+              width: `${nodeWidth}px`,
+              height: `${nodeHeight}px`,
+            }"
+            @click="handleNodeClick(node)"
+          >
+            <span class="line-clamp-2">{{ node.title }}</span>
+          </button>
+        </div>
+      </div>
+      <QuestIntro
+        :questTitle="opened.title"
+        :questId="opened.id"
+        :questUnlocked="opened.unlocked"
+        v-if="opened"
+        @close-intro="closeIntro"
+      />
     </div>
   </div>
 </template>
+
+<style scoped>
+.node {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  text-align: center;
+  border-radius: 10px;
+  cursor: pointer;
+  transition:
+    filter 0.15s,
+    box-shadow 0.15s;
+}
+.node:hover {
+  filter: brightness(1.15);
+}
+.node:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px #00ff00;
+}
+.node.completed {
+  background-color: #6cf76c;
+  color: #1d1d1d;
+}
+.node.unlocked {
+  background-color: #8c8c92;
+  color: #ffffff;
+}
+.node.locked {
+  background-color: #505050;
+  color: #a0a0a0;
+}
+
+.edge {
+  stroke-width: 3;
+  fill: none;
+}
+.edge.unlocked {
+  stroke: #adadb5;
+  stroke-dasharray: none;
+}
+.edge.locked {
+  stroke: #454552;
+  stroke-dasharray: 5, 5;
+}
+</style>

app/src/components/QuestPart.vue

@@ -1,35 +0,0 @@
-<script setup>
-import sessionStore from '../store/session'
-</script>
-
-<template>
-  <div class="h-full w-full max-h-full">
-    <p id="topic" class="text-text font-black" v-if="sessionStore.quest">
-      {{ sessionStore.quest.title }}
-    </p>
-    <br />
-    <div>
-      <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
-        <p class="text-text">{{ sessionStore.quest.instruction }}</p>
-        <br />
-        <p id="tasks" class="text-text">
-          <!-- Tasks: -->
-          任務：
-        </p>
-        <ul v-if="sessionStore.session">
-          <li v-for="task in sessionStore.session.tasks" :key="task.id">
-            <p v-if="task.completed" class="text-text-primary">
-              <span class=""> ✓</span>
-              {{ task.name }}
-            </p>
-            <p v-else class="text-text">
-              <span class="">➤</span>
-              {{ task.name }}
-            </p>
-          </li>
-        </ul>
-      </div>
-      <p class="text-text" v-else>Loading...</p>
-    </div>
-  </div>
-</template>

app/src/components/TerminalPart.vue

@@ -1,25 +0,0 @@
-<template>
-  <font-awesome-icon :icon="['fas', 'terminal']" class="text-text p-1" />
-  <button id="Terminal" class="text-text h-[5%]">
-    <!-- Terminal -->
-    終端機
-  </button>
-  <div
-    id="terminal"
-    ref="terminal"
-    class="bg-bg-secondary h-[calc(100%-5%)] p-0.5"
-  ></div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-import { useTerminal } from '../store/session'
-
-const terminal = ref(null)
-
-onMounted(() => {
-  const term = useTerminal()
-  term.mount(terminal.value)
-  window.addEventListener('resize', () => term.resizeScreen())
-})
-</script>

app/src/components/game/CommandlistPart.vue

@@ -1,13 +1,15 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <font-awesome-icon :icon="['fas', 'list']" class="text-text-primary p-1" />
   <h1 id="CommandBook" class="inline text-text-primary font-xl">
-    <!-- Command Cheatsheets -->
+    {{ t('game.command_book') }}
-    指令之書
   </h1>
   <div id="cheatsheets">
-    <p class="text-text-secondary">
+    <p class="text-text-secondary">-- --{{ t('game.cheatsheets') }}-- --</p>
-      <!-- --Command List-- -->
-      -- --指令列表-- --
-    </p>
   </div>
 </template>

app/src/components/game/CompleteModal.vue

@@ -1,17 +1,22 @@
-<script setup>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { ref } from 'vue'
 import { Vue3Lottie } from 'vue3-lottie'
 // import { surveyUrl } from '../config'
-import CompleteAnimation from '../img/complete-animation.json'
+import CompleteAnimation from '../../img/complete-animation.json'
+
+const { t } = useI18n()
 
 const showModal = ref(true) // Controls whether the modal is visible or not
 const router = useRouter()
 const toast = useToast()
+
 const closeModal = () => {
   showModal.value = false
 }
+
 const defineComponent = () => ({
   components: {
     Vue3Lottie,
@@ -22,12 +27,12 @@ const defineComponent = () => ({
     }
   },
 })
+
 const backtoMap = async () => {
   try {
     router.push({ name: 'map' })
   } catch (err) {
-    // useToast().error('Failed to load map')
+    toast.error(t('quest_map.load_quest_map_failed'))
-    toast.error('無法讀取地圖')
     console.error(err)
   }
 }
@@ -47,8 +52,7 @@ setTimeout(() => {
         id="QuestCompleted"
         class="text-2xl text-text mb-5 w-full inline-flex justify-center"
       >
-        <!-- Quest Completed! -->
+        {{ t('game.quest_completed') }}
-        關卡完成！
       </h2>
       <div class="z-10 right-1/2 top-1/2" @animationend="defineComponent">
         <Vue3Lottie
@@ -57,29 +61,35 @@ setTimeout(() => {
           :width="200"
         />
       </div>
-      <p class="text-base text-text text-center">恭喜你完成這一關！</p>
       <p class="text-base text-text text-center">
-        接下來回到地圖，迎接新的挑戰吧！
+        {{ t('game.quest_completed_desc_1') }}
+      </p>
+      <p class="text-base text-text text-center">
+        {{ t('game.quest_completed_desc_2') }}
       </p>
-      <!-- <p class="text-base text-text">
-        您已成功完成挑戰，真的非常感謝您的參與！<br />
-        如果您能撥冗填寫這份問卷，我們將不勝感激，這對我們非常重要！
-      </p> -->
-      <!-- <a
-        id="SurveyButton"
-        :href="surveyUrl"
-        target="_blank"
-        class="inline-flex justify-center rounded-lg text-base font-black py-2 mt-3 bg-text-primary w-full"
-        >填寫問卷</a
-      > -->
       <a
         id="BacktoMap"
         target="_blank"
         @click="backtoMap"
         class="inline-flex justify-center rounded-lg text-base font-black py-2 mt-3 bg-text-primary w-full"
-        >回到地圖</a
+        >{{ t('game.back_to_map') }}</a
       >
     </div>
+    <div style="position: relative; height: 100vh; overflow: auto">
+      <iframe
+        src="https://app.formbricks.com/s/clyffdm0c0be2wh6335clle0l"
+        frameborder="0"
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border: 0;
+        "
+      >
+      </iframe>
+    </div>
   </div>
 </template>
 

app/src/components/game/ControlPalette.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import type { QuestLocale } from '@odyssey/constants'
+import { useSession } from '../../store/session'
+import { openBugReport, openQuestSurvey } from '../../utils/formbricks'
+import { trpc } from '../../utils/trpc'
+
+const { t, locale } = useI18n()
+const toast = useToast()
+
+const router = useRouter()
+const sessionStore = useSession()
+const reset = async () => {
+  console.log('resetting...')
+  const selectedLocale = locale.value as QuestLocale
+  const questId = sessionStore.session?.quest
+
+  if (!questId) return
+
+  try {
+    const quests = await trpc.quests.getQuests.query({
+      locale: selectedLocale,
+    })
+
+    console.log({
+      selectedLocale,
+      questId,
+      availableQuestIds: quests.map((quest) => quest.id),
+    })
+
+    if (!quests.some((quest) => quest.id === questId)) {
+      toast.warning(t('game.language_unavailable'))
+      return
+    }
+
+    await sessionStore.createSession()
+  } catch (error) {
+    console.error('Failed to reset quest:', error)
+    toast.error(t('game.reset_failed'))
+  }
+}
+
+const continuePlay = async () => {
+  try {
+    router.push({ name: 'map' })
+  } catch (err) {
+    useToast().error(t('quest_map.load_quest_map_failed'))
+    console.error(err)
+  }
+}
+</script>
+
+<template>
+  <section class="mt-2 flex flex-row gap-2 justify-center">
+    <button
+      id="survey"
+      :title="t('game_nav.survey')"
+      class="bg-bg-secondary rounded-lg p-2"
+      @click="openQuestSurvey"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'file-invoice']"
+        class="text-text-primary px-1"
+      />
+      <p class="text-text-primary text-xs">{{ t('game_nav.survey') }}</p>
+    </button>
+    <button
+      id="bug-report"
+      :title="t('game_nav.bug_report')"
+      @click="openBugReport"
+      class="bg-bg-secondary rounded-lg p-2"
+    >
+      <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
+      <p class="text-text-primary text-xs">
+        {{ t('game_nav.bug_report') }}
+      </p>
+    </button>
+    <!-- <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
+      <font-awesome-icon
+        :icon="['far', 'circle-question']"
+        class="text-text-disabled px-1"
+      />
+      <p class="text-text-disabled inline ml-1 md:flex">解答</p>
+    </button> -->
+    <button
+      id="reset"
+      :title="t('game.reset')"
+      class="bg-bg-secondary rounded-lg p-2"
+      @click="reset"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'arrow-rotate-left']"
+        class="text-text-primary px-1"
+      />
+      <p class="text-text-primary text-xs">
+        {{ t('game.reset') }}
+      </p>
+    </button>
+    <button
+      id="continue"
+      :title="t('game.continue')"
+      class="bg-bg-secondary rounded-lg p-2"
+      @click="continuePlay"
+    >
+      <font-awesome-icon
+        :icon="['far', 'circle-right']"
+        class="text-text-primary px-1"
+      />
+      <p class="text-text-primary text-xs">
+        {{ t('game.continue') }}
+      </p>
+    </button>
+  </section>
+</template>

app/src/components/game/DescriptionPart.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { computed, ref, watch } from 'vue'
+import { useSession } from '../../store/session'
+import MarkdownText from '../MarkdownText.vue'
+
+const { t } = useI18n()
+
+const sessionStore = useSession()
+const current = ref(-1)
+const hintDetails = ref<HTMLDetailsElement | null>(null)
+const length = computed(() => {
+  return sessionStore.session?.responses?.length ?? 0
+})
+
+const disabled = computed(() => {
+  return current.value === length.value - 1
+})
+
+watch(length, () => {
+  console.log('length update', length.value)
+  current.value = length.value - 1
+})
+
+const left = () => {
+  if (current.value > 0) {
+    current.value -= 1
+  }
+}
+
+const right = () => {
+  if (current.value < length.value - 1) {
+    current.value += 1
+  }
+}
+
+const response = computed(() => {
+  if (!sessionStore.session) return null
+  if (current.value < 0) return null
+  if (current.value >= sessionStore.session.responses.length) return null
+  return sessionStore.session.responses[current.value]
+})
+
+watch(response, () => {
+  if (hintDetails.value) {
+    hintDetails.value.open = false
+  }
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <div class="flex items-center p-2 h-10">
+      <font-awesome-icon
+        :icon="['far', 'lightbulb']"
+        class="text-yellow-200 p-2 content-center"
+      />
+      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
+        {{ t('game.description') }}
+      </h1>
+      <div v-if="current !== -1" class="flex w-full justify-end items-end">
+        <button
+          class="p-2 m-1 w-1/8"
+          id="Lbutton"
+          @click="left"
+          :disabled="current <= 0"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'arrow-right']"
+            class="text-text"
+            rotation="180"
+          />
+        </button>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">
+          {{ length }}
+        </p>
+        <button
+          class="p-2 m-1 w-1/8"
+          id="Rbutton"
+          @click="right"
+          :disabled="disabled"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'arrow-right']"
+            :class="disabled ? 'text-gray-600' : 'text-text'"
+          />
+        </button>
+      </div>
+    </div>
+    <div id="hint" class="bg-bg p-8 overflow-y-auto">
+      <ul>
+        <li
+          v-if="response"
+          :key="response.type"
+          class="text-text font-xl whitespace-pre-wrap"
+        >
+          <MarkdownText :content="response.content" />
+        </li>
+        <li
+          v-if="response?.hint"
+          class="text-text-primary font-xl whitespace-pre-wrap"
+        >
+          <details ref="hintDetails">
+            <summary class="cursor-pointer">{{ t('game.hint') }}</summary>
+            <MarkdownText :content="response.hint" />
+          </details>
+        </li>
+      </ul>
+      <br />
+    </div>
+  </div>
+</template>

app/src/components/game/QuestPart.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import MarkdownText from '../MarkdownText.vue'
+import { useSession } from '../../store/session'
+
+const { t } = useI18n()
+
+const sessionStore = useSession()
+const tasks = computed(() => {
+  console.log('session', sessionStore.session)
+  return sessionStore.session?.tasks.map((task) => {
+    const prefix = task.completed ? '✓' : '➤'
+    const color = task.completed ? 'text-text-primary' : 'text-text'
+    return {
+      ...task,
+      class: `${color} markdown-content`,
+      content: `${prefix} ${task.name}`,
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="h-full w-full max-h-full">
+    <p id="topic" class="text-text font-black" v-if="sessionStore.quest">
+      {{ sessionStore.quest.title }}
+    </p>
+    <br />
+    <div>
+      <div v-if="sessionStore.quest" class="whitespace-pre-wrap">
+        <MarkdownText
+          class="text-text markdown-content"
+          :content="sessionStore.quest.instruction"
+        />
+        <br />
+        <p id="tasks" class="text-text font-bold">{{ t('game.task') }}</p>
+        <ul v-if="sessionStore.session">
+          <li v-for="task in tasks" :key="task.id">
+            <MarkdownText :class="task.class" :content="task.content" />
+          </li>
+        </ul>
+      </div>
+      <p class="text-text" v-else>{{ t('game.loading') }}</p>
+    </div>
+  </div>
+</template>

app/src/components/game/StartButton.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'vue-toastification'
+import { computed } from 'vue'
+import { useSession } from '../../store/session'
+
+const { t } = useI18n()
+
+const toast = useToast()
+const sessionStore = useSession()
+
+const showCover = computed(() => sessionStore.session === null)
+
+const startSession = async () => {
+  try {
+    await sessionStore.createSession()
+  } catch (err: any) {
+    console.error(err)
+    toast.error(err.message)
+  }
+}
+</script>
+<template>
+  <div
+    v-if="showCover"
+    class="bg-bg-secondary h-full w-1/2 fixed bg-opacity-50 flex justify-center items-center"
+  >
+    <button
+      id="start"
+      class="bg-bg-secondary rounded-lg p-3"
+      @click="startSession"
+    >
+      <font-awesome-icon
+        :icon="['fas', 'play']"
+        class="text-text-primary h-full px-3"
+      />
+      <p class="text-text-primary inline ml-1 md:flex">{{ t('game.start') }}</p>
+    </button>
+  </div>
+</template>

app/src/components/game/TerminalPart.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useSession, useTerminal } from '../../store/session'
+
+const { t } = useI18n()
+
+const sessionStore = useSession()
+
+const terminal = ref<HTMLElement | null>(null)
+const term = useTerminal()
+
+onMounted(() => {
+  if (!terminal.value) return
+  term.mount(terminal.value)
+
+  const handleResize = () => term.resizeScreen()
+  window.addEventListener('resize', handleResize)
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+})
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="flex items-center gap-2 p-1">
+      <font-awesome-icon :icon="['fas', 'terminal']" class="text-text" />
+      <p id="Terminal" class="text-text">{{ t('game.terminal') }}</p>
+
+      <a
+        class="text-xs font-normal text-gray-200 ml-10 bg-bg-primary rounded-lg px-2 py-1 hover:bg-bg-primary-hover transition-colors duration-300"
+        :href="`/terminal/${sessionStore.session?.containerName}?token=${sessionStore.session?.token}`"
+        target="_blank"
+      >
+        {{ t('game.open_terminal_in_new_tab') }}
+      </a>
+    </div>
+    <div
+      id="terminal"
+      ref="terminal"
+      class="bg-bg-secondary flex-grow overflow-hidden px-2"
+      style="height: calc(100vh - 40px)"
+    ></div>
+  </div>
+</template>

app/src/components/game/TreeChart.vue

@@ -1,6 +1,8 @@
-<script setup>
+<script setup lang="ts">
-import FileNode from './FileNode.vue'
+import FileNode from '../FileNode.vue'
-import sessionStore from '../store/session.js'
+import { useSession } from '../../store/session'
+
+const sessionStore = useSession()
 </script>
 
 <template>
@@ -8,6 +10,7 @@ import sessionStore from '../store/session.js'
     <ul>
       <li>
         <FileNode
+          v-if="sessionStore.session"
           :node="sessionStore.session.graph"
           :pwd="sessionStore.session.pwd"
         />
@@ -45,14 +48,14 @@ import sessionStore from '../store/session.js'
   position: absolute;
   top: 0;
   right: 50%;
-  border-top: 1px solid #00ff00;
+  border-top: 2px solid #00ff00;
   width: 50%;
   height: 20px;
 }
 .tree li::after {
   right: auto;
   left: 50%;
-  border-left: 1px solid #00ff00;
+  border-left: 2px solid #00ff00;
 }
 
 .tree li:only-child::after,
@@ -70,7 +73,7 @@ import sessionStore from '../store/session.js'
 }
 
 .tree li:last-child::before {
-  border-right: 1px solid #00ff00;
+  border-right: 2px solid #00ff00;
   border-radius: 0 5px 0 0;
   -webkit-border-radius: 0 5px 0 0;
   -moz-border-radius: 0 5px 0 0;
@@ -86,7 +89,7 @@ import sessionStore from '../store/session.js'
   position: absolute;
   top: 0;
   left: 50%;
-  border-left: 1px solid #00ff00;
+  border-left: 2px solid #00ff00;
   width: 0;
   height: 20px;
 }
@@ -97,7 +100,7 @@ import sessionStore from '../store/session.js'
   text-decoration: none;
   color: #ffffff;
   font-family: arial, verdana, tahoma;
-  font-size: 11px;
+  font-size: 12px;
   display: inline-block;
 
   border-radius: 5px;
@@ -109,18 +112,10 @@ import sessionStore from '../store/session.js'
   -moz-transition: all 0.5s;
 }
 
-a.discovered {
+.tree li a.pwd {
-  background: #526b4e;
+  border: 3px solid #00ff00;
-  color: #000;
+  background: #008080;
-  border: 1px solid #94a0b4;
+  font-weight: bold;
-}
+  font-size: 13px;
-
-ul.discovered,
-li.discovered {
-  border-color: #94a0b4;
-}
-
-a.pwd {
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
 }
 </style>

app/src/components/game/VisualizationPart.vue

@@ -1,19 +1,21 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import TreeChart from './TreeChart.vue'
 
-const treeRef = ref(null)
+const treeRef = ref<HTMLElement | null>(null)
 let pos = { top: 0, left: 0, x: 0, y: 0 }
 
-function mouseMoveHandler(e) {
+function mouseMoveHandler(e: MouseEvent) {
   const dx = e.clientX - pos.x
   const dy = e.clientY - pos.y
 
+  if (treeRef.value === null) return
   treeRef.value.scrollTop = pos.top - dy
   treeRef.value.scrollLeft = pos.left - dx
 }
 
 function mouseUpHandler() {
+  if (treeRef.value === null) return
   treeRef.value.style.cursor = 'grab'
   treeRef.value.style.removeProperty('user-select')
 
@@ -21,7 +23,8 @@ function mouseUpHandler() {
   document.removeEventListener('mouseup', mouseUpHandler)
 }
 
-function mouseDownHandler(e) {
+function mouseDownHandler(e: MouseEvent) {
+  if (treeRef.value === null) return
   treeRef.value.style.cursor = 'grabbing'
   treeRef.value.style.userSelect = 'none'
 
@@ -37,6 +40,7 @@ function mouseDownHandler(e) {
 }
 
 onMounted(() => {
+  if (treeRef.value === null) return
   treeRef.value.style.cursor = 'grab'
   treeRef.value.addEventListener('mousedown', mouseDownHandler)
 })

app/src/components/header/GameHeaderComponents.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useToast } from 'vue-toastification'
+import { logout } from '../../utils/auth'
+import { trpc } from '../../utils/trpc'
+import { openBugReport } from '../../utils/formbricks'
+import { useSession } from '../../store/session'
+import useUserProfile from '../../store/userProfile'
+
+const { t } = useI18n()
+const userStore = useUserProfile()
+const sessionStore = useSession()
+const router = useRouter()
+
+const toast = useToast()
+
+const handleLogout = async () => {
+  try {
+    await logout()
+    userStore.resetUserProfile()
+    sessionStore.reset()
+    router.push({ name: 'login' })
+  } catch (err) {
+    toast.error(t('game_nav.sign_out_failed'))
+    console.error(err)
+  }
+}
+
+const openSurvey = async () => {
+  const surveyUrl = await trpc.links.surveyLink.query()
+  window.open(surveyUrl, '_blank')
+}
+
+onMounted(async () => {
+  try {
+    await userStore.loadUserProfile()
+  } catch (err) {
+    toast.error(t('game_nav.load_user_profile_failed'))
+    console.error(err)
+  }
+})
+</script>
+<template>
+  <!-- <button id="warning" class="flex items-center h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'triangle-exclamation']"
+            class="text-text-primary h-full w-full"
+          />
+        </button>
+        <button id="setting" class="flex items-center h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'gear']"
+            class="text-text-primary h-full w-full"
+          />
+        </button>
+        <button id="fullscreen" class="flex items-center h-5 w-5">
+          <font-awesome-icon
+            :icon="['fas', 'expand']"
+            class="text-text-primary h-full w-full"
+          />
+        </button> -->
+  <p
+    id="UsernameText"
+    class="text-text inline-block whitespace-nowrap px-1.5"
+    style="font-size: 2vh"
+  >
+    {{ userStore.username }}
+  </p>
+  <button
+    :title="t('game_nav.survey')"
+    target="_blank"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+    @click="openSurvey"
+  >
+    <font-awesome-icon
+      :icon="['fas', 'file-invoice']"
+      class="text-text-primary inline"
+    />
+  </button>
+  <RouterLink
+    :title="t('game_nav.leaderboard')"
+    to="/leaderboard"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
+    <font-awesome-icon :icon="['fas', 'trophy']" class="text-text-primary" />
+  </RouterLink>
+  <RouterLink
+    :title="t('game_nav.map')"
+    to="/map"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
+    <font-awesome-icon :icon="['fas', 'map']" class="text-text-primary" />
+  </RouterLink>
+  <button
+    :title="t('game_nav.bug_report')"
+    @click="openBugReport"
+    class="md:h-5 md:w-5 px-1.5 w-auto"
+  >
+    <font-awesome-icon :icon="['fas', 'bug']" class="text-text-primary" />
+  </button>
+  <button
+    :title="t('game_nav.sign_out')"
+    @click="handleLogout"
+    class="md:h-5 md:w-5 px-1.5 mr-2 w-auto"
+  >
+    <font-awesome-icon
+      :icon="['fas', 'arrow-right-from-bracket']"
+      class="text-text-primary"
+    />
+  </button>
+</template>

app/src/components/header/HeaderPart.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useI18n } from 'vue-i18n'
+import LanguageSelector from './LanguageSelector.vue'
+
+const { t } = useI18n()
+
+defineProps({
+  title: {
+    type: String,
+    required: false,
+  },
+  headerComponent: {
+    type: Object,
+    required: false,
+  },
+})
+const menuOpen = ref(false)
+const windowWidth = window.innerWidth < 768
+const toggleMenu = () => {
+  menuOpen.value = !menuOpen.value
+}
+</script>
+<template>
+  <div
+    class="w-full top-0 px-2 fixed flex flex-row flex-wrap bg-bg-secondary justify-between items-center sm:justify-between"
+  >
+    <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
+      <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
+      <RouterLink
+        to="/"
+        id="GameTitle"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1 transition ease-in-out hover:scale-110 duration-300"
+        style="font-size: 2vh"
+      >
+        Linux Odyssey
+      </RouterLink>
+      <p
+        id="QuestTitle"
+        class="text-text inline-block font-bold whitespace-nowrap"
+        style="font-size: 2vh"
+      >
+        {{ title }}
+      </p>
+    </div>
+    <div
+      class="w-full flex flex-col items-center justify-end sm:w-auto sm:block sm:ml-6"
+      :class="{ hidden: !menuOpen }"
+    >
+      <component :is="headerComponent" />
+      <LanguageSelector />
+    </div>
+    <div
+      v-if="windowWidth"
+      :class="{ 'w-full flex justify-end pb-3': menuOpen }"
+    >
+      <button
+        type="button"
+        class="flex items-center h-5 w-5 rounded-md sm:hidden"
+        aria-controls="mobile-menu"
+        aria-expanded="false"
+        @click="toggleMenu"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'bars']"
+          class="text-text-primary h-full w-full"
+        />
+      </button>
+    </div>
+  </div>
+</template>

app/src/components/header/LandingHeaderComponents.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { bugReportUrl } from '../../config'
+
+const { t } = useI18n()
+
+const scrollToSection = (sectionId: string) => {
+  const section = document.getElementById(sectionId)
+  if (section) {
+    const container = document.querySelector('.overflow-y-auto') as HTMLElement // Replace '.overflow-y-auto' with the appropriate class or selector for your container
+    if (container) {
+      container.scrollTo({
+        top: section.offsetTop - container.offsetTop,
+        behavior: 'smooth', // Add smooth scrolling behavior if desired
+      })
+    }
+  }
+}
+</script>
+<template>
+  <button
+    id="Intro"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
+    @click="scrollToSection('intro')"
+    style="font-size: 2vh"
+  >
+    {{ t('landing_nav.intro') }}
+  </button>
+
+  <button
+    id="Feature"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
+    @click="scrollToSection('feature')"
+    style="font-size: 2vh"
+  >
+    {{ t('landing_nav.features') }}
+  </button>
+
+  <button
+    id="Info"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
+    @click="scrollToSection('about')"
+    style="font-size: 2vh"
+  >
+    {{ t('landing_nav.about') }}
+  </button>
+
+  <button
+    id="Contact"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
+    @click="scrollToSection('contact')"
+    style="font-size: 2vh"
+  >
+    {{ t('landing_nav.contact') }}
+  </button>
+
+  <RouterLink
+    id="SignIn"
+    to="/register"
+    class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
+    style="font-size: 2vh"
+  >
+    {{ t('landing_nav.login') }}
+  </RouterLink>
+
+  <a
+    :title="t('landing_nav.report_bug')"
+    :href="bugReportUrl"
+    target="_blank"
+    class="h-5 w-5"
+  >
+    <font-awesome-icon
+      :icon="['fas', 'bug']"
+      class="text-text inline-block font-bold whitespace-nowrap pt-1 px-2 hover:text-text-primary"
+    />
+  </a>
+</template>

app/src/components/header/LanguageSelector.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { QuestLocale } from '@odyssey/constants'
+import { SUPPORTED_LOCALES, LOCALE_NAME_MAP } from '@odyssey/constants'
+import { setLocale } from '../../i18n'
+
+const { t, locale } = useI18n({ useScope: 'global' })
+
+function changeLanguage(event: Event) {
+  const selectedLocale = (event.target as HTMLSelectElement)
+    .value as QuestLocale
+
+  setLocale(selectedLocale)
+}
+</script>
+
+<template>
+  <select
+    :value="locale"
+    :title="t('language.change')"
+    class="bg-bg-secondary px-3 py-2 text-sm text-text shadow-md outline-none"
+    aria-label="Language"
+    @change="changeLanguage"
+    style="font-size: 2vh"
+  >
+    <option v-for="locale in SUPPORTED_LOCALES" :key="locale" :value="locale">
+      {{ LOCALE_NAME_MAP[locale] }}
+    </option>
+  </select>
+</template>

app/src/config.js

@@ -1,7 +0,0 @@
-export const surveyUrl = '/api/v1/survey'
-export const bugReportUrl = '/api/v1/bug-report'
-
-export default {
-  surveyUrl,
-  bugReportUrl,
-}

app/src/config.ts

@@ -0,0 +1,4 @@
+export const surveyUrl = '/api/v1/survey'
+export const bugReportUrl = '/api/v1/bug-report'
+export const facebookUrl = 'https://www.facebook.com/LinuxOdyssey'
+export const githubUrl = 'https://github.com/linux-odyssey/linux-odyssey'

app/src/i18n/index.ts

@@ -0,0 +1,39 @@
+import { createI18n } from 'vue-i18n'
+import type { QuestLocale } from '@odyssey/constants'
+import { SUPPORTED_LOCALES } from '@odyssey/constants'
+import en from './locales/en.json'
+import zhTW from './locales/zh-TW.json'
+
+function isSupportedLocale(locale: string): locale is QuestLocale {
+  return SUPPORTED_LOCALES.includes(locale as QuestLocale)
+}
+
+function getInitialLocale(): QuestLocale {
+  const savedLocale = localStorage.getItem('locale')
+
+  if (savedLocale && isSupportedLocale(savedLocale)) {
+    return savedLocale
+  }
+
+  return navigator.language.startsWith('zh') ? 'zh-TW' : 'en'
+}
+
+const initialLocale = getInitialLocale()
+
+document.documentElement.lang = initialLocale
+
+export const i18n = createI18n({
+  legacy: false,
+  locale: initialLocale,
+  fallbackLocale: 'zh-TW',
+  messages: {
+    'zh-TW': zhTW,
+    en,
+  },
+})
+
+export function setLocale(locale: QuestLocale) {
+  i18n.global.locale.value = locale
+  localStorage.setItem('locale', locale)
+  document.documentElement.lang = locale
+}

app/src/i18n/locales/en.json

@@ -0,0 +1,116 @@
+{
+  "language": {
+    "change": "Change language"
+  },
+  "landing_nav": {
+    "intro": "Introduction",
+    "features": "Features",
+    "about": "About",
+    "contact": "Contact",
+    "login": "Sign in",
+    "report_bug": "Report a bug"
+  },
+  "landing": {
+    "intro": "Programming is about more than writing code - it also means knowing how to interact effectively with your computer. Yet programming education often overlooks the importance of the development environment, leaving many learners frustrated. A development environment includes all the tools needed to write and run software, many of which are used through terminal commands. While most learners use Windows or macOS, much of the software world runs on Linux. Linux Odyssey is an interactive online learning platform designed to bridge that gap.",
+    "feature1": "Easy for Beginners",
+    "feature1_desc": "Setting up and using development tools can be a major hurdle for beginners. With Linux Odyssey, there is nothing to install - learners can access a real Linux environment directly from their browser.",
+    "feature2": "Learn Through Play",
+    "feature2_desc": "Linux Odyssey combines the fun of gaming with practical learning. Through carefully designed levels, learners take on challenges, solve puzzles, and master Linux commands along the way.",
+    "feature3": "Hands-on Linux Experience",
+    "feature3_desc": "Linux Odyssey goes beyond theory by providing real hands-on experience. Every command runs in a real Linux environment, giving learners an authentic introduction to the world of software development.",
+    "start_journey": "Grab your keyboard and begin your Linux adventure!",
+    "team_intro": "Meet the Team",
+    "team_desc": "NTUT Intelligent Automation Engineering, 2nd Cohort",
+    "team_member1": "Wancat",
+    "team_member2": "Neil",
+    "team_member3": "A.H.",
+    "team_member4": "Ray Gur",
+    "awards": "Awards",
+    "award_desc": "2023 InnoServe Awards - 2nd Place, Titansoft Agile Development Award",
+    "player_feedback": "What Players Say",
+    "feedback1": "\"It's really fun - just like a puzzle game.\"",
+    "feedback2": "\"I never knew free software existed. Thank you!\"",
+    "feedback3": "\"It's pretty fun. It makes programming enjoyable.\"",
+    "feedback4": "\"I used to dislike computer class, but now I like it a little more.\"",
+    "feedback5": "\"The program is really beginner-friendly, and I learned a lot.\"",
+    "feedback6": "\"It's very well made, clear, and easy to understand. A lot of thought went into the level design.\"",
+    "feedback7": "\"I found the experience really interesting. I got to try programming in a way I never had before, and the student mentors were very helpful. Thank you for explaining everything so carefully. I hope I can join an activity like this again.\"",
+    "feedback8": "\"I used to think programming was difficult, but now I find it interesting.\"",
+    "feedback9": "\"I used to think programming was difficult and had nothing to do with my life. After this class, it feels much more approachable.\"",
+    "contact_us": "Contact Us"
+  },
+  "authform": {
+    "google_login": "Continue with Google",
+    "github_login": "Continue with GitHub",
+    "or": "or",
+    "username": "Username",
+    "username_rules": "At most 32 characters, lowercase first, use lowercase letters, numbers, _, and -",
+    "email": "Email",
+    "password": "Password",
+    "login": "Login",
+    "register": "Register",
+    "already_registered": "Already have an account?",
+    "not_registered": "Don't have an account?",
+    "continue_as_guest": "Continue as Guest",
+    "password_rules": "At least 8 characters, including uppercase and lowercase letters and numbers",
+    "recommand_pc_fullscreen": "Recommended to use desktop version in full-screen mode"
+  },
+  "authform_error": {
+    "too_many_requests": "Too many requests, please try again in 2 minutes",
+    "unauthorized": "Invalid username or password",
+    "auth_failed": "Something went wrong",
+    "invalid_username": "Invalid username",
+    "invalid_email": "Invalid email",
+    "invalid_password": "Invalid password",
+    "username_taken": "Username is already taken",
+    "email_taken": "Email is already taken"
+  },
+  "game_nav": {
+    "survey": "Survey",
+    "leaderboard": "Leaderboard",
+    "map": "Map",
+    "bug_report": "Bug Report",
+    "sign_out": "Sign Out",
+    "sign_out_failed": "Sign Out Failed",
+    "load_user_profile_failed": "Failed to Load User Profile"
+  },
+  "quest_map": {
+    "title": "Quest Map",
+    "intro": "Embark on your Linux adventure!",
+    "load_quest_map_failed": "Failed to Load Quest Map",
+    "compute_graph_failed": "Error computing graph data: ",
+    "load_quest_data_failed": "Failed to Load Quest Data"
+  },
+  "quest": {
+    "start": "Start Adventure",
+    "locked": "Quest not unlocked",
+    "load_quest_instruction_failed": "Failed to Load Quest Instruction: "
+  },
+  "leaderboard": {
+    "title": "Leaderboard",
+    "username": "Username",
+    "score": "Score",
+    "completed_quests": "Completed Quests",
+    "load_leaderboard_failed": "Failed to Load Leaderboard"
+  },
+  "game": {
+    "start": "Start",
+    "task": "Task:",
+    "loading": "Loading...",
+    "description": "Description",
+    "hint": "Hint",
+    "terminal": "Terminal",
+    "open_terminal_in_new_tab": "Open Terminal in New Tab",
+    "reset": "Reset",
+    "continue": "Continue",
+    "command_book": "Command Book",
+    "cheatsheets": "Cheat Sheets",
+    "reset_to_apply_language": "Reset quest to apply language changes",
+    "reset_failed": "Reset failed",
+    "language_unavailable": "This quest does not support the selected language, please choose another language",
+    "quest_completed": "Quest Completed",
+    "quest_completed_desc_1": "Congratulations! You have completed this quest!",
+    "quest_completed_desc_2": "Return to the map to face new challenges!",
+    "back_to_map": "Back to Map"
+  }
+}

app/src/i18n/locales/zh-TW.json

@@ -0,0 +1,116 @@
+{
+  "language": {
+    "change": "切換語言"
+  },
+  "landing_nav": {
+    "intro": "前言",
+    "features": "特色",
+    "about": "關於",
+    "contact": "聯絡我們",
+    "login": "登入",
+    "report_bug": "回報錯誤"
+  },
+  "landing": {
+    "intro": "程式設計不僅僅是寫程式碼，還涉及到如何有效地與你的電腦互動。程式教育卻往往忽略背後「開發環境」的重要性，使得許多學生在過程中充滿挫折。「開發環境」是寫程式、執行程式過程所需要的一切工具。而這些工具需要在終端機輸入指令來使用。大部分的程式要用來運行的環境，並非 Windows 或 Mac OS，而是 Linux 作業系統。 Linux Odyssey 即是為此設計的線上 Linux 互動教學網站。",
+    "feature1": "初學者也能立即上手",
+    "feature1_desc": "我們明白對於初學者來說，設定和使用開發工具可能是一大障礙。學習者無需安裝任何軟體，僅需通過瀏覽器即可連上一個真實的 Linux 環境。",
+    "feature2": "遊戲般的學習體驗",
+    "feature2_desc": "Linux Odyssey 融合了遊戲的樂趣與學習的實用性。透過精心設計的遊戲關卡，學習者可以一邊接受挑戰、破解謎題，一邊掌握 Linux 指令的運用。",
+    "feature3": "真實的 Linux 操作之旅",
+    "feature3_desc": "Linux Odyssey 提供的不僅是理論知識，更是真實的操作體驗。每一個指令都是在真實的 Linux 環境中執行，讓學習者能夠真正深入軟體開發的世界。",
+    "start_journey": "準備好鍵盤，跟我們一起開啟你的 Linux 冒險吧！",
+    "team_intro": "團隊介紹",
+    "team_desc": "國立臺北科技大學 智慧自動化工程科 第二屆",
+    "team_member1": "Wancat",
+    "team_member2": "Neil",
+    "team_member3": "A.H.",
+    "team_member4": "Ray Gur",
+    "awards": "獲獎紀錄",
+    "award_desc": "2023大專校院資訊應用服務創新競賽 鈦坦敏捷開發特別獎 第二名",
+    "player_feedback": "玩家感想",
+    "feedback1": "\"很好玩很像益智遊戲\"",
+    "feedback2": "\"我從來不知道自由軟體的存在，謝謝你們。\"",
+    "feedback3": "\"還蠻好玩的，讓程式變好玩\"",
+    "feedback4": "\"以前不喜歡電腦課現在覺得喜歡一點點\"",
+    "feedback5": "\"程式真的對新手很友善，讓我學到了很多東西\"",
+    "feedback6": "\"感覺做得很好很簡明易懂關卡設計很用心\"",
+    "feedback7": "\"這個體驗我覺得非常有趣，可以體驗到沒辦法體驗的程式，學長也都熱心指導，非常感謝學長的用心的講解，希望以後還可以再體驗這種活動\"",
+    "feedback8": "\"以前我覺得寫程式很難不過現在覺得很有趣\"",
+    "feedback9": "\"以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近\"",
+    "contact_us": "聯絡我們"
+  },
+  "authform": {
+    "google_login": "以 Google 繼續",
+    "github_login": "以 GitHub 繼續",
+    "or": "或",
+    "username": "帳號名稱",
+    "username_rules": "至多 32 字元，小寫字母開頭，可用小寫字母、數字、_ 和 -",
+    "email": "電子郵件",
+    "password": "密碼",
+    "login": "登入",
+    "register": "註冊",
+    "already_registered": "已經有帳號了嗎？",
+    "not_registered": "還沒有帳號嗎？",
+    "continue_as_guest": "以訪客身分繼續",
+    "password_rules": "至少 8 個字元，包含數字及大小寫字母",
+    "recommand_pc_fullscreen": "建議使用電腦版全螢幕操作"
+  },
+  "authform_error": {
+    "too_many_requests": "太多請求，兩分鐘後再試一次",
+    "unauthorized": "無效的帳號名稱或密碼",
+    "auth_failed": "出了點問題",
+    "invalid_username": "無效的帳號名稱",
+    "invalid_email": "無效的電子郵件",
+    "invalid_password": "無效的密碼",
+    "username_taken": "帳號名稱已被使用",
+    "email_taken": "電子郵件已被使用"
+  },
+  "game_nav": {
+    "survey": "問卷",
+    "leaderboard": "排行榜",
+    "map": "地圖",
+    "bug_report": "回報錯誤",
+    "sign_out": "登出",
+    "sign_out_failed": "登出失敗",
+    "load_user_profile_failed": "無法讀取使用者資料"
+  },
+  "quest_map": {
+    "title": "關卡地圖",
+    "intro": "踏上你的Linux冒險之旅吧！",
+    "load_quest_map_failed": "無法讀取關卡地圖",
+    "compute_graph_failed": "計算關卡地圖時出錯：",
+    "load_quest_data_failed": "無法讀取關卡"
+  },
+  "quest": {
+    "start": "開始冒險",
+    "locked": "關卡尚未解鎖",
+    "load_quest_instruction_failed": "無法讀取關卡說明："
+  },
+  "leaderboard": {
+    "title": "排行榜",
+    "username": "使用者名稱",
+    "score": "分數",
+    "completed_quests": "完成關卡",
+    "load_leaderboard_failed": "無法讀取排行榜"
+  },
+  "game": {
+    "start": "開始",
+    "task": "任務：",
+    "loading": "載入中...",
+    "description": "說明",
+    "hint": "提示",
+    "terminal": "終端機",
+    "open_terminal_in_new_tab": "在新分頁開啟終端機",
+    "reset": "重置",
+    "continue": "繼續",
+    "command_book": "指令之書",
+    "cheatsheets": "指令列表",
+    "reset_to_apply_language": "重置關卡以套用語言變更",
+    "reset_failed": "重置失敗",
+    "language_unavailable": "此關卡不支援所選語言，請選擇其他語言",
+    "quest_completed": "關卡完成",
+    "quest_completed_desc_1": "恭喜你完成了這個關卡！",
+    "quest_completed_desc_2": "回到地圖，迎接新的挑戰吧！",
+    "back_to_map": "回到地圖"
+  }
+}

app/src/img/icon_settings.svg

@@ -0,0 +1,9 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0 0H512V512H0V0Z" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_426_5" transform="scale(0.00195312)"/>
+</pattern>
+<image id="image0_426_5" width="512" height="512" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>

app/src/img/icon_shuttle.svg

@@ -0,0 +1,9 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0 0H512V512H0V0Z" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_424_19" transform="scale(0.00195312)"/>
+</pattern>
+<image id="image0_424_19" width="512" height="512" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>

app/src/img/icon_sword.svg

@@ -0,0 +1,9 @@
+<svg width="474" height="475" viewBox="0 0 474 475" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0 0H474V475H0V0Z" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_426_3" transform="matrix(0.00215972 0 0 0.00215517 -0.00105485 0)"/>
+</pattern>
+<image id="image0_426_3" width="464" height="464" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>

app/src/img/icon_totem.svg

@@ -0,0 +1,9 @@
+<svg width="638" height="732" viewBox="0 0 638 732" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0 0H638V732H0V0Z" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_379_14" transform="matrix(0.00126582 0 0 0.00110327 0 -0.000333748)"/>
+</pattern>
+<image id="image0_379_14" width="790" height="907" xlink:href="data:image/png;base64,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 truncated
+</defs>
+</svg>

app/src/library.ts

@@ -3,45 +3,62 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 
 /* import specific icons */
 import {
-  faBars,
   faArrowLeft,
-  faList,
-  faGear,
-  faTriangleExclamation,
-  faExpand,
-  faTerminal,
-  faArrowRotateLeft,
-  faArrowRightFromBracket,
   faArrowRight,
+  faArrowRightFromBracket,
+  faArrowRotateLeft,
+  faBars,
   faBug,
   faCircleExclamation,
+  faEnvelope,
+  faExpand,
+  faFileInvoice,
+  faGear,
+  faList,
   faMap,
+  faPlay,
+  faTerminal,
+  faTriangleExclamation,
+  faTrophy,
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faLightbulb,
   faCircleQuestion,
   faCircleRight,
+  faFile,
+  faFolder,
+  faLightbulb,
 } from '@fortawesome/free-regular-svg-icons'
-import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
+import {
+  faFacebook,
+  faGithub,
+  faGoogle,
+} from '@fortawesome/free-brands-svg-icons'
 
 /* add icons to the library */
 library.add(
-  faBars,
   faArrowLeft,
-  faList,
-  faGear,
-  faTriangleExclamation,
-  faExpand,
-  faTerminal,
-  faArrowRotateLeft,
-  faArrowRightFromBracket,
   faArrowRight,
+  faArrowRightFromBracket,
+  faArrowRotateLeft,
+  faBars,
   faBug,
-  faMap,
   faCircleExclamation,
-  faLightbulb,
+  faEnvelope,
+  faExpand,
+  faFileInvoice,
+  faGear,
+  faList,
+  faMap,
+  faPlay,
+  faTerminal,
+  faTriangleExclamation,
+  faTrophy,
   faCircleQuestion,
   faCircleRight,
+  faFile,
+  faFolder,
+  faLightbulb,
+  faFacebook,
   faGithub,
   faGoogle
 )

app/src/main.js

@@ -1,29 +0,0 @@
-import { createApp } from 'vue'
-import './style.css'
-/* import font awesome icon component */
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import './library'
-/* import Vue Toastification */
-import Toast, { POSITION } from 'vue-toastification'
-/* import Vue Lottie */
-import Vue3Lottie from 'vue3-lottie'
-import 'vue-toastification/dist/index.css'
-
-import App from './App.vue'
-import router from './router'
-
-const app = createApp(App)
-
-app.component('font-awesome-icon', FontAwesomeIcon)
-
-app.use(router)
-
-const options = {
-  position: POSITION.TOP_RIGHT,
-}
-
-app.use(Toast, options)
-
-app.use(Vue3Lottie, { name: 'Vue3Lottie' })
-
-app.mount('#app')

app/src/main.ts

@@ -0,0 +1,37 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // import font awesome icon component
+import { i18n } from './i18n'
+import Toast, { POSITION } from 'vue-toastification' // import Vue Toastification
+import Vue3Lottie from 'vue3-lottie' // import Vue Lottie
+import 'vue-toastification/dist/index.css'
+import App from './App.vue'
+import router from './router'
+import formbricks from './utils/formbricks'
+import './style.css'
+import './library'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.component('font-awesome-icon', FontAwesomeIcon)
+
+app.use(pinia)
+app.use(router)
+app.use(i18n)
+
+router.afterEach(() => {
+  if (typeof formbricks !== 'undefined') {
+    formbricks.registerRouteChange()
+  }
+})
+
+const options = {
+  position: POSITION.TOP_RIGHT,
+}
+
+app.use(Toast, options)
+
+app.use(Vue3Lottie, { name: 'Vue3Lottie' })
+
+app.mount('#app')

app/src/router.ts

@@ -5,15 +5,14 @@ import RegisterPage from './views/RegisterPage.vue'
 import ChooseUsernamePage from './views/ChooseUsernamePage.vue'
 import QuestMapPage from './views/QuestMapPage.vue'
 import LeaderboardPage from './views/LeaderboardPage.vue'
+import LandingPage from './views/LandingPage.vue'
 import { isLoggedIn } from './utils/auth'
 
 const routes = [
   {
     path: '/',
-    redirect: {
+    name: 'landing-page',
-      name: 'register',
+    component: LandingPage,
-    },
-    meta: { requiresGuest: true },
   },
   {
     path: '/login',
@@ -58,7 +57,7 @@ const router = createRouter({
   routes,
 })
 
-router.beforeEach(async (to, from, next) => {
+router.beforeEach(async (to, _from, next) => {
   const loggedIn = await isLoggedIn()
   // Check if the route requires authentication
   if (to.meta.requiresAuth && !loggedIn) {

app/src/store/session.js

@@ -1,151 +0,0 @@
-import { reactive } from 'vue'
-import { useToast } from 'vue-toastification'
-import { FileGraph } from '@linux-odyssey/file-graph'
-import api from '../utils/api'
-import Socket from '../utils/socket'
-import SocketTerminal from '../utils/terminal'
-import { LoadQuestError, LoadSessionError } from '../utils/errors'
-
-const toast = useToast()
-
-function newSession() {
-  const graph = new FileGraph({
-    path: '/',
-    type: 'folder',
-    discovered: false,
-  })
-  return {
-    status: 'inactive',
-    graph,
-    pwd: '',
-    hints: [],
-    tasks: [],
-  }
-}
-
-const store = reactive({
-  session: newSession(),
-  questId: '',
-  quest: null,
-})
-
-const socket = new Socket()
-const term = new SocketTerminal(40, 80)
-
-function setQuest(questId) {
-  return api.get(`/quests/${questId}`).then((res) => {
-    store.questId = res.data._id
-    store.quest = res.data
-  })
-}
-
-async function setSession(session) {
-  try {
-    store.session = session
-    store.session.graph = new FileGraph(session.graph)
-    term.reset()
-    await socket.connect(session)
-    term.focus()
-  } catch (err) {
-    console.error(err)
-    toast.error(err.message)
-    throw err
-  }
-}
-
-export async function createSession() {
-  try {
-    console.log('Creating a new session...')
-    const res = await api.post('/sessions', { questId: store.questId })
-    const { data } = res
-    await setSession(data)
-  } catch (err) {
-    console.error(err)
-    toast.error('Failed to create a new session. Please try again later.')
-  }
-}
-
-async function getActiveSession(questId) {
-  try {
-    const res = await api.post('/sessions/active', { questId })
-    await setSession(res.data)
-  } catch (err) {
-    console.error(err)
-    toast.warning('Failed to connect previous session. Creating a new one...')
-    await createSession()
-  }
-}
-
-function updateGraph(event) {
-  if (event.discover) {
-    store.session.graph.discover(event.discover)
-  }
-  if (event.pwd) {
-    store.session.pwd = event.pwd
-  }
-}
-
-function updateHints(hints) {
-  store.session.hints.push(hints)
-}
-
-function updateStatus(status) {
-  store.session.status = status
-}
-
-function setTasks(tasks) {
-  store.session.tasks = tasks
-}
-
-export function useTerminal() {
-  return term
-}
-
-export function reset() {
-  socket.reset()
-  term.reset()
-  store.session = newSession()
-  store.quest = null
-}
-
-export async function init(questId) {
-  if (!questId) throw new Error('No quest ID provided')
-  reset()
-  try {
-    await setQuest(questId)
-  } catch (err) {
-    console.error(err)
-    throw new LoadQuestError('Failed to load quest', questId)
-  }
-  try {
-    await getActiveSession(questId)
-  } catch (err) {
-    console.error(err)
-    throw new LoadSessionError('Failed to load session', questId)
-  }
-}
-
-function setup() {
-  socket.on('terminal', (data) => {
-    term.write(data)
-  })
-  term.onData((data) => {
-    socket.emit('terminal', data)
-  })
-  socket.on('graph', (event) => {
-    updateGraph(event)
-  })
-  socket.on('hints', (event) => {
-    updateHints(event)
-  })
-  socket.on('tasks', (tasks) => {
-    setTasks(tasks)
-  })
-  socket.on('status', (event) => {
-    updateStatus(event)
-  })
-}
-
-setup()
-
-export default store

app/src/store/session.ts

@@ -0,0 +1,132 @@
+import { defineStore } from 'pinia'
+import type { QuestLocale } from '@odyssey/constants'
+import { FileGraph, type FileGraphUpdateEvent } from '@odyssey/file-graph'
+import type { IResponse, ITask } from '@odyssey/game'
+import type { SessionDetail } from '../../../server/src/routers/sessionRouter'
+import Socket from '../utils/socket'
+import SocketTerminal from '../utils/terminal'
+import type { Session } from '../types'
+import { trpc } from '../utils/trpc'
+import { i18n } from '../i18n'
+
+const socket = new Socket()
+const term = new SocketTerminal()
+let hasSetup = false
+
+interface QuestDetailResponse {
+  id: string
+  title: string
+  instruction: string
+  requirements: string[]
+}
+
+interface SessionUpdate {
+  status: string
+  responses: IResponse[]
+  tasks: ITask[]
+  graphUpdate: FileGraphUpdateEvent
+}
+
+interface Store {
+  session: Session | null
+  questId: string
+  quest: QuestDetailResponse | null
+}
+
+export const useSession = defineStore('session', {
+  state: (): Store => ({
+    session: null,
+    questId: '',
+    quest: null,
+  }),
+  actions: {
+    async setQuest(questId: string, locale: QuestLocale) {
+      this.quest = await trpc.quests.getQuestDetail.query({
+        questId,
+        locale,
+      })
+      this.questId = questId
+    },
+    async setSession(session: SessionDetail) {
+      await this.setQuest(session.quest, session.locale)
+
+      this.session = {
+        ...session,
+        graph: new FileGraph(session.graph),
+        pwd: '/home/commander',
+        containerName: session.containerName || '',
+      }
+      term.reset()
+      await socket.connect(this.session)
+      await term.connect(
+        `/terminal/${session.containerName}/ws?token=${session.token}`
+      )
+      term.focus()
+    },
+    async createSession() {
+      const locale = i18n.global.locale.value
+      const session = await trpc.session.createSession.mutate({
+        questId: this.questId,
+        locale,
+      })
+      await this.setSession(session)
+      term.send('echo start\n')
+    },
+    async getActiveSession(questId: string) {
+      const session = await trpc.session.getActiveSession.query({ questId })
+      if (session) {
+        await this.setSession(session)
+      }
+    },
+    newUpdate(update: SessionUpdate) {
+      if (!this.session) return
+      this.session.responses = update.responses
+      this.session.tasks = update.tasks
+      this.session.status = update.status
+      // if (
+      //   response.status === 'finished' &&
+      //   this.session.status !== 'finished'
+      // ) {
+      //   this.finish()
+      // }
+      // this.session.status = response.status
+    },
+    finish() {
+      if (!this.session) return
+      this.session.status = 'finished'
+    },
+    reset() {
+      socket.reset()
+      term.reset()
+      this.$reset()
+    },
+    setup() {
+      if (hasSetup) return
+      // socket.on('terminal', (data: string) => {
+      //   term.write(data)
+      // })
+      // term.onData((data: string) => {
+      //   socket.emit('terminal', data)
+      // })
+      socket.on('graph', (event: FileGraphUpdateEvent) => {
+        if (!this.session) return
+        this.session.graph.handleEvent(event)
+        if (event.pwd) {
+          this.session.pwd = event.pwd
+        }
+      })
+      socket.on('update', (update: SessionUpdate) => {
+        this.newUpdate(update)
+      })
+      hasSetup = true
+    },
+    setStatus(status: string) {
+      if (!this.session) return
+      this.session.status = status
+    },
+  },
+})
+
+export function useTerminal() {
+  return term
+}

app/src/store/userProfile.js

@@ -1,30 +0,0 @@
-import { reactive } from 'vue'
-import api from '../utils/api'
-
-const store = reactive({
-  username: '',
-  email: '',
-  progress: {},
-})
-
-export async function loadUserProfile() {
-  try {
-    const res = await api.get('/users/me')
-    const { username, email, progress } = res.data
-    store.username = username
-    store.email = email
-    store.progress = progress
-    return store
-  } catch (err) {
-    console.error(err)
-    throw new Error(`Failed to load user profile: ${err.message}`)
-  }
-}
-
-export function resetUserProfile() {
-  store.username = ''
-  store.email = ''
-  store.progress = {}
-}
-
-export default store

app/src/store/userProfile.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import { trpc } from '../utils/trpc'
+
+interface IProgress {
+  quest: string
+  sessions: string[]
+  completed: boolean
+  startedAt: Date
+  finishedAt?: Date
+}
+
+export interface UserProfile {
+  username: string
+  email: string
+  progress: Record<string, IProgress>
+}
+
+const useUserProfile = defineStore('userProfile', {
+  state: (): UserProfile => ({
+    username: '',
+    email: '',
+    progress: {},
+  }),
+  actions: {
+    async loadUserProfile() {
+      const res = await trpc.users.getMyProfile.query()
+      this.$patch(res)
+    },
+    async resetUserProfile() {
+      this.$reset()
+    },
+  },
+})
+
+export default useUserProfile

app/src/types.ts

@@ -0,0 +1,26 @@
+import type { FileGraph } from '@odyssey/file-graph'
+import type { IResponse, ITask } from '@odyssey/game'
+
+export interface Task {
+  id: number
+  name: string
+  completed: boolean
+}
+
+export interface StageResponse {
+  status: string
+  hints: string[]
+  tasks: Task[]
+  responses: IResponse[]
+}
+
+export interface Session {
+  _id: string
+  status: string
+  graph: FileGraph
+  pwd: string
+  tasks: ITask[]
+  responses: IResponse[]
+  token: string
+  containerName: string
+}

app/src/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: string
+  export default content
+}

app/src/utils/api.ts

@@ -7,5 +7,4 @@ const api = axios.create({
   },
   withCredentials: true,
 })
-
 export default api

app/src/utils/auth.ts

@@ -1,4 +1,5 @@
 import api from './api'
+import { i18n } from '../i18n'
 
 import {
   TooManyRequestsError,
@@ -12,7 +13,12 @@ export async function isLoggedIn() {
   return loggedIn
 }
 
-function handleRequestError(err) {
+function handleRequestError(err: {
+  response: {
+    data?: any
+    status?: number
+  }
+}) {
   if (!err.response) throw err // Not an axios error
   const { status } = err.response
   if (status === 429) {
@@ -27,11 +33,15 @@ function handleRequestError(err) {
       const { path, msg } = errors[0]
       switch (path) {
         case 'username':
-          throw new ValidationError('Username is already taken')
+          throw new ValidationError(
+            i18n.global.t('authform_error.username_taken')
+          )
         case 'email':
-          throw new ValidationError('Email is already taken')
+          throw new ValidationError(i18n.global.t('authform_error.email_taken'))
         case 'password':
-          throw new ValidationError('Password is too weak')
+          throw new ValidationError(
+            i18n.global.t('authform_error.invalid_password')
+          )
         default:
           throw new ValidationError(msg)
       }
@@ -41,14 +51,14 @@ function handleRequestError(err) {
   throw err
 }
 
-export const login = (username, password) => {
+export const login = (username: string, password: string) => {
   return api
     .post('/auth/login', { username, password })
     .then(() => true)
     .catch(handleRequestError)
 }
 
-export const register = (username, email, password) => {
+export const register = (username: string, email: string, password: string) => {
   return api
     .post('/auth/register', {
       username,
@@ -59,7 +69,7 @@ export const register = (username, email, password) => {
     .catch(handleRequestError)
 }
 
-export const checkUsername = async (username) => {
+export const checkUsername = async (username: string) => {
   return api
     .get('/auth/check-username', {
       params: { username },
@@ -68,7 +78,7 @@ export const checkUsername = async (username) => {
     .catch(handleRequestError)
 }
 
-export const chooseUsername = async (username) => {
+export const chooseUsername = async (username: string) => {
   return api
     .post('/auth/register-from-session', { username })
     .then(() => true)

app/src/utils/errors.ts

@@ -1,27 +1,28 @@
 /* eslint-disable max-classes-per-file */
 export class TooManyRequestsError extends Error {
-  constructor(message) {
+  constructor(message: string) {
     super(message)
     this.name = 'TooManyRequestsError'
   }
 }
 
 export class ValidationError extends Error {
-  constructor(message) {
+  constructor(message: string) {
     super(message)
     this.name = 'ValidationError'
   }
 }
 
 export class UnauthorizedError extends Error {
-  constructor(message) {
+  constructor(message: string) {
     super(message)
     this.name = 'UnauthorizedError'
   }
 }
 
 export class LoadQuestError extends Error {
-  constructor(message, questId) {
+  questId: string
+  constructor(message: string, questId: string) {
     super(message)
     this.name = 'LoadQuestError'
     this.questId = questId
@@ -29,7 +30,8 @@ export class LoadQuestError extends Error {
 }
 
 export class LoadSessionError extends Error {
-  constructor(message, questId) {
+  questId: string
+  constructor(message: string, questId: string) {
     super(message)
     this.name = 'LoadSessionError'
     this.questId = questId

app/src/utils/formbricks.ts

@@ -0,0 +1,40 @@
+import formbricks from '@formbricks/js/website'
+import { useSession } from '../store/session'
+import useUserProfile from '../store/userProfile'
+
+if (typeof window !== 'undefined') {
+  formbricks.init({
+    environmentId: 'clzcdqqn0000kadvtqykdo0pc',
+    apiHost: 'https://app.formbricks.com',
+  })
+}
+
+export function openQuestSurvey() {
+  const sessionStore = useSession()
+  const userStore = useUserProfile()
+
+  formbricks.track('quest_completed', {
+    hiddenFields: {
+      quest: sessionStore.questId,
+      session: sessionStore.session?._id,
+      username: userStore.username,
+      email: userStore.email,
+    },
+  })
+}
+
+export function openBugReport() {
+  const sessionStore = useSession()
+  const userStore = useUserProfile()
+
+  formbricks.track('bug_report', {
+    hiddenFields: {
+      quest: sessionStore.questId,
+      session: sessionStore.session?._id,
+      username: userStore.username,
+      email: userStore.email,
+    },
+  })
+}
+
+export default formbricks

app/src/utils/markdown.ts

@@ -0,0 +1,7 @@
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+
+export default function markdown2HTML(markdown: string) {
+  const html = marked.parse(markdown)
+  return DOMPurify.sanitize(html)
+}

app/src/utils/socket.ts

@@ -1,13 +1,18 @@
-import io from 'socket.io-client'
+import { io, Socket } from 'socket.io-client'
+import type { Session } from '../types'
+
+type SocketCallback = (data: any) => void
 
 class SocketWrapper {
+  socket: Socket | null
+  listeners: { event: string; callback: SocketCallback }[]
   constructor() {
     this.socket = null
     this.listeners = []
   }
 
-  connect(session) {
+  connect(session: Session) {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       this.disconnect()
 
       this.socket = io('', {
@@ -18,17 +23,15 @@ class SocketWrapper {
 
       this.socket.on('connect', () => {
         console.log('Socket connected to session', session._id)
-      })
-
-      this.socket.once('terminal', () => {
         resolve()
       })
+
       this.socket.on('connect_error', reject)
       this.bindListeners()
     })
   }
 
-  on(event, callback) {
+  on(event: string, callback: SocketCallback) {
     this.listeners.push({ event, callback })
     if (this.socket) {
       this.socket.on(event, callback)
@@ -36,12 +39,14 @@ class SocketWrapper {
   }
 
   bindListeners() {
-    this.listeners.forEach(({ event, callback }) => {
+    this.listeners.forEach(
-      this.socket.on(event, callback)
+      ({ event, callback }: { event: string; callback: SocketCallback }) => {
-    })
+        if (this.socket !== null) this.socket.on(event, callback)
+      }
+    )
   }
 
-  emit(event, data) {
+  emit(event: string, data: any) {
     if (!this.socket) {
       console.warn('Socket is not connected!')
       return

app/src/utils/terminal.js

@@ -1,55 +0,0 @@
-import { Terminal } from 'xterm'
-import { FitAddon } from 'xterm-addon-fit'
-import 'xterm/css/xterm.css'
-
-class SocketTerminal {
-  constructor(rows, cols) {
-    this.term = new Terminal({
-      rendererType: 'canvas', // 渲染类型
-      rows, // 行数
-      cols, // 不指定行数，自动回车后光标从下一行开始
-      convertEol: true, // 启用时，光标将设置为下一行的开头
-      // scrollback: 50, //终端中的回滚量
-      disableStdin: false, // 是否应禁用输入
-      // cursorStyle: "underline", //光标样式
-      cursorBlink: true, // 光标闪烁
-      theme: {
-        foreground: '#ECECEC', // 字体
-        background: '#000000', // 背景色
-        cursor: 'help', // 设置光标
-        lineHeight: 20,
-      },
-    })
-    this.fitAddon = new FitAddon()
-    this.term.loadAddon(this.fitAddon)
-    this.fitAddon.fit()
-  }
-
-  write(message) {
-    this.term.write(message)
-  }
-
-  onData(callback) {
-    this.term.onData(callback)
-  }
-
-  focus() {
-    this.term.focus()
-  }
-
-  resizeScreen() {
-    this.fitAddon.fit()
-  }
-
-  mount(reference) {
-    this.term.open(reference)
-    this.term.focus()
-    this.resizeScreen()
-  }
-
-  reset() {
-    this.term.reset()
-  }
-}
-
-export default SocketTerminal

app/src/utils/terminal.ts

@@ -0,0 +1,93 @@
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import ReconnectingWebSocket from 'reconnecting-websocket'
+import 'xterm/css/xterm.css'
+
+class SocketTerminal {
+  private term: Terminal
+  private fitAddon: FitAddon
+  private socket: ReconnectingWebSocket | null = null
+
+  constructor() {
+    this.term = new Terminal({
+      convertEol: true,
+      scrollback: 1000,
+      fontSize: 16,
+      theme: {
+        foreground: '#ECECEC',
+        background: '#000000',
+        cursor: 'help',
+      },
+    })
+    this.fitAddon = new FitAddon()
+    this.term.loadAddon(this.fitAddon)
+    this.term.onData((data) => {
+      if (this.socket) {
+        this.socket.send(data)
+      }
+    })
+  }
+
+  connect(url: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      console.log('Connecting to terminal', url)
+      this.term.write('\r\n\x1B[1;32mConnecting to terminal\x1B[0m\r\n')
+      this.socket = new ReconnectingWebSocket(url, [], {
+        connectionTimeout: 5000,
+        maxRetries: 10,
+      })
+      this.socket.onopen = () => {
+        console.log('Connected to terminal')
+        this.term.reset()
+        this.term.write('\r\n\x1B[1;32mConnected to terminal\x1B[0m\r\n')
+        resolve()
+      }
+
+      this.socket.onclose = () => {
+        console.log('Disconnected from terminal')
+      }
+
+      this.socket.onerror = (error) => {
+        console.error('WebSocket error:', error)
+      }
+      this.socket.onmessage = (event) => {
+        console.log('Received message from terminal')
+        const data =
+          typeof event.data === 'string'
+            ? event.data
+            : new TextDecoder().decode(event.data)
+        this.term.write(data)
+      }
+    })
+  }
+
+  resizeScreen(): void {
+    try {
+      this.fitAddon.fit()
+    } catch (e) {
+      console.error('Failed to resize terminal:', e)
+    }
+  }
+
+  mount(reference: HTMLElement): void {
+    this.term.open(reference)
+    this.resizeScreen()
+  }
+
+  send(message: string): void {
+    if (this.socket) {
+      this.socket.send(message)
+    }
+  }
+
+  focus(): void {
+    this.term.focus()
+  }
+
+  reset(): void {
+    this.term.reset()
+    this.socket?.close()
+  }
+}
+
+export default SocketTerminal

app/src/utils/trpc.ts

@@ -0,0 +1,16 @@
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import type { AppRouter } from '../../../server/src/routers'
+
+export const trpc = createTRPCClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: '/trpc',
+      // You can pass any HTTP headers you wish here
+      // async headers() {
+      //   return {
+      //     authorization: getAuthCookie(),
+      //   }
+      // },
+    }),
+  ],
+})

app/src/views/ChooseUsernamePage.vue

@@ -1,43 +1,59 @@
-<script setup>
+<script setup lang="ts">
-import { isValidUsername } from '@linux-odyssey/utils'
+import { useI18n } from 'vue-i18n'
+import { isValidUsername } from '@odyssey/utils'
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 import { TooManyRequestsError, ValidationError } from '../utils/errors'
 import { checkUsername, chooseUsername } from '../utils/auth'
 
-async function check({ username, error }) {
+const { t } = useI18n()
+
+async function check({
+  username,
+  error,
+}: {
+  username: string
+  // eslint-disable-next-line no-unused-vars
+  error: (msg: string) => void
+}) {
   if (username) {
     if (!isValidUsername(username)) {
-      // error('Invalid username.')
+      error(t('authform_error.invalid_username'))
-      error('無效的帳號名稱')
       return
     }
     try {
       await checkUsername(username)
     } catch (err) {
       if (err instanceof TooManyRequestsError) {
-        // error('Too many requests. Try again in 2 minutes.')
+        error(t('authform_error.too_many_requests'))
-        error('太多請求，兩分鐘後再試一次。')
         return
       }
       if (err instanceof ValidationError) {
         error(err.message)
         return
       }
-      // error('Something went wrong. Please try again later.')
+      error(t('authform_error.auth_failed'))
-      error('出了點問題，請再試一次。')
     }
   }
 }
 
-async function handleSubmit({ username, success, error }) {
+async function handleSubmit({
+  username,
+  success,
+  error,
+}: {
+  username: string
+  success: () => void
+  // eslint-disable-next-line no-unused-vars
+  error: (msg: string) => void
+}) {
   try {
     await chooseUsername(username)
     success()
-  } catch (err) {
+  } catch (err: any) {
     if (err instanceof TooManyRequestsError) {
-      // error('Too many requests. Try again in 2 minutes.')
+      error(t('authform_error.too_many_requests'))
-      error('太多請求，兩分鐘後再試一次。')
       return
     }
     if (err instanceof ValidationError) {
@@ -51,10 +67,11 @@ async function handleSubmit({ username, success, error }) {
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <DynamicBackground class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
+      <HeaderPart />
       <div class="w-fit">
         <AuthForm
           @onSubmit="handleSubmit"

app/src/views/GamePage.vue

@@ -1,19 +1,41 @@
-<script setup>
+<script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useToast } from 'vue-toastification'
-import sessionStore, { init } from '../store/session'
+import { computed, onMounted, watch } from 'vue'
-import GameHeaderPart from '../components/GameHeaderPart.vue'
+import { useSession } from '../store/session'
-// import CommandlistPart from '../components/CommandlistPart.vue'
+import useUserProfile from '../store/userProfile'
-import HintPart from '../components/HintPart.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
-import QuestPart from '../components/QuestPart.vue'
+import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
-import TerminalPart from '../components/TerminalPart.vue'
+import DescriptionPart from '../components/game/DescriptionPart.vue'
-import VisualizationPart from '../components/VisualizationPart.vue'
+import QuestPart from '../components/game/QuestPart.vue'
-import ControlPalette from '../components/ControlPalette.vue'
+import TerminalPart from '../components/game/TerminalPart.vue'
-import CompleteModal from '../components/CompleteModal.vue'
+import VisualizationPart from '../components/game/VisualizationPart.vue'
-import { LoadQuestError, LoadSessionError } from '../utils/errors'
+import ControlPalette from '../components/game/ControlPalette.vue'
+import CompleteModal from '../components/game/CompleteModal.vue'
+import StartButton from '../components/game/StartButton.vue'
+import { openQuestSurvey } from '../utils/formbricks'
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const sessionStore = useSession()
+const userStore = useUserProfile()
 
 const completed = computed(() => {
-  return sessionStore.session.status === 'finished'
+  return sessionStore.session?.status === 'finished'
+})
+
+watch(completed, (newValue, oldValue) => {
+  if (newValue && !oldValue) {
+    console.log('finish', userStore)
+    openQuestSurvey()
+  }
+})
+
+watch(locale, (newLocale) => {
+  const { session } = sessionStore
+  if (session && newLocale !== session.locale) {
+    toast.info(t('game.reset_to_apply_language'))
+  }
 })
 
 const props = defineProps({
@@ -23,45 +45,36 @@ const props = defineProps({
   },
 })
 
-const toast = useToast()
-
 onMounted(async () => {
-  try {
+  sessionStore.reset()
-    await init(props.questId)
+  sessionStore.setup()
-  } catch (err) {
+
-    if (err instanceof LoadQuestError) {
+  await sessionStore.getActiveSession(props.questId)
-      // toast.error(`Failed to load quest: ${err.questId}. Please check the URL.`)
+
-      toast.error(`無法讀取關卡: ${err.questId}，請確認網頁連結。`)
+  if (!sessionStore.session) {
-      return
+    await sessionStore.setQuest(props.questId, locale.value)
-    }
-    if (err instanceof LoadSessionError) {
-      // toast.error(
-      //   `Failed to create session for quest: ${err.questId}. Please re-login and try again.`
-      // )
-      toast.error(`無法建立工作階段: ${err.questId}，請重新登入再試一次。`)
-      return
-    }
-    console.error(err)
-    toast.error(err.message)
   }
 })
 </script>
 
 <template>
   <!-- game header -->
-  <div class="h-[6vh] w-full">
+  <div class="w-full">
-    <GameHeaderPart :title="sessionStore.quest?.title" />
+    <HeaderPart
+      :title="sessionStore.quest?.title"
+      :headerComponent="GameHeaderComponents"
+    />
   </div>
   <!-- current status indicator -->
   <input
     type="hidden"
     id="currentStatus"
-    :value="sessionStore.session.status"
+    :value="sessionStore.session?.status"
   />
   <!-- main -->
-  <div id="main" class="h-[94vh] w-full flex p-3 space-x-3">
+  <div id="main" class="h-full pt-10 w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
-    <div class="bg-bg-secondary h-full w-1/3 rounded-lg">
+    <div class="bg-bg-secondary h-full w-1/4 rounded-lg">
       <section id="quest" class="h-full p-3 overflow-auto">
         <QuestPart />
       </section>
@@ -71,17 +84,18 @@ onMounted(async () => {
       </section> -->
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-bg h-full w-1/3 rounded-lg">
+    <div class="bg-bg h-full rounded-lg w-1/2">
-      <section id="terminal" class="h-3/5 overflow-hidden">
+      <StartButton :questId="$props.questId" />
-        <TerminalPart />
+      <section id="hint" class="h-3/5">
+        <DescriptionPart />
       </section>
       <hr class="border-border border" />
-      <section id="hint" class="h-2/5">
+      <section id="terminal" class="h-2/5 overflow-hidden">
-        <HintPart />
+        <TerminalPart />
       </section>
     </div>
     <!-- Visualization -->
-    <div class="h-full w-1/3">
+    <div class="h-full w-1/4">
       <div class="bg-border rounded-xl h-[90%] p-2">
         <div class="bg-bg rounded-lg h-full p-2">
           <section id="visualization" class="bg-bg-primary h-full rounded-md">

app/src/views/LandingPage.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import ContactButton from '../components/ContactButton.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
+import LandingHeaderComponents from '../components/header/LandingHeaderComponents.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
+
+import { facebookUrl, githubUrl } from '../config'
+
+const { t } = useI18n()
+</script>
+<template>
+  <div class="w-screen h-screen bg-scroll bg-bg">
+    <DynamicBackground class="w-full h-full" />
+    <div class="h-screen w-screen absolute top-0 left-0">
+      <!-- game header -->
+      <HeaderPart :headerComponent="LandingHeaderComponents" class="z-50" />
+      <!-- main content -->
+      <main class="w-full h-full overflow-y-auto">
+        <div class="w-full flex flex-col items-center">
+          <div
+            class="flex flex-col md:flex-row mt-10 justify-around gap-5 items-center my-10"
+          >
+            <h1 class="text-text-primary text-7xl font-extrabold">Linux</h1>
+            <img src="../img/icon_totem.svg" class="h-[30vh]" />
+            <h1 class="text-text-primary text-7xl font-extrabold">Odyssey</h1>
+          </div>
+          <!-- intro -->
+          <div class="w-full md:w-2/3 px-5">
+            <section
+              id="intro"
+              class="text-text grid grid-cols-1 gap-3 justify-items-center"
+            >
+              <h1
+                class="text-text inline-block bg-bg-primary p-5 rounded-xl opacity-90"
+                style="font-size: 2.5vh"
+              >
+                {{ t('landing.intro') }}
+              </h1>
+            </section>
+            <section
+              id="feature"
+              class="text-text p-15 grid grid-rows-3 gap-10 items-center pt-10"
+            >
+              <div
+                class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
+              >
+                <img
+                  src="../img/icon_shuttle.svg"
+                  class="h-[18vh] row-span-2"
+                />
+                <h1
+                  class="text-text-primary p-5 font-extrabold col-span-2"
+                  style="font-size: 3.5vh"
+                >
+                  {{ t('landing.feature1') }}
+                </h1>
+                <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+                  {{ t('landing.feature1_desc') }}
+                </h1>
+              </div>
+              <div
+                class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
+              >
+                <h1
+                  class="text-text-primary p-5 font-extrabold col-span-2"
+                  style="font-size: 3.5vh"
+                >
+                  {{ t('landing.feature2') }}
+                </h1>
+                <img src="../img/icon_sword.svg" class="h-[18vh] row-span-2" />
+                <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+                  {{ t('landing.feature2_desc') }}
+                </h1>
+              </div>
+              <div
+                class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
+              >
+                <img
+                  src="../img/icon_settings.svg"
+                  class="h-[18vh] row-span-2"
+                />
+                <h1
+                  class="text-text-primary p-5 font-extrabold col-span-2 pt-8"
+                  style="font-size: 3.5vh"
+                >
+                  {{ t('landing.feature3') }}
+                </h1>
+                <h1 class="text-text p-2 col-span-2" style="font-size: 2.5vh">
+                  {{ t('landing.feature3_desc') }}
+                </h1>
+              </div>
+            </section>
+            <section class="w-full py-10">
+              <iframe
+                src="https://www.youtube.com/embed/XzvfmUf1QP8?si=QxnKJMNjsm27fGGF"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+                class="w-full aspect-video"
+              ></iframe>
+            </section>
+            <section
+              id="start"
+              class="text-text bg-bg-secondary border-8 border-text-tertiary rounded-xl transition ease-in-out hover:scale-110 duration-300"
+            >
+              <RouterLink title="StartGame" id="StartGame" to="/register">
+                <div class="text-text text-xl p-2 w-full text-center">
+                  {{ t('landing.start_journey') }}
+                </div>
+              </RouterLink>
+            </section>
+            <section
+              id="about"
+              class="text-text flex flex-col items-center mt-10 gap-10"
+            >
+              <div class="w-full flex flex-col items-center gap-2">
+                <h1 class="text-text-primary text-3xl font-extrabold">
+                  {{ t('landing.team_intro') }}
+                </h1>
+                <p class="text-lg">
+                  {{ t('landing.team_desc') }}
+                </p>
+                <div class="flex flex-row gap-5 justify-center">
+                  <h1 class="font-bold">{{ t('landing.team_member1') }}</h1>
+                  <h1 class="font-bold">{{ t('landing.team_member2') }}</h1>
+                  <h1 class="font-bold">{{ t('landing.team_member3') }}</h1>
+                  <h1 class="font-bold">{{ t('landing.team_member4') }}</h1>
+                </div>
+              </div>
+              <div class="w-full flex flex-col items-center gap-2">
+                <h1 class="text-text-primary text-3xl font-extrabold">
+                  {{ t('landing.awards') }}
+                </h1>
+                <h1 class="text-xl text-center">
+                  {{ t('landing.award_desc') }}
+                </h1>
+              </div>
+              <div class="container mx-auto">
+                <div
+                  class="justify-items-center grid grid-cols-1 sm:grid-cols-3 gap-5"
+                >
+                  <h1
+                    class="text-text-primary text-3xl font-extrabold sm:col-span-3 gap-6"
+                  >
+                    {{ t('landing.player_feedback') }}
+                    <!--可以做成翻頁卡牌一次一個-->
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback1') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback2') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback3') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback4') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback5') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback6') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback7') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback8') }}
+                  </h1>
+                  <h1 class="text-xl text-center">
+                    {{ t('landing.feedback9') }}
+                  </h1>
+                </div>
+              </div>
+            </section>
+          </div>
+          <section
+            id="contact"
+            class="text-text mt-10 flex flex-col items-center"
+          >
+            <h1 class="text-text-primary font-extrabold text-3xl">
+              {{ t('landing.contact_us') }}
+            </h1>
+            <div
+              class="flex flex-row items-center justify-around mt-5 gap-5 mb-5"
+            >
+              <ContactButton
+                :url="facebookUrl"
+                :icons="['fab', 'facebook']"
+                title="Facebook"
+                desciption="Linux Odyssey"
+              />
+              <ContactButton
+                :url="githubUrl"
+                :icons="['fab', 'github']"
+                title="GitHub"
+                desciption="linux-odyssey/linux-odyssey"
+              />
+              <ContactButton
+                url="mailto:team@linuxodyssey.xyz"
+                :icons="['fas', 'envelope']"
+                title="Email"
+                desciption="team@linuxodyssey.xyz"
+              />
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>

app/src/views/LeaderboardPage.vue

@@ -1,20 +1,30 @@
-<script setup>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import GameHeaderPart from '../components/GameHeaderPart.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 import api from '../utils/api'
 
-const leaderboard = ref([])
+const { t } = useI18n()
+
+const leaderboard = ref<
+  {
+    username: string
+    score: number
+    completedQuests: string[]
+  }[]
+>([])
 
 const toast = useToast()
 async function getLeaderboard() {
   try {
     const res = await api.get('/leaderboard')
     leaderboard.value = res.data
-  } catch (err) {
+  } catch (err: any) {
     console.error(err)
-    toast.error('讀取排行榜失敗')
+    toast.error(t('leaderboard.load_leaderboard_failed'))
   }
 }
 
@@ -29,23 +39,34 @@ onMounted(async () => {
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="h-[6vh] w-full">
+      <div class="w-full">
-        <GameHeaderPart title="排行榜" />
+        <HeaderPart
+          :title="t('leaderboard.title')"
+          :headerComponent="GameHeaderComponents"
+        />
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div
           class="h-full bg-bg border-8 border-bg-primary flex flex-col items-center rounded-3xl p-10"
         >
-          <h1 class="text-text-primary text-3xl mb-5">排行榜</h1>
+          <h1 class="text-text-primary text-3xl mb-5">
+            {{ t('leaderboard.title') }}
+          </h1>
           <div class="max-h-300 overflow-auto">
             <table class="w-full text-sm text-left text-text">
               <thead
                 class="text-xs text-text-secondary uppercase bg-bg-secondary"
               >
                 <tr>
-                  <th scope="col" class="px-6 py-3">使用者名稱</th>
+                  <th scope="col" class="px-6 py-3">
-                  <th scope="col" class="px-6 py-3">分數</th>
+                    {{ t('leaderboard.username') }}
-                  <th scope="col" class="px-6 py-3">完成關卡</th>
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ t('leaderboard.score') }}
+                  </th>
+                  <th scope="col" class="px-6 py-3">
+                    {{ t('leaderboard.completed_quests') }}
+                  </th>
                 </tr>
               </thead>
               <tbody>

app/src/views/LoginPage.vue

@@ -1,6 +1,8 @@
-<script setup>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 
 import {
   TooManyRequestsError,
@@ -9,39 +11,49 @@ import {
 } from '../utils/errors'
 import { login } from '../utils/auth'
 
-const handleLogin = async ({ username, password, success, error }) => {
+const { t } = useI18n()
+
+const handleLogin = async ({
+  username,
+  password,
+  success,
+  error,
+}: {
+  username: string
+  password: string
+  success: () => void
+  // eslint-disable-next-line no-unused-vars
+  error: (msg: string) => void
+}) => {
   try {
     const isSuccess = await login(username, password)
     if (isSuccess) success()
   } catch (err) {
     if (err instanceof TooManyRequestsError) {
-      // error('Too many requests. Try again in 2 minutes.')
+      error(t('authform_error.too_many_requests'))
-      error('太多請求，兩分鐘後再試一次。')
       return
     }
     if (err instanceof UnauthorizedError) {
-      // error('Wrong username or password.')
+      error(t('authform_error.unauthorized'))
-      error('錯誤的帳號名稱或密碼。')
       return
     }
     if (err instanceof ValidationError) {
-      // error('Invalid username or password.')
+      error(err.message)
-      error('無效的帳號名稱或密碼。')
       return
     }
     console.error(err)
-    // error('Something went wrong.')
+    error(t('authform_error.auth_failed'))
-    error('出了點問題。')
   }
 }
 </script>
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <DynamicBackground class="w-full h-full" />
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
+      <HeaderPart />
       <div class="w-fit">
         <AuthForm @onSubmit="handleLogin" type="login" />
       </div>

app/src/views/QuestMapPage.vue

@@ -1,20 +1,21 @@
-<script setup>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import QuestMap from '../components/QuestMap.vue'
-import GameHeaderPart from '../components/GameHeaderPart.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
+import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
+
+const { t } = useI18n()
 </script>
 
 <template>
-  <div class="h-[6vh] w-full">
+  <div class="w-fit">
-    <GameHeaderPart title="關卡地圖" />
+    <HeaderPart
-    <!-- <p
+      :title="t('quest_map.title')"
-      class="text-text-primary absolute z-1 font-bold inline-block tracking-widest"
+      :headerComponent="GameHeaderComponents"
-      style="left: 1.2%; top: 1.5%; height: 100%; font-size: 2vh"
+      class="z-50"
-    >
+    />
-      Quest Map
-      Unix編年史
-    </p> -->
   </div>
-  <div class="flex flex-col justify-center items-center w-full h-[94vh]">
+  <div class="flex flex-col justify-center items-center w-full h-full pt-5">
     <QuestMap />
   </div>
 </template>

app/src/views/RegisterPage.vue

@@ -1,10 +1,11 @@
-<script setup>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import validator from 'validator'
-import { isValidUsername } from '@linux-odyssey/utils'
+import { isValidUsername } from '@odyssey/utils'
-import { passwordPolicy } from '@linux-odyssey/constants'
+import { passwordPolicy } from '@odyssey/constants'
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
-
+import HeaderPart from '../components/header/HeaderPart.vue'
 import { checkUsername, register } from '../utils/auth'
 import {
   UnauthorizedError,
@@ -12,18 +13,31 @@ import {
   ValidationError,
 } from '../utils/errors'
 
-function handleRegister({ username, email, password, success, error }) {
+const { t } = useI18n()
+
+function handleRegister({
+  username,
+  email,
+  password,
+  success,
+  error,
+}: {
+  username: string
+  email: string
+  password: string
+  success: () => void
+  // eslint-disable-next-line no-unused-vars
+  error: (msg: string) => void
+}) {
   register(username, email, password)
     .then(success)
     .catch((err) => {
       if (err instanceof TooManyRequestsError) {
-        // error('Too many requests. Try again in 2 minutes.')
+        error(t('authform_error.too_many_requests'))
-        error('太多請求，兩分鐘後再試一次。')
         return
       }
       if (err instanceof UnauthorizedError) {
-        // error('Invalid username or password.')
+        error(t('authform_error.unauthorized'))
-        error('無效的帳號名稱或密碼。')
         return
       }
       if (err instanceof ValidationError) {
@@ -31,27 +45,32 @@ function handleRegister({ username, email, password, success, error }) {
         return
       }
       console.error(err)
-      // error('Something went wrong.')
+      error(t('authform_error.auth_failed'))
-      error('出了點問題。')
     })
 }
 
-async function check({ username, email, password, error }) {
+async function check({
+  username,
+  email,
+  password,
+  error,
+}: {
+  username: string
+  email: string
+  password: string
+  // eslint-disable-next-line no-unused-vars
+  error: (msg: string) => void
+}) {
   if (username && !isValidUsername(username)) {
-    // error('Invalid username.')
+    error(t('authform_error.invalid_username'))
-    error('無效的帳號名稱')
     return
   }
   if (email && !validator.isEmail(email)) {
-    // error('Invalid email.')
+    error(t('authform_error.invalid_email'))
-    error('無效的電子郵件')
     return
   }
   if (password && !validator.isStrongPassword(password, passwordPolicy)) {
-    // error(
+    error(t('authform_error.invalid_password'))
-    //   'Your password must be 8+ characters with at least one number, one upper and one lower case letter.'
-    // )
-    error('密碼必須超過8個字元，至少包含一個數字、一個大寫及一個小寫。')
     return
   }
   try {
@@ -62,24 +81,23 @@ async function check({ username, email, password, error }) {
       return
     }
     if (err instanceof TooManyRequestsError) {
-      // error('Too many requests. Try again in 2 minutes.')
+      error(t('authform_error.too_many_requests'))
-      error('太多請求，兩分鐘後再試一次。')
       return
     }
     console.error(err)
-    // error('Something went wrong.')
+    error(t('authform_error.auth_failed'))
-    error('出了點問題。')
   }
 }
 </script>
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <DynamicBackground class="w-full h-full" />
     <div
       class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
-      <div class="w-fit">
+      <HeaderPart />
+      <div class="w-fit mt-8">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"

app/tailwind.config.ts

@@ -24,6 +24,9 @@ export default {
           DEFAULT: '#FF0000',
         },
       },
+      backgroundImage: {
+        catelogbg: "url('/catelogbg.svg')",
+      },
     },
   },
   plugins: [],

app/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

app/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

app/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

app/vite.config.ts

@@ -5,7 +5,13 @@ import vue from '@vitejs/plugin-vue'
 export default defineConfig({
   plugins: [vue()],
   server: {
+    host: '0.0.0.0',
     proxy: {
+      '/trpc': {
+        target: process.env.API_TARGET || 'http://localhost:3000',
+        changeOrigin: false,
+        xfwd: true,
+      },
       '/api': {
         target: process.env.API_TARGET || 'http://localhost:3000',
         changeOrigin: false,

bunfig.toml

@@ -0,0 +1,3 @@
+[test]
+coverage = true
+coverageDir = "coverage"

deployment/nginx.conf

@@ -1,27 +1,10 @@
 server {
     listen       80;
+    error_log /var/log/nginx/error.log debug;
 
     location / {
         root   /usr/share/nginx/html;
         index  index.html;
         try_files $uri $uri/ /index.html;
     }
-
-    location /api/ {
-        proxy_pass http://backend:3000;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    }
-
-    location /api-docs/ {
-        proxy_pass http://backend:3000;
-    }
-
-    location /socket.io/ {
-        proxy_pass http://backend:3000;
-        proxy_http_version 1.1;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection "upgrade";
-        proxy_set_header Host $host;
-    }
 }

docker-compose.prod.yml

@@ -1,7 +1,24 @@
-version: '3'
 services:
+  traefik:
+    image: traefik:v3.6.9
+    restart: always
+    ports:
+      - 8000:8000
+      - 8080:8080
+    networks:
+      - players
+      - internal
+    command:
+      - '--api.insecure=true'
+      - '--providers.docker=true'
+      - '--providers.docker.exposedbydefault=false'
+      - '--entrypoints.web.address=:8000'
+      - '--entrypoints.web.forwardedHeaders.insecure=true' # trust all X-Forwarded headers
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+
   app:
-    image: linuxodyssey/frontend
+    image: linuxodyssey/frontend:${IMAGE_TAG:-latest}
     depends_on:
       - backend
     restart: always
@@ -10,12 +27,16 @@ services:
       dockerfile: app/Dockerfile
       target: prod
     networks:
-      internal:
+      - internal
-    ports:
+    labels:
-      - 8080:80
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.app.entrypoints=web'
+      - 'traefik.http.routers.app.rule=PathPrefix(`/`)'
+      - 'traefik.http.routers.app.service=app'
+      - 'traefik.http.services.app.loadbalancer.server.port=80'
 
   backend:
-    image: linuxodyssey/backend
+    image: linuxodyssey/backend:${IMAGE_TAG:-latest}
     depends_on:
       - db
     restart: always
@@ -29,19 +50,35 @@ services:
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
       - ./logs:/app/logs
+      - ./config:/app/config
+      - ./quests:/app/quests:ro
     env_file:
-      - .env
+      - .env.prod
     environment:
-      - MONGO_URL=mongodb://${MONGO_USER}:${MONGO_PASSWORD}@db:27017/${MONGO_DB}
       - DOCKER_NETWORK=linux-odyssey-players
-      - SECRET_KEY=${SECRET_KEY}
+      - BACKEND_URL=http://backend:3000
-      - TRUSTED_PROXIES=${TRUSTED_PROXIES}
+      - HOST_PROJECT_ROOT=${PWD}
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.backend-api.entrypoints=web'
+      - 'traefik.http.routers.backend-api.rule=PathPrefix(`/api`)'
+      - 'traefik.http.routers.backend-api.service=backend'
+      - 'traefik.http.routers.backend-socket.entrypoints=web'
+      - 'traefik.http.routers.backend-socket.rule=PathPrefix(`/socket.io`)'
+      - 'traefik.http.routers.backend-socket.service=backend'
+      - 'traefik.http.routers.backend-trpc.entrypoints=web'
+      - 'traefik.http.routers.backend-trpc.rule=PathPrefix(`/trpc`)'
+      - 'traefik.http.routers.backend-trpc.service=backend'
+      - 'traefik.http.routers.backend-api-docs.entrypoints=web'
+      - 'traefik.http.routers.backend-api-docs.rule=PathPrefix(`/api-docs`)'
+      - 'traefik.http.routers.backend-api-docs.service=backend'
+      - 'traefik.http.services.backend.loadbalancer.server.port=3000'
 
   analytics:
-    image: linuxodyssey/analytics
+    image: linuxodyssey/analytics:${IMAGE_TAG:-latest}
     build:
       context: .
-      dockerfile: packages/analytics/Dockerfile
+      dockerfile: services/analytics/Dockerfile
       target: prod
     restart: always
     depends_on:
@@ -50,13 +87,11 @@ services:
       - internal
     ports:
       - '3001:3001'
-    environment:
+    env_file:
-      - MONGO_URL=mongodb://${MONGO_USER}:${MONGO_PASSWORD}@db:27017/${MONGO_DB}
+      - .env.prod
-      - ADMIN_USERNAME=${ADMIN_USERNAME}
-      - ADMIN_PASSWORD=${ADMIN_PASSWORD}
 
   db:
-    image: mongo
+    image: mongo:6
     restart: always
     networks:
       - internal
@@ -65,22 +100,11 @@ services:
     volumes:
       - mongo:/data/db
       - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
-    environment:
+    env_file:
-      - BASE_URL=${BASE_URL}
+      - .env.prod
-      - MONGO_INITDB_ROOT_USERNAME=admin
-      - MONGO_INITDB_ROOT_PASSWORD=${MONGO_ROOT_PASSWORD}
-      - MONGO_USER=${MONGO_USER}
-      - MONGO_PASS=${MONGO_PASSWORD}
-      - MONGO_DB=${MONGO_DB}
-      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
-      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
-      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
-      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
-      - SURVEY_URL=${SURVEY_URL}
-      - BUG_REPORT_URL=${BUG_REPORT_URL}
 
   base:
-    image: linuxodyssey/quest-base
+    image: linuxodyssey/quest-base:${IMAGE_TAG:-latest}
     build:
       context: .
       dockerfile: ./quests/Dockerfile

docker-compose.testing.yml

@@ -12,6 +12,7 @@ services:
       - BASE_URL=http://app-test
       - TESTING_USERNAME=alex
       - TESTING_PASSWORD=Alex1234
+      # - DEBUG=cypress:*
     depends_on:
       - app-test
 
@@ -23,8 +24,9 @@ services:
       target: prod
     networks:
       internal:
-    ports:
+    # Only open the port for debugging
-      - 5173:80
+    # ports:
+    #   - 5173:80
     depends_on:
       - backend
 
@@ -43,7 +45,7 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock
       - ./logs:/app/logs
     environment:
-      - BASE_URL=http://localhost:5173
+      - BASE_URL=http://app-test
       - MONGO_URL=mongodb://user:user-password@db-test:27017/odyssey-test
       - DOCKER_NETWORK=linux-odyssey-players
       - SECRET_KEY=b1d2e917-17b9-4fce-9055-082dee6ec5d6 # Only for testing
@@ -57,6 +59,7 @@ services:
       - TESTING=true
       - TESTING_USERNAME=alex
       - TESTING_PASSWORD=Alex1234
+      - BACKEND_URL=http://backend:3000
 
   db-test:
     image: mongo
@@ -70,8 +73,8 @@ services:
       - MONGO_USER=user
       - MONGO_PASS=user-password
       - MONGO_DB=odyssey-test
-    ports:
+  #    ports:
-      - 27017:27017
+  #      - 27017:27017
 
   base:
     image: linuxodyssey/quest-base

docker-compose.yml

@@ -1,78 +1,26 @@
-version: '3'
 services:
-  app:
+  traefik:
-    depends_on:
+    image: traefik:v3.6.9
-      - backend
-    build:
-      context: .
-      dockerfile: app/Dockerfile
-      target: dev
-    ports:
-      - 5173:5173
     networks:
-      - internal
+      - players-dev
-    volumes:
+    command:
-      - ./app:/app/app
+      - '--api.insecure=true'
-      - ./packages:/app/packages
+      - '--providers.docker=true'
-
+      - '--providers.docker.exposedbydefault=false'
-  backend:
+      - '--providers.file.directory=/etc/traefik/conf'
-    depends_on:
+      - '--providers.file.watch=true'
-      - db
+      - '--entrypoints.web.address=:8000'
-    build:
-      context: .
-      dockerfile: server/Dockerfile
-      target: dev
-    networks:
-      - internal
-      - players
     ports:
-      - '3000:3000'
+      - '8000:8000'
+      - '8080:8080'
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
+      - /var/run/docker.sock:/var/run/docker.sock:ro
-      - ./server/src:/app/server/src
+      - ./traefik/conf:/etc/traefik/conf
-      - ./server/swagger.yaml:/app/server/swagger.yaml
-      - ./packages:/app/packages
-      - ./quests:/app/quests
-      - ./logs:/app/logs
-    environment:
-      - BASE_URL=http://localhost:5173
-      - MONGO_URL=mongodb://db:27017/odyssey-test
-      - DOCKER_NETWORK=linux-odyssey-players
-      - SECRET_KEY=b1d2e917-17b9-4fce-9055-082dee6ec5d6 # Only for testing
-      - TRUSTED_PROXIES=${TRUSTED_PROXIES}
-      - SURVEY_URL=${SURVEY_URL}
-      - BUG_REPORT_URL=${BUG_REPORT_URL}
-      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
-      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
-      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
-      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
-      - TESTING=true
-      - TESTING_USERNAME=alex
-      - TESTING_PASSWORD=Alex1234
-      - HOST_PWD=${PWD}
-      - MOUNT_QUEST=${MOUNT_QUEST}
-
-  analytics:
-    build:
-      context: .
-      dockerfile: packages/analytics/Dockerfile
-      target: dev
-    depends_on:
-      - db
-    networks:
-      - internal
-    ports:
-      - '3001:3001'
-    environment:
-      - MONGO_URL=mongodb://db:27017/odyssey-test
-      - ADMIN_USERNAME=alex
-      - ADMIN_PASSWORD=Alex1234
-    volumes:
-      - ./packages/analytics:/app/packages/analytics
-      - ./packages/models:/app/packages/models
 
   db:
-    image: mongo
+    image: mongo:6
     networks:
       - internal
     ports:
@@ -82,12 +30,23 @@ services:
 
   base:
     image: linuxodyssey/quest-base
+    networks:
+      - players-dev
     build:
       context: .
       dockerfile: ./quests/Dockerfile
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+    labels:
+      - 'traefik.enable=true'
+      - 'traefik.http.routers.base.rule=PathPrefix(`/terminal/base`)'
+      - 'traefik.http.middlewares.base-stripprefix.stripprefix.prefixes=/terminal/base'
+      - 'traefik.http.routers.base.middlewares=base-stripprefix'
+      - 'traefik.http.routers.base.entrypoints=web'
+      - 'traefik.http.services.base.loadbalancer.server.port=9090'
 
 networks:
   internal:
-  players:
+  players-dev:
-    name: linux-odyssey-players
+    name: linux-odyssey-players-dev
-    internal: true
+    internal: false

docker-scripts.sh

@@ -29,4 +29,39 @@ down() {
   docker compose -f docker-compose.testing.yml down
 }
 
+dump() {
+  # Define service name and dump directory name
+  SERVICE_NAME="db"
+  COMPOSE_FILE="docker-compose.prod.yml"
+  DUMP_NAME="mongodump-$(date --iso).archive"
+  CONTAINER_ID=$(docker compose -f $COMPOSE_FILE ps -q $SERVICE_NAME)
+
+  # Fetch credentials from Docker environment variables
+  MONGO_URL=$(docker compose -f $COMPOSE_FILE exec -T backend printenv MONGO_URL)
+  echo mongo uri: $MONGO_URL
+
+  # Dump MongoDB data using credentials
+  docker compose -f $COMPOSE_FILE exec -T $SERVICE_NAME sh -c "mongodump --gzip --archive=/tmp/$DUMP_NAME --uri=$MONGO_URL" &&
+
+  # Copy the dump from the container to the host
+  # Note: You will need to know the exact container name for this step
+  docker cp ${CONTAINER_ID}:/tmp/$DUMP_NAME . &&
+
+  echo "MongoDB data dumped successfully."
+}
+
+restore() {
+  # Define service name and dump directory name
+  SERVICE_NAME="db"
+  DUMP_NAME=$1
+  CONTAINER_ID=$(docker compose ps -q $SERVICE_NAME)
+
+  # Copy the dump from the host to the container
+  docker cp $DUMP_NAME ${CONTAINER_ID}:/tmp &&
+
+  # Dump MongoDB data using credentials
+  docker compose exec -T $SERVICE_NAME sh -c "mongorestore --gzip --archive=/tmp/$DUMP_NAME" &&
+
+  echo "MongoDB data dumped successfully."
+}
 $@

docs/windows-setup.md

@@ -0,0 +1,192 @@
+# Windows Environment Setup
+
+## 1. Install WSL and Ubuntu
+
+Refer to Microsoft’s official [WSL installation guide](https://learn.microsoft.com/en-us/windows/wsl/install).
+
+Open PowerShell as Administrator and run:
+
+```powershell
+wsl --install
+```
+
+Restart your computer after the installation finishes.
+
+Open Ubuntu from the Start menu. The first time Ubuntu starts, it will ask you to create a Linux username and password.
+
+Verify that Ubuntu is using WSL 2 by running this command in PowerShell:
+
+```powershell
+wsl --update
+wsl --list --verbose
+```
+
+Ubuntu should show `2` in the `VERSION` column.
+
+If it is using WSL 1, run:
+
+```powershell
+wsl --set-version Ubuntu 2
+```
+
+## 2. Install Docker Desktop
+
+Install [Docker Desktop for Windows](https://docs.docker.com/desktop/setup/install/windows-install/).
+
+Start Docker Desktop after installation.
+
+Docker Desktop normally uses the WSL 2 engine automatically. If the `Use the WSL 2 based engine` option appears under `Settings > General`, ensure it is enabled.
+
+Go to:
+
+```text
+Settings > Resources > WSL Integration
+```
+
+Enable integration with your Ubuntu distribution, then select **Apply & restart**.
+
+If the WSL Integration section is unavailable, ensure Docker Desktop is using Linux containers.
+
+> [!IMPORTANT]
+> Do not separately install Docker Engine inside Ubuntu when using Docker Desktop. Having both installations may cause conflicts.
+
+Open the Ubuntu terminal and verify that Docker is available:
+
+```bash
+docker --version
+docker compose version
+docker run --rm hello-world
+```
+
+## 3. Set Up the Ubuntu Environment
+
+Run the following commands in the Ubuntu terminal.
+
+### Update the Package List
+
+```bash
+sudo apt update
+```
+
+### Install the Required Tools
+
+```bash
+sudo apt install -y git curl ca-certificates build-essential
+```
+
+### Install Bun
+
+```bash
+curl -fsSL https://bun.sh/install | bash
+```
+
+Restart your terminal (or run `source ~/.bashrc`) so `bun` is on your `PATH`.
+
+Verify the installations:
+
+```bash
+git --version
+node --version
+bun --version
+```
+
+The Node.js version should be `20.x` or later, and the Bun version should be `1.3` or later.
+
+## 4. Clone the Project
+
+> [!WARNING]
+> Clone the repository into the WSL Linux filesystem, such as `~/projects`. Do not place it on a Windows-mounted drive such as `/mnt/c/...` or `/mnt/d/...`. The project uses a bind mount for MongoDB data, and Windows-mounted directories may cause permission and filesystem compatibility problems.
+
+Create and enter a project directory:
+
+```bash
+mkdir -p <path-to-projects-directory>
+cd <path-to-projects-directory>
+```
+
+Clone the repository:
+
+```bash
+git clone https://github.com/linux-odyssey/linux-odyssey.git
+cd linux-odyssey
+```
+
+### Optional: Open the Project in VS Code
+
+Install [Visual Studio Code](https://code.visualstudio.com/) and the **WSL** extension first. Then run:
+
+```bash
+code .
+```
+
+## 5. Install Project Dependencies
+
+From the project root, run:
+
+```bash
+bun install
+```
+
+Warnings during installation may be harmless. The installation succeeded if Bun finishes with an `installed` message and does not display an `error:` message.
+
+If a `gyp` error appears, confirm that it belongs to an optional dependency before ignoring it.
+
+## 6. Create the Environment File
+
+Copy the sample environment file:
+
+```bash
+cp .env.sample .env
+```
+
+Confirm that the file exists:
+
+```bash
+ls -la .env
+```
+
+The default values are suitable for local development. Do not use the sample secret key in a production environment.
+
+## 7. Start the Docker Services
+
+Ensure Docker Desktop is running, then execute:
+
+```bash
+docker compose pull
+docker compose build
+docker compose up -d
+```
+
+Check that the containers are running:
+
+```bash
+docker compose ps
+```
+
+To stop the Docker services later:
+
+```bash
+docker compose down
+```
+
+## 8. Run the Project
+
+Start the frontend and backend development servers:
+
+```bash
+bun run dev
+```
+
+Keep the terminal running and open the following address in your browser:
+
+[http://localhost:8000](http://localhost:8000)
+
+To stop the development servers, press `Ctrl+C`.
+
+### Optional: Verify the Production Build
+
+You can verify that the project builds successfully by running:
+
+```bash
+bun run build
+```

example.env

@@ -1,5 +0,0 @@
-BASE_URL=https://example.com
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-GITHUB_CLIENT_ID=
-GITNUB_CLIENT_SECRET=