initial commit
This commit is contained in:
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
public/bundle.*
|
||||||
68
README.md
Normal file
68
README.md
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
*Psst — looking for a shareable component template? 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.
|
||||||
|
|
||||||
|
|
||||||
|
## Deploying to the web
|
||||||
|
|
||||||
|
### With [now](https://zeit.co/now)
|
||||||
|
|
||||||
|
Install `now` if you haven't already:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -g now
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, from within your project folder:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
now
|
||||||
|
```
|
||||||
|
|
||||||
|
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
|
||||||
|
|
||||||
|
### 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
|
||||||
|
```
|
||||||
22
package.json
Normal file
22
package.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "svelte-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"devDependencies": {
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"rollup": "^1.10.1",
|
||||||
|
"rollup-plugin-commonjs": "^9.3.4",
|
||||||
|
"rollup-plugin-livereload": "^1.0.0",
|
||||||
|
"rollup-plugin-node-resolve": "^4.2.3",
|
||||||
|
"rollup-plugin-svelte": "^5.0.3",
|
||||||
|
"rollup-plugin-terser": "^4.0.4",
|
||||||
|
"sirv-cli": "^0.4.0",
|
||||||
|
"svelte": "^3.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "rollup -c",
|
||||||
|
"autobuild": "rollup -c -w",
|
||||||
|
"dev": "run-p start:dev autobuild",
|
||||||
|
"start": "sirv public",
|
||||||
|
"start:dev": "sirv public --dev"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
61
public/global.css
Normal file
61
public/global.css
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
html, body {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #333;
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(0,100,200);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(0,80,160);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, select, textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 0.4em;
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
border-color: #666;
|
||||||
|
}
|
||||||
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf8'>
|
||||||
|
<meta name='viewport' content='width=device-width'>
|
||||||
|
|
||||||
|
<title>Svelte app</title>
|
||||||
|
|
||||||
|
<link rel='icon' type='image/png' href='favicon.png'>
|
||||||
|
<link rel='stylesheet' href='global.css'>
|
||||||
|
<link rel='stylesheet' href='bundle.css'>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script src='bundle.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
29
src/AddPlayer/AddPlayer.html
Normal file
29
src/AddPlayer/AddPlayer.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
export let name = '';
|
||||||
|
export let modifier = 0;
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function createPlayer(event) {
|
||||||
|
if (name !== "" && modifier !== "") {
|
||||||
|
const newPlayer = {
|
||||||
|
name: name,
|
||||||
|
modifier: modifier
|
||||||
|
};
|
||||||
|
dispatch('createPlayer', newPlayer);
|
||||||
|
name = '';
|
||||||
|
modifier = 0;
|
||||||
|
this.parentElement.querySelector('.input-name').focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<input class="input-name" bind:value={name} />
|
||||||
|
<input type="number" bind:value={modifier} />
|
||||||
|
<button on:click={createPlayer}>Add</button>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Name: {name}</li>
|
||||||
|
<li>Modifier: {modifier}</li>
|
||||||
|
</ul>
|
||||||
31
src/Main.html
Normal file
31
src/Main.html
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
<script context="module">
|
||||||
|
let localPlayers = JSON.parse(localStorage.getItem('players') || "[]");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PlayerListComponent from './PlayerList/PlayerList.html';
|
||||||
|
import AddPlayerComponent from './AddPlayer/AddPlayer.html';
|
||||||
|
|
||||||
|
let players = localPlayers;
|
||||||
|
|
||||||
|
function savePlayers() {
|
||||||
|
localStorage.setItem('players', JSON.stringify(players));
|
||||||
|
}
|
||||||
|
|
||||||
|
function createPlayer(event) {
|
||||||
|
players = [...players, event.detail];
|
||||||
|
savePlayers();
|
||||||
|
}
|
||||||
|
|
||||||
|
function removePlayer(event) {
|
||||||
|
let indexToRemove = players.findIndex((player) => {
|
||||||
|
return player.name === event.detail.name;
|
||||||
|
});
|
||||||
|
players.splice(indexToRemove, 1);
|
||||||
|
players = [...players];
|
||||||
|
savePlayers();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<AddPlayerComponent on:createPlayer={createPlayer} />
|
||||||
|
<PlayerListComponent players={players} on:removePlayer={removePlayer} />
|
||||||
27
src/PlayerList/PlayerList.html
Normal file
27
src/PlayerList/PlayerList.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
let newPlayer;
|
||||||
|
export let players = [
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function removePlayer(name) {
|
||||||
|
dispatch('removePlayer', { name });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
{#each players as player}
|
||||||
|
<li>
|
||||||
|
{player.name} - {player.modifier} <span on:click={e => removePlayer(player.name)}>X<span>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user