toby/svelte-sharg
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Initial commit

Browse source
This commit is contained in:
Tobias Berger 2021-09-26 16:04:20 +02:00
commit 514229256b
20 changed files with 2329 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
.eslintrc.cjs Normal file
View file

@ -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,
},
};

4
.gitignore vendored Normal file
View file

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

0
.prettierrc Normal file
View file

3
.vscode/extensions.json vendored Normal file
View file

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

107
README.md Normal file
View file

@ -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
```

48
package.json Normal file
View file

@ -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"
}
}

BIN
public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

91
public/index.html Normal file
View file

@ -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>

94
rollup.config.mjs Normal file
View file

@ -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,
},
};

9
src/App.svelte Normal file
View file

@ -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 />

21
src/components/Footer.svelte Normal file
View file

@ -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>

1
src/components/Header.svelte Normal file
View file

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

1
src/components/Wrapper.svelte Normal file
View file

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

1
src/global.d.ts vendored Normal file
View file

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

10
src/main.ts Normal file
View file

@ -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;

38
src/styles/global.scss Normal file
View file

@ -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%);
}
}

6
src/styles/noscript.scss Normal file
View file

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

191
src/styles/themes.scss Normal file
View file

@ -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%;
}

8
tsconfig.json Normal file
View file

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

1673
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff