├── .gitignore ├── public ├── favicon.png ├── icons │ ├── compare-512.png │ ├── compare.svg │ ├── right.svg │ └── wrong.svg ├── index.html └── global.css ├── src ├── utils.js ├── main.js ├── App.svelte └── select.js ├── package.json ├── rollup.config.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rich-Harris/cameoparison-starter/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/icons/compare-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rich-Harris/cameoparison-starter/HEAD/public/icons/compare-512.png -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export function pick_random(array) { 2 | const index = Math.floor(array.length * Math.random()); 3 | return array[index]; 4 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /public/icons/compare.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /public/icons/right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "build": "rollup -c", 6 | "dev": "rollup -c -w", 7 | "start": "sirv public" 8 | }, 9 | "devDependencies": { 10 | "@rollup/plugin-commonjs": "^12.0.0", 11 | "@rollup/plugin-node-resolve": "^8.0.0", 12 | "rollup": "^2.3.4", 13 | "rollup-plugin-livereload": "^1.0.0", 14 | "rollup-plugin-svelte": "^5.0.3", 15 | "rollup-plugin-terser": "^5.1.2", 16 | "svelte": "^3.0.0" 17 | }, 18 | "dependencies": { 19 | "sirv-cli": "^0.4.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/App.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Hello {name}!

7 |

Visit the Svelte tutorial to learn how to build Svelte apps.

8 |
9 | 10 | -------------------------------------------------------------------------------- /public/icons/wrong.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | padding: 0.4em; 36 | margin: 0 0 0.5em 0; 37 | box-sizing: border-box; 38 | border: 1px solid #ccc; 39 | border-radius: 2px; 40 | } 41 | 42 | input:disabled { 43 | color: #ccc; 44 | } 45 | 46 | input[type="range"] { 47 | height: 0; 48 | } 49 | 50 | button { 51 | color: #333; 52 | background-color: #f4f4f4; 53 | outline: none; 54 | } 55 | 56 | button:disabled { 57 | color: #999; 58 | } 59 | 60 | button:not(:disabled):active { 61 | background-color: #ddd; 62 | } 63 | 64 | button:focus { 65 | border-color: #666; 66 | } 67 | -------------------------------------------------------------------------------- /src/select.js: -------------------------------------------------------------------------------- 1 | import { pick_random } from './utils.js'; 2 | 3 | const ROUNDS_PER_GAME = 10; 4 | 5 | function remove(array, index) { 6 | // if a 'similar' account was picked, there's no 7 | // guarantee that it's in the filtered array 8 | if (index === -1) return; 9 | 10 | // this is much faster than splicing the array 11 | array[index] = array[array.length - 1]; 12 | array.pop(); 13 | } 14 | 15 | export function select(celebs, lookup, category) { 16 | const filtered = celebs.filter(c => { 17 | return c.categories.includes(category); 18 | }); 19 | 20 | const seen = new Set(); 21 | const selection = []; 22 | 23 | let i = ROUNDS_PER_GAME; 24 | while (i--) { 25 | const n = Math.random(); 26 | const ai = Math.floor(n * filtered.length); 27 | const a = filtered[ai]; 28 | 29 | // remove a from the array so this person can't be picked again 30 | remove(filtered, ai); 31 | 32 | let b; 33 | 34 | // if this celeb has 'similar' celebs, decide whether to pick one 35 | const similar = a.similar.filter(id => !seen.has(id)); 36 | if ((similar.length > 0) && (Math.random() < 0.75)) { 37 | const id = pick_random(similar); 38 | b = lookup.get(id); 39 | } 40 | 41 | // otherwise pick someone at random 42 | else { 43 | b = pick_random(filtered); 44 | } 45 | 46 | selection.push({ a, b }); 47 | 48 | seen.add(a.id); 49 | seen.add(b.id); 50 | 51 | // remove b from the array so this person can't be picked again 52 | remove(filtered, filtered.indexOf(b)); 53 | } 54 | 55 | return selection; 56 | } -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | 7 | const production = !process.env.ROLLUP_WATCH; 8 | 9 | export default { 10 | input: 'src/main.js', 11 | output: { 12 | sourcemap: true, 13 | format: 'iife', 14 | name: 'app', 15 | file: 'public/build/bundle.js' 16 | }, 17 | plugins: [ 18 | svelte({ 19 | // enable run-time checks when not in production 20 | dev: !production, 21 | // we'll extract any component CSS out into 22 | // a separate file - better for performance 23 | css: css => { 24 | css.write('public/build/bundle.css'); 25 | } 26 | }), 27 | 28 | // If you have external dependencies installed from 29 | // npm, you'll most likely need these plugins. In 30 | // some cases you'll need additional configuration - 31 | // consult the documentation for details: 32 | // https://github.com/rollup/plugins/tree/master/packages/commonjs 33 | resolve({ 34 | browser: true, 35 | dedupe: ['svelte'] 36 | }), 37 | commonjs(), 38 | 39 | // In dev mode, call `npm run start` once 40 | // the bundle has been generated 41 | !production && serve(), 42 | 43 | // Watch the `public` directory and refresh the 44 | // browser on changes when not in production 45 | !production && livereload('public'), 46 | 47 | // If we're building for production (npm run build 48 | // instead of npm run dev), minify 49 | production && terser() 50 | ], 51 | watch: { 52 | clearScreen: false 53 | } 54 | }; 55 | 56 | function serve() { 57 | let started = false; 58 | 59 | return { 60 | writeBundle() { 61 | if (!started) { 62 | started = true; 63 | 64 | require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], { 65 | stdio: ['ignore', 'inherit', 'inherit'], 66 | shell: true 67 | }); 68 | } 69 | } 70 | }; 71 | } 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | *Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* 2 | 3 | --- 4 | 5 | # svelte app 6 | 7 | This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. 8 | 9 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 10 | 11 | ```bash 12 | npx degit sveltejs/template svelte-app 13 | cd svelte-app 14 | ``` 15 | 16 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 17 | 18 | 19 | ## Get started 20 | 21 | Install the dependencies... 22 | 23 | ```bash 24 | cd svelte-app 25 | npm install 26 | ``` 27 | 28 | ...then start [Rollup](https://rollupjs.org): 29 | 30 | ```bash 31 | npm run dev 32 | ``` 33 | 34 | 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. 35 | 36 | 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`. 37 | 38 | 39 | ## Building and running in production mode 40 | 41 | To create an optimised version of the app: 42 | 43 | ```bash 44 | npm run build 45 | ``` 46 | 47 | 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). 48 | 49 | 50 | ## Single-page app mode 51 | 52 | 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. 53 | 54 | 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: 55 | 56 | ```js 57 | "start": "sirv public --single" 58 | ``` 59 | 60 | 61 | ## Deploying to the web 62 | 63 | ### With [now](https://zeit.co/now) 64 | 65 | Install `now` if you haven't already: 66 | 67 | ```bash 68 | npm install -g now 69 | ``` 70 | 71 | Then, from within your project folder: 72 | 73 | ```bash 74 | cd public 75 | now deploy --name my-project 76 | ``` 77 | 78 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 79 | 80 | ### With [surge](https://surge.sh/) 81 | 82 | Install `surge` if you haven't already: 83 | 84 | ```bash 85 | npm install -g surge 86 | ``` 87 | 88 | Then, from within your project folder: 89 | 90 | ```bash 91 | npm run build 92 | surge public my-project.surge.sh 93 | ``` 94 | --------------------------------------------------------------------------------