Initial commit

.eslintrc.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+  ],
+  plugins: ["svelte3", "@typescript-eslint"],
+  overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
+  settings: {
+    "svelte3/typescript": () => require("typescript"),
+  },
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2019,
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+};

.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

README.md

@@ -0,0 +1,107 @@
+_Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing._
+
+_Looking for a shareable component template instead? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)_
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+_Note that you will need to have [Node.js](https://nodejs.org) installed._
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for _any_ path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "svelte-shark-game",
+  "version": "0.0.1",
+  "private": true,
+  "main": "public/",
+  "homepage": "http://shark.tobot.dev/",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "yarn lint:prettier && yarn lint:eslint",
+    "lint:prettier": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . ",
+    "lint:eslint": "eslint --ignore-path .gitignore ./src/",
+    "fix": "yarn fix:prettier && yarn fix:eslint",
+    "fix:prettier": "prettier --ignore-path .gitignore --write --plugin-search-dir=. . ",
+    "fix:eslint": "eslint --fix --ignore-path .gitignore ./src/"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^8.0.0",
+    "@tsconfig/svelte": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "autoprefixer": "^10.3.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^3.2.1",
+    "postcss": "^8.3.8",
+    "prettier": "^2.4.1",
+    "prettier-plugin-svelte": "^2.4.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sass": "^1.42.1",
+    "svelte": "^3.0.0",
+    "svelte-check": "^2.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0"
+  },
+  "dependencies": {
+    "sirv-cli": "^1.0.0"
+  }
+}

public/index.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Welcome to a shark. I hope you enjoy this aquatic organism. -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <meta property="og:title" itemprop="name" content="Shark Game" />
+    <meta
+      property="og:description"
+      itemprop="description"
+      name="description"
+      content="A web game about resources, discovery and sharks."
+    />
+    <!-- Hosted on multiple domains
+    <meta property="og:url" content="https://cirri.al/sharks/" />
+    <meta property="og:url" content="https://shark.tobot.tech/" />
+    -->
+    <meta
+      property="og:url"
+      content="https://spencers145.github.io/SharkGame/"
+    />
+
+    <meta
+      property="og:image"
+      itemprop="image"
+      content="https://spencers145.github.io/SharkGame/img/sharkgame.png"
+    />
+
+    <meta
+      property="og:image:secure_url"
+      itemprop="image"
+      content="https://spencers145.github.io/SharkGame/img/sharkgame.png"
+    />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="200" />
+    <meta property="og:image:height" content="200" />
+    <meta
+      property="og:image:alt"
+      content="A grey-blue shark drawn in a simple lineless style swims in front of a navy blue background. There are the words Shark Game, the word Shark above the shark and the word Game below it."
+    />
+
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+    <link
+      rel="image_src"
+      href="https://spencers145.github.io/SharkGame/img/sharkgame.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      href="https://spencers145.github.io/SharkGame/img/sharkgame.png"
+    />
+
+    <link rel="stylesheet" type="text/css" href="./build/bundle.css" />
+    <script defer src="./build/bundle.js"></script>
+  </head>
+  <body>
+    <noscript>
+      <style>
+        #wrapper {
+          display: none;
+        }
+      </style>
+      <h1>Shark Game??</h1>
+
+      <span
+        >Oh dear! It seems you have Javascript disabled, or that your current
+        browser does not support scripts.</span
+      >
+      <span
+        >Shark Game requires scripts to work. Otherwise it's just a static
+        webpage that doesn't do much.</span
+      >
+      <span>In fact, it only displays this Shark asking you for scripts.</span>
+
+      <pre>
+                    ,                            
+                  .';                            
+              .-'` .'                            
+            ,`.-'-.`\                            
+           ; /     '-'                           
+           | \       ,-,           (scripts plz.)
+           \  '-.__   )_`'._      /              
+            '.     ```      ``'--._              
+           .-' ,                   `'-.          
+            '-'`-._           ((   o   )         
+             jgs   `'--....(`- ,__..--'          
+                            '-'`                 </pre
+      >
+    </noscript>
+  </body>
+</html>

rollup.config.mjs

@@ -0,0 +1,94 @@
+import svelte from "rollup-plugin-svelte";
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import livereload from "rollup-plugin-livereload";
+import { terser } from "rollup-plugin-terser";
+import sveltePreprocess from "svelte-preprocess";
+import typescript from "@rollup/plugin-typescript";
+import scss from "rollup-plugin-scss";
+import sass from "sass";
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+import child_process from "child_process";
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = child_process.spawn("npm", ["run", "start", "--", "--dev"], {
+        stdio: ["ignore", "inherit", "inherit"],
+        shell: true,
+      });
+
+      process.on("SIGTERM", toExit);
+      process.on("exit", toExit);
+    },
+  };
+}
+
+export default {
+  input: "src/main.ts",
+  output: {
+    sourcemap: true,
+    format: "iife",
+    name: "app",
+    file: "public/build/bundle.js",
+  },
+  plugins: [
+    svelte({
+      preprocess: sveltePreprocess({ sourceMap: true }),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    scss({
+      output: "public/build/bundle.css",
+      outputStyle: production ? "compressed" : "expanded",
+      sass,
+      processor() {
+        return postcss([autoprefixer({})]);
+      },
+    }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ["svelte"],
+    }),
+    commonjs(),
+    typescript({
+      sourceMap: true,
+      inlineSources: !production,
+    }),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload("public"),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};

src/App.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Header from "./components/Header.svelte";
+  import Wrapper from "./components/Wrapper.svelte";
+  import Footer from "./components/Footer.svelte";
+</script>
+
+<Header />
+<Wrapper />
+<Footer />

src/components/Footer.svelte

@@ -0,0 +1,21 @@
+<footer>
+  The above variably-named Shark Game<br />
+  &copy; <a href="https://cirri.al/">Cirrial</a>, 2014-2016<br />
+  &copy; <a href="https://github.com/spencers145/">spencers145</a>, 2020-2021<br
+  />
+  All rights reserved.
+</footer>
+
+<style lang="scss">
+  footer {
+    user-select: none;
+    pointer-events: none;
+    font-size: 80%;
+    color: var(--color-lighter);
+    filter: brightness(130%);
+
+    > a {
+      pointer-events: initial;
+    }
+  }
+</style>

src/components/Header.svelte

@@ -0,0 +1 @@
+<header id="title">save</header>

src/components/Wrapper.svelte

@@ -0,0 +1 @@
+<main id="wrapper">Wrapper</main>

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

src/main.ts

@@ -0,0 +1,10 @@
+import App from "./App.svelte";
+import "./styles/themes.scss";
+import "./styles/noscript.scss";
+import "./styles/global.scss";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

src/styles/global.scss

@@ -0,0 +1,38 @@
+html {
+  min-height: 100%;
+}
+body {
+  min-height: 100%;
+  font-family: Verdana, Geneva, sans-serif;
+  text-align: center;
+}
+
+h1,
+h4 {
+  color: var(--color-lighter);
+  text-shadow: 0 0 0.3em var(--color-darker);
+}
+
+h1 {
+  font-size: 2em;
+  filter: brightness(130%);
+}
+h4 {
+  font-size: 0.8em;
+  text-align: center;
+}
+
+a {
+  &:active,
+  &:hover,
+  &:visited,
+  &:link {
+    color: var(--color-lighter);
+  }
+  &:hover {
+    filter: brightness(125%);
+  }
+  &:active {
+    filter: brightness(135%);
+  }
+}

src/styles/noscript.scss

@@ -0,0 +1,6 @@
+noscript {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

src/styles/themes.scss

@@ -0,0 +1,191 @@
+//abandoned theme
+$color-lighter-abandoned: #7e798f;
+$color-light-abandoned: #454152;
+$color-med-abandoned: #1f1b2c;
+$color-dark-abandoned: #171226;
+$color-darker-abandoned: #0a0514;
+
+//chaotic theme
+$color-lighter-chaotic: #a2b3ae;
+$color-light-chaotic: #69877d;
+$color-med-chaotic: #45695d;
+$color-dark-chaotic: #26453b;
+$color-darker-chaotic: #113a2d;
+
+//frigid theme
+$color-lighter-frigid: #c0cdd4;
+$color-light-frigid: #5d829b;
+$color-med-frigid: #2f5d7c;
+$color-dark-frigid: #14415f;
+$color-darker-frigid: #05283f;
+
+//haven theme
+$color-lighter-haven: #75aab6;
+$color-light-haven: #2f7591;
+$color-med-haven: #1d5372;
+$color-dark-haven: #053247;
+$color-darker-haven: #001d2b;
+
+// marine theme (default)
+$color-lighter: #8e9fc0;
+$color-light: #536892;
+$color-med: #2e4372;
+$color-dark: #152a55;
+$color-darker: #061639;
+
+//shrouded theme
+$color-lighter-shrouded: #22bec3;
+$color-light-shrouded: #302d39;
+$color-med-shrouded: #121019;
+$color-dark-shrouded: #0f0b18;
+$color-darker-shrouded: #0a0613;
+
+//tempestuous theme
+$color-lighter-tempestuous: #858d9e;
+$color-light-tempestuous: #5e687e;
+$color-med-tempestuous: #3e4960;
+$color-dark-tempestuous: #253046;
+$color-darker-tempestuous: #121a2b;
+
+//violent theme
+$color-lighter-violent: #975f5f;
+$color-light-violent: #714141;
+$color-med-violent: #6b2b2b;
+$color-dark-violent: #5c1919;
+$color-darker-violent: #450808;
+
+// -- END OF THEMES --
+
+$color-danger-lighter: #975f5f;
+$color-danger-light: #714141;
+$color-danger-med: #6b2b2b;
+$color-danger-dark: #5c1919;
+$color-danger-darker: #450808;
+
+$color-essence: #ace3d1;
+$color-numen: #ffffff;
+
+$color-error: #e03030;
+$color-error-bg: #800000;
+
+$color-discovery: #ace3d1;
+$color-discovery-dark: darken(#ace3d1, 20%);
+$color-discovery-dark2: darken(#ace3d1, 35%);
+$color-discovery-dark3: darken(#ace3d1, 50%);
+$color-discovery-dark4: darken(#ace3d1, 65%);
+
+$color-text: white;
+
+:root {
+  --color-lighter: #{$color-lighter};
+  --color-light: #{$color-light};
+  --color-med: #{$color-med};
+  --color-dark: #{$color-dark};
+  --color-darker: #{$color-darker};
+  --color-title: #{rgba(
+      red($color-med),
+      green($color-med),
+      blue($color-med),
+      0.2
+    )};
+
+  :not(.no-theme) {
+    &.abandoned {
+      --color-lighter: #{$color-lighter-abandoned};
+      --color-light: #{$color-light-abandoned};
+      --color-med: #{$color-med-abandoned};
+      --color-dark: #{$color-dark-abandoned};
+      --color-darker: #{$color-darker-abandoned};
+      --color-title: #{rgba(
+          red($color-med-abandoned),
+          green($color-med-abandoned),
+          blue($color-med-abandoned),
+          0.2
+        )};
+    }
+    &.chaotic {
+      --color-lighter: #{$color-lighter-chaotic};
+      --color-light: #{$color-light-chaotic};
+      --color-med: #{$color-med-chaotic};
+      --color-dark: #{$color-dark-chaotic};
+      --color-darker: #{$color-darker-chaotic};
+      --color-title: #{rgba(
+          red($color-med-chaotic),
+          green($color-med-chaotic),
+          blue($color-med-chaotic),
+          0.2
+        )};
+    }
+    &.frigid {
+      --color-lighter: #{$color-lighter-frigid};
+      --color-light: #{$color-light-frigid};
+      --color-med: #{$color-med-frigid};
+      --color-dark: #{$color-dark-frigid};
+      --color-darker: #{$color-darker-frigid};
+      --color-title: #{rgba(
+          red($color-med-frigid),
+          green($color-med-frigid),
+          blue($color-med-frigid),
+          0.2
+        )};
+    }
+    &.haven {
+      --color-lighter: #{$color-lighter-haven};
+      --color-light: #{$color-light-haven};
+      --color-med: #{$color-med-haven};
+      --color-dark: #{$color-dark-haven};
+      --color-darker: #{$color-darker-haven};
+      --color-title: #{rgba(
+          red($color-med-haven),
+          green($color-med-haven),
+          blue($color-med-haven),
+          0.2
+        )};
+    }
+    &.shrouded {
+      --color-lighter: #{$color-lighter-shrouded};
+      --color-light: #{$color-light-shrouded};
+      --color-med: #{$color-med-shrouded};
+      --color-dark: #{$color-dark-shrouded};
+      --color-darker: #{$color-darker-shrouded};
+      --color-title: #{rgba(
+          red($color-med-shrouded),
+          green($color-med-shrouded),
+          blue($color-med-shrouded),
+          0.2
+        )};
+    }
+    &.tempestuous {
+      --color-lighter: #{$color-lighter-tempestuous};
+      --color-light: #{$color-light-tempestuous};
+      --color-med: #{$color-med-tempestuous};
+      --color-dark: #{$color-dark-tempestuous};
+      --color-darker: #{$color-darker-tempestuous};
+      --color-title: #{rgba(
+          red($color-med-tempestuous),
+          green($color-med-tempestuous),
+          blue($color-med-tempestuous),
+          0.2
+        )};
+    }
+    &.violent {
+      --color-lighter: #{$color-lighter-violent};
+      --color-light: #{$color-light-violent};
+      --color-med: #{$color-med-violent};
+      --color-dark: #{$color-dark-violent};
+      --color-darker: #{$color-darker-violent};
+      --color-title: #{rgba(
+          red($color-med-violent),
+          green($color-med-violent),
+          blue($color-med-violent),
+          0.2
+        )};
+    }
+  }
+}
+
+body {
+  color: $color-text;
+  background-color: var(--color-darker);
+  height: 100%;
+}

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "target": "ESNEXT",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}