@@ -0,0 +1,2 @@ | |||
/node_modules/ | |||
/public/build/ |
@@ -0,0 +1,19 @@ | |||
{ | |||
"name": "circuitgame", | |||
"version": "0.0.0", | |||
"private": true, | |||
"scripts": { | |||
"build": "rollup -c", | |||
"dev": "rollup -c -w" | |||
}, | |||
"devDependencies": { | |||
"@rollup/plugin-commonjs": "^17.0.0", | |||
"@rollup/plugin-node-resolve": "^11.0.0", | |||
"rollup": "^2.3.4", | |||
"rollup-plugin-css-only": "^3.1.0", | |||
"rollup-plugin-livereload": "^2.0.0", | |||
"rollup-plugin-svelte": "^7.0.0", | |||
"rollup-plugin-terser": "^7.0.0", | |||
"svelte": "^3.0.0" | |||
} | |||
} |
@@ -0,0 +1,63 @@ | |||
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; | |||
-webkit-padding: 0.4em 0; | |||
padding: 0.4em; | |||
margin: 0 0 0.5em 0; | |||
box-sizing: border-box; | |||
border: 1px solid #ccc; | |||
border-radius: 2px; | |||
} | |||
input:disabled { | |||
color: #ccc; | |||
} | |||
button { | |||
color: #333; | |||
background-color: #f4f4f4; | |||
outline: none; | |||
} | |||
button:disabled { | |||
color: #999; | |||
} | |||
button:not(:disabled):active { | |||
background-color: #ddd; | |||
} | |||
button:focus { | |||
border-color: #666; | |||
} |
@@ -0,0 +1,17 @@ | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset='utf-8'> | |||
<meta name='viewport' content='width=device-width,initial-scale=1'> | |||
<title>Svelte app</title> | |||
<link rel='stylesheet' href='global.css'> | |||
<link rel='stylesheet' href='build/bundle.css'> | |||
<script defer src='build/bundle.js'></script> | |||
</head> | |||
<body> | |||
</body> | |||
</html> |
@@ -0,0 +1,76 @@ | |||
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 css from 'rollup-plugin-css-only'; | |||
const production = !process.env.ROLLUP_WATCH; | |||
function serve() { | |||
let server; | |||
function toExit() { | |||
if (server) server.kill(0); | |||
} | |||
return { | |||
writeBundle() { | |||
if (server) return; | |||
server = require('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.js', | |||
output: { | |||
sourcemap: true, | |||
format: 'iife', | |||
name: 'app', | |||
file: 'public/build/bundle.js' | |||
}, | |||
plugins: [ | |||
svelte({ | |||
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 | |||
css({ output: 'bundle.css' }), | |||
// 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(), | |||
// 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 | |||
} | |||
} |
@@ -0,0 +1,28 @@ | |||
<script> | |||
export let name; | |||
</script> | |||
<main> | |||
<h1>Hello {name}!</h1> | |||
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> | |||
</main> | |||
<style> | |||
main { | |||
text-align: center; | |||
padding: 1em; | |||
max-width: 240px; | |||
margin: 0 auto; | |||
} | |||
h1 { | |||
color: #ff3e00; | |||
text-transform: uppercase; | |||
font-size: 4em; | |||
font-weight: 100; | |||
} | |||
@media (min-width: 640px) { | |||
main { | |||
max-width: none; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,10 @@ | |||
import App from './App.svelte'; | |||
const app = new App({ | |||
target: document.body, | |||
props: { | |||
name: 'world' | |||
} | |||
}); | |||
export default app; |