Merge pull request #2 from JBB0807/feature/gameboard-yoshi

added gameboard
2025-04-22 12:02:41 -07:00 · 2025-04-22 12:02:41 -07:00 · 4ccc534f3d
commit 4ccc534f3d
parent 578e57ad7a fa36efa455
68 changed files with 7818 additions and 2 deletions
--- a/gameboard-service/.devcontainer/devcontainer.json
+++ b/gameboard-service/.devcontainer/devcontainer.json
@ -0,0 +1,19 @@
+{
+  "name": "board.battlesnake.local",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
+  "postCreateCommand": "npm install",
+  "forwardPorts": [3005],
+  "customizations": {
+    "vscode": {
+      "extensions": ["svelte.svelte-vscode", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
+      "settings": {
+        "editor.tabSize": 2,
+        "editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "eslint.validate": ["javascript", "svelte", "typescript"],
+        "prettier.requireConfig": true,
+        "svelte.enable-ts-plugin": true
+      }
+    }
+  }
+}
--- a/gameboard-service/.eslintignore
+++ b/gameboard-service/.eslintignore
@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
--- a/gameboard-service/.eslintrc
+++ b/gameboard-service/.eslintrc
@ -0,0 +1,33 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:svelte/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2020,
+    "extraFileExtensions": [".svelte"]
+  },
+  "env": {
+    "browser": true,
+    "es2017": true,
+    "node": true
+  },
+  "overrides": [
+    {
+      "files": ["*.svelte"],
+      "parser": "svelte-eslint-parser",
+      "parserOptions": {
+        "parser": "@typescript-eslint/parser"
+      }
+    }
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
+  }
+}
--- a/gameboard-service/.github/workflows/release.yaml
+++ b/gameboard-service/.github/workflows/release.yaml
@ -0,0 +1,29 @@
+name: Release
+
+on:
+  release:
+    types: [published]
+    branches: [main]
+
+jobs:
+  tests:
+    name: Tests
+    uses: ./.github/workflows/tests.yaml
+
+  deploy:
+    name: netlify deploy
+    needs: [tests]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: echo ${{ github.event.release.tag_name }} > ./static/version
+      - run: npm ci
+      - run: npm install -g netlify-cli
+      - run: netlify build
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+      - run: netlify deploy --prod --message ${{ github.event.release.tag_name }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
--- a/gameboard-service/.github/workflows/tests.yaml
+++ b/gameboard-service/.github/workflows/tests.yaml
@ -0,0 +1,43 @@
+name: Tests
+
+on:
+  push: # Branch pushes only, not tags
+    branches:
+      - "**"
+  workflow_call: # Allow other workflows to call this one
+
+jobs:
+  lint:
+    name: npm run lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: npm run lint
+
+  check:
+    name: npm run check
+    needs: [lint]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: npm run check
+
+  unit:
+    name: npm run test:unit
+    needs: [check]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: npm run test:unit
+
+  build:
+    name: npm run build
+    needs: [check]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: npm run build
--- a/gameboard-service/.gitignore
+++ b/gameboard-service/.gitignore
@ -0,0 +1,22 @@
+# General
+.DS_Store
+.vscode
+
+# Node
+node_modules
+
+# SvelteKit
+.output
+.svelte-kit
+/build
+/package
+
+.env
+.env.*
+!.env.example
+
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Netlify
+.netlify
--- a/gameboard-service/.node-version
+++ b/gameboard-service/.node-version
@ -0,0 +1 @@
+18.17.1
--- a/gameboard-service/.npmrc
+++ b/gameboard-service/.npmrc
@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest
--- a/gameboard-service/.prettierignore
+++ b/gameboard-service/.prettierignore
@ -0,0 +1,15 @@
+.DS_Store
+node_modules
+
+/.svelte-kit
+/build
+/package
+
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
--- a/gameboard-service/.prettierrc
+++ b/gameboard-service/.prettierrc
@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "trailingComma": "none",
+  "useTabs": false,
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/gameboard-service/CODE-OF-CONDUCT.md
+++ b/gameboard-service/CODE-OF-CONDUCT.md
@ -0,0 +1,3 @@
+# Battlesnake Code of Conduct
+
+Please see https://docs.battlesnake.com/policies/conduct
--- a/gameboard-service/CONTRIBUTING.md
+++ b/gameboard-service/CONTRIBUTING.md
@ -0,0 +1,8 @@
+# Contributing
+
+We welcome contributions from the community!
+
+Please see https://docs.battlesnake.com/community/contributing
+
+We track all issues/discussions for all our open source repos at https://github.com/BattlesnakeOfficial/feedback/discussions
+Any item tagged with "flag/help-wanted ✋" is a great place to start, as it highlights any issues where we'd love to get some help!
--- a/gameboard-service/LICENSE
+++ b/gameboard-service/LICENSE
@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<http://www.gnu.org/licenses/>.
--- a/gameboard-service/README.md
+++ b/gameboard-service/README.md
@ -0,0 +1,102 @@
+# Battlesnake Game Board
+
+![Test Status](https://github.com/BattlesnakeOfficial/board/actions/workflows/test.yaml/badge.svg) ![Release Status](https://github.com/BattlesnakeOfficial/board/actions/workflows/release.yaml/badge.svg)
+
+The board project is used to visualize and replay Battlesnake games on [play.battlesnake.com](https://play.battlesnake.com/), as well as live streams and competitions. It uses SvelteKit to orchestrate playback and renders the board with dynamic SVGs.
+
+## Development Server
+
+We recommend using a [VSCode Devcontainer](https://code.visualstudio.com/docs/devcontainers/containers) or [GitHub Codespaces](https://github.com/features/codespaces) for development.
+
+Commands to start dev server:
+
+```sh
+npm install
+npm run dev
+```
+
+## Required Parameters
+
+A valid `game` ID is required to be passed as a URL parameter. For example:
+`http://127.0.0.1/?game=ASDF-1234-QWER-6789`.
+
+## Playback Settings
+
+Playback settings are used to control playback speed, visual theme, media controls, etc. Some settings are persisted in local storage, and all settings can be overridden using URL parameters.
+
+See [lib/settings](src/lib/settings) for more details.
+
+### Persisted Settings
+
+These values are configurable in the UI and persisted in local storage. They can also be overridden using URL parameters.
+
+- `autoplay: boolean` - Start playback as soon as game is loaded. Defaults to false.
+- `fps: number` - Playback speed, defined in 'frames per second'. Defaults to 6.
+- `showCoords: boolean` - Display coordinates on game board. Defaults to false.
+- `theme: string` - Display theme. Defaults to 'system'.
+
+### Other Settings
+
+These values can be set with URL parameters and are not persisted between games.
+
+- `engine: string` - Stream game data from an alternate game engine.
+- `loop: boolean` - Loops playback when game is finished. Defaults to false.
+- `showControls: boolean` - Displays playback controls under the game board. Defaults to true.
+- `showScoreboard: boolean` - Displays scoreboard to right of game board. Defaults to true.
+- `title: string` - Display a title above the board. Defaults to empty string.
+- `turn: int` - Start playback on a specific turn. Defaults to 0.
+
+## Tests & Linting
+
+Formatting is enforced with prettier, and linting is enforced with eslint.
+
+Playwright is included in the repo but not yet in use.
+
+## Usage
+
+The board project is intended to be embedded into other webpages using an `<iframe>`. For example:
+
+```html
+<iframe scrolling="no" style="width:1280px" src="https://board.battlesnake.com/?game=1234"></iframe>
+```
+
+If you want specific settings to be used, add their values to the src URL as additional parameters.
+
+### Sizing
+
+It's expected that the iframe element will have a width and height of 100%, and be contained by a parent with a fixed width. Board will react to the width of the container and size accordingly, with a maximum width of 1280px and a perferred aspect ratio of 16x9 on larger screens.
+
+If you know you're viewing on a larger screen, you can safely set the aspect ratio to 16x9, or fix both dimensions.
+
+```html
+<div style="width: 1280px; aspect-ratio: 16 / 9;">
+    <iframe style="width: 100%;height: 100%" src="..."></frame>
+</div>
+```
+
+Otherwise you should listen for the posted 'RESIZE' message from the iframe to know what height the board has chosen to render (see below).
+
+### Cross-Origin Messages
+
+The board will post messages to the parent frame to signal major playback events, such a new frame being displayed and playback ending.
+
+These messages are useful for loading new games, triggering surrounding UI, and properly sizing the embedded iframe.
+
+Example code for listening to these messages:
+
+```javascript
+window.addEventListener("message", (e) => {
+  if (e.origin !== "https://board.battlesnake.com") {
+    return;
+  }
+  console.log(e.data);
+});
+```
+
+#### Messages
+
+`RESIZE`: Signals the board has drawn at a new size and includes sizing information. Useful for rendering a responsive iframe.
+
+`TURN`: Sent every time a new game state is displayed, and includes full game state information.
+
+`GAME_OVER`: Signals that playback has concluded and the final frame is being displayed.
--- a/gameboard-service/netlify.toml
+++ b/gameboard-service/netlify.toml
@ -0,0 +1,3 @@
+[build]
+    command = "npm run build"
+    publish = "build"
--- a/gameboard-service/package-lock.json
+++ b/gameboard-service/package-lock.json
--- a/gameboard-service/package.json
+++ b/gameboard-service/package.json
@ -0,0 +1,50 @@
+{
+  "name": "board",
+  "author": "BattlesnakeOfficial (https://play.battlesnake.com)",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev --host 0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "npm run test:unit && npm run test:integration",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest run"
+  },
+  "devDependencies": {
+    "@iconify-json/heroicons": "^1.1.11",
+    "@iconify-json/heroicons-solid": "^1.1.7",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.30.3",
+    "@tailwindcss/forms": "^0.5.4",
+    "@types/cookie": "^0.5.1",
+    "@types/mousetrap": "^1.6.11",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "mousetrap": "^1.6.5",
+    "postcss": "^8.4.31",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "reconnecting-websocket": "^4.4.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.3",
+    "tailwindcss": "^3.3.2",
+    "tippy.js": "^6.3.7",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "unplugin-icons": "^0.16.5",
+    "vite": "^4.5.3",
+    "vitest": "^0.32.2"
+  },
+  "type": "module"
+}
--- a/gameboard-service/playwright.config.ts
+++ b/gameboard-service/playwright.config.ts
@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: "npm run build && npm run preview",
+    port: 4173
+  },
+  testDir: "tests",
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
--- a/gameboard-service/postcss.config.js
+++ b/gameboard-service/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
--- a/gameboard-service/src/app.d.ts
+++ b/gameboard-service/src/app.d.ts
@ -0,0 +1,15 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+
+import "unplugin-icons/types/svelte";
+
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {};
--- a/gameboard-service/src/app.html
+++ b/gameboard-service/src/app.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" sizes="any" />
+    <!-- 32×32 -->
+    <link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
+    <!-- 180×180 -->
+
+    %sveltekit.head%
+  </head>
+
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
--- a/gameboard-service/src/lib/actions/keybind.ts
+++ b/gameboard-service/src/lib/actions/keybind.ts
@ -0,0 +1,26 @@
+import Mousestrap from "mousetrap";
+
+type Options = {
+  keys: string[];
+  f: () => void;
+};
+
+export function keybind(node: HTMLElement, options: Options) {
+  console.debug("[keybind] binding:", options.keys);
+
+  const mousetrap = new Mousestrap(document.documentElement);
+  mousetrap.bind(options.keys, () => {
+    console.debug("[keybind] handling:", options.keys);
+    options.f();
+
+    // Always prevent default behavior
+    return false;
+  });
+
+  return {
+    destroy() {
+      console.debug("[keybind] destorying:", options.keys);
+      mousetrap.reset();
+    }
+  };
+}
--- a/gameboard-service/src/lib/actions/resize.ts
+++ b/gameboard-service/src/lib/actions/resize.ts
@ -0,0 +1,20 @@
+type Options = {
+  f: (width: number, height: number) => void;
+};
+
+export function resize(node: HTMLElement, options: Options) {
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const w = entry.contentBoxSize[0].inlineSize;
+      const h = entry.contentBoxSize[0].blockSize;
+      options.f(w, h);
+    }
+  });
+  resizeObserver.observe(node);
+
+  return {
+    destroy() {
+      resizeObserver.unobserve(node);
+    }
+  };
+}
--- a/gameboard-service/src/lib/actions/tooltip.ts
+++ b/gameboard-service/src/lib/actions/tooltip.ts
@ -0,0 +1,20 @@
+import tippy from "tippy.js";
+
+type Options = {
+  templateId: string;
+  tippyProps: object;
+};
+
+export function tooltip(node: HTMLElement, options: Options) {
+  const props = {
+    ...options.tippyProps,
+    allowHTML: true,
+    content: document.getElementById(options.templateId)?.innerHTML.slice()
+  };
+
+  const tip = tippy(node, props);
+
+  return {
+    destroy: () => tip.destroy()
+  };
+}
--- a/gameboard-service/src/lib/components/Gameboard.svelte
+++ b/gameboard-service/src/lib/components/Gameboard.svelte
@ -0,0 +1,94 @@
+<script lang="ts">
+  import { playbackState } from "$lib/playback/stores";
+  import { highlightedSnakeID } from "$lib/highlight";
+  import type { SvgCalcParams } from "$lib/svg";
+
+  import SvgHazard from "./SvgHazard.svelte";
+  import SvgSnake from "./SvgSnake.svelte";
+  import SvgFood from "./SvgFood.svelte";
+  import SvgGrid from "./SvgGrid.svelte";
+
+  // Grid constants
+  const CELL_SIZE = 20;
+  const CELL_SIZE_HALF = CELL_SIZE / 2;
+  const CELL_SPACING = 4;
+  const GRID_BORDER = 10;
+
+  export let showCoordinates: boolean;
+
+  $: svgWidth = $playbackState
+    ? 2 * GRID_BORDER +
+      $playbackState.frame.width * CELL_SIZE +
+      Math.max($playbackState.frame.width - 1, 0) * CELL_SPACING
+    : 0;
+  $: svgHeight = $playbackState
+    ? 2 * GRID_BORDER +
+      $playbackState.frame.height * CELL_SIZE +
+      Math.max($playbackState.frame.height - 1, 0) * CELL_SPACING
+    : 0;
+
+  $: svgCalcParams = {
+    cellSize: CELL_SIZE,
+    cellSizeHalf: CELL_SIZE_HALF,
+    cellSpacing: CELL_SPACING,
+    gridBorder: GRID_BORDER,
+    height: svgHeight,
+    width: svgWidth
+  } as SvgCalcParams;
+</script>
+
+{#if $playbackState}
+  <svg class="gameboard flex-shrink" viewBox="0 0 {svgWidth} {svgHeight}">
+    <!-- Grid -->
+    <SvgGrid
+      gridWidth={$playbackState.frame.width}
+      gridHeight={$playbackState.frame.height}
+      showLabels={showCoordinates}
+      {svgCalcParams}
+    />
+
+    <!-- Snakes -->
+    {#if $highlightedSnakeID}
+      <!-- Draw non-highlighted snakes under the highlighted one -->
+      {#each $playbackState.frame.snakes as snake}
+        {#if snake.id !== $highlightedSnakeID}
+          <SvgSnake {snake} {svgCalcParams} opacity={0.1} />
+        {/if}
+      {/each}
+      {#each $playbackState.frame.snakes as snake}
+        {#if snake.id === $highlightedSnakeID}
+          <SvgSnake {snake} {svgCalcParams} />
+        {/if}
+      {/each}
+    {:else}
+      <!-- Draw eliminated snakes under the alive ones -->
+      {#each $playbackState.frame.snakes as snake}
+        {#if snake.isEliminated}
+          <SvgSnake {snake} {svgCalcParams} opacity={0.1} />
+        {/if}
+      {/each}
+      {#each $playbackState.frame.snakes as snake}
+        {#if !snake.isEliminated}
+          <SvgSnake {snake} {svgCalcParams} />
+        {/if}
+      {/each}
+    {/if}
+
+    <!-- Hazards -->
+    {#each $playbackState.frame.hazards as hazard, i}
+      <SvgHazard point={hazard} key={`${i}`} {svgCalcParams} />
+    {/each}
+
+    <!-- Food -->
+    {#each $playbackState.frame.food as food, i}
+      <SvgFood point={food} key={`${i}`} {svgCalcParams} />
+    {/each}
+  </svg>
+{/if}
+
+<style lang="postcss">
+  /* Add a minimal drop shadow to food and snakes */
+  :global(svg.gameboard .food, svg.gameboard .snake) {
+    filter: drop-shadow(0.1em 0.1em 0.05em rgba(0, 0, 0, 0.3));
+  }
+</style>
--- a/gameboard-service/src/lib/components/PlaybackControls.svelte
+++ b/gameboard-service/src/lib/components/PlaybackControls.svelte
@ -0,0 +1,55 @@
+<script lang="ts">
+  import { playbackState } from "$lib/playback/stores";
+  import { PlaybackMode } from "$lib/playback/types";
+
+  import IconPlay from "~icons/heroicons/play-solid";
+  import IconPause from "~icons/heroicons/pause-solid";
+  import IconNext from "~icons/heroicons/chevron-right-solid";
+  import IconPrev from "~icons/heroicons/chevron-left-solid";
+  import IconFirst from "~icons/heroicons/chevron-double-left-solid";
+  import IconLast from "~icons/heroicons/chevron-double-right-solid";
+
+  $: disableDuringPlayback = $playbackState ? $playbackState.mode == PlaybackMode.PLAYING : false;
+</script>
+
+{#if $playbackState}
+  <div>
+    <button
+      class="mx-2 disabled:text-neutral-400"
+      on:click={playbackState.controls.firstFrame}
+      disabled={disableDuringPlayback}
+    >
+      <IconFirst />
+    </button>
+    <button
+      class="mx-2 disabled:text-neutral-400"
+      on:click={playbackState.controls.prevFrame}
+      disabled={disableDuringPlayback}
+    >
+      <IconPrev />
+    </button>
+    {#if $playbackState.mode == PlaybackMode.PLAYING}
+      <button class="mx-2" on:click={playbackState.controls.pause}>
+        <IconPause />
+      </button>
+    {:else if $playbackState.mode == PlaybackMode.PAUSED}
+      <button class="mx-2" on:click={playbackState.controls.play}>
+        <IconPlay />
+      </button>
+    {/if}
+    <button
+      class="mx-2 disabled:text-neutral-400"
+      on:click={playbackState.controls.nextFrame}
+      disabled={disableDuringPlayback}
+    >
+      <IconNext />
+    </button>
+    <button
+      class="mx-2 disabled:text-neutral-400"
+      on:click={playbackState.controls.lastFrame}
+      disabled={disableDuringPlayback}
+    >
+      <IconLast />
+    </button>
+  </div>
+{/if}
--- a/gameboard-service/src/lib/components/Scoreboard.svelte
+++ b/gameboard-service/src/lib/components/Scoreboard.svelte
@ -0,0 +1,112 @@
+<script lang="ts">
+  import { highlightedSnakeID } from "$lib/highlight";
+  import { playbackState } from "$lib/playback/stores";
+  import type { Elimination } from "$lib/playback/types";
+
+  // We sort snakes by elimination state, then lowercase name alphabetical
+  $: sortedSnakes = $playbackState
+    ? [...$playbackState.frame.snakes].sort((a, b) => {
+        if (a.isEliminated != b.isEliminated) {
+          return a.isEliminated ? 1 : -1;
+        }
+        return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+      })
+    : [];
+
+  function snakeIdToName(id: string) {
+    if ($playbackState) {
+      for (let i = 0; i < $playbackState.frame.snakes.length; i++) {
+        if ($playbackState.frame.snakes[i].id == id) {
+          return $playbackState.frame.snakes[i].name;
+        }
+      }
+    }
+    return "UNKNOWN";
+  }
+
+  function eliminationToString(elimination: Elimination) {
+    // See https://github.com/BattlesnakeOfficial/rules/blob/master/standard.go
+    switch (elimination.cause) {
+      case "snake-collision":
+        return `Collided with body of ${snakeIdToName(elimination.by)} on Turn ${elimination.turn}`;
+      case "snake-self-collision":
+        return `Collided with itself on Turn ${elimination.turn}`;
+      case "out-of-health":
+        return `Ran out of health on Turn ${elimination.turn}`;
+      case "hazard":
+        return `Eliminated by hazard on Turn ${elimination.turn}`;
+      case "head-collision":
+        return `Lost head-to-head with ${snakeIdToName(elimination.by)} on Turn ${
+          elimination.turn
+        }`;
+      case "wall-collision":
+        return `Moved out of bounds on Turn ${elimination.turn}`;
+      default:
+        return elimination.cause;
+    }
+  }
+
+  function highlightSnake(id: string) {
+    if ($highlightedSnakeID == id) {
+      $highlightedSnakeID = null;
+    } else {
+      $highlightedSnakeID = id;
+    }
+  }
+</script>
+
+{#if $playbackState}
+  <div class="flex flex-row font-bold text-lg">
+    <div class="basis-1/2 text-right">TURN</div>
+    <div class="basis-1/2 pl-2">{$playbackState.frame.turn}</div>
+  </div>
+
+  {#each sortedSnakes as snake}
+    <div
+      class="p-2 cursor-pointer rounded-sm border-solid border-2 border-transparent hover:border-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-800"
+      class:eliminated={snake.isEliminated}
+      class:highlighted={snake.id == $highlightedSnakeID}
+      on:click={() => highlightSnake(snake.id)}
+      role="presentation"
+    >
+      <div class="flex flex-row font-bold">
+        <p class="grow truncate">{snake.name}</p>
+        <p class="ps-4 text-right">{snake.length}</p>
+      </div>
+      <div class="flex flex-row text-xs">
+        <p class="grow truncate">by {snake.author}</p>
+        <p class="text-right">{snake.latency ? `${snake.latency}ms` : ""}</p>
+      </div>
+
+      <div class="h-4 text-xs mt-1">
+        {#if snake.elimination}
+          <p>{eliminationToString(snake.elimination)}</p>
+        {:else}
+          <div class="text-outline w-full h-full rounded-full bg-neutral-200 dark:bg-neutral-800">
+            <div
+              class="transition-all h-full rounded-full text-white ps-2"
+              style="background: {snake.color}; width: {snake.health}%"
+            >
+              {snake.health}
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/each}
+{/if}
+
+<style lang="postcss">
+  .text-outline {
+    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
+  }
+  .eliminated {
+    @apply text-neutral-500;
+  }
+  .highlighted {
+    @apply border-pink-500 bg-neutral-200;
+  }
+  :global(html.dark .highlighted) {
+    @apply bg-neutral-800;
+  }
+</style>
--- a/gameboard-service/src/lib/components/Scrubber.svelte
+++ b/gameboard-service/src/lib/components/Scrubber.svelte
@ -0,0 +1,53 @@
+<script lang="ts">
+  import { playbackState } from "$lib/playback/stores";
+
+  // Range input properties
+  let min = 0;
+  let max = 10;
+  let step = 1;
+  let disabled = true;
+
+  // Scrubber value
+  let value = min;
+
+  // Enable the scrubber once the final frame is known
+  $: if (disabled && $playbackState && $playbackState.finalFrame) {
+    disabled = false;
+    max = $playbackState.finalFrame.turn;
+  }
+
+  // Update range value to reflect currently displayed frame
+  $: if (!disabled && $playbackState) {
+    value = $playbackState.frame.turn;
+  }
+
+  function onScrub(e: Event) {
+    // Jump to frame on scrub event. Note that we can't use
+    // the bound `value` here because it hasn't updated yet.
+    if (e.target) {
+      const frame = parseInt((e.target as HTMLInputElement).value);
+      playbackState?.controls.jumpToFrame(frame);
+    }
+  }
+
+  function onFocus(e: Event) {
+    // Prevent input from being focused (it messes with hotkeys)
+    if (e.target) {
+      (e.target as HTMLElement).blur();
+    }
+  }
+</script>
+
+{#if $playbackState}
+  <input
+    class="w-full cursor-pointer disabled:cursor-not-allowed"
+    type="range"
+    {min}
+    {max}
+    {step}
+    {disabled}
+    on:focus={onFocus}
+    on:input={onScrub}
+    bind:value
+  />
+{/if}
--- a/gameboard-service/src/lib/components/SvgFood.svelte
+++ b/gameboard-service/src/lib/components/SvgFood.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Point } from "$lib/playback/types";
+  import { type SvgCalcParams, svgCalcCellCircle } from "$lib/svg";
+
+  export let key: string;
+  export let point: Point;
+  export let svgCalcParams: SvgCalcParams;
+
+  $: circleProps = svgCalcCellCircle(svgCalcParams, point);
+  $: foodRadius = (svgCalcParams.cellSize / 3.25).toFixed(2);
+</script>
+
+<circle id={`food-${key}`} class="food fill-rose-500" r={foodRadius} {...circleProps} />
--- a/gameboard-service/src/lib/components/SvgGrid.svelte
+++ b/gameboard-service/src/lib/components/SvgGrid.svelte
@ -0,0 +1,47 @@
+<script lang="ts">
+  import {
+    type SvgCalcParams,
+    svgCalcCellRect,
+    svgCalcCellLabelBottom,
+    svgCalcCellLabelLeft
+  } from "$lib/svg";
+
+  export let gridWidth: number;
+  export let gridHeight: number;
+  export let showLabels: boolean;
+  export let svgCalcParams: SvgCalcParams;
+</script>
+
+<g>
+  {#each { length: gridWidth } as _, x}
+    {#each { length: gridHeight } as _, y}
+      <rect
+        id={`grid-${x}-${y}`}
+        class="grid fill-[#f1f1f1] dark:fill-[#393939]"
+        {...svgCalcCellRect(svgCalcParams, { x, y })}
+      />
+    {/each}
+  {/each}
+  {#if showLabels}
+    {#each { length: gridHeight } as _, x}
+      <text
+        class="coordinate-label text-[0.35rem] fill-neutral-500"
+        text-anchor="middle"
+        transform="translate(0, 2)"
+        {...svgCalcCellLabelBottom(svgCalcParams, { x: x, y: 0 })}
+      >
+        {x}
+      </text>
+    {/each}
+    {#each { length: gridHeight } as _, y}
+      <text
+        class="coordinate-label text-[0.35rem] fill-neutral-500"
+        text-anchor="middle"
+        transform="translate(0, 2)"
+        {...svgCalcCellLabelLeft(svgCalcParams, { x: 0, y: y })}
+      >
+        {y}
+      </text>
+    {/each}
+  {/if}
+</g>
--- a/gameboard-service/src/lib/components/SvgHazard.svelte
+++ b/gameboard-service/src/lib/components/SvgHazard.svelte
@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Point } from "$lib/playback/types";
+  import { type SvgCalcParams, svgCalcCellRect } from "$lib/svg";
+
+  export let key: string;
+  export let point: Point;
+  export let svgCalcParams: SvgCalcParams;
+
+  $: rectProps = svgCalcCellRect(svgCalcParams, point);
+</script>
+
+<rect id={`hazard-${key}`} class="hazard fill-black opacity-30" {...rectProps} />
--- a/gameboard-service/src/lib/components/SvgSnake.svelte
+++ b/gameboard-service/src/lib/components/SvgSnake.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snake } from "$lib/playback/types";
+  import type { SvgCalcParams } from "$lib/svg";
+
+  import SvgSnakeTail from "./SvgSnakeTail.svelte";
+  import SvgSnakeHead from "./SvgSnakeHead.svelte";
+  import SvgSnakeBody from "./SvgSnakeBody.svelte";
+
+  export let snake: Snake;
+  export let svgCalcParams: SvgCalcParams;
+  export let opacity = 1.0;
+</script>
+
+<g id={`snake-${snake.id}`} class="snake" style:opacity>
+  <SvgSnakeTail {svgCalcParams} {snake} />
+  <SvgSnakeBody {svgCalcParams} {snake} />
+  <SvgSnakeHead {svgCalcParams} {snake} />
+</g>
--- a/gameboard-service/src/lib/components/SvgSnakeBody.svelte
+++ b/gameboard-service/src/lib/components/SvgSnakeBody.svelte
@ -0,0 +1,246 @@
+<script lang="ts">
+  import type { Point, Snake } from "$lib/playback/types";
+  import {
+    type SvgCalcParams,
+    type SvgPoint,
+    type SvgCircleProps,
+    svgCalcCellCenter
+  } from "$lib/svg";
+  import { calcSourceWrapPosition, isAdjacentPoint, isEqualPoint } from "$lib/geometry";
+  type SvgPointWithCircleProps = SvgPoint & SvgCircleProps;
+
+  // Used to very slightly extend body segments to ensure overlap with head and tail
+  const OVERLAP = 0.1;
+
+  export let snake: Snake;
+  export let svgCalcParams: SvgCalcParams;
+
+  // Calculate the center points of a line that paths along snake.body
+  $: bodyPolylinesPoints = calcBodyPolylinesPoints(snake);
+  function calcBodyPolylinesPoints(snake: Snake): SvgPoint[][] {
+    // Make a copy of snake body and separate into head, tail, and body.
+    const body: Point[] = [...snake.body];
+    const head = body.shift() as Point;
+    const tail = body.pop() as Point;
+
+    // Ignore body parts that are stacked on the tail
+    // This ensures that the tail is always shown even when the snake has grown
+    for (let last = body.at(-1); isEqualPoint(last, tail); last = body.at(-1)) {
+      body.pop();
+    }
+
+    if (body.length == 0) {
+      // If we're drawing no body, but head and tail are different,
+      // they still need to be connected.
+      if (!isEqualPoint(head, tail)) {
+        const svgCenter = svgCalcCellCenter(svgCalcParams, head);
+        return [calcHeadToTailJoint(head, tail, svgCenter)];
+      }
+
+      return [[]];
+    }
+
+    return convertBodyToPolilines(body, head, tail);
+  }
+
+  function convertBodyToPolilines(body: Point[], head: Point, tail: Point): SvgPoint[][] {
+    const gapSize = svgCalcParams.cellSpacing + OVERLAP;
+
+    // Split wrapped body parts into separated segments
+    const bodySegments = splitBodySegments(body);
+
+    // Get the center point of each body square we're going to render
+    const bodySegmentsCenterPoints = bodySegments.map((segment) =>
+      segment.map(enrichSvgCellCenter)
+    );
+
+    // Extend each wrapped segment towards border
+    for (let i = 0; i < bodySegmentsCenterPoints.length; i++) {
+      // Extend each segment last point towards border
+      if (i < bodySegmentsCenterPoints.length - 1) {
+        const cur = bodySegmentsCenterPoints[i].at(-1) as SvgPointWithCircleProps;
+        const next = bodySegmentsCenterPoints[i + 1][0];
+        bodySegmentsCenterPoints[i].push(calcBorderJoint(cur, next));
+      }
+
+      // Extend segment's first point toward border portal
+      if (i > 0) {
+        const cur = bodySegmentsCenterPoints[i][0];
+        const prev = bodySegmentsCenterPoints[i - 1].at(-1) as Point;
+        bodySegmentsCenterPoints[i].unshift(calcBorderJoint(cur, prev));
+      }
+    }
+
+    // Extend first point towards head
+    const firstPoint = bodySegmentsCenterPoints[0][0];
+    if (isAdjacentPoint(head, firstPoint)) {
+      bodySegmentsCenterPoints[0].unshift(calcJoint(firstPoint, head, gapSize));
+    } else {
+      // Add head portal
+      bodySegmentsCenterPoints[0].unshift(calcBorderJoint(enrichSvgCellCenter(firstPoint), head));
+    }
+
+    // Extend last point towards tail
+    const lastPoint = bodySegmentsCenterPoints.at(-1)?.at(-1) as SvgPointWithCircleProps;
+    if (isAdjacentPoint(lastPoint, tail)) {
+      bodySegmentsCenterPoints.at(-1)?.push(calcJoint(lastPoint, tail, gapSize));
+    } else {
+      // Add tail portal
+      bodySegmentsCenterPoints.at(-1)?.push(calcBorderJoint(lastPoint, tail));
+    }
+
+    // Finally, return an array of SvgPoints to use for a polyline
+    return bodySegmentsCenterPoints.map((segment) =>
+      segment.map((obj) => ({ x: obj.cx, y: obj.cy }))
+    );
+  }
+
+  function splitBodySegments(body: Point[]): Point[][] {
+    if (body.length == 0) {
+      return [[]];
+    }
+
+    let prev = body[0];
+    const segments: Point[][] = [[prev]];
+
+    for (let i = 1; i < body.length; i++) {
+      const cur = body[i];
+
+      // Start new segment
+      if (!isAdjacentPoint(cur, prev)) {
+        segments.push([]);
+      }
+
+      segments.at(-1)?.push(cur);
+      prev = cur;
+    }
+    return segments;
+  }
+
+  function enrichSvgCellCenter(p: Point): SvgPointWithCircleProps {
+    const c = svgCalcCellCenter(svgCalcParams, p);
+    return {
+      cx: c.x,
+      cy: c.y,
+      ...p
+    };
+  }
+
+  function calcBorderJoint(src: SvgPointWithCircleProps, dst: Point): SvgPointWithCircleProps {
+    const border = calcSourceWrapPosition(src, dst);
+
+    return calcJoint(src, border);
+  }
+
+  function calcJoint(
+    src: SvgPointWithCircleProps,
+    dst: Point,
+    gapSize = 0
+  ): SvgPointWithCircleProps {
+    // Extend source point towards destination
+    if (dst.x > src.x) {
+      return {
+        ...src,
+        cx: src.cx + svgCalcParams.cellSizeHalf + gapSize,
+        cy: src.cy
+      };
+    } else if (dst.x < src.x) {
+      return {
+        ...src,
+        cx: src.cx - svgCalcParams.cellSizeHalf - gapSize,
+        cy: src.cy
+      };
+    } else if (dst.y > src.y) {
+      return {
+        ...src,
+        cx: src.cx,
+        cy: src.cy - svgCalcParams.cellSizeHalf - gapSize
+      };
+    } else if (dst.y < src.y) {
+      return {
+        ...src,
+        cx: src.cx,
+        cy: src.cy + svgCalcParams.cellSizeHalf + gapSize
+      };
+    }
+
+    // In error cases there could be duplicate point
+    throw new Error("Same point have no joint.");
+  }
+
+  function calcHeadToTailJoint(head: Point, tail: Point, svgCenter: Point): SvgPoint[] {
+    if (head.x > tail.x) {
+      return [
+        {
+          x: svgCenter.x - svgCalcParams.cellSizeHalf + OVERLAP,
+          y: svgCenter.y
+        },
+        {
+          x: svgCenter.x - svgCalcParams.cellSizeHalf - svgCalcParams.cellSpacing - OVERLAP,
+          y: svgCenter.y
+        }
+      ];
+    } else if (head.x < tail.x) {
+      return [
+        {
+          x: svgCenter.x + svgCalcParams.cellSizeHalf - OVERLAP,
+          y: svgCenter.y
+        },
+        {
+          x: svgCenter.x + svgCalcParams.cellSizeHalf + svgCalcParams.cellSpacing + OVERLAP,
+          y: svgCenter.y
+        }
+      ];
+    } else if (head.y > tail.y) {
+      return [
+        {
+          x: svgCenter.x,
+          y: svgCenter.y + svgCalcParams.cellSizeHalf - OVERLAP
+        },
+        {
+          x: svgCenter.x,
+          y: svgCenter.y + svgCalcParams.cellSizeHalf + svgCalcParams.cellSpacing + OVERLAP
+        }
+      ];
+    } else if (head.y < tail.y) {
+      return [
+        {
+          x: svgCenter.x,
+          y: svgCenter.y - svgCalcParams.cellSizeHalf + OVERLAP
+        },
+        {
+          x: svgCenter.x,
+          y: svgCenter.y - svgCalcParams.cellSizeHalf - svgCalcParams.cellSpacing - OVERLAP
+        }
+      ];
+    }
+
+    throw new Error("Head and tail is a same point.");
+  }
+
+  $: drawBody = bodyPolylinesPoints[0].length > 0;
+
+  $: bodyPolylinesProps = bodyPolylinesPoints.map(calcBodyPolylineProps);
+
+  function calcBodyPolylineProps(polylinePoints: SvgPoint[]) {
+    // Convert points into a string of the format "x1,y1 x2,y2, ...
+    const points = polylinePoints
+      .map((p) => {
+        return `${p.x},${p.y}`;
+      })
+      .join(" ");
+
+    return {
+      points,
+      "stroke-width": svgCalcParams.cellSize,
+      "stroke-linecap": "butt" as const,
+      "stroke-linejoin": "round" as const
+    };
+  }
+</script>
+
+{#if drawBody}
+  {#each bodyPolylinesProps as polylineProps}
+    <polyline stroke={snake.color} fill="transparent" {...polylineProps} />
+  {/each}
+{/if}
--- a/gameboard-service/src/lib/components/SvgSnakeHead.svelte
+++ b/gameboard-service/src/lib/components/SvgSnakeHead.svelte
@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { Snake } from "$lib/playback/types";
+  import { fetchCustomizationSvgDef } from "$lib/customizations";
+  import { type SvgCalcParams, svgCalcCellRect } from "$lib/svg";
+  import { calcDestinationWrapPosition, isAdjacentPoint } from "$lib/geometry";
+
+  export let snake: Snake;
+  export let svgCalcParams: SvgCalcParams;
+
+  $: drawHead = calcDrawHead(snake);
+  function calcDrawHead(_: Snake): boolean {
+    return true; // Snake heads are always drawn!
+  }
+
+  $: headRectProps = svgCalcCellRect(svgCalcParams, snake.body[0]);
+
+  $: headDirection = calcHeadDirection(snake);
+  function calcHeadDirection(snake: Snake): string {
+    const [head, neckPoint] = snake.body.slice(0, 2);
+
+    let neck = neckPoint;
+    // If head is wrapped we need to calcualte neck position on border
+    if (!isAdjacentPoint(neck, head)) {
+      neck = calcDestinationWrapPosition(neck, head);
+    }
+
+    // Determine head direction based on relative position of neck and tail.
+    // If neck and tail overlap, we return the default direction (right).
+    if (head.x < neck.x) {
+      return "left";
+    } else if (head.y > neck.y) {
+      return "up";
+    } else if (head.y < neck.y) {
+      return "down";
+    }
+    return "right";
+  }
+
+  $: headTransform = calcHeadTransform(headDirection);
+  function calcHeadTransform(headDirection: string): string {
+    if (headDirection == "left") {
+      return "scale(-1,1) translate(-100, 0)";
+    } else if (headDirection == "up") {
+      return "rotate(-90, 50, 50)";
+    } else if (headDirection == "down") {
+      return "rotate(90, 50, 50)";
+    }
+
+    // Moving right/default
+    return "";
+  }
+
+  // If the snake is eliminated by self collision we give its head
+  // a drop shadow for dramatic effect.
+  $: drawHeadShadow = calcDrawHeadShadow(snake);
+  function calcDrawHeadShadow(snake: Snake): boolean {
+    return snake.isEliminated && snake.elimination?.cause == "snake-self-collision";
+  }
+</script>
+
+{#await fetchCustomizationSvgDef("head", snake.head) then headSvgDef}
+  {#if drawHead}
+    <svg
+      class="head {headDirection}"
+      class:shadow={drawHeadShadow}
+      viewBox="0 0 100 100"
+      fill={snake.color}
+      {...headRectProps}
+    >
+      <g transform={headTransform}>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html headSvgDef}
+      </g>
+    </svg>
+  {/if}
+{/await}
+
+<style lang="postcss">
+  /* Offset shadows in the direction the head is
+	   facing to avoid drawing shadow over the body */
+  svg.head.up.shadow {
+    filter: drop-shadow(0 -0.4rem 0.2rem rgba(0, 0, 0, 0.3));
+  }
+  svg.head.down.shadow {
+    filter: drop-shadow(0 0.4rem 0.2rem rgba(0, 0, 0, 0.3));
+  }
+  svg.head.left.shadow {
+    filter: drop-shadow(-0.4rem 0 0.2rem rgba(0, 0, 0, 0.3));
+  }
+  svg.head.right.shadow {
+    filter: drop-shadow(0.4rem 0 0.2rem rgba(0, 0, 0, 0.3));
+  }
+</style>
--- a/gameboard-service/src/lib/components/SvgSnakeTail.svelte
+++ b/gameboard-service/src/lib/components/SvgSnakeTail.svelte
@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { Snake } from "$lib/playback/types";
+  import { fetchCustomizationSvgDef } from "$lib/customizations";
+  import { type SvgCalcParams, svgCalcCellRect } from "$lib/svg";
+  import { calcDestinationWrapPosition, isAdjacentPoint } from "$lib/geometry";
+
+  export let snake: Snake;
+  export let svgCalcParams: SvgCalcParams;
+
+  $: drawTail = calcDrawTail(snake);
+  function calcDrawTail(snake: Snake): boolean {
+    // Skip drawing the tail if the snake head occupies the same spot
+    const head = snake.body[0];
+    const tail = snake.body[snake.body.length - 1];
+
+    if (head.x == tail.x && head.y == tail.y) {
+      return false;
+    }
+    return true;
+  }
+
+  $: tailRectProps = svgCalcCellRect(svgCalcParams, snake.body[snake.body.length - 1]);
+
+  $: tailTransform = calcTailTransform(snake);
+  function calcTailTransform(snake: Snake): string {
+    const tail = snake.body[snake.body.length - 1];
+
+    // Work backwards from the tail until we reach a segment that isn't stacked.
+    let preTailIndex = snake.body.length - 2;
+    let preTail = snake.body[preTailIndex];
+    while (preTail.x == tail.x && preTail.y == tail.y) {
+      preTailIndex -= 1;
+      if (preTailIndex < 0) {
+        return "";
+      }
+      preTail = snake.body[preTailIndex];
+    }
+
+    // If tail is wrapped we need to calcualte neck position on border
+    if (!isAdjacentPoint(preTail, tail)) {
+      preTail = calcDestinationWrapPosition(preTail, tail);
+    }
+
+    // Return transform based on relative location
+    if (preTail.x > tail.x) {
+      // Moving right
+      return "scale(-1,1) translate(-100,0)";
+    } else if (preTail.y > tail.y) {
+      // Moving up
+      return "scale(-1,1) translate(-100,0) rotate(90, 50, 50)";
+    } else if (preTail.y < tail.y) {
+      // Moving down
+      return "scale(-1,1) translate(-100,0) rotate(-90, 50, 50)";
+    }
+    // Moving left
+    return "";
+  }
+</script>
+
+{#await fetchCustomizationSvgDef("tail", snake.tail) then tailSvgDef}
+  {#if drawTail}
+    <svg class="tail" viewBox="0 0 100 100" fill={snake.color} {...tailRectProps}>
+      <g transform={tailTransform}>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html tailSvgDef}
+      </g>
+    </svg>
+  {/if}
+{/await}
--- a/gameboard-service/src/lib/components/TooltipTemplateHotkeys.svelte
+++ b/gameboard-service/src/lib/components/TooltipTemplateHotkeys.svelte
@ -0,0 +1,54 @@
+<script lang="ts">
+  export let id: string;
+</script>
+
+<template {id}>
+  <div class="grid grid-cols-2 gap-x-2 gap-y-1 p-2">
+    <p class="font-bold col-span-2 mb-2">Keyboard Shortcuts</p>
+    <p>Play/Pause</p>
+    <p class="text-right">
+      <span class="hotkey">Space</span>
+      <span class="hotkey">s</span>
+      <span class="hotkey">k</span>
+    </p>
+    <p>Next Turn</p>
+    <p class="text-right">
+      <span class="hotkey">→</span>
+      <span class="hotkey">d</span>
+      <span class="hotkey">l</span>
+    </p>
+    <p>Previous Turn</p>
+    <p class="text-right">
+      <span class="hotkey">←</span>
+      <span class="hotkey">a</span>
+      <span class="hotkey">j</span>
+    </p>
+    <p>Next Elimination</p>
+    <p class="text-right">
+      <span class="hotkey">e</span>
+    </p>
+    <p>Previous Elimination</p>
+    <p class="text-right">
+      <span class="hotkey">q</span>
+    </p>
+    <p>Jump to Start</p>
+    <p class="text-right">
+      <span class="hotkey">r</span>
+    </p>
+    <p>Jump to End</p>
+    <p class="text-right">
+      <span class="hotkey">t</span>
+    </p>
+    <p>Settings</p>
+    <p class="text-right">
+      <span class="hotkey">,</span>
+    </p>
+  </div>
+</template>
+
+<style lang="postcss">
+  .hotkey {
+    @apply px-2 rounded bg-pink-800/50;
+    border: 1px solid #888;
+  }
+</style>
--- a/gameboard-service/src/lib/components/TooltipTemplateSettings.svelte
+++ b/gameboard-service/src/lib/components/TooltipTemplateSettings.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Settings } from "$lib/settings/stores";
+
+  export let id: string;
+  export let settings: Settings;
+</script>
+
+<template {id}>
+  <div class="grid grid-cols-2 gap-x-2 gap-y-1 p-2">
+    <p class="font-bold col-span-2 mb-2">Playback Settings</p>
+    <p>autoplay:</p>
+    <p class="text-right">{settings.autoplay}</p>
+    <p>fps:</p>
+    <p class="text-right">{settings.fps}</p>
+    <p>showCoords:</p>
+    <p class="text-right">{settings.showCoords}</p>
+    <p>theme:</p>
+    <p class="text-right">{settings.theme}</p>
+  </div>
+</template>
--- a/gameboard-service/src/lib/customizations.ts
+++ b/gameboard-service/src/lib/customizations.ts
@ -0,0 +1,24 @@
+const mediaCache: { [key: string]: string } = {};
+
+export async function fetchCustomizationSvgDef(type: string, name: string) {
+  const mediaPath = `snakes/${type}s/${name}.svg`;
+
+  if (!(mediaPath in mediaCache)) {
+    mediaCache[mediaPath] = await fetch(`https://media.battlesnake.com/${mediaPath}`)
+      .then((response) => response.text())
+      .then((textSVG) => {
+        const tempElememt = document.createElement("template");
+        tempElememt.innerHTML = textSVG.trim();
+        console.debug(`[customizations] loaded svg definition for ${mediaPath}`);
+
+        if (tempElememt.content.firstChild === null) {
+          console.debug("[customizations] error loading customization, no elements found");
+          return "";
+        }
+
+        const child = <HTMLElement>tempElememt.content.firstChild;
+        return child.innerHTML;
+      });
+  }
+  return mediaCache[mediaPath];
+}
--- a/gameboard-service/src/lib/geometry.ts
+++ b/gameboard-service/src/lib/geometry.ts
@ -0,0 +1,31 @@
+import type { Point } from "./playback/types";
+
+export function isEqualPoint(p1?: Point, p2?: Point): boolean {
+  if (p1 == undefined || p2 == undefined) {
+    return false;
+  }
+
+  return p1.x == p2.x && p1.y == p2.y;
+}
+
+export function isAdjacentPoint(p1: Point, p2: Point): boolean {
+  return calcManhattan(p1, p2) == 1;
+}
+
+export function calcManhattan(p1: Point, p2: Point): number {
+  return Math.abs(p1.x - p2.x) + Math.abs(p1.y - p2.y);
+}
+
+export function calcSourceWrapPosition(src: Point, dst: Point): Point {
+  return {
+    x: src.x - Math.sign(dst.x - src.x),
+    y: src.y - Math.sign(dst.y - src.y)
+  };
+}
+
+export function calcDestinationWrapPosition(src: Point, dst: Point): Point {
+  return {
+    x: dst.x + Math.sign(dst.x - src.x),
+    y: dst.y + Math.sign(dst.y - src.y)
+  };
+}
--- a/gameboard-service/src/lib/highlight.ts
+++ b/gameboard-service/src/lib/highlight.ts
@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const highlightedSnakeID = writable<string | null>(null);
--- a/gameboard-service/src/lib/playback/animation.ts
+++ b/gameboard-service/src/lib/playback/animation.ts
@ -0,0 +1,26 @@
+let activeInterval: undefined | ReturnType<typeof setInterval>;
+
+export function startPlayback(fps: number, callback: () => void) {
+  // Do nothing if playback is active
+  if (activeInterval) {
+    return;
+  }
+
+  console.debug(`[playback] starting playback at ${fps} fps`);
+
+  // Play first frame immediately
+  callback();
+
+  // Set interval for future frames
+  const delayMS = 1000 / Math.ceil(fps);
+  activeInterval = setInterval(() => {
+    callback();
+  }, delayMS);
+}
+
+export function stopPlayback(): void {
+  if (activeInterval) {
+    clearInterval(activeInterval);
+    activeInterval = undefined;
+  }
+}
--- a/gameboard-service/src/lib/playback/engine.ts
+++ b/gameboard-service/src/lib/playback/engine.ts
@ -0,0 +1,84 @@
+import ReconnectingWebSocket from "reconnecting-websocket";
+
+import { engineEventToFrame, type Frame } from "./types";
+
+type FrameCallback = (frame: Frame) => void;
+
+// Engine data
+let ws: WebSocket;
+let loadedFrames = new Set();
+
+// Converts http://foo to ws://foo or https://foo to wss://foo
+export function httpToWsProtocol(url: string) {
+  return url
+    .replace(/^https:\/\//i, "wss://") // https:// --> wss://
+    .replace(/^http:\/\//i, "ws://"); // http:// --> ws://
+}
+
+export function fetchGame(
+  fetchFunc: typeof fetch,
+  gameID: string,
+  engineURL: string,
+  frames: Frame[],
+  onFrameLoad: FrameCallback,
+  onFinalFrame: FrameCallback,
+  onError: (message: string) => void
+) {
+  console.debug(`[playback] loading game ${gameID}`);
+
+  // Reset
+  if (ws) ws.close();
+  loadedFrames = new Set();
+
+  const gameInfoUrl = `${engineURL}/games/${gameID}`;
+  const gameEventsUrl = `${httpToWsProtocol(engineURL)}/games/${gameID}/events`;
+
+  fetchFunc(gameInfoUrl)
+    .then(async (response) => {
+      if (response.status == 404) {
+        throw new Error("Game not found");
+      } else if (!response.ok) {
+        throw new Error("Error loading game");
+      }
+
+      const gameInfo = await response.json();
+      const ws = new ReconnectingWebSocket(gameEventsUrl);
+
+      ws.onopen = () => {
+        console.debug("[playback] opening engine websocket");
+      };
+
+      ws.onmessage = (message) => {
+        const engineEvent = JSON.parse(message.data);
+
+        if (engineEvent.Type == "frame" && !loadedFrames.has(engineEvent.Data.Turn)) {
+          loadedFrames.add(engineEvent.Data.Turn);
+
+          const frame = engineEventToFrame(gameInfo, engineEvent.Data);
+          frames.push(frame);
+          frames.sort((a: Frame, b: Frame) => a.turn - b.turn);
+
+          // Fire frame callback
+          if (engineEvent.Data.Turn == 0) {
+            console.debug("[playback] received first frame");
+          }
+          onFrameLoad(frame);
+        } else if (engineEvent.Type == "game_end") {
+          console.debug("[playback] received final frame");
+          if (ws) ws.close();
+
+          // Flag last frame as the last one and fire callback
+          frames[frames.length - 1].isFinalFrame = true;
+          onFinalFrame(frames[frames.length - 1]);
+        }
+      };
+
+      ws.onclose = () => {
+        console.debug("[playback] closing engine websocket");
+      };
+    })
+    .catch(function (e) {
+      console.error(e);
+      onError(e.message);
+    });
+}
--- a/gameboard-service/src/lib/playback/messages.ts
+++ b/gameboard-service/src/lib/playback/messages.ts
@ -0,0 +1,54 @@
+import { browser } from "$app/environment";
+
+import { playbackState } from "./stores";
+import type { PlaybackState } from "./types";
+
+enum GameEvent {
+  // Basic display messages
+  RESIZE = "RESIZE",
+  TURN = "TURN",
+  GAME_OVER = "GAME_OVER"
+
+  // Could do eliminations, food spawns, hazard damage, etc etc etc.
+}
+
+type Message = {
+  event: GameEvent;
+  data: object;
+};
+
+function postMessageToParent(message: Message) {
+  if (browser) {
+    try {
+      window.parent.postMessage(message, "*");
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
+
+export function sendResizeMessage(width: number, height: number) {
+  postMessageToParent({
+    event: GameEvent.RESIZE,
+    data: { width, height }
+  });
+}
+
+export function initWindowMessages() {
+  playbackState.subscribe((state: PlaybackState | null) => {
+    if (state) {
+      postMessageToParent({
+        event: GameEvent.TURN,
+        data: {
+          turn: state.frame.turn
+        }
+      });
+      if (state.frame.isFinalFrame) {
+        postMessageToParent({
+          event: GameEvent.GAME_OVER,
+          data: {}
+        });
+      }
+    }
+  });
+}
--- a/gameboard-service/src/lib/playback/stores.ts
+++ b/gameboard-service/src/lib/playback/stores.ts
@ -0,0 +1,178 @@
+import { get, writable } from "svelte/store";
+
+import { type Settings, getDefaultSettings } from "$lib/settings/stores";
+
+import { startPlayback, stopPlayback } from "./animation";
+import { fetchGame } from "./engine";
+import { type Frame, PlaybackMode, type PlaybackState } from "./types";
+
+const AUTOPLAY_DELAY_MS = 250;
+const LOOP_DELAY_MS = 1500;
+
+let frames: Frame[] = [];
+let currentFrameIndex = 0;
+let settings: Settings = getDefaultSettings();
+
+const writableState = writable<PlaybackState | null>(null);
+export const playbackError = writable<string | null>(null);
+
+const reset = () => {
+  frames = [];
+  currentFrameIndex = 0;
+  settings = getDefaultSettings();
+
+  writableState.set(null);
+  playbackError.set(null);
+};
+
+const setCurrentFrame = (index: number) => {
+  const clampedIndex = Math.min(Math.max(index, 0), frames.length - 1);
+  const newFrame = frames[clampedIndex];
+
+  writableState.update(($state) => {
+    if ($state) {
+      currentFrameIndex = clampedIndex;
+      $state.frame = newFrame;
+
+      if ($state.frame.isFinalFrame && $state.mode == PlaybackMode.PLAYING) {
+        stopPlayback();
+        $state.mode = PlaybackMode.PAUSED;
+        if (settings.loop) {
+          setTimeout(controls.firstFrame, LOOP_DELAY_MS);
+          setTimeout(controls.play, LOOP_DELAY_MS * 2);
+        }
+      }
+    }
+    return $state;
+  });
+};
+
+const setMode = (mode: PlaybackMode) => {
+  writableState.update(($state) => {
+    if ($state) {
+      $state.mode = mode;
+    }
+    return $state;
+  });
+};
+
+const controls = {
+  firstFrame: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      setCurrentFrame(0);
+    }
+  },
+  lastFrame: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      setCurrentFrame(frames.length - 1);
+    }
+  },
+  prevFrame: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      setCurrentFrame(currentFrameIndex - 1);
+    }
+  },
+  nextFrame: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      setCurrentFrame(currentFrameIndex + 1);
+    }
+  },
+  prevEliminationFrame: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      for (let i = currentFrameIndex; i >= 0; i--) {
+        for (let s = 0; s < frames[i].snakes.length; s++) {
+          const snake = frames[i].snakes[s];
+          if (snake.elimination && snake.elimination.turn <= currentFrameIndex) {
+            const newIndex = snake.elimination.turn - 1;
+            console.debug(`[playback] jump to elimination frame ${newIndex}`);
+            setCurrentFrame(newIndex);
+            return;
+          }
+        }
+        controls.firstFrame();
+      }
+    }
+  },
+  nextEliminationFrame: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      for (let i = currentFrameIndex + 2; i < frames.length; i++) {
+        for (let s = 0; s < frames[i].snakes.length; s++) {
+          const snake = frames[i].snakes[s];
+          if (snake.elimination && snake.elimination.turn > currentFrameIndex + 1) {
+            const newIndex = snake.elimination.turn - 1;
+            console.debug(`[playback] jump to elimination frame ${newIndex}`);
+            setCurrentFrame(newIndex);
+            return;
+          }
+        }
+      }
+      controls.lastFrame();
+    }
+  },
+  play: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      startPlayback(settings.fps, () => {
+        setCurrentFrame(currentFrameIndex + 1);
+      });
+      setMode(PlaybackMode.PLAYING);
+    }
+  },
+  pause: () => {
+    stopPlayback();
+    setMode(PlaybackMode.PAUSED);
+  },
+  togglePlayPause: () => {
+    if (get(writableState)?.mode == PlaybackMode.PAUSED) {
+      controls.play();
+    } else if (get(writableState)?.mode == PlaybackMode.PLAYING) {
+      controls.pause();
+    }
+  },
+  jumpToFrame: (i: number) => {
+    controls.pause();
+    setCurrentFrame(i);
+  }
+};
+
+const onFrameLoad = (frame: Frame) => {
+  // Load the first frame when we see it.
+  if (frame.turn == settings.turn) {
+    writableState.set({
+      frame: frame,
+      mode: PlaybackMode.PAUSED,
+      finalFrame: null
+    });
+
+    setCurrentFrame(settings.turn);
+    if (settings.autoplay) {
+      setTimeout(controls.play, AUTOPLAY_DELAY_MS);
+    }
+  }
+};
+
+const onFinalFrame = (frame: Frame) => {
+  writableState.update(($state) => {
+    if ($state) {
+      $state.finalFrame = frame;
+    }
+    return $state;
+  });
+};
+
+const onEngineError = (message: string) => {
+  playbackError.set(message);
+};
+
+function createPlaybackState() {
+  return {
+    controls,
+    subscribe: writableState.subscribe,
+    load: (fetchFunc: typeof fetch, s: Settings) => {
+      settings = { ...s };
+      fetchGame(fetchFunc, s.game, s.engine, frames, onFrameLoad, onFinalFrame, onEngineError);
+    },
+    reset
+  };
+}
+
+export const playbackState = createPlaybackState();
--- a/gameboard-service/src/lib/playback/types.ts
+++ b/gameboard-service/src/lib/playback/types.ts
@ -0,0 +1,98 @@
+export type Point = {
+  x: number;
+  y: number;
+};
+
+export type Elimination = {
+  turn: number;
+  cause: string;
+  by: string;
+};
+
+export type Snake = {
+  id: string;
+  name: string;
+  author: string;
+  color: string;
+  head: string;
+  tail: string;
+  health: number;
+  latency: number;
+  body: Point[];
+  length: number;
+  elimination: Elimination | null;
+  // Helpers
+  isEliminated: boolean;
+};
+
+export type Frame = {
+  turn: number;
+  width: number;
+  height: number;
+  snakes: Snake[];
+  food: Point[];
+  hazards: Point[];
+  isFinalFrame: boolean;
+};
+
+export enum PlaybackMode {
+  PAUSED,
+  PLAYING
+}
+
+export type PlaybackHandler = () => void;
+
+export type PlaybackState = {
+  frame: Frame;
+  mode: PlaybackMode;
+  finalFrame: null | Frame;
+};
+
+// We're lenient with typing data that's received from the game engine
+/* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
+type EngineObject = any;
+
+export function engineEventToFrame(
+  engineGameInfo: EngineObject,
+  engineGameEvent: EngineObject
+): Frame {
+  const engineCoordsToPoint = function (engineCoords: EngineObject): Point {
+    return { x: engineCoords.X, y: engineCoords.Y };
+  };
+
+  const engineSnakeToSnake = function (engineSnake: EngineObject): Snake {
+    return {
+      // Fixed properties
+      id: engineSnake.ID,
+      name: engineSnake.Name,
+      author: engineSnake.Author,
+      color: engineSnake.Color,
+      head: engineSnake.HeadType,
+      tail: engineSnake.TailType,
+      // Frame specific
+      health: engineSnake.Health,
+      latency: engineSnake.Latency,
+      body: engineSnake.Body.map(engineCoordsToPoint),
+      length: engineSnake.Body.length,
+      elimination: engineSnake.Death
+        ? {
+            turn: engineSnake.Death.Turn,
+            cause: engineSnake.Death.Cause,
+            by: engineSnake.Death.EliminatedBy
+          }
+        : null,
+      // Helpers
+      isEliminated: engineSnake.Death != null
+    };
+  };
+
+  return {
+    turn: engineGameEvent.Turn,
+    width: engineGameInfo.Game.Width,
+    height: engineGameInfo.Game.Height,
+    snakes: engineGameEvent.Snakes.map(engineSnakeToSnake),
+    food: engineGameEvent.Food.map(engineCoordsToPoint),
+    hazards: engineGameEvent.Hazards.map(engineCoordsToPoint),
+    isFinalFrame: false
+  };
+}
--- a/gameboard-service/src/lib/settings/helpers.ts
+++ b/gameboard-service/src/lib/settings/helpers.ts
@ -0,0 +1,45 @@
+import { browser } from "$app/environment";
+
+export function fromLocalStorage(key: string, defaultValue: boolean | number | string) {
+  if (browser) {
+    const val = localStorage.getItem(`setting.${key}`);
+    if (val) {
+      return JSON.parse(val);
+    }
+  }
+  return defaultValue;
+}
+
+export function toLocalStorage(key: string, value: boolean | number | string) {
+  if (browser) {
+    localStorage.setItem(`setting.${key}`, JSON.stringify(value));
+  }
+}
+
+export function getBoolFromURL(url: URL, key: string, defaultValue: boolean): boolean {
+  const val = url.searchParams.get(key);
+  if (val) {
+    if (val === "true") return true;
+    if (val === "false") return false;
+  }
+  return defaultValue;
+}
+
+export function getIntFromURL(url: URL, key: string, defaultValue: number): number {
+  const val = url.searchParams.get(key);
+  if (val) {
+    const parsedVal = parseInt(val);
+    if (!isNaN(parsedVal)) {
+      return parsedVal;
+    }
+  }
+  return defaultValue;
+}
+
+export function getStringFromURL(url: URL, key: string, defaultValue: string): string {
+  const val = url.searchParams.get(key);
+  if (val) {
+    return val;
+  }
+  return defaultValue;
+}
--- a/gameboard-service/src/lib/settings/stores.ts
+++ b/gameboard-service/src/lib/settings/stores.ts
@ -0,0 +1,133 @@
+import { get, writable } from "svelte/store";
+
+import {
+  fromLocalStorage,
+  toLocalStorage,
+  getBoolFromURL,
+  getIntFromURL,
+  getStringFromURL
+} from "./helpers";
+import { setTheme } from "$lib/theme";
+
+// Each setting receives it's value using the following algorithm:
+// If url param is set, take value from URL.
+// Else if setting is backed by local storage, take value from local storage.
+// Else load default value from getDefaultSettings()
+//
+// Only a subset of settings are backed by local storage and user preference. This is by design.
+
+// Keys for load from URL and local storage
+export enum Setting {
+  AUTOPLAY = "autoplay",
+  ENGINE = "engine",
+  FPS = "fps",
+  GAME = "game",
+  LOOP = "loop",
+  SHOW_CONTROLS = "showControls",
+  SHOW_COORDS = "showCoords",
+  SHOW_SCRUBBER = "showScrubber",
+  SHOW_SCOREBOARD = "showScoreboard",
+  THEME = "theme",
+  TITLE = "title",
+  TURN = "turn"
+}
+
+export enum Theme {
+  DARK = "dark",
+  LIGHT = "light",
+  SYSTEM = "system"
+}
+
+export type Settings = {
+  autoplay: boolean;
+  engine: string;
+  fps: number;
+  game: string;
+  loop: boolean;
+  showControls: boolean;
+  showCoords: boolean;
+  showScrubber: boolean;
+  showScoreboard: boolean;
+  theme: Theme;
+  title: string;
+  turn: number;
+};
+
+export function getDefaultSettings(): Settings {
+  return {
+    autoplay: false,
+    engine: "https://engine.battlesnake.com",
+    fps: 6,
+    game: "",
+    loop: false,
+    showControls: true,
+    showCoords: false,
+    showScrubber: false,
+    showScoreboard: true,
+    theme: Theme.SYSTEM,
+    title: "",
+    turn: 0
+  };
+}
+
+// These settings are backed by user preference, stored in local storage
+
+// Autoplay
+export const autoplay = writable<boolean>(
+  fromLocalStorage(Setting.AUTOPLAY, getDefaultSettings().autoplay)
+);
+autoplay.subscribe((value: boolean) => {
+  toLocalStorage(Setting.AUTOPLAY, value);
+});
+
+// FPS
+export const fps = writable<number>(fromLocalStorage(Setting.FPS, getDefaultSettings().fps));
+fps.subscribe((value: number) => {
+  toLocalStorage(Setting.FPS, value);
+});
+
+// Show Coordinates
+export const showCoords = writable<boolean>(
+  fromLocalStorage(Setting.SHOW_COORDS, getDefaultSettings().showCoords)
+);
+showCoords.subscribe((value: boolean) => {
+  toLocalStorage(Setting.SHOW_COORDS, value);
+});
+
+// Show Turn Scrubber
+export const showScrubber = writable<boolean>(
+  fromLocalStorage(Setting.SHOW_SCRUBBER, getDefaultSettings().showScrubber)
+);
+showScrubber.subscribe((value: boolean) => {
+  toLocalStorage(Setting.SHOW_SCRUBBER, value);
+});
+
+// Theme
+export const theme = writable<Theme>(fromLocalStorage(Setting.THEME, getDefaultSettings().theme));
+theme.subscribe((value: Theme) => {
+  toLocalStorage(Setting.THEME, value);
+  setTheme(value);
+});
+
+// Load settings, with option to override via URL params
+export function loadSettingsWithURLOverrides(url: URL): Settings {
+  const defaults = getDefaultSettings();
+
+  // Note that defaults are already baked into the settings backed by local storage
+  return {
+    // Preference controlled
+    autoplay: getBoolFromURL(url, Setting.AUTOPLAY, get(autoplay)),
+    fps: getIntFromURL(url, Setting.FPS, get(fps)),
+    showCoords: getBoolFromURL(url, Setting.SHOW_COORDS, get(showCoords)),
+    showScrubber: getBoolFromURL(url, Setting.SHOW_SCRUBBER, get(showScrubber)),
+    theme: getStringFromURL(url, Setting.THEME, get(theme)) as Theme,
+    // URL param controlled
+    engine: getStringFromURL(url, Setting.ENGINE, defaults.engine),
+    game: getStringFromURL(url, Setting.GAME, defaults.game),
+    loop: getBoolFromURL(url, Setting.LOOP, defaults.loop),
+    showControls: getBoolFromURL(url, Setting.SHOW_CONTROLS, defaults.showControls),
+    showScoreboard: getBoolFromURL(url, Setting.SHOW_SCOREBOARD, defaults.showScoreboard),
+    title: getStringFromURL(url, Setting.TITLE, defaults.title),
+    turn: getIntFromURL(url, Setting.TURN, defaults.turn)
+  };
+}
--- a/gameboard-service/src/lib/svg.ts
+++ b/gameboard-service/src/lib/svg.ts
@ -0,0 +1,72 @@
+import type { Point } from "$lib/playback/types";
+
+// Parameters used when drawing the gameboard svg
+export type SvgCalcParams = {
+  cellSize: number;
+  cellSizeHalf: number;
+  cellSpacing: number;
+  gridBorder: number;
+  height: number;
+  width: number;
+};
+
+// Declare a new type to make it more obvious when translating board space to svg space
+export type SvgPoint = {
+  x: number;
+  y: number;
+};
+
+export type SvgCircleProps = {
+  cx: number;
+  cy: number;
+};
+
+export type SvgRectProps = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export function svgCalcCellCenter(params: SvgCalcParams, p: Point): SvgPoint {
+  const topLeft = svgCalcCellTopLeft(params, p);
+  return {
+    x: topLeft.x + params.cellSizeHalf,
+    y: topLeft.y + params.cellSizeHalf
+  };
+}
+
+export function svgCalcCellTopLeft(params: SvgCalcParams, p: Point): SvgPoint {
+  return {
+    x: params.gridBorder + p.x * (params.cellSize + params.cellSpacing),
+    y:
+      params.height -
+      (params.gridBorder + p.y * (params.cellSize + params.cellSpacing) + params.cellSize)
+  };
+}
+
+export function svgCalcCellCircle(params: SvgCalcParams, p: Point): SvgCircleProps {
+  const center = svgCalcCellCenter(params, p);
+  return { cx: center.x, cy: center.y };
+}
+
+export function svgCalcCellRect(params: SvgCalcParams, p: Point): SvgRectProps {
+  const topLeft = svgCalcCellTopLeft(params, p);
+  return { x: topLeft.x, y: topLeft.y, width: params.cellSize, height: params.cellSize };
+}
+
+export function svgCalcCellLabelBottom(params: SvgCalcParams, p: Point): SvgPoint {
+  const center = svgCalcCellCenter(params, p);
+  return {
+    x: center.x,
+    y: center.y + params.cellSizeHalf + params.gridBorder / 2
+  };
+}
+
+export function svgCalcCellLabelLeft(params: SvgCalcParams, p: Point): SvgPoint {
+  const center = svgCalcCellCenter(params, p);
+  return {
+    x: center.x - params.cellSizeHalf - params.gridBorder / 2,
+    y: center.y
+  };
+}
--- a/gameboard-service/src/lib/theme.ts
+++ b/gameboard-service/src/lib/theme.ts
@ -0,0 +1,19 @@
+import { browser } from "$app/environment";
+
+import { Theme } from "$lib/settings/stores";
+
+export function setTheme(theme: Theme) {
+  if (browser) {
+    if (theme == Theme.DARK) {
+      document.documentElement.classList.add("dark");
+    } else if (theme == Theme.LIGHT) {
+      document.documentElement.classList.remove("dark");
+    } else if (theme == Theme.SYSTEM) {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }
+  }
+}
--- a/gameboard-service/src/routes/(iframed)/+layout.svelte
+++ b/gameboard-service/src/routes/(iframed)/+layout.svelte
@ -0,0 +1,11 @@
+<!--
+	On all screens we assume width is fixed and we adjust height accordingly:
+	  - On small screens, use whatever height is required
+	  - On large screens:
+	  	- enforce a 16x9 aspect and use that to set height
+	 	- centered horizontally and top-aligned
+		- with a max width of 1280px (screen size xl)
+-->
+<div class="w-full max-w-screen-xl md:aspect-video mx-auto">
+  <slot />
+</div>
--- a/gameboard-service/src/routes/(iframed)/+page.svelte
+++ b/gameboard-service/src/routes/(iframed)/+page.svelte
@ -0,0 +1,131 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { beforeNavigate, goto } from "$app/navigation";
+
+  import { keybind } from "$lib/actions/keybind";
+  import { tooltip } from "$lib/actions/tooltip";
+  import { resize } from "$lib/actions/resize";
+  import { initWindowMessages, sendResizeMessage } from "$lib/playback/messages";
+  import { playbackError, playbackState } from "$lib/playback/stores";
+
+  import Gameboard from "$lib/components/Gameboard.svelte";
+  import PlaybackControls from "$lib/components/PlaybackControls.svelte";
+  import Scoreboard from "$lib/components/Scoreboard.svelte";
+  import TooltipTemplateHotkeys from "$lib/components/TooltipTemplateHotkeys.svelte";
+  import TooltipTemplateSettings from "$lib/components/TooltipTemplateSettings.svelte";
+  import Scrubber from "$lib/components/Scrubber.svelte";
+
+  import IconCog from "~icons/heroicons/cog-8-tooth";
+  import IconHelp from "~icons/heroicons/question-mark-circle";
+
+  import { getDefaultSettings, loadSettingsWithURLOverrides } from "$lib/settings/stores";
+  import { setTheme } from "$lib/theme";
+
+  const helpTooltipOptions = {
+    templateId: "hotkeysTooltip",
+    tippyProps: {
+      arrow: false,
+      placement: "top-start"
+    }
+  };
+
+  const settingsTooltipOptions = {
+    templateId: "settingsTooltip",
+    tippyProps: {
+      arrow: false,
+      placement: "top-end"
+    }
+  };
+
+  beforeNavigate(async () => {
+    playbackState.controls.pause();
+    playbackState.reset();
+  });
+
+  function navigateToSettings() {
+    goto("/settings");
+  }
+
+  function onResize(width: number, height: number) {
+    sendResizeMessage(width, height);
+  }
+
+  let settings = getDefaultSettings();
+  let settingError = true;
+
+  onMount(() => {
+    const url = new URL(window.location.href);
+    settings = loadSettingsWithURLOverrides(url);
+
+    setTheme(settings.theme);
+
+    if (settings.game.length > 0 && settings.engine.length > 0) {
+      settingError = false;
+      playbackState.load(fetch, settings);
+      initWindowMessages();
+    }
+  });
+</script>
+
+<svelte:window
+  use:keybind={{ keys: ["space", "s", "k"], f: playbackState.controls.togglePlayPause }}
+  use:keybind={{ keys: ["left", "a", "j"], f: playbackState.controls.prevFrame }}
+  use:keybind={{ keys: ["right", "d", "l"], f: playbackState.controls.nextFrame }}
+  use:keybind={{ keys: ["q"], f: playbackState.controls.prevEliminationFrame }}
+  use:keybind={{ keys: ["e"], f: playbackState.controls.nextEliminationFrame }}
+  use:keybind={{ keys: ["r"], f: playbackState.controls.firstFrame }}
+  use:keybind={{ keys: ["t"], f: playbackState.controls.lastFrame }}
+  use:keybind={{ keys: [","], f: navigateToSettings }}
+/>
+
+<div use:resize={{ f: onResize }} class="h-full w-full flex flex-col items-center justify-center">
+  {#if settingError}
+    <p class="p-4 font-bold text-lg text-center">
+      To display a game you need to specify the ID in the URL.
+    </p>
+    <p class="italic">
+      {`https://board.battlesnake.com?game=<GAME_ID>`}
+    </p>
+  {:else if $playbackError}
+    <p class="p-4 font-bold text-lg text-center text-red-500">
+      {$playbackError}
+    </p>
+  {:else if $playbackState}
+    <TooltipTemplateHotkeys id={helpTooltipOptions.templateId} />
+    <TooltipTemplateSettings id={settingsTooltipOptions.templateId} {settings} />
+    <div class="w-full h-full flex flex-col md:flex-row">
+      <div class="flex flex-col grow">
+        {#if settings.title}
+          <h1 class="text-center font-bold pt-2 text-lg">{settings.title}</h1>
+        {/if}
+        <Gameboard showCoordinates={settings.showCoords} />
+        {#if settings.showControls}
+          {#if settings.showScrubber}
+            <div class="w-full px-[7.5%]">
+              <Scrubber />
+            </div>
+          {/if}
+          <div class="flex justify-evenly text-xl py-2 px-6">
+            <div use:tooltip={helpTooltipOptions}>
+              <IconHelp />
+            </div>
+            <PlaybackControls />
+            <div use:tooltip={settingsTooltipOptions}>
+              <a href="/settings">
+                <IconCog />
+              </a>
+            </div>
+          </div>
+        {/if}
+      </div>
+      {#if settings.showScoreboard}
+        <div class="basis-full md:basis-[45%] order-first p-2 md:order-last">
+          <Scoreboard />
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <p class="p-4 text-lg text-center">Loading game...</p>
+  {/if}
+</div>
--- a/gameboard-service/src/routes/(iframed)/settings/+page.svelte
+++ b/gameboard-service/src/routes/(iframed)/settings/+page.svelte
@ -0,0 +1,68 @@
+<script lang="ts">
+  import { autoplay, fps, showCoords, showScrubber, theme } from "$lib/settings/stores";
+
+  const playbackSpeedOptions = [
+    { value: 2, text: "Slow" },
+    { value: 6, text: "Medium" },
+    { value: 18, text: "Fast" }
+  ];
+
+  function navigateBack(e: MouseEvent) {
+    e.preventDefault();
+
+    history.back();
+  }
+</script>
+
+<div class="p-4 max-w-2xl mx-auto">
+  <h1 class="text-2xl font-bold">Settings</h1>
+  <hr class="mb-4" />
+
+  <div class="mb-4">
+    <label class="block">
+      <p class="font-bold">Theme</p>
+      <select class="w-full" bind:value={$theme}>
+        <option value={"system"}>Use System Preference</option>
+        <option value={"light"}>Light</option>
+        <option value={"dark"}>Dark</option>
+      </select>
+    </label>
+  </div>
+
+  <div class="mb-4">
+    <label class="block">
+      <p class="font-bold">Playback Speed</p>
+      <select class="w-full" bind:value={$fps}>
+        {#each playbackSpeedOptions as option}
+          <option value={option.value}>{option.text}</option>
+        {/each}
+      </select>
+    </label>
+  </div>
+
+  <div class="mb-4">
+    <label class="inline-flex items-center">
+      <input type="checkbox" bind:checked={$autoplay} />
+      <span class="font-bold mx-2">Autoplay</span>
+    </label>
+    <p class="text-sm">Start playback as soon as the first turn is ready.</p>
+  </div>
+
+  <div class="mb-4">
+    <label class="inline-flex items-center">
+      <input type="checkbox" bind:checked={$showCoords} />
+      <span class="font-bold mx-2">Board Coordinates</span>
+    </label>
+    <p class="text-sm">Show coordinate labels on the game board.</p>
+  </div>
+
+  <div class="mb-4">
+    <label class="inline-flex items-center">
+      <input type="checkbox" bind:checked={$showScrubber} />
+      <span class="font-bold mx-2">Scrub Bar</span>
+    </label>
+    <p class="text-sm">Show a scrubbable progress bar under the game board.</p>
+  </div>
+
+  <p><a on:click={navigateBack} href="/">Back</a></p>
+</div>
--- a/gameboard-service/src/routes/+layout.svelte
+++ b/gameboard-service/src/routes/+layout.svelte
@ -0,0 +1,7 @@
+<script>
+  import "../styles.css";
+</script>
+
+<main>
+  <slot />
+</main>
--- a/gameboard-service/src/routes/+layout.ts
+++ b/gameboard-service/src/routes/+layout.ts
@ -0,0 +1,4 @@
+// We're a strictly static site, disable SSR site-wide and force all pages to prerender.
+// See: https://kit.svelte.dev/docs/adapter-static
+export const prerender = true;
+export const ssr = false;
--- a/gameboard-service/src/routes/examples/iframes/+page.svelte
+++ b/gameboard-service/src/routes/examples/iframes/+page.svelte
@ -0,0 +1,93 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import { page } from "$app/stores";
+
+  let gameId = $page.url.searchParams.get("game");
+  let gameTitle = $page.url.searchParams.get("title") || "";
+
+  const configs = [
+    {
+      id: "leaderboard-recent-games",
+      title: "Leaderboard Recent Games Preview (300px)",
+      url: "https://play.battlesnake.com/leaderboards",
+      width: "300px",
+      src: `/?game=${gameId}&title=${gameTitle}&showControls=false&showScoreboard=false&autoplay=true&fps=10`
+    },
+    {
+      id: "sm-screen-size",
+      title: "Screen Size SM (640px)",
+      url: `https://play.battlesnake.com/game/${gameId}`,
+      width: "640px",
+      src: `/?game=${gameId}&title=${gameTitle}&autoplay=true&fps=10`
+    },
+    {
+      id: "md-screen-size",
+      title: "Screen Size MD (768px)",
+      url: `https://play.battlesnake.com/game/${gameId}`,
+      width: "768px",
+      src: `/?game=${gameId}&title=${gameTitle}&autoplay=true&fps=10`
+    },
+    {
+      id: "lg-screen-size",
+      title: "Screen Size LG (1024px)",
+      url: `https://play.battlesnake.com/game/${gameId}`,
+      width: "1024px",
+      src: `/?game=${gameId}&title=${gameTitle}&autoplay=true&fps=10`
+    },
+    {
+      id: "xl-screen-size",
+      title: "XL Screen Size (1280px)",
+      url: `https://play.battlesnake.com/game/${gameId}`,
+      width: "1280px",
+      src: `/?game=${gameId}&title=${gameTitle}&autoplay=true&fps=10`
+    },
+    {
+      id: "full-width",
+      title: "Full Width (100%)",
+      url: `https://play.battlesnake.com/game/${gameId}`,
+      width: "100%",
+      src: `/?game=${gameId}&title=${gameTitle}&autoplay=true&fps=10`
+    }
+  ];
+
+  if (browser) {
+    window.addEventListener(
+      "message",
+      function (message) {
+        if (message.source && message.data.event == "RESIZE") {
+          // We need to find which iframe sent the message
+          for (let i = 0; i < configs.length; i++) {
+            const iframeElement = this.document.getElementById(configs[i].id) as HTMLIFrameElement;
+            if (iframeElement.contentWindow == message.source) {
+              const height = iframeElement.contentWindow.document.body.scrollHeight;
+              setTimeout(() => {
+                iframeElement.style.height = `${height}px`;
+              }, 100);
+            }
+          }
+        }
+      },
+      false
+    );
+  }
+</script>
+
+<div class="w-full my-4">
+  {#each configs as config}
+    <div class="flex flex-col w-full mb-16">
+      <p class="mb-4 text-xl font-bold text-center">{config.title}</p>
+      <div
+        class="w-full mx-auto rounded-sm border-2 border-solid border-pink-500"
+        style:max-width={config.width}
+      >
+        <iframe
+          id={config.id}
+          title={config.title}
+          src={config.src}
+          scrolling="no"
+          class="w-full h-full"
+        />
+      </div>
+    </div>
+  {/each}
+</div>
--- a/gameboard-service/src/sanity.test.ts
+++ b/gameboard-service/src/sanity.test.ts
@ -0,0 +1,5 @@
+import { expect, test } from "vitest";
+
+test("sanity", () => {
+  expect(true).toBeTruthy();
+});
--- a/gameboard-service/src/styles.css
+++ b/gameboard-service/src/styles.css
@ -0,0 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
+@import "tippy.js/dist/tippy.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  font-family: "Poppins", sans-serif;
+  @apply bg-white text-neutral-700;
+}
+
+html.dark,
+html.dark select,
+html.dark input[type="checkbox"],
+html.dark input[type="checkbox"]:hover,
+html.dark input[type="checkbox"]:focus {
+  @apply text-white;
+  background-color: #0f0b19;
+}
--- a/gameboard-service/static/apple-touch-icon.png
+++ b/gameboard-service/static/apple-touch-icon.png
--- a/gameboard-service/static/favicon.ico
+++ b/gameboard-service/static/favicon.ico
--- a/gameboard-service/static/favicon.svg
+++ b/gameboard-service/static/favicon.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#e02878;}</style></defs><g id="Layer_1" data-name="Layer 1"><circle class="cls-1" cx="5.71" cy="8.18" r="0.75"/><path class="cls-1" d="M8,0A8,8,0,0,0,0,8a8.3,8.3,0,0,0,.33,2.3L9.08,1.56l.88.88L9.73,7.23l5.06,0L6.24,15.81A8.55,8.55,0,0,0,8,16,8,8,0,0,0,8,0Z"/></g></svg>
--- a/gameboard-service/static/robots.txt
+++ b/gameboard-service/static/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/gameboard-service/static/version
+++ b/gameboard-service/static/version
@ -0,0 +1 @@
+0.0.0
--- a/gameboard-service/svelte.config.js
+++ b/gameboard-service/svelte.config.js
@ -0,0 +1,26 @@
+// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+// import adapter from '@sveltejs/adapter-auto';
+import adapter from "@sveltejs/adapter-static";
+
+import { vitePreprocess } from "@sveltejs/kit/vite";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter({
+      // These are the defaults, see https://kit.svelte.dev/docs/adapter-static
+      pages: "build",
+      assets: "build",
+      fallback: undefined,
+      precompress: false,
+      strict: true
+    })
+  }
+};
+
+export default config;
--- a/gameboard-service/tailwind.config.js
+++ b/gameboard-service/tailwind.config.js
@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+  plugins: [require("@tailwindcss/forms")],
+  darkMode: "class",
+  theme: {
+    extend: {}
+  }
+};
--- a/gameboard-service/tests/test.ts
+++ b/gameboard-service/tests/test.ts
@ -0,0 +1,6 @@
+import { expect, test } from "@playwright/test";
+
+test("about page has expected h1", async ({ page }) => {
+  await page.goto("/about");
+  await expect(page.getByRole("heading", { name: "About this app" })).toBeVisible();
+});
--- a/gameboard-service/tsconfig.json
+++ b/gameboard-service/tsconfig.json
@ -0,0 +1,22 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "lib": [
+      // at() support
+      "ES2022",
+
+      // svelte-kit libs
+      "esnext",
+      "DOM",
+      "DOM.Iterable"
+    ]
+  }
+}
--- a/gameboard-service/vite.config.ts
+++ b/gameboard-service/vite.config.ts
@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config";
+import { sveltekit } from "@sveltejs/kit/vite";
+
+import Icons from "unplugin-icons/vite";
+
+export default defineConfig({
+  plugins: [sveltekit(), Icons({ compiler: "svelte" })],
+  test: {
+    include: ["src/**/*.{test,spec}.{js,ts}"]
+  },
+  server: {
+    host: "0.0.0.0",
+    port: 3005
+  }
+});
--- a/testing/fly.toml
+++ b/testing/fly.toml
@ -1,9 +1,20 @@
-# fly.toml app configuration file generated for snaketest on 2025-03-02T11:25:35-08:00
+# fly.toml app configuration file generated for snaketest-wandering-moon-549 on 2025-04-17T12:33:55-07:00
 #
 # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
 #

-app = 'snaketest'
+app = 'snaketest-wandering-moon-549'
+primary_region = 'sea'
+
+[build]
+
+[http_service]
+  internal_port = 8000
+  force_https = true
+  auto_stop_machines = 'stop'
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ['app']

 [[services]]
  protocol = 'tcp'
@ -17,4 +28,9 @@ app = 'snaketest'
    port = 80
    handlers = ['http']

+[[vm]]
+  memory = '1gb'
+  cpu_kind = 'shared'
+  cpus = 1
+
 [[metrics]]
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#e02878;}</style></defs><g id="Layer_1" data-name="Layer 1"><circle class="cls-1" cx="5.71" cy="8.18" r="0.75"/><path class="cls-1" d="M8,0A8,8,0,0,0,0,8a8.3,8.3,0,0,0,.33,2.3L9.08,1.56l.88.88L9.73,7.23l5.06,0L6.24,15.81A8.55,8.55,0,0,0,8,16,8,8,0,0,0,8,0Z"/></g></svg>`