Merge branch 'main' into auth-deploy
This commit is contained in:
JBB0807
commit
aff58d8c08
68 changed files with 7802 additions and 2 deletions
19
gameboard-service/.devcontainer/devcontainer.json
Normal file
19
gameboard-service/.devcontainer/devcontainer.json
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
gameboard-service/.eslintignore
Normal file
13
gameboard-service/.eslintignore
Normal file
|
|
@ -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
|
||||||
33
gameboard-service/.eslintrc
Normal file
33
gameboard-service/.eslintrc
Normal file
|
|
@ -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": "^_" }]
|
||||||
|
}
|
||||||
|
}
|
||||||
29
gameboard-service/.github/workflows/release.yaml
vendored
Normal file
29
gameboard-service/.github/workflows/release.yaml
vendored
Normal file
|
|
@ -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 }}
|
||||||
43
gameboard-service/.github/workflows/tests.yaml
vendored
Normal file
43
gameboard-service/.github/workflows/tests.yaml
vendored
Normal file
|
|
@ -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
|
||||||
22
gameboard-service/.gitignore
vendored
Normal file
22
gameboard-service/.gitignore
vendored
Normal file
|
|
@ -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
|
||||||
1
gameboard-service/.node-version
Normal file
1
gameboard-service/.node-version
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
18.17.1
|
||||||
2
gameboard-service/.npmrc
Normal file
2
gameboard-service/.npmrc
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
engine-strict=true
|
||||||
|
resolution-mode=highest
|
||||||
15
gameboard-service/.prettierignore
Normal file
15
gameboard-service/.prettierignore
Normal file
|
|
@ -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
|
||||||
8
gameboard-service/.prettierrc
Normal file
8
gameboard-service/.prettierrc
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"useTabs": false,
|
||||||
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
|
"pluginSearchDirs": ["."],
|
||||||
|
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||||
|
}
|
||||||
3
gameboard-service/CODE-OF-CONDUCT.md
Normal file
3
gameboard-service/CODE-OF-CONDUCT.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# Battlesnake Code of Conduct
|
||||||
|
|
||||||
|
Please see https://docs.battlesnake.com/policies/conduct
|
||||||
8
gameboard-service/CONTRIBUTING.md
Normal file
8
gameboard-service/CONTRIBUTING.md
Normal file
|
|
@ -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!
|
||||||
661
gameboard-service/LICENSE
Normal file
661
gameboard-service/LICENSE
Normal file
|
|
@ -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/>.
|
||||||
102
gameboard-service/README.md
Normal file
102
gameboard-service/README.md
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
# Battlesnake Game Board
|
||||||
|
|
||||||
|
 
|
||||||
|
|
||||||
|
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.
|
||||||
3
gameboard-service/netlify.toml
Normal file
3
gameboard-service/netlify.toml
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
[build]
|
||||||
|
command = "npm run build"
|
||||||
|
publish = "build"
|
||||||
4595
gameboard-service/package-lock.json
generated
Normal file
4595
gameboard-service/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
50
gameboard-service/package.json
Normal file
50
gameboard-service/package.json
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
12
gameboard-service/playwright.config.ts
Normal file
12
gameboard-service/playwright.config.ts
Normal file
|
|
@ -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;
|
||||||
6
gameboard-service/postcss.config.js
Normal file
6
gameboard-service/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
15
gameboard-service/src/app.d.ts
vendored
Normal file
15
gameboard-service/src/app.d.ts
vendored
Normal file
|
|
@ -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 {};
|
||||||
19
gameboard-service/src/app.html
Normal file
19
gameboard-service/src/app.html
Normal file
|
|
@ -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>
|
||||||
26
gameboard-service/src/lib/actions/keybind.ts
Normal file
26
gameboard-service/src/lib/actions/keybind.ts
Normal file
|
|
@ -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();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
20
gameboard-service/src/lib/actions/resize.ts
Normal file
20
gameboard-service/src/lib/actions/resize.ts
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
20
gameboard-service/src/lib/actions/tooltip.ts
Normal file
20
gameboard-service/src/lib/actions/tooltip.ts
Normal file
|
|
@ -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()
|
||||||
|
};
|
||||||
|
}
|
||||||
94
gameboard-service/src/lib/components/Gameboard.svelte
Normal file
94
gameboard-service/src/lib/components/Gameboard.svelte
Normal file
|
|
@ -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>
|
||||||
55
gameboard-service/src/lib/components/PlaybackControls.svelte
Normal file
55
gameboard-service/src/lib/components/PlaybackControls.svelte
Normal file
|
|
@ -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}
|
||||||
112
gameboard-service/src/lib/components/Scoreboard.svelte
Normal file
112
gameboard-service/src/lib/components/Scoreboard.svelte
Normal file
|
|
@ -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>
|
||||||
53
gameboard-service/src/lib/components/Scrubber.svelte
Normal file
53
gameboard-service/src/lib/components/Scrubber.svelte
Normal file
|
|
@ -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}
|
||||||
13
gameboard-service/src/lib/components/SvgFood.svelte
Normal file
13
gameboard-service/src/lib/components/SvgFood.svelte
Normal file
|
|
@ -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} />
|
||||||
47
gameboard-service/src/lib/components/SvgGrid.svelte
Normal file
47
gameboard-service/src/lib/components/SvgGrid.svelte
Normal file
|
|
@ -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>
|
||||||
12
gameboard-service/src/lib/components/SvgHazard.svelte
Normal file
12
gameboard-service/src/lib/components/SvgHazard.svelte
Normal file
|
|
@ -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} />
|
||||||
18
gameboard-service/src/lib/components/SvgSnake.svelte
Normal file
18
gameboard-service/src/lib/components/SvgSnake.svelte
Normal file
|
|
@ -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>
|
||||||
246
gameboard-service/src/lib/components/SvgSnakeBody.svelte
Normal file
246
gameboard-service/src/lib/components/SvgSnakeBody.svelte
Normal file
|
|
@ -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}
|
||||||
93
gameboard-service/src/lib/components/SvgSnakeHead.svelte
Normal file
93
gameboard-service/src/lib/components/SvgSnakeHead.svelte
Normal file
|
|
@ -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>
|
||||||
69
gameboard-service/src/lib/components/SvgSnakeTail.svelte
Normal file
69
gameboard-service/src/lib/components/SvgSnakeTail.svelte
Normal file
|
|
@ -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}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
24
gameboard-service/src/lib/customizations.ts
Normal file
24
gameboard-service/src/lib/customizations.ts
Normal file
|
|
@ -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];
|
||||||
|
}
|
||||||
31
gameboard-service/src/lib/geometry.ts
Normal file
31
gameboard-service/src/lib/geometry.ts
Normal file
|
|
@ -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)
|
||||||
|
};
|
||||||
|
}
|
||||||
3
gameboard-service/src/lib/highlight.ts
Normal file
3
gameboard-service/src/lib/highlight.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
|
export const highlightedSnakeID = writable<string | null>(null);
|
||||||
26
gameboard-service/src/lib/playback/animation.ts
Normal file
26
gameboard-service/src/lib/playback/animation.ts
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
84
gameboard-service/src/lib/playback/engine.ts
Normal file
84
gameboard-service/src/lib/playback/engine.ts
Normal file
|
|
@ -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);
|
||||||
|
});
|
||||||
|
}
|
||||||
54
gameboard-service/src/lib/playback/messages.ts
Normal file
54
gameboard-service/src/lib/playback/messages.ts
Normal file
|
|
@ -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: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
178
gameboard-service/src/lib/playback/stores.ts
Normal file
178
gameboard-service/src/lib/playback/stores.ts
Normal file
|
|
@ -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();
|
||||||
98
gameboard-service/src/lib/playback/types.ts
Normal file
98
gameboard-service/src/lib/playback/types.ts
Normal file
|
|
@ -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
|
||||||
|
};
|
||||||
|
}
|
||||||
45
gameboard-service/src/lib/settings/helpers.ts
Normal file
45
gameboard-service/src/lib/settings/helpers.ts
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
133
gameboard-service/src/lib/settings/stores.ts
Normal file
133
gameboard-service/src/lib/settings/stores.ts
Normal file
|
|
@ -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)
|
||||||
|
};
|
||||||
|
}
|
||||||
72
gameboard-service/src/lib/svg.ts
Normal file
72
gameboard-service/src/lib/svg.ts
Normal file
|
|
@ -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
|
||||||
|
};
|
||||||
|
}
|
||||||
19
gameboard-service/src/lib/theme.ts
Normal file
19
gameboard-service/src/lib/theme.ts
Normal file
|
|
@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
gameboard-service/src/routes/(iframed)/+layout.svelte
Normal file
11
gameboard-service/src/routes/(iframed)/+layout.svelte
Normal file
|
|
@ -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>
|
||||||
131
gameboard-service/src/routes/(iframed)/+page.svelte
Normal file
131
gameboard-service/src/routes/(iframed)/+page.svelte
Normal file
|
|
@ -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>
|
||||||
68
gameboard-service/src/routes/(iframed)/settings/+page.svelte
Normal file
68
gameboard-service/src/routes/(iframed)/settings/+page.svelte
Normal file
|
|
@ -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>
|
||||||
7
gameboard-service/src/routes/+layout.svelte
Normal file
7
gameboard-service/src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script>
|
||||||
|
import "../styles.css";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
4
gameboard-service/src/routes/+layout.ts
Normal file
4
gameboard-service/src/routes/+layout.ts
Normal file
|
|
@ -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;
|
||||||
93
gameboard-service/src/routes/examples/iframes/+page.svelte
Normal file
93
gameboard-service/src/routes/examples/iframes/+page.svelte
Normal file
|
|
@ -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>
|
||||||
5
gameboard-service/src/sanity.test.ts
Normal file
5
gameboard-service/src/sanity.test.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import { expect, test } from "vitest";
|
||||||
|
|
||||||
|
test("sanity", () => {
|
||||||
|
expect(true).toBeTruthy();
|
||||||
|
});
|
||||||
20
gameboard-service/src/styles.css
Normal file
20
gameboard-service/src/styles.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
BIN
gameboard-service/static/apple-touch-icon.png
Normal file
BIN
gameboard-service/static/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
gameboard-service/static/favicon.ico
Normal file
BIN
gameboard-service/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
1
gameboard-service/static/favicon.svg
Normal file
1
gameboard-service/static/favicon.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 354 B |
3
gameboard-service/static/robots.txt
Normal file
3
gameboard-service/static/robots.txt
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
1
gameboard-service/static/version
Normal file
1
gameboard-service/static/version
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
0.0.0
|
||||||
26
gameboard-service/svelte.config.js
Normal file
26
gameboard-service/svelte.config.js
Normal file
|
|
@ -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;
|
||||||
9
gameboard-service/tailwind.config.js
Normal file
9
gameboard-service/tailwind.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||||
|
plugins: [require("@tailwindcss/forms")],
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
6
gameboard-service/tests/test.ts
Normal file
6
gameboard-service/tests/test.ts
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
22
gameboard-service/tsconfig.json
Normal file
22
gameboard-service/tsconfig.json
Normal file
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
15
gameboard-service/vite.config.ts
Normal file
15
gameboard-service/vite.config.ts
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
# fly.toml app configuration file generated for snaketest-crimson-resonance-3100 on 2025-04-17T09:53:30-07: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.
|
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
|
||||||
#
|
#
|
||||||
|
|
||||||
app = 'snaketest-crimson-resonance-3100'
|
app = 'snaketest-wandering-moon-549'
|
||||||
primary_region = 'sea'
|
primary_region = 'sea'
|
||||||
|
|
||||||
[build]
|
[build]
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue