commit
72174d6324
8 changed files with 1854 additions and 0 deletions
+ 2
- 0
.gitignore
View File
| @@ -0,0 +1,2 @@ | |||
| /node_modules/ | |||
| /public/build/ | |||
+ 1639
- 0
package-lock.json
File diff suppressed because it is too large
View File
+ 19
- 0
package.json
View File
| @@ -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" | |||
| } | |||
| } | |||
+ 63
- 0
public/global.css
View File
| @@ -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; | |||
| } | |||
+ 17
- 0
public/index.html
View File
| @@ -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> | |||
+ 76
- 0
rollup.config.js
View File
| @@ -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 | |||
| } | |||
| } | |||
+ 28
- 0
src/App.svelte
View File
| @@ -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> | |||
+ 10
- 0
src/main.js
View File
| @@ -0,0 +1,10 @@ | |||
| import App from './App.svelte'; | |||
| const app = new App({ | |||
| target: document.body, | |||
| props: { | |||
| name: 'world' | |||
| } | |||
| }); | |||
| export default app; | |||
Loading…