├── .gitignore
├── .prettierrc.json
├── shared
    ├── tsconfig.json
    ├── missing-types.d.ts
    └── state.ts
├── server
    ├── tsconfig.json
    ├── render.tsx
    ├── components
    │   └── pages
    │   │   ├── big-screen
    │   │       ├── styles.css
    │   │       └── index.tsx
    │   │   ├── header
    │   │       └── index.tsx
    │   │   ├── logged-out
    │   │       └── index.tsx
    │   │   ├── admin
    │   │       ├── topics
    │   │       │   └── index.tsx
    │   │       ├── index.tsx
    │   │       ├── simple-login
    │   │       │   └── index.tsx
    │   │       └── styles.css
    │   │   ├── logged-in
    │   │       └── index.tsx
    │   │   ├── big-screen-iframe
    │   │       └── index.tsx
    │   │   └── user-page
    │   │       ├── index.tsx
    │   │       └── styles.css
    ├── missing-types.d.ts
    ├── utils.ts
    ├── config.ts
    ├── index.ts
    ├── big-screen
    │   └── index.tsx
    ├── auth
    │   └── index.tsx
    ├── user
    │   └── index.tsx
    ├── admin
    │   └── index.tsx
    └── state.ts
├── client
    ├── tsconfig.json
    ├── missing-types.d.ts
    ├── big-screen-iframe
    │   └── index.tsx
    ├── admin
    │   └── index.tsx
    ├── admin-topics
    │   └── index.tsx
    ├── user
    │   └── index.tsx
    ├── components
    │   ├── select
    │   │   └── index.tsx
    │   ├── big-screen
    │   │   ├── vs.tsx
    │   │   ├── champion-scores.tsx
    │   │   ├── iframe.tsx
    │   │   ├── audio.tsx
    │   │   └── index.tsx
    │   ├── color-select
    │   │   └── index.tsx
    │   ├── vote
    │   │   ├── vote-buttons.tsx
    │   │   └── index.tsx
    │   ├── transition
    │   │   └── index.tsx
    │   └── admin
    │   │   ├── presentation-view
    │   │       └── index.tsx
    │   │   ├── index.tsx
    │   │   ├── bracket
    │   │       └── index.tsx
    │   │   ├── iframe
    │   │       └── index.tsx
    │   │   ├── selected-bracket
    │   │       └── index.tsx
    │   │   ├── champions
    │   │       └── index.tsx
    │   │   └── vote
    │   │       └── index.tsx
    ├── big-screen
    │   └── index.ts
    ├── ws
    │   └── index.ts
    └── utils.ts
├── generic-tsconfig.json
├── lib
    ├── node-external-plugin.js
    ├── resolve-dirs-plugin.js
    ├── consts-plugin.js
    ├── compress-plugin.js
    ├── asset-plugin.js
    ├── simple-ts.js
    ├── css-plugin.js
    └── client-bundle-plugin.js
├── missing-types.d.ts
├── config.js
├── CONTRIBUTING.md
├── package.json
├── rollup.config.js
├── start.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .DS_Store
3 | node_modules
4 | .data
5 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "all"
4 | }
5 | 


--------------------------------------------------------------------------------
/shared/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../generic-tsconfig.json",
3 |   "compilerOptions": {
4 |     "lib": ["esnext", "dom", "dom.iterable"],
5 |     "types": []
6 |   },
7 |   "include": ["./**/*"]
8 | }
9 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../generic-tsconfig.json",
3 |   "compilerOptions": {
4 |     "lib": ["esnext", "dom"],
5 |     "types": ["node"]
6 |   },
7 |   "references": [{ "path": "../client" }, { "path": "../shared" }]
8 | }
9 | 


--------------------------------------------------------------------------------
/client/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../generic-tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "lib": ["esnext", "dom", "dom.iterable"],
 5 |     "types": []
 6 |   },
 7 |   "references": [{ "path": "../shared" }],
 8 |   "include": ["./**/*"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/generic-tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "experimentalDecorators": true,
 4 |     "target": "ES2020",
 5 |     "downlevelIteration": true,
 6 |     "module": "esnext",
 7 |     "jsx": "react",
 8 |     "jsxFactory": "h",
 9 |     "strict": true,
10 |     "moduleResolution": "node",
11 |     "outDir": ".data/ts-tmp",
12 |     "composite": true,
13 |     "declarationMap": true,
14 |     "baseUrl": "./",
15 |     "rootDir": "./",
16 |     "allowSyntheticDefaultImports": true
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/client/missing-types.d.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | /// <reference path="../missing-types.d.ts" />
14 | 


--------------------------------------------------------------------------------
/shared/missing-types.d.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | /// <reference path="../missing-types.d.ts" />
14 | 


--------------------------------------------------------------------------------
/client/big-screen-iframe/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, render } from 'preact';
14 | import BigScreen from 'client/components/big-screen';
15 | 
16 | render(<BigScreen />, document.querySelector('.big-screen-container')!);
17 | 


--------------------------------------------------------------------------------
/server/render.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import render from 'preact-render-to-string';
14 | import { h, VNode } from 'preact';
15 | 
16 | export function renderPage(vnode: VNode) {
17 |   return '<!DOCTYPE html>' + render(vnode);
18 | }
19 | 


--------------------------------------------------------------------------------
/client/admin/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, render } from 'preact';
14 | import Admin from 'client/components/admin';
15 | import { keepServerAlive } from 'client/utils';
16 | 
17 | keepServerAlive();
18 | render(<Admin />, document.querySelector('.admin-container')!);
19 | 


--------------------------------------------------------------------------------
/client/admin-topics/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, render } from 'preact';
14 | import AdminTopics from 'client/components/admin-topics';
15 | import { keepServerAlive } from 'client/utils';
16 | 
17 | keepServerAlive();
18 | render(<AdminTopics />, document.querySelector('.topics-container')!);
19 | 


--------------------------------------------------------------------------------
/lib/node-external-plugin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | // Check that a node module exists, but treat it as external.
14 | export default function() {
15 |   return {
16 |     name: 'node-external',
17 |     resolveId(id) {
18 |       try {
19 |         require.resolve(id);
20 |         return { id, external: true };
21 |       } catch (err) {}
22 |     },
23 |   };
24 | }
25 | 


--------------------------------------------------------------------------------
/client/user/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, render } from 'preact';
14 | import Vote from 'client/components/vote';
15 | 
16 | declare global {
17 |   interface Window {
18 |     initialState: Vote['props']['initialState'];
19 |   }
20 | }
21 | 
22 | render(
23 |   <Vote initialState={self.initialState} />,
24 |   document.querySelector('.vote-container')!,
25 | );
26 | 


--------------------------------------------------------------------------------
/lib/resolve-dirs-plugin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { resolve } from 'path';
14 | 
15 | export default function resolveDirs(paths) {
16 |   return {
17 |     name: 'resolve-dirs',
18 |     async resolveId(id) {
19 |       const foundMatch = paths.some(
20 |         path => id === path || id.startsWith(path + '/'),
21 |       );
22 |       if (!foundMatch) return;
23 |       return resolve(await this.resolveId('./' + id, './'));
24 |     },
25 |   };
26 | }
27 | 


--------------------------------------------------------------------------------
/missing-types.d.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | declare module 'asset-url:*' {
14 |   const value: string;
15 |   export default value;
16 | }
17 | 
18 | declare module 'consts:title' {
19 |   const value: string;
20 |   export default value;
21 | }
22 | 
23 | declare module 'consts:subTitle' {
24 |   const value: string;
25 |   export default value;
26 | }
27 | 
28 | declare module 'consts:webSocketOrigin' {
29 |   const value: string;
30 |   export default value;
31 | }
32 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | 
14 | /** Displayed to the user, and on the big screen, and the <title> */
15 | export const title = 'Big Web Quiz';
16 | /** Displayed to the user, and on the big screen */
17 | export const subTitle = 'The over-engineered way to vote on stuff';
18 | /**
19 |  * Set WEB_SOCKET_ORIGIN if you want to use a different origin for the web socket.
20 |  * You probably don't.
21 |  */
22 | export const webSocketOrigin = process.env.WEB_SOCKET_ORIGIN || '';
23 | 


--------------------------------------------------------------------------------
/server/components/pages/big-screen/styles.css:
--------------------------------------------------------------------------------
 1 | /**
 2 | * Copyright 2019 Google Inc. All Rights Reserved.
 3 | * Licensed under the Apache License, Version 2.0 (the "License");
 4 | * you may not use this file except in compliance with the License.
 5 | * You may obtain a copy of the License at
 6 | *     http://www.apache.org/licenses/LICENSE-2.0
 7 | * Unless required by applicable law or agreed to in writing, software
 8 | * distributed under the License is distributed on an "AS IS" BASIS,
 9 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 | * See the License for the specific language governing permissions and
11 | * limitations under the License.
12 | */
13 | html,
14 | body {
15 |   background: #000;
16 |   margin: 0;
17 |   padding: 0;
18 |   overflow: hidden;
19 |   height: 100%;
20 | }
21 | 
22 | html:fullscreen {
23 |   cursor: none;
24 | 
25 |   iframe {
26 |     pointer-events: none;
27 |   }
28 | }
29 | 
30 | iframe {
31 |   position: absolute;
32 |   top: 50%;
33 |   left: 50%;
34 |   width: 1920px;
35 |   height: 1080px;
36 |   border: none;
37 |   transform: translate(-50%, -50%);
38 | }
39 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # How to Contribute
 2 | 
 3 | We'd love to accept your patches and contributions to this project. There are
 4 | just a few small guidelines you need to follow.
 5 | 
 6 | ## Contributor License Agreement
 7 | 
 8 | Contributions to this project must be accompanied by a Contributor License
 9 | Agreement. You (or your employer) retain the copyright to your contribution,
10 | this simply gives us permission to use and redistribute your contributions as
11 | part of the project. Head over to <https://cla.developers.google.com/> to see
12 | your current agreements on file or to sign a new one.
13 | 
14 | You generally only need to submit a CLA once, so if you've already submitted one
15 | (even if it was for a different project), you probably don't need to do it
16 | again.
17 | 
18 | ## Code reviews
19 | 
20 | All submissions, including submissions by project members, require review. We
21 | use GitHub pull requests for this purpose. Consult
22 | [GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
23 | information on using pull requests.
24 | 
25 | ## Community Guidelines
26 | 
27 | This project follows [Google's Open Source Community
28 | Guidelines](https://opensource.google.com/conduct/).
29 | 


--------------------------------------------------------------------------------
/lib/consts-plugin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | const moduleStart = 'consts:';
14 | 
15 | export default function constsPlugin(consts) {
16 |   return {
17 |     name: 'consts-plugin',
18 |     resolveId(id) {
19 |       if (!id.startsWith(moduleStart)) return;
20 |       return id;
21 |     },
22 |     load(id) {
23 |       if (!id.startsWith(moduleStart)) return;
24 |       const key = id.slice(moduleStart.length);
25 | 
26 |       if (!(key in consts)) {
27 |         this.error(`Cannot find const: ${key}`);
28 |         return;
29 |       }
30 | 
31 |       return `export default ${JSON.stringify(consts[key])}`;
32 |     },
33 |   };
34 | }
35 | 


--------------------------------------------------------------------------------
/client/components/select/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent, JSX } from 'preact';
14 | 
15 | const Select: FunctionalComponent<JSX.HTMLAttributes> = props => {
16 |   const { class: className, ...selectProps } = props;
17 | 
18 |   return (
19 |     <div class={'select' + (className ? ' ' + className : '')}>
20 |       <select {...selectProps}></select>
21 |       <div class="select-icon">
22 |         <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
23 |           <path d="M9.3 13l.7.7L15.7 8l-1.5-1.4-4.2 4.2-4.2-4.2L4.3 8z" />
24 |         </svg>
25 |       </div>
26 |     </div>
27 |   );
28 | };
29 | 
30 | export default Select;
31 | 


--------------------------------------------------------------------------------
/client/big-screen/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | const iframe = document.querySelector('iframe') as HTMLIFrameElement;
14 | const { width, height } = iframe.getBoundingClientRect();
15 | 
16 | function resizeIframe() {
17 |   const xScale = document.documentElement.offsetWidth / width;
18 |   const yScale = document.documentElement.offsetHeight / height;
19 |   const scale = Math.min(xScale, yScale);
20 |   iframe.style.transform = `translate(-50%, -50%) scale(${scale})`;
21 | }
22 | 
23 | window.onresize = resizeIframe;
24 | resizeIframe();
25 | 
26 | window.onkeydown = (event: KeyboardEvent) => {
27 |   if (event.key === 'f') {
28 |     document.documentElement.requestFullscreen();
29 |   }
30 | };
31 | 


--------------------------------------------------------------------------------
/server/missing-types.d.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | /// <reference path="../missing-types.d.ts" />
14 | 
15 | declare module 'client-bundle:*' {
16 |   const value: string;
17 |   export default value;
18 |   export const imports: string[];
19 | }
20 | 
21 | declare module 'css:*' {
22 |   const value: string;
23 |   export default value;
24 |   export const inline: string;
25 | }
26 | 
27 | // Types for our session
28 | declare namespace Express {
29 |   interface Session extends SessionData {
30 |     user?: UserSession;
31 |     voterId: string;
32 |     simpleAdminPassword?: string;
33 |   }
34 | }
35 | 
36 | interface UserSession {
37 |   email: string;
38 |   emailVerified: boolean;
39 |   name: string;
40 |   picture?: string;
41 |   id: string;
42 | }
43 | 


--------------------------------------------------------------------------------
/server/components/pages/header/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | 
15 | interface Props {
16 |   user?: UserSession;
17 | }
18 | 
19 | const Header: FunctionalComponent<Props> = ({ user }) => {
20 |   if (!user) return <header />;
21 | 
22 |   return (
23 |     <header class="main-header">
24 |       <img
25 |         width="40"
26 |         height="40"
27 |         alt={user.name}
28 |         src={`${user.picture}=s${40}-c`}
29 |         srcset={`${user.picture}=s${80}-c 2x`}
30 |         tabIndex={0}
31 |         class="user-image"
32 |       />
33 |       <form method="post" action="/auth/logout">
34 |         <button class="unbutton log-out-button">Logout</button>
35 |       </form>
36 |     </header>
37 |   );
38 | };
39 | 
40 | export default Header;
41 | 


--------------------------------------------------------------------------------
/client/components/big-screen/vs.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent, RenderableProps } from 'preact';
14 | 
15 | interface Props {
16 |   colorFrom?: string;
17 |   colorTo?: string;
18 | }
19 | 
20 | const VS: FunctionalComponent<Props> = ({
21 |   colorFrom,
22 |   colorTo,
23 |   children,
24 | }: RenderableProps<Props>) => (
25 |   <div
26 |     class="vs-circle"
27 |     style={{
28 |       '--color-from': colorFrom || '',
29 |       '--color-to': colorTo || '',
30 |     }}
31 |   >
32 |     <div class="vs-outer vs-outer-1"></div>
33 |     <div class="vs-outer vs-outer-2"></div>
34 |     <div class="vs-outer vs-outer-3"></div>
35 |     <div class="vs-outer vs-outer-4"></div>
36 |     <div class="vs-innermost-circle">{children || 'VS'}</div>
37 |   </div>
38 | );
39 | 
40 | export default VS;
41 | 


--------------------------------------------------------------------------------
/lib/compress-plugin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { brotliCompress } from 'zlib';
14 | import { promisify } from 'util';
15 | 
16 | const compress = promisify(brotliCompress);
17 | 
18 | export default function() {
19 |   return {
20 |     name: 'compress-plugin',
21 |     async generateBundle(options, bundle) {
22 |       const compressRe = /\.(js|css|svg|html)$/;
23 | 
24 |       await Promise.all(
25 |         Object.values(bundle).map(async entry => {
26 |           if (entry.type !== 'asset') return;
27 |           if (!compressRe.test(entry.fileName)) return;
28 |           const output = await compress(entry.source);
29 |           this.emitFile({
30 |             type: 'asset',
31 |             source: output,
32 |             fileName: entry.fileName + '.br',
33 |           });
34 |         }),
35 |       );
36 |     },
37 |   };
38 | }
39 | 


--------------------------------------------------------------------------------
/server/components/pages/logged-out/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | import UserPage from '../user-page';
15 | import { palette } from 'shared/state';
16 | import { getHexColor } from 'client/utils';
17 | 
18 | const LoggedOut: FunctionalComponent = () => {
19 |   return (
20 |     <UserPage>
21 |       <div class="log-in-container">
22 |         <form method="post" action="/auth/login">
23 |           <button
24 |             class="unbutton vote-button"
25 |             style={{
26 |               '--color-from': getHexColor(palette[5][0]),
27 |               '--color-to': getHexColor(palette[5][1]),
28 |             }}
29 |           >
30 |             Log in
31 |           </button>
32 |         </form>
33 |       </div>
34 |     </UserPage>
35 |   );
36 | };
37 | 
38 | export default LoggedOut;
39 | 


--------------------------------------------------------------------------------
/server/components/pages/admin/topics/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | 
15 | import cssPath from 'css:../styles.css';
16 | import bundleURL from 'client-bundle:client/admin-topics';
17 | import title from 'consts:title';
18 | 
19 | const TopicsAdminPage: FunctionalComponent = () => {
20 |   return (
21 |     <html>
22 |       <head>
23 |         <title>Topics - Admin - {title}</title>
24 |         <meta name="viewport" content="width=device-width,initial-scale=1" />
25 |         <link rel="stylesheet" href={cssPath} />
26 |         <script type="module" src={bundleURL} />
27 |       </head>
28 |       <body>
29 |         <h1>Topics</h1>
30 |         <p>
31 |           <a href="/admin/">Back</a>
32 |         </p>
33 |         <div class="topics-container" />
34 |       </body>
35 |     </html>
36 |   );
37 | };
38 | 
39 | export default TopicsAdminPage;
40 | 


--------------------------------------------------------------------------------
/server/components/pages/logged-in/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | import UserPage from '../user-page';
15 | import bundleURL, { imports } from 'client-bundle:client/user';
16 | import { State as UserState } from 'server/user';
17 | 
18 | interface Props {
19 |   user?: UserSession;
20 |   initialState: UserState;
21 | }
22 | 
23 | const LoggedIn: FunctionalComponent<Props> = ({ user, initialState }) => {
24 |   return (
25 |     <UserPage user={user}>
26 |       <script type="module" src={bundleURL} />
27 |       {imports.map(i => (
28 |         // @ts-ignore https://github.com/preactjs/preact/pull/2068
29 |         <link rel="preload" as="script" href={i} crossOrigin="" />
30 |       ))}
31 |       <script
32 |         dangerouslySetInnerHTML={{
33 |           __html: `self.initialState = ${JSON.stringify(initialState)}`,
34 |         }}
35 |       ></script>
36 |       <div class="vote-container" />
37 |     </UserPage>
38 |   );
39 | };
40 | 
41 | export default LoggedIn;
42 | 


--------------------------------------------------------------------------------
/server/components/pages/big-screen-iframe/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | 
15 | import cssPath from 'css:./styles.css';
16 | import bundleURL, { imports } from 'client-bundle:client/big-screen-iframe';
17 | import title from 'consts:title';
18 | 
19 | const BigScreenIframePage: FunctionalComponent<{}> = () => {
20 |   return (
21 |     <html>
22 |       <head>
23 |         <title>{title}</title>
24 |         <meta name="viewport" content="width=device-width,initial-scale=1" />
25 |         <link
26 |           rel="icon"
27 |           href="https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Ffavicon.png?v=1577974253219"
28 |         />
29 |         <link rel="stylesheet" href={cssPath} />
30 |         <script type="module" src={bundleURL} />
31 |         {imports.map(i => (
32 |           // @ts-ignore https://github.com/preactjs/preact/pull/2068
33 |           <link rel="preload" as="script" href={i} crossOrigin="" />
34 |         ))}
35 |       </head>
36 |       <body>
37 |         <div class="big-screen-container"></div>
38 |       </body>
39 |     </html>
40 |   );
41 | };
42 | 
43 | export default BigScreenIframePage;
44 | 


--------------------------------------------------------------------------------
/lib/asset-plugin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | 
14 | import { promises as fs } from 'fs';
15 | import { basename } from 'path';
16 | 
17 | const defaultOpts = {
18 |   prefix: 'asset-url',
19 | };
20 | 
21 | export default function assetPlugin(opts) {
22 |   opts = Object.assign({}, defaultOpts, opts);
23 |   const prefix = opts.prefix + ':';
24 |   return {
25 |     name: 'asset-plugin',
26 |     async resolveId(id, importer) {
27 |       if (!id.startsWith(prefix)) {
28 |         return;
29 |       }
30 |       // Add an additional .js to the end so it ends up with .js at the end in the _virtual folder.
31 |       return (
32 |         prefix +
33 |         (await this.resolveId(id.slice(prefix.length), importer)) +
34 |         '.js'
35 |       );
36 |     },
37 |     async load(id) {
38 |       if (!id.startsWith(prefix)) {
39 |         return;
40 |       }
41 | 
42 |       const realId = id.slice(prefix.length, -'.js'.length);
43 | 
44 |       const fileId = this.emitFile({
45 |         type: 'asset',
46 |         source: await fs.readFile(realId),
47 |         name: basename(realId),
48 |       });
49 | 
50 |       return `export default import.meta.ROLLUP_FILE_URL_${fileId}`;
51 |     },
52 |   };
53 | }
54 | 


--------------------------------------------------------------------------------
/server/components/pages/big-screen/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | 
15 | import cssPath from 'css:./styles.css';
16 | import bundleURL, { imports } from 'client-bundle:client/big-screen';
17 | import title from 'consts:title';
18 | 
19 | const BigScreenPage: FunctionalComponent<{}> = () => {
20 |   return (
21 |     <html>
22 |       <head>
23 |         <title>{title}</title>
24 |         <meta
25 |           name="viewport"
26 |           content="width=device-width,initial-scale=1,user-scalable=no"
27 |         />
28 |         <link
29 |           rel="icon"
30 |           href="https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Ffavicon.png?v=1577974253219"
31 |         />
32 |         <link rel="stylesheet" href={cssPath} />
33 |         <script type="module" src={bundleURL} />
34 |         {imports.map(i => (
35 |           // @ts-ignore https://github.com/preactjs/preact/pull/2068
36 |           <link rel="preload" as="script" href={i} crossOrigin="" />
37 |         ))}
38 |       </head>
39 |       <body>
40 |         <iframe src="/big-screen/iframe/" />
41 |       </body>
42 |     </html>
43 |   );
44 | };
45 | 
46 | export default BigScreenPage;
47 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "big-web-quiz",
 3 |   "private": true,
 4 |   "engines": {
 5 |     "node": "12.x"
 6 |   },
 7 |   "version": "1.0.0",
 8 |   "scripts": {
 9 |     "build": "rollup -c",
10 |     "watch": "rollup -c --watch",
11 |     "serve": "COOKIE_SECRET=devonly nodemon --watch .data/dist .data/dist",
12 |     "start": "node ./start.js",
13 |     "watchnserve": "npm run build && (npm run watch & npm run serve)"
14 |   },
15 |   "devDependencies": {
16 |     "@types/node": "^13.1.2",
17 |     "comlink": "^4.2.0",
18 |     "cssnano": "^4.1.10",
19 |     "del": "^5.1.0",
20 |     "husky": "^3.1.0",
21 |     "linkstate": "^1.1.1",
22 |     "nodemon": "^2.0.2",
23 |     "postcss": "^7.0.26",
24 |     "postcss-nested": "^4.2.1",
25 |     "postcss-url": "^8.0.0",
26 |     "prettier": "^1.19.1",
27 |     "pretty-quick": "^2.0.1",
28 |     "rollup": "^1.27.14",
29 |     "rollup-plugin-node-resolve": "^5.2.0",
30 |     "rollup-plugin-terser": "^5.1.3",
31 |     "typescript": "^3.7.4"
32 |   },
33 |   "dependencies": {
34 |     "@types/express": "^4.17.2",
35 |     "@types/express-session": "^1.15.16",
36 |     "@types/session-file-store": "^1.2.1",
37 |     "@types/uuid": "^3.4.6",
38 |     "@types/ws": "^6.0.4",
39 |     "express": "^4.17.1",
40 |     "express-async-handler": "^1.1.4",
41 |     "express-session": "^1.17.0",
42 |     "express-static-gzip": "^2.0.5",
43 |     "fast-json-patch": "^3.0.0-1",
44 |     "glob": "^7.1.6",
45 |     "google-auth-library": "^5.7.0",
46 |     "immer": "^5.1.0",
47 |     "preact": "^10.1.1",
48 |     "preact-render-to-string": "^5.1.3",
49 |     "session-file-store": "^1.3.1",
50 |     "uuid": "^3.3.3",
51 |     "ws": "^7.2.1"
52 |   },
53 |   "husky": {
54 |     "hooks": {
55 |       "pre-commit": "pretty-quick --staged"
56 |     }
57 |   },
58 |   "optionalDependencies": {
59 |     "bufferutil": "^4.0.1"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/server/components/pages/admin/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | 
15 | import cssPath from 'css:./styles.css';
16 | import bundleURL, { imports } from 'client-bundle:client/admin';
17 | import title from 'consts:title';
18 | 
19 | const AdminPage: FunctionalComponent = () => {
20 |   return (
21 |     <html>
22 |       <head>
23 |         <title>Admin - {title}</title>
24 |         <meta name="viewport" content="width=device-width,initial-scale=1" />
25 |         <link
26 |           rel="icon"
27 |           href="https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Ffavicon.png?v=1577974253219"
28 |         />
29 |         <link rel="stylesheet" href={cssPath} />
30 |         <script type="module" src={bundleURL} />
31 |         {imports.map(i => (
32 |           // @ts-ignore https://github.com/preactjs/preact/pull/2068
33 |           <link rel="preload" as="script" href={i} crossOrigin="" />
34 |         ))}
35 |       </head>
36 |       <body>
37 |         <h1>Admin</h1>
38 |         <p>
39 |           <a href="/admin/topics/">Edit topics</a>
40 |         </p>
41 |         <div class="admin-container" />
42 |       </body>
43 |     </html>
44 |   );
45 | };
46 | 
47 | export default AdminPage;
48 | 


--------------------------------------------------------------------------------
/server/components/pages/admin/simple-login/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | 
15 | import cssPath from 'css:../styles.css';
16 | import title from 'consts:title';
17 | 
18 | const AdminSimpleLogin: FunctionalComponent = () => {
19 |   return (
20 |     <html>
21 |       <head>
22 |         <title>Admin - {title}</title>
23 |         <meta name="viewport" content="width=device-width,initial-scale=1" />
24 |         <link rel="stylesheet" href={cssPath} />
25 |       </head>
26 |       <body>
27 |         <h1>Login</h1>
28 |         <form action="/auth/admin-login" method="POST" class="admin-form-items">
29 |           <div class="admin-form-item">
30 |             <div>
31 |               <label>
32 |                 <span class="label">Password</span>
33 |                 <input
34 |                   class="input"
35 |                   type="password"
36 |                   name="password"
37 |                   autoFocus
38 |                 />
39 |               </label>
40 |             </div>
41 |             <div>
42 |               <button class="button">Log in</button>
43 |             </div>
44 |           </div>
45 |         </form>
46 |       </body>
47 |     </html>
48 |   );
49 | };
50 | 
51 | export default AdminSimpleLogin;
52 | 


--------------------------------------------------------------------------------
/client/components/color-select/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, Component } from 'preact';
14 | import { palette } from 'shared/state';
15 | import { getHexColor } from 'client/utils';
16 | 
17 | interface Props {
18 |   name: string;
19 |   value?: number;
20 |   disabled?: boolean;
21 |   onChange?: (newVal: number) => void;
22 | }
23 | 
24 | export default class ColorSelect extends Component<Props, {}> {
25 |   private _onClick = (event: Event) => {
26 |     const onChange = this.props.onChange;
27 |     if (!onChange) return;
28 |     const el = event.currentTarget as HTMLInputElement;
29 |     onChange(Number(el.value));
30 |   };
31 | 
32 |   render({ name, disabled, value }: Props) {
33 |     return (
34 |       <div class={`color-select${disabled ? ' disabled' : ''}`}>
35 |         {palette.map((paletteItem, i) => (
36 |           <label>
37 |             <input
38 |               type="radio"
39 |               name={name}
40 |               value={i}
41 |               disabled={disabled}
42 |               checked={value === i}
43 |               onClick={this._onClick}
44 |             />
45 |             <span
46 |               class="color-select-item"
47 |               style={{
48 |                 '--color-from': getHexColor(paletteItem[0]),
49 |                 '--color-to': getHexColor(paletteItem[1]),
50 |               }}
51 |             ></span>
52 |           </label>
53 |         ))}
54 |       </div>
55 |     );
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/client/ws/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import webSocketOrigin from 'consts:webSocketOrigin';
14 | 
15 | export default class WS {
16 |   private _wsSendBuffer: string[] = [];
17 |   private _openWs?: WebSocket;
18 |   private _closed: boolean = false;
19 | 
20 |   constructor(
21 |     private _url: string,
22 |     private _onMessage: (message: string) => void,
23 |   ) {
24 |     this._connectWs();
25 |   }
26 | 
27 |   send(msg: string): void {
28 |     this._wsSendBuffer.push(msg);
29 |     if (this._openWs) this._sendMessages();
30 |   }
31 | 
32 |   close() {
33 |     this._closed = true;
34 |     if (this._openWs) this._openWs.close();
35 |   }
36 | 
37 |   private _sendMessages(): void {
38 |     const toSend = this._wsSendBuffer;
39 |     this._wsSendBuffer = [];
40 | 
41 |     for (const msg of toSend) this._openWs!.send(msg);
42 |   }
43 | 
44 |   private _connectWs(): void {
45 |     const url = new URL(this._url, webSocketOrigin || location.href);
46 |     url.protocol = url.protocol.replace('http', 'ws');
47 |     const ws = new WebSocket(url.href);
48 | 
49 |     ws.addEventListener('open', () => {
50 |       this._openWs = ws;
51 |       if (this._wsSendBuffer.length > 0) this._sendMessages();
52 |     });
53 | 
54 |     ws.addEventListener('close', () => {
55 |       this._openWs = undefined;
56 | 
57 |       if (this._closed) return;
58 | 
59 |       setTimeout(() => {
60 |         this._connectWs();
61 |       }, 2000);
62 |     });
63 | 
64 |     ws.addEventListener('message', event => {
65 |       this._onMessage(event.data);
66 |     });
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/client/components/vote/vote-buttons.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, Component } from 'preact';
14 | import { ClientVote, palette } from 'shared/state';
15 | import { getHexColor } from 'client/utils';
16 | 
17 | interface Props {
18 |   vote: ClientVote;
19 |   onVote: (index: number) => void;
20 | }
21 | 
22 | interface State {
23 |   currentVote: number;
24 | }
25 | 
26 | export default class VoteButtons extends Component<Props, State> {
27 |   state: State = {
28 |     currentVote: -1,
29 |   };
30 | 
31 |   private _onButtonClick = (event: Event) => {
32 |     const el = event.currentTarget as HTMLButtonElement;
33 |     const index = Number(el.dataset.i);
34 |     if (index === this.state.currentVote) return;
35 |     this.setState({ currentVote: index });
36 |     this.props.onVote(index);
37 |   };
38 | 
39 |   render({ vote }: Props, { currentVote }: State) {
40 |     return (
41 |       <div class="vote-buttons">
42 |         {vote.items.map((item, i) => [
43 |           i > 0 ? <div class="vote-or">or</div> : '',
44 |           <button
45 |             class={`unbutton vote-button${
46 |               currentVote === i
47 |                 ? ' vote-button-selected'
48 |                 : currentVote !== -1
49 |                 ? ' vote-button-unselected'
50 |                 : ''
51 |             }`}
52 |             style={{
53 |               '--color-from': getHexColor(palette[item.colorId][0]),
54 |               '--color-to': getHexColor(palette[item.colorId][1]),
55 |             }}
56 |             data-i={i}
57 |             onClick={this._onButtonClick}
58 |           >
59 |             {item.label}
60 |           </button>,
61 |         ])}
62 |       </div>
63 |     );
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/shared/state.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | export interface Champion {
14 |   name: string;
15 |   picture: string;
16 |   score: number;
17 | }
18 | 
19 | export interface Champions {
20 |   [id: string]: Champion;
21 | }
22 | 
23 | export interface Vote extends ClientVote {
24 |   state: 'staging' | 'introducing' | 'voting' | 'results';
25 | }
26 | 
27 | export interface VoteItem {
28 |   label: string;
29 |   championId: string;
30 |   colorId: number;
31 | }
32 | 
33 | export interface ClientVote {
34 |   id: string;
35 |   items: [VoteItem, VoteItem];
36 | }
37 | 
38 | export interface Topic {
39 |   label: string;
40 |   slidesURL: string;
41 |   championId: string;
42 |   colorId: number;
43 | }
44 | 
45 | export interface Topics {
46 |   [id: string]: Topic;
47 | }
48 | 
49 | export interface Result {
50 |   items: [string | Result, string | Result];
51 |   winningIndex: number;
52 | }
53 | 
54 | export type PresentationView = 'url' | 'champion-scores' | 'bracket';
55 | 
56 | export const palette = [
57 |   // [top, bottom] gradients as hex colours.
58 |   [0xef5350, 0xb71d1c],
59 |   [0xed407a, 0x890e50],
60 |   [0xab47bc, 0x4b158d],
61 |   [0x673bb7, 0x311b93],
62 | 
63 |   [0x5d6bc0, 0x1b237e],
64 |   [0x43a5f6, 0x0d48a2],
65 |   [0x2ab5f5, 0x02579b],
66 |   [0x25c6da, 0x02695c],
67 | 
68 |   [0x29a69b, 0x004e41],
69 |   [0x66bb6a, 0x1a5e20],
70 |   [0x9dcc65, 0x33691f],
71 |   [0xdde776, 0x837819],
72 | 
73 |   [0xf670fd, 0x93009a],
74 |   [0x8d6e63, 0x3e2723],
75 |   [0xffa726, 0xe65100],
76 |   [0xff7044, 0xbf360c],
77 | ];
78 | 
79 | /**
80 |  * Default iframes to list. In the form { 'label': 'url' }. Eg:
81 |  * { 'Promo': 'https://example.com/promo' }
82 |  */
83 | export const presetIframes = {};
84 | 


--------------------------------------------------------------------------------
/server/utils.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { Socket } from 'net';
14 | import { STATUS_CODES } from 'http';
15 | 
16 | import WebSocket, { Server as WebSocketServer } from 'ws';
17 | import { RequestHandler } from 'express';
18 | import { origin } from './config';
19 | 
20 | export function abortHandshake(
21 |   socket: Socket,
22 |   code: number,
23 |   message: string = STATUS_CODES[code] || 'unknown',
24 |   headers: { [headerName: string]: string } = {},
25 | ) {
26 |   if (socket.writable) {
27 |     headers = {
28 |       Connection: 'close',
29 |       'Content-type': 'text/html',
30 |       'Content-Length': Buffer.byteLength(message).toString(),
31 |       ...headers,
32 |     };
33 | 
34 |     socket.write(
35 |       `HTTP/1.1 ${code} ${STATUS_CODES[code]}\r\n` +
36 |         Object.keys(headers)
37 |           .map(h => `${h}: ${headers[h]}`)
38 |           .join('\r\n') +
39 |         '\r\n\r\n' +
40 |         message,
41 |     );
42 |   }
43 | 
44 |   socket.destroy();
45 | }
46 | 
47 | export function pingClients(wss: WebSocketServer) {
48 |   const aliveClients = new WeakSet<WebSocket>();
49 | 
50 |   wss.on('connection', ws => {
51 |     aliveClients.add(ws);
52 |     ws.on('pong', () => {
53 |       aliveClients.add(ws);
54 |     });
55 |   });
56 | 
57 |   setInterval(() => {
58 |     for (const client of wss.clients) {
59 |       if (!aliveClients.has(client)) return client.terminate();
60 |       aliveClients.delete(client);
61 |       client.ping();
62 |     }
63 |   }, 30000);
64 | }
65 | 
66 | export function requireSameOrigin(): RequestHandler {
67 |   return (req, res, next) => {
68 |     const reqOrigin = req.headers['origin'];
69 | 
70 |     if (reqOrigin !== origin) {
71 |       res.status(403).json({ err: 'Request must be same origin' });
72 |       return;
73 |     }
74 | 
75 |     next();
76 |   };
77 | }
78 | 


--------------------------------------------------------------------------------
/client/components/transition/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, Component, RenderableProps, toChildArray, VNode } from 'preact';
14 | 
15 | type VDOMChild = string | number | VNode;
16 | 
17 | interface Props {
18 |   onTransition: (el: HTMLElement) => PromiseLike<void>;
19 | }
20 | 
21 | function childIsVNode(child: VDOMChild): child is VNode {
22 |   return typeof child === 'object';
23 | }
24 | 
25 | export default class Transition extends Component<Props> {
26 |   private _currentChild?: VDOMChild;
27 |   private _transitioningOut?: VDOMChild;
28 |   private _pendingTransition: boolean = false;
29 | 
30 |   async componentDidUpdate() {
31 |     if (!this._pendingTransition) return;
32 |     this._pendingTransition = false;
33 |     await this.props.onTransition(this.base as HTMLElement);
34 |     this._transitioningOut = undefined;
35 |     this.setState({});
36 |   }
37 | 
38 |   render({ children }: RenderableProps<Props>) {
39 |     const childArray = toChildArray(children);
40 | 
41 |     if (toChildArray(children).length > 1) {
42 |       throw Error('<Transition/> may only have one child');
43 |     }
44 | 
45 |     const [child] = childArray;
46 | 
47 |     const updatingCurrent =
48 |       !this._currentChild ||
49 |       (!childIsVNode(child) && !childIsVNode(this._currentChild)) ||
50 |       (childIsVNode(child) &&
51 |         childIsVNode(this._currentChild) &&
52 |         child.type === this._currentChild.type &&
53 |         child.key === this._currentChild.key);
54 | 
55 |     if (!updatingCurrent) {
56 |       this._transitioningOut = this._currentChild;
57 |       this._pendingTransition = true;
58 |     }
59 | 
60 |     this._currentChild = child;
61 | 
62 |     return (
63 |       <div class="transition-grid">
64 |         {[this._transitioningOut || <div />, child || <div />]}
65 |       </div>
66 |     );
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/server/components/pages/user-page/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, FunctionalComponent } from 'preact';
14 | import Header from '../header';
15 | import title from 'consts:title';
16 | import subTitle from 'consts:subTitle';
17 | 
18 | import { inline as inlineCSS } from 'css:./styles.css';
19 | 
20 | interface Props {
21 |   user?: UserSession;
22 | }
23 | 
24 | const UserPage: FunctionalComponent<Props> = ({ children, user }) => {
25 |   return (
26 |     <html>
27 |       <head>
28 |         <title>{title}</title>
29 |         <meta name="viewport" content="width=device-width,initial-scale=1" />
30 |         <link
31 |           rel="preload"
32 |           as="font"
33 |           crossOrigin=""
34 |           href="https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Fnormal.woff2?v=1577974248786"
35 |         />
36 |         <link
37 |           rel="preload"
38 |           as="font"
39 |           crossOrigin=""
40 |           href="https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Fbold.woff2?v=1577974248594"
41 |         />
42 |         <link
43 |           rel="icon"
44 |           href="https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Ffavicon.png?v=1577974253219"
45 |         />
46 |         <style
47 |           dangerouslySetInnerHTML={{
48 |             __html: inlineCSS,
49 |           }}
50 |         ></style>
51 |       </head>
52 |       <body>
53 |         <div class="main-ui">
54 |           <Header user={user} />
55 |           <div class="main-content-container">
56 |             <div class="main-content">
57 |               <div class="site-title">
58 |                 <h1>{title}</h1>
59 |                 <p>{subTitle}</p>
60 |               </div>
61 |               <div class="main-action-area">{children}</div>
62 |             </div>
63 |           </div>
64 |         </div>
65 |       </body>
66 |     </html>
67 |   );
68 | };
69 | 
70 | export default UserPage;
71 | 


--------------------------------------------------------------------------------
/client/components/admin/presentation-view/index.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, Component } from 'preact';
14 | import { PresentationView } from 'shared/state';
15 | import { Operation } from 'fast-json-patch';
16 | import { fetchJSON } from 'client/utils';
17 | 
18 | interface Props {
19 |   mode: PresentationView;
20 | }
21 | 
22 | const presentationStates: { [mode in PresentationView]: string } = {
23 |   url: 'URL',
24 |   bracket: 'Results bracket',
25 |   'champion-scores': 'Champion scores',
26 | };
27 | 
28 | export default class AdminPresentationView extends Component<Props> {
29 |   private _onRadioClick = (event: Event) => {
30 |     const el = event.currentTarget as HTMLInputElement;
31 |     const newVal = el.value as PresentationView;
32 | 
33 |     const patches: Operation[] = [
34 |       {
35 |         op: 'replace',
36 |         path: `/presentationView`,
37 |         value: newVal,
38 |       },
39 |     ];
40 | 
41 |     // Clear the zoom state of the bracket when we go back to the URL
42 |     if (newVal === 'url') {
43 |       patches.push({
44 |         op: 'replace',
45 |         path: `/bracketZoom`,
46 |         value: null,
47 |       });
48 |     }
49 | 
50 |     fetchJSON('/admin/patch', {
51 |       method: 'PATCH',
52 |       body: patches,
53 |     });
54 |   };
55 | 
56 |   render({ mode }: Props) {
57 |     return (
58 |       <section>
59 |         <h1>Presentation state</h1>
60 |         <form class="radio-buttons">
61 |           {Object.entries(presentationStates).map(([value, label]) => (
62 |             <label>
63 |               <input
64 |                 type="radio"
65 |                 name="mode"
66 |                 value={value}
67 |                 checked={value === mode}
68 |                 onClick={this._onRadioClick}
69 |               />
70 |               <span class="button">{label}</span>
71 |             </label>
72 |           ))}
73 |         </form>
74 |       </section>
75 |     );
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/server/config.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | 
14 | /**
15 |  * Google login is a little harder to set up, but it's more secure,
16 |  * and is required if you want players to log in to vote.
17 |  */
18 | export const useGoogleLogin = false;
19 | 
20 | /**
21 |  * Do players need to log in to vote?
22 |  * Requiring login makes it harder to vote multiple times for a question.
23 |  * This requires useGoogleLogin to be true, otherwise it's ignored.
24 |  */
25 | export const requirePlayerLogin = false;
26 | 
27 | /**
28 |  * If you're not using Google login, the admin page is protected by a
29 |  * simple password, set in your env file.
30 |  */
31 | export const simpleAdminPassword = process.env.ADMIN_PASSWORD!;
32 | 
33 | /**
34 |  * If you're using Google login, add the email addresses of admin users
35 |  * here.
36 |  */
37 | export const admins: string[] = [];
38 | 
39 | export const port = Number(process.env.PORT) || 8081;
40 | 
41 | export const origin = (() => {
42 |   if (process.env.ORIGIN) return process.env.ORIGIN;
43 |   if (process.env.PROJECT_DOMAIN) {
44 |     return `https://${process.env.PROJECT_DOMAIN}.glitch.me`;
45 |   }
46 |   return `http://localhost:${port}`;
47 | })();
48 | 
49 | export const cookieDomain = process.env.COOKIE_DOMAIN || '';
50 | 
51 | export const cookieSecret: string = process.env.COOKIE_SECRET!;
52 | if (!cookieSecret) throw Error('No cookie secret set');
53 | 
54 | export const oauthClientId: string = process.env.OAUTH_CLIENT!;
55 | if (useGoogleLogin && !oauthClientId) throw Error('No oauth client set');
56 | 
57 | export const oauthClientSecret: string = process.env.OAUTH_SECRET!;
58 | if (useGoogleLogin && !oauthClientSecret) throw Error('No oauth secret set');
59 | 
60 | if (!useGoogleLogin && requirePlayerLogin) {
61 |   throw Error('Google login must be enabled if players are required to log in');
62 | }
63 | 
64 | if (!useGoogleLogin && !simpleAdminPassword) {
65 |   throw Error('No admin password set');
66 | }
67 | 
68 | if (useGoogleLogin && admins.length === 0) {
69 |   throw Error('No admins listed');
70 | }
71 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import del from 'del';
14 | import resolve from 'rollup-plugin-node-resolve';
15 | import { terser } from 'rollup-plugin-terser';
16 | 
17 | import simpleTS from './lib/simple-ts';
18 | import clientBundlePlugin from './lib/client-bundle-plugin';
19 | import nodeExternalPlugin from './lib/node-external-plugin';
20 | import cssPlugin from './lib/css-plugin';
21 | import assetPlugin from './lib/asset-plugin';
22 | import constsPlugin from './lib/consts-plugin';
23 | import resolveDirsPlugin from './lib/resolve-dirs-plugin';
24 | import compressPlugin from './lib/compress-plugin';
25 | import * as config from './config';
26 | 
27 | const isGlitch = 'PROJECT_DOMAIN' in process.env;
28 | const nullPlugin = {};
29 | /**
30 |  * This will generate brotli-compressed assets. You don't need to do this
31 |  * if you're using a CDN which does this automatically (eg, Cloudflare).
32 |  */
33 | const compressAssets = isGlitch;
34 | 
35 | function resolveFileUrl({ fileName }) {
36 |   return JSON.stringify('/' + fileName);
37 | }
38 | 
39 | export default async function({ watch }) {
40 |   await del('.data/dist');
41 | 
42 |   const tsPluginInstance = simpleTS('server', { watch });
43 |   const commonPlugins = () => [
44 |     tsPluginInstance,
45 |     resolveDirsPlugin(['client', 'server', 'shared']),
46 |     assetPlugin(),
47 |     constsPlugin(config),
48 |   ];
49 | 
50 |   return {
51 |     input: 'server/index.ts',
52 |     output: {
53 |       dir: '.data/dist/',
54 |       format: 'cjs',
55 |       assetFileNames: 'assets/[name]-[hash][extname]',
56 |       exports: 'named',
57 |     },
58 |     watch: { clearScreen: false },
59 |     preserveModules: true,
60 |     plugins: [
61 |       { resolveFileUrl },
62 |       clientBundlePlugin(
63 |         {
64 |           plugins: [
65 |             { resolveFileUrl },
66 |             ...commonPlugins(),
67 |             resolve(),
68 |             terser({ module: true }),
69 |           ],
70 |         },
71 |         {
72 |           dir: '.data/dist/',
73 |           format: 'esm',
74 |           chunkFileNames: 'assets/[name]-[hash].js',
75 |           entryFileNames: 'assets/[name]-[hash].js',
76 |         },
77 |         resolveFileUrl,
78 |       ),
79 |       cssPlugin(),
80 |       ...commonPlugins(),
81 |       nodeExternalPlugin(),
82 |       compressAssets ? compressPlugin() : nullPlugin,
83 |     ],
84 |   };
85 | }
86 | 


--------------------------------------------------------------------------------
/client/components/big-screen/champion-scores.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | import { h, Component } from 'preact';
14 | import { Champions } from 'shared/state';
15 | import Transition from '../transition';
16 | import { animate } from 'client/utils';
17 | 
18 | const genericAvatarURL =
19 |   'https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Favatar.svg?v=1577974252576';
20 | 
21 | interface Props {
22 |   champions: Champions;
23 | }
24 | 
25 | export default class PresentationChampionScores extends Component<Props> {
26 |   private _onScoreTransition = async (el: HTMLElement) => {
27 |     const outgoing = el.children[0] as HTMLElement;
28 |     const incoming = el.children[1] as HTMLElement;
29 | 
30 |     const moveDistance = 200;
31 |     const newIsLarger =
32 |       Number(incoming.textContent) > Number(outgoing.textContent);
33 |     const duration = 250;
34 |     const easing = 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'; // easeInOutCubic
35 | 
36 |     animate(
37 |       outgoing,
38 |       {
39 |         to: {
40 |           transform: `translateY(${moveDistance * (newIsLarger ? -1 : 1)}px)`,
41 |           opacity: '0',
42 |         },
43 |       },
44 |       { duration, easing },
45 |     );
46 | 
47 |     return animate(
48 |       incoming,
49 |       {
50 |         from: {
51 |           transform: `translateY(${moveDistance * (newIsLarger ? 1 : -1)}px)`,
52 |           opacity: '0',
53 |         },
54 |       },
55 |       { duration, easing },
56 |     );
57 |   };
58 | 
59 |   render({ champions }: Props) {
60 |     return (
61 |       <div class="champ-scores">
62 |         {Object.values(champions).map((champion, i) => (
63 |           <div class="champ-scores-champ">
64 |             <div class="champ-scores-img">
65 |               <img
66 |                 width="270"
67 |                 height="270"
68 |                 src={champion.picture || genericAvatarURL}
69 |               />
70 |               <div class="champ-scores-score" style={{ '--index': i }}>
71 |                 <Transition onTransition={this._onScoreTransition}>
72 |                   <div class="champ-scores-score-num" key={champion.score}>
73 |                     {champion.score}
74 |                   </div>
75 |                 </Transition>
76 |               </div>
77 |             </div>
78 |             <div class="champ-scores-name">{champion.name}</div>
79 |           </div>
80 |         ))}
81 |       </div>
82 |     );
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/start.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright 2019 Google Inc. All Rights Reserved.
 3 |  * Licensed under the Apache License, Version 2.0 (the "License");
 4 |  * you may not use this file except in compliance with the License.
 5 |  * You may obtain a copy of the License at
 6 |  *     http://www.apache.org/licenses/LICENSE-2.0
 7 |  * Unless required by applicable law or agreed to in writing, software
 8 |  * distributed under the License is distributed on an "AS IS" BASIS,
 9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10 |  * See the License for the specific language governing permissions and
11 |  * limitations under the License.
12 |  */
13 | /**
14 |  * Why this exists:
15 |  * When a Glitch project wakes up or a file changes, it runs `npm run start`.
16 |  * If a file changes, we want to rebuild, but if the project is just waking from sleep,
17 |  * there's no need to rebuild. Unfortunately Glitch doesn't tell us which is happening,
18 |  * so this script compares last-modified dates of files in the project with those from
19 |  * the last build, and only rebuilds if something has changed.
20 |  */
21 | const assert = require('assert').strict;
22 | const fs = require('fs').promises;
23 | const { spawn } = require('child_process');
24 | const { promisify } = require('util');
25 | const glob = promisify(require('glob'));
26 | const isGlitch = 'PROJECT_DOMAIN' in process.env;
27 | const dataPath = './.data/modified-dates.json';
28 | 
29 | function spawnP(...args) {
30 |   return new Promise((resolve, reject) => {
31 |     const proc = spawn(...args);
32 | 
33 |     proc.on('exit', code => {
34 |       if (code !== 0) {
35 |         reject(Error('Build failed'));
36 |         return;
37 |       }
38 |       resolve();
39 |     });
40 |   });
41 | }
42 | 
43 | async function getModifiedDates() {
44 |   const matches = await Promise.all(
45 |     [
46 |       'client/**/*',
47 |       'lib/**/*',
48 |       'server/**/*',
49 |       'shared/**/*',
50 |       'config.js',
51 |       'generic-tsconfig.json',
52 |       'missing-types.d.ts',
53 |       'package.json',
54 |       'rollup.config.js',
55 |     ].map(pattern => glob(pattern, { nodir: true })),
56 |   );
57 |   const paths = matches.flat();
58 |   const results = await Promise.all(
59 |     paths.map(async path => [path, (await fs.stat(path)).mtimeMs]),
60 |   );
61 |   return Object.fromEntries(results);
62 | }
63 | 
64 | async function requiresBuild() {
65 |   // Non-glitch users should be using watchnserve.
66 |   if (!isGlitch) return false;
67 | 
68 |   let lastModifiedDates;
69 | 
70 |   try {
71 |     lastModifiedDates = require(dataPath);
72 |   } catch (err) {
73 |     // No data present. Requires build.
74 |     return true;
75 |   }
76 | 
77 |   const latestModifiedDates = await getModifiedDates();
78 | 
79 |   try {
80 |     assert.deepStrictEqual(latestModifiedDates, lastModifiedDates);
81 |     return false;
82 |   } catch (err) {
83 |     return true;
84 |   }
85 | }
86 | 
87 | (async () => {
88 |   if (await requiresBuild()) {
89 |     await spawnP('npm', ['run', 'build'], {
90 |       stdio: 'inherit',
91 |     });
92 |     const results = await getModifiedDates();
93 |     fs.writeFile(dataPath, JSON.stringify(results, null, '  '));
94 |   }
95 | 
96 |   require('./.data/dist');
97 | })();
98 | 


--------------------------------------------------------------------------------
/client/components/big-screen/iframe.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component } from 'preact';
 14 | import * as comlink from 'comlink';
 15 | 
 16 | import Transition from '../transition';
 17 | import { animate } from 'client/utils';
 18 | 
 19 | interface IframeComlink {
 20 |   [comlink.releaseProxy]: () => void;
 21 |   [prop: string]: () => Promise<void>;
 22 | }
 23 | 
 24 | interface Props {
 25 |   src: string;
 26 |   actionTarget: import('./').IframeActionTarget;
 27 | }
 28 | 
 29 | interface State {
 30 |   src: string;
 31 |   showIframe: boolean;
 32 | }
 33 | 
 34 | export default class PresentationIframe extends Component<Props> {
 35 |   static getDerivedStateFromProps(props: Props, state: State): Partial<State> {
 36 |     const newState: Partial<State> = {};
 37 | 
 38 |     if (props.src !== state.src) {
 39 |       newState.src = props.src;
 40 |       newState.showIframe = false;
 41 |     }
 42 | 
 43 |     return newState;
 44 |   }
 45 | 
 46 |   state: State = {
 47 |     src: '',
 48 |     showIframe: false,
 49 |   };
 50 | 
 51 |   private _iframeLink?: IframeComlink;
 52 | 
 53 |   componentDidMount() {
 54 |     this.props.actionTarget.addEventListener('action', this._onAction);
 55 |   }
 56 | 
 57 |   componentWillUnmount() {
 58 |     this.props.actionTarget.removeEventListener('action', this._onAction);
 59 |   }
 60 | 
 61 |   private _onAction = (event: import('./').IframeActionEvent) => {
 62 |     if (!this._iframeLink) return;
 63 |     this._iframeLink[event.action]();
 64 |   };
 65 | 
 66 |   private _onIframeLoad = (event: Event) => {
 67 |     const el = event.currentTarget as HTMLIFrameElement;
 68 | 
 69 |     if (this._iframeLink) this._iframeLink[comlink.releaseProxy]();
 70 | 
 71 |     this._iframeLink = comlink.wrap(
 72 |       comlink.windowEndpoint(el.contentWindow!),
 73 |     ) as IframeComlink;
 74 | 
 75 |     this.setState({ showIframe: true });
 76 |   };
 77 | 
 78 |   private _onTransition = async (el: HTMLElement): Promise<void> => {
 79 |     const outgoing = el.children[0] as HTMLElement;
 80 | 
 81 |     if (outgoing.nodeName === 'IFRAME') {
 82 |       return animate(
 83 |         outgoing,
 84 |         { to: { opacity: '0' } },
 85 |         // easeInOutCubic
 86 |         { duration: 500, easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)' },
 87 |       );
 88 |     }
 89 |   };
 90 | 
 91 |   render(_: Props, { src, showIframe }: State) {
 92 |     return (
 93 |       <div class="presentation-iframe">
 94 |         <Transition onTransition={this._onTransition}>
 95 |           {src ? (
 96 |             <iframe
 97 |               key={src}
 98 |               class={showIframe ? 'show' : ''}
 99 |               src={src}
100 |               onLoad={this._onIframeLoad}
101 |             ></iframe>
102 |           ) : (
103 |             <div />
104 |           )}
105 |         </Transition>
106 |       </div>
107 |     );
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/server/index.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { createServer } from 'http';
 14 | import { parse as parseURL } from 'url';
 15 | import { Socket } from 'net';
 16 | 
 17 | import express, { Request, Response } from 'express';
 18 | import session from 'express-session';
 19 | import fileStoreFactory from 'session-file-store';
 20 | import compressedStatic from 'express-static-gzip';
 21 | 
 22 | import { cookieSecret, origin, port, cookieDomain } from './config';
 23 | import { router as authRouter } from './auth';
 24 | import { router as adminRouter, upgrade as adminUpgrade } from './admin';
 25 | import { router as userRouter, upgrade as userUpgrade } from './user';
 26 | import {
 27 |   router as bigScreenRouter,
 28 |   upgrade as bigScreenUpgrade,
 29 | } from './big-screen';
 30 | import { abortHandshake } from './utils';
 31 | 
 32 | const app = express();
 33 | const FileStore = fileStoreFactory(session);
 34 | 
 35 | app.use((req, res, next) => {
 36 |   res.set('X-Frame-Options', 'sameorigin');
 37 |   next();
 38 | });
 39 | 
 40 | app.use(
 41 |   '/assets/',
 42 |   compressedStatic('.data/dist/assets/', {
 43 |     enableBrotli: true,
 44 |     serveStatic: {
 45 |       maxAge: '1y',
 46 |       lastModified: false,
 47 |     },
 48 |   }),
 49 | );
 50 | 
 51 | app.use((req, res, next) => {
 52 |   res.set('Cache-Control', 'no-cache');
 53 |   next();
 54 | });
 55 | 
 56 | const sessionParser = session({
 57 |   resave: false,
 58 |   saveUninitialized: false,
 59 |   secret: cookieSecret,
 60 |   cookie: {
 61 |     maxAge: 1000 * 60 * 60 * 24 * 365,
 62 |     domain: cookieDomain || '',
 63 |   },
 64 |   store: new FileStore({
 65 |     path: `${process.env.STORAGE_ROOT || './.data'}/storage/sessions`,
 66 |   }),
 67 | });
 68 | 
 69 | // A place to ping to keep glitch alive. This is used on the admin page.
 70 | app.get('/ping', (req, res) => {
 71 |   res.status(200).send('pong');
 72 | });
 73 | 
 74 | app.use(sessionParser);
 75 | 
 76 | app.use('/auth/', authRouter);
 77 | app.use('/admin/', adminRouter);
 78 | app.use('/big-screen/', bigScreenRouter);
 79 | app.use('/', userRouter);
 80 | 
 81 | const server = createServer(app);
 82 | 
 83 | server.on('upgrade', (req: Request, socket: Socket, head: Buffer) => {
 84 |   sessionParser(req, {} as Response, () => {
 85 |     const parsedURL = parseURL(req.url);
 86 |     const path = parsedURL.path;
 87 |     const reqOrigin = req.headers['origin'];
 88 | 
 89 |     if (reqOrigin !== origin) {
 90 |       abortHandshake(socket, 403);
 91 |       return;
 92 |     }
 93 | 
 94 |     if (path === '/admin/ws') {
 95 |       adminUpgrade(req, socket, head);
 96 |       return;
 97 |     }
 98 |     if (path === '/ws') {
 99 |       userUpgrade(req, socket, head);
100 |       return;
101 |     }
102 |     if (path === '/big-screen/ws') {
103 |       bigScreenUpgrade(req, socket, head);
104 |       return;
105 |     }
106 | 
107 |     abortHandshake(socket, 404);
108 |   });
109 | });
110 | 
111 | server.listen(port, () => {
112 |   console.log('Your app is listening on port ' + port);
113 | });
114 | 


--------------------------------------------------------------------------------
/lib/simple-ts.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { spawn } from 'child_process';
 14 | import { relative, join } from 'path';
 15 | import { promises as fsp } from 'fs';
 16 | import { promisify } from 'util';
 17 | 
 18 | import * as ts from 'typescript';
 19 | import glob from 'glob';
 20 | 
 21 | const globP = promisify(glob);
 22 | 
 23 | const extRe = /\.tsx?$/;
 24 | 
 25 | function loadConfig(mainPath) {
 26 |   const fileName = ts.findConfigFile(mainPath, ts.sys.fileExists);
 27 |   if (!fileName) throw Error('tsconfig not found');
 28 |   const text = ts.sys.readFile(fileName);
 29 |   const loadedConfig = ts.parseConfigFileTextToJson(fileName, text).config;
 30 |   const parsedTsConfig = ts.parseJsonConfigFileContent(
 31 |     loadedConfig,
 32 |     ts.sys,
 33 |     process.cwd(),
 34 |     undefined,
 35 |     fileName,
 36 |   );
 37 |   return parsedTsConfig;
 38 | }
 39 | 
 40 | export default function simpleTS(mainPath, { noBuild, watch } = {}) {
 41 |   const config = loadConfig(mainPath);
 42 |   const args = ['-b', mainPath];
 43 | 
 44 |   let done = Promise.resolve();
 45 | 
 46 |   if (!noBuild) {
 47 |     done = new Promise(resolve => {
 48 |       const proc = spawn('tsc', args, {
 49 |         stdio: 'inherit',
 50 |       });
 51 | 
 52 |       proc.on('exit', code => {
 53 |         if (code !== 0) {
 54 |           throw Error('TypeScript build failed');
 55 |         }
 56 |         resolve();
 57 |       });
 58 |     });
 59 |   }
 60 | 
 61 |   if (!noBuild && watch) {
 62 |     done.then(() => {
 63 |       spawn('tsc', [...args, '--watch', '--preserveWatchOutput'], {
 64 |         stdio: 'inherit',
 65 |       });
 66 |     });
 67 |   }
 68 | 
 69 |   return {
 70 |     name: 'simple-ts',
 71 |     async buildStart() {
 72 |       await done;
 73 |       const matches = await globP(config.options.outDir + '/**/*.js');
 74 |       for (const match of matches) this.addWatchFile(match);
 75 |     },
 76 |     resolveId(id, importer) {
 77 |       // If there isn't an importer, it's an entry point, so we don't need to resolve it relative
 78 |       // to something.
 79 |       if (!importer) return null;
 80 | 
 81 |       const tsResolve = ts.resolveModuleName(
 82 |         id,
 83 |         importer,
 84 |         config.options,
 85 |         ts.sys,
 86 |       );
 87 | 
 88 |       if (
 89 |         // It didn't find anything
 90 |         !tsResolve.resolvedModule ||
 91 |         // Or if it's linking to a definition file, it's something in node_modules,
 92 |         // or something local like css.d.ts
 93 |         tsResolve.resolvedModule.extension === '.d.ts'
 94 |       ) {
 95 |         return null;
 96 |       }
 97 |       return tsResolve.resolvedModule.resolvedFileName;
 98 |     },
 99 |     load(id) {
100 |       if (!extRe.test(id)) return null;
101 | 
102 |       // Look for the JS equivalent in the tmp folder
103 |       const newId = join(
104 |         config.options.outDir,
105 |         relative(process.cwd(), id),
106 |       ).replace(extRe, '.js');
107 | 
108 |       return fsp.readFile(newId, { encoding: 'utf8' });
109 |     },
110 |   };
111 | }
112 | 


--------------------------------------------------------------------------------
/lib/css-plugin.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { promises as fsp, readFileSync } from 'fs';
 14 | import { createHash } from 'crypto';
 15 | 
 16 | import postcss from 'postcss';
 17 | import postCSSNested from 'postcss-nested';
 18 | import postCSSUrl from 'postcss-url';
 19 | import cssNano from 'cssnano';
 20 | 
 21 | import { parse as parsePath } from 'path';
 22 | 
 23 | const prefix = 'css:';
 24 | const assetRe = new RegExp('/fake/path/to/asset/([^/]+)/', 'g');
 25 | 
 26 | export default function() {
 27 |   let emittedCSSIds;
 28 |   let hashToId;
 29 | 
 30 |   return {
 31 |     name: 'css',
 32 |     buildStart() {
 33 |       emittedCSSIds = [];
 34 |       hashToId = new Map();
 35 |     },
 36 |     async resolveId(id, importer) {
 37 |       if (!id.startsWith(prefix)) return null;
 38 | 
 39 |       const realId = id.slice(prefix.length);
 40 |       const resolveResult = await this.resolve(realId, importer);
 41 |       if (!resolveResult) {
 42 |         throw Error(`Cannot resolve ${resolveResult.id}`);
 43 |       }
 44 |       return prefix + resolveResult.id;
 45 |     },
 46 |     async load(id) {
 47 |       if (!id.startsWith(prefix)) return;
 48 | 
 49 |       const realId = id.slice(prefix.length);
 50 |       const parsedPath = parsePath(realId);
 51 |       this.addWatchFile(realId);
 52 |       const file = await fsp.readFile(realId);
 53 |       const cssResult = await postcss([
 54 |         postCSSNested,
 55 |         postCSSUrl({
 56 |           url: ({ relativePath, url }) => {
 57 |             if (/^https?:\/\//.test(url)) return url;
 58 |             const parsedPath = parsePath(relativePath);
 59 |             const source = readFileSync(relativePath);
 60 |             const fileId = this.emitFile({
 61 |               type: 'asset',
 62 |               name: parsedPath.base,
 63 |               source,
 64 |             });
 65 |             const hash = createHash('md5');
 66 |             hash.update(source);
 67 |             const md5 = hash.digest('hex');
 68 |             hashToId.set(md5, fileId);
 69 |             return `/fake/path/to/asset/${md5}/`;
 70 |           },
 71 |         }),
 72 |         cssNano,
 73 |       ]).process(file, {
 74 |         from: undefined,
 75 |       });
 76 | 
 77 |       const fileId = this.emitFile({
 78 |         type: 'asset',
 79 |         source: cssResult.css,
 80 |         name: parsedPath.base,
 81 |       });
 82 | 
 83 |       emittedCSSIds.push(fileId);
 84 | 
 85 |       return `export default import.meta.ROLLUP_FILE_URL_${fileId}; export const inline = ${JSON.stringify(
 86 |         cssResult.css,
 87 |       )}`;
 88 |     },
 89 |     async generateBundle(options, bundle) {
 90 |       const cssAssets = emittedCSSIds.map(id => this.getFileName(id));
 91 | 
 92 |       for (const cssAsset of cssAssets) {
 93 |         bundle[cssAsset].source = bundle[cssAsset].source.replace(
 94 |           assetRe,
 95 |           (match, p1) => {
 96 |             return '/' + this.getFileName(hashToId.get(p1));
 97 |           },
 98 |         );
 99 |       }
100 | 
101 |       for (const item of Object.values(bundle)) {
102 |         if (item.type === 'asset') continue;
103 |         item.code = item.code.replace(assetRe, (match, p1) => {
104 |           return '/' + this.getFileName(hashToId.get(p1));
105 |         });
106 |       }
107 |     },
108 |   };
109 | }
110 | 


--------------------------------------------------------------------------------
/server/big-screen/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { Socket } from 'net';
 14 | 
 15 | import { Router, Request } from 'express';
 16 | import { h } from 'preact';
 17 | import WebSocket from 'ws';
 18 | 
 19 | import { renderPage } from 'server/render';
 20 | import { pingClients } from 'server/utils';
 21 | import {
 22 |   emitter as stateEmitter,
 23 |   state as serverState,
 24 |   State as ServerState,
 25 | } from 'server/state';
 26 | import BigScreenPage from 'server/components/pages/big-screen';
 27 | import BigScreenIframePage from 'server/components/pages/big-screen-iframe';
 28 | 
 29 | export const router: Router = Router({
 30 |   strict: true,
 31 | });
 32 | 
 33 | router.get('/', (req, res) => {
 34 |   res.status(200).send(renderPage(<BigScreenPage />));
 35 | });
 36 | 
 37 | router.get('/iframe/', (req, res) => {
 38 |   res.status(200).send(renderPage(<BigScreenIframePage />));
 39 | });
 40 | 
 41 | const wss = new WebSocket.Server({ noServer: true });
 42 | pingClients(wss);
 43 | 
 44 | export function broadcast(message: Object) {
 45 |   const messageStr = JSON.stringify(message);
 46 | 
 47 |   for (const client of wss.clients) {
 48 |     if (client.readyState === WebSocket.OPEN) {
 49 |       client.send(messageStr);
 50 |     }
 51 |   }
 52 | }
 53 | 
 54 | function broadcastState(state: Partial<ServerState>): void {
 55 |   broadcast({ state });
 56 | }
 57 | 
 58 | const interestingStateKeys: Array<keyof ServerState> = [
 59 |   'topics',
 60 |   'champions',
 61 |   'results',
 62 |   'vote',
 63 |   'voteCount',
 64 |   'bracketZoom',
 65 |   'presentationView',
 66 |   'iframe',
 67 | ];
 68 | 
 69 | let pendingUpdate = false;
 70 | 
 71 | stateEmitter.on('change', async (oldState, newState, changedKeys) => {
 72 |   const interestingState: Partial<ServerState> = {};
 73 | 
 74 |   // Staged votes shouldn't be sent
 75 |   if (newState.vote && newState.vote.state === 'staging') {
 76 |     newState = { ...newState, vote: null };
 77 |   }
 78 | 
 79 |   // Throttle broadcasts to voteCount
 80 |   if (changedKeys.length === 1 && changedKeys[0] === 'voteCount') {
 81 |     if (pendingUpdate) return;
 82 |     pendingUpdate = true;
 83 |     await new Promise(r => setTimeout(r, 500));
 84 |     pendingUpdate = false;
 85 |     // Get latest values
 86 |     newState = serverState;
 87 |   }
 88 | 
 89 |   let foundInterestingState = false;
 90 | 
 91 |   for (const key of interestingStateKeys) {
 92 |     if (oldState[key] !== newState[key]) {
 93 |       // Need to cast to 'any' here as TS isn't smart enough to know key === key.
 94 |       interestingState[key] = newState[key] as any;
 95 |       foundInterestingState = true;
 96 |     }
 97 |   }
 98 | 
 99 |   if (!foundInterestingState) return;
100 | 
101 |   broadcastState(interestingState);
102 | });
103 | 
104 | wss.on('connection', ws => {
105 |   const interestingState: Partial<ServerState> = {};
106 |   for (const key of interestingStateKeys) {
107 |     // Need to cast to 'any' here as TS isn't smart enough to know key === key.
108 |     interestingState[key] = serverState[key] as any;
109 |   }
110 | 
111 |   if (interestingState.vote && interestingState.vote.state === 'staging') {
112 |     interestingState.vote = null;
113 |   }
114 | 
115 |   ws.send(JSON.stringify({ state: interestingState }));
116 | });
117 | 
118 | export function upgrade(req: Request, socket: Socket, head: Buffer) {
119 |   wss.handleUpgrade(req, socket, head, ws => {
120 |     wss.emit('connection', ws, req);
121 |   });
122 | }
123 | 


--------------------------------------------------------------------------------
/lib/client-bundle-plugin.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import rollup from 'rollup';
 14 | 
 15 | const prefix = 'client-bundle:';
 16 | const entryPathPlaceholder = 'ENTRY_PATH_PLACEHOLDER';
 17 | const importsPlaceholder = 'IMPORTS_PLACEHOLDER';
 18 | 
 19 | export function getDependencies(clientOutput, item) {
 20 |   const crawlDependencies = new Set([item.fileName]);
 21 | 
 22 |   for (const fileName of crawlDependencies) {
 23 |     const chunk = clientOutput.find(v => v.fileName === fileName);
 24 | 
 25 |     for (const dep of chunk.imports) {
 26 |       crawlDependencies.add(dep);
 27 |     }
 28 |   }
 29 | 
 30 |   // Don't add self as dependency
 31 |   crawlDependencies.delete(item.fileName);
 32 | 
 33 |   return [...crawlDependencies];
 34 | }
 35 | 
 36 | export default function(inputOptions, outputOptions, resolveFileUrl) {
 37 |   let cache;
 38 |   let entryPoints;
 39 |   let copiedOutputOptions;
 40 | 
 41 |   return {
 42 |     name: 'client-bundle',
 43 |     buildStart() {
 44 |       entryPoints = [];
 45 |     },
 46 |     outputOptions(outputOptions) {
 47 |       copiedOutputOptions = { assetFileNames: outputOptions.assetFileNames };
 48 |     },
 49 |     async resolveId(id, importer) {
 50 |       if (!id.startsWith(prefix)) return null;
 51 | 
 52 |       const realId = id.slice(prefix.length);
 53 |       const resolveResult = await this.resolve(realId, importer);
 54 |       if (resolveResult) {
 55 |         return prefix + resolveResult.id;
 56 |       }
 57 |       // This Rollup couldn't resolve it, but maybe the inner one can.
 58 |       return id;
 59 |     },
 60 |     load(id) {
 61 |       if (!id.startsWith(prefix)) return;
 62 | 
 63 |       const realId = id.slice(prefix.length);
 64 |       entryPoints.push(realId);
 65 | 
 66 |       return `export default ${entryPathPlaceholder}; export const imports = ${importsPlaceholder}`;
 67 |     },
 68 |     async generateBundle(options, bundle) {
 69 |       if (entryPoints.length === 0) return;
 70 | 
 71 |       const clientBundle = await rollup.rollup({
 72 |         ...inputOptions,
 73 |         cache,
 74 |         input: entryPoints,
 75 |       });
 76 | 
 77 |       cache = clientBundle.cache;
 78 | 
 79 |       const { output: clientOutput } = await clientBundle.generate({
 80 |         ...copiedOutputOptions,
 81 |         ...outputOptions,
 82 |       });
 83 | 
 84 |       // Replace references to client bundles
 85 |       for (const entryPoint of entryPoints) {
 86 |         const clientEntry = clientOutput.find(
 87 |           item => item.facadeModuleId === entryPoint,
 88 |         );
 89 |         const bundleEntry = Object.values(bundle).find(
 90 |           item => item.facadeModuleId === prefix + entryPoint,
 91 |         );
 92 | 
 93 |         bundleEntry.code = bundleEntry.code.replace(
 94 |           entryPathPlaceholder,
 95 |           resolveFileUrl({
 96 |             fileName: clientEntry.fileName,
 97 |             moduleId: bundleEntry.facadeModuleId,
 98 |             format: options.format,
 99 |           }),
100 |         );
101 | 
102 |         const dependencies = getDependencies(clientOutput, clientEntry);
103 | 
104 |         bundleEntry.code = bundleEntry.code.replace(
105 |           importsPlaceholder,
106 |           '[' +
107 |             dependencies
108 |               .map(item => {
109 |                 const entry = clientOutput.find(v => v.fileName === item);
110 | 
111 |                 return resolveFileUrl({
112 |                   fileName: entry.fileName,
113 |                   moduleId: bundleEntry.facadeModuleId,
114 |                   format: options.format,
115 |                 });
116 |               })
117 |               .join(',') +
118 |             ']',
119 |         );
120 |       }
121 | 
122 |       // Copy everything from the client bundle into the main bundle
123 |       for (const clientEntry of clientOutput) {
124 |         // Skip if the file already exists
125 |         if (clientEntry.fileName in bundle) continue;
126 | 
127 |         this.emitFile({
128 |           type: 'asset',
129 |           source: clientEntry.code || clientEntry.source,
130 |           fileName: clientEntry.fileName,
131 |         });
132 |       }
133 |     },
134 |   };
135 | }
136 | 


--------------------------------------------------------------------------------
/server/auth/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { RequestHandler, Router, Request, urlencoded } from 'express';
 14 | import { OAuth2Client } from 'google-auth-library';
 15 | import asyncHandler from 'express-async-handler';
 16 | 
 17 | import {
 18 |   requirePlayerLogin,
 19 |   oauthClientId,
 20 |   oauthClientSecret,
 21 |   origin,
 22 |   admins,
 23 |   simpleAdminPassword,
 24 |   useGoogleLogin,
 25 | } from 'server/config';
 26 | 
 27 | const createClient = () =>
 28 |   new OAuth2Client({
 29 |     clientId: oauthClientId,
 30 |     clientSecret: oauthClientSecret,
 31 |     redirectUri: origin + '/auth/oauth2callback',
 32 |   });
 33 | 
 34 | /**
 35 |  * If login is required, is the user logged in?
 36 |  */
 37 | export function userAuthorized(req: Request): boolean {
 38 |   return !requirePlayerLogin || !!req.session!.user;
 39 | }
 40 | 
 41 | export function maybeRequireLogin(): RequestHandler {
 42 |   return (req, res, next) => {
 43 |     if (!requirePlayerLogin || req.session!.user) {
 44 |       next();
 45 |       return;
 46 |     }
 47 | 
 48 |     const error = 'Login required';
 49 |     res.status(403).send(error);
 50 |   };
 51 | }
 52 | 
 53 | export function assertAdmin(req: Request) {
 54 |   if (!useGoogleLogin) {
 55 |     if (req.session!.simpleAdminPassword !== simpleAdminPassword) {
 56 |       throw Error('Must be logged in.');
 57 |     }
 58 |     return;
 59 |   }
 60 | 
 61 |   if (!req.session!.user) {
 62 |     throw Error('Must be logged in.');
 63 |   } else if (!admins.includes(req.session!.user.email)) {
 64 |     throw Error('Admin required.');
 65 |   } else if (!req.session!.user.emailVerified) {
 66 |     throw Error('Admin email must be verified.');
 67 |   }
 68 | }
 69 | 
 70 | export function requireAdmin(): RequestHandler {
 71 |   return (req, res, next) => {
 72 |     if (useGoogleLogin) {
 73 |       if (!req.session!.user) {
 74 |         res.redirect(301, '/auth/login?state=/admin/');
 75 |         return;
 76 |       }
 77 |     } else if (req.session!.simpleAdminPassword !== simpleAdminPassword) {
 78 |       res.redirect(301, '/admin/login/');
 79 |       return;
 80 |     }
 81 | 
 82 |     try {
 83 |       assertAdmin(req);
 84 |     } catch (err) {
 85 |       const error = err as Error;
 86 |       res.status(403).send(error.message);
 87 |       return;
 88 |     }
 89 |     next();
 90 |   };
 91 | }
 92 | 
 93 | export const router: Router = Router({
 94 |   strict: true,
 95 | });
 96 | 
 97 | router.all('/login', (req, res) => {
 98 |   const oauth2Client = createClient();
 99 |   const url = oauth2Client.generateAuthUrl({
100 |     scope: ['openid', 'email', 'profile'],
101 |     state: req.query.state || req.get('Referer') || '/',
102 |   });
103 | 
104 |   res.redirect(301, url);
105 | });
106 | 
107 | router.post('/logout', (req, res) => {
108 |   req.session!.destroy(() => {
109 |     res.clearCookie('connect.sid', { path: '/' });
110 |     res.redirect(301, '/');
111 |   });
112 | });
113 | 
114 | router.post('/admin-login', urlencoded({ extended: false }), (req, res) => {
115 |   if (useGoogleLogin) {
116 |     res.status(403).send('Google login required');
117 |     return;
118 |   }
119 | 
120 |   if (req.body.password !== simpleAdminPassword) {
121 |     res.status(403).send('Incorrect password');
122 |     return;
123 |   }
124 | 
125 |   req.session!.simpleAdminPassword = req.body.password;
126 |   res.redirect(301, '/admin/');
127 | });
128 | 
129 | router.get(
130 |   '/oauth2callback',
131 |   asyncHandler(async (req, res) => {
132 |     const oauth2Client = createClient();
133 |     const result = await oauth2Client.getToken(req.query.code);
134 |     oauth2Client.setCredentials(result.tokens);
135 |     const verifyResult = await oauth2Client.verifyIdToken({
136 |       idToken: result.tokens.id_token!,
137 |       audience: oauthClientId,
138 |     });
139 |     const loginData = verifyResult.getPayload();
140 | 
141 |     req.session!.user = {
142 |       email: loginData!.email || '',
143 |       emailVerified: Boolean(loginData!.email_verified),
144 |       name: loginData!.name!,
145 |       id: loginData!.sub,
146 |       picture: (loginData!.picture || '').replace('=s96-c', ''),
147 |     };
148 | 
149 |     res.redirect(301, req.query.state || '/');
150 |   }),
151 | );
152 | 


--------------------------------------------------------------------------------
/client/components/vote/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component } from 'preact';
 14 | import WS from '../../ws';
 15 | import { ClientVote } from 'shared/state';
 16 | import Transition from '../transition';
 17 | import VoteButtons from './vote-buttons';
 18 | import { animate } from 'client/utils';
 19 | 
 20 | interface Props {
 21 |   initialState: Partial<State>;
 22 | }
 23 | interface State {
 24 |   vote: ClientVote | null;
 25 | }
 26 | 
 27 | const reduceMotionMQ = window.matchMedia('(prefers-reduced-motion: reduce)');
 28 | let reduceMotion: boolean = reduceMotionMQ.matches;
 29 | reduceMotionMQ.addListener(() => (reduceMotion = reduceMotionMQ.matches));
 30 | 
 31 | export default class Vote extends Component<Props, State> {
 32 |   private _ws = new WS('/ws', msg => this._onWsMessage(msg));
 33 |   state: State = {
 34 |     vote: null,
 35 |     ...this.props.initialState,
 36 |   };
 37 | 
 38 |   private _onWsMessage(message: string) {
 39 |     const data = JSON.parse(message);
 40 |     if (!data.state) return;
 41 |     this.setState(data.state);
 42 |   }
 43 | 
 44 |   private _onVote = (index: number) => {
 45 |     this._ws.send('v:' + index);
 46 |   };
 47 | 
 48 |   private _onTransition = async (el: HTMLElement): Promise<void> => {
 49 |     if (reduceMotion) return;
 50 | 
 51 |     const outgoing = el.children[0] as HTMLElement;
 52 |     const incoming = el.children[1] as HTMLElement;
 53 | 
 54 |     if (
 55 |       outgoing.classList.contains('waiting') &&
 56 |       incoming.classList.contains('vote-buttons')
 57 |     ) {
 58 |       animate(
 59 |         outgoing,
 60 |         { to: { opacity: '0', transform: 'translateZ(-150px)' } },
 61 |         {
 62 |           duration: 500,
 63 |           // ease-in cubic
 64 |           easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
 65 |         },
 66 |       );
 67 | 
 68 |       return animate(
 69 |         incoming,
 70 |         { from: { opacity: '0', transform: 'translateZ(400px)' } },
 71 |         {
 72 |           duration: 200,
 73 |           delay: 300,
 74 |           // ease-in cubic
 75 |           easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
 76 |           fill: 'backwards',
 77 |         },
 78 |       ).then(() => {
 79 |         const target = document.querySelector('.main-content') as HTMLElement;
 80 |         const duration = 300;
 81 |         const maxDistance = 25;
 82 |         const start = performance.now();
 83 | 
 84 |         function frame() {
 85 |           const now = performance.now();
 86 |           const progress = Math.min((now - start) / duration, 1);
 87 |           const frameMaxDistance = maxDistance - maxDistance * progress;
 88 |           const x = Math.random() * frameMaxDistance * 2 - frameMaxDistance;
 89 |           const y = Math.random() * frameMaxDistance * 2 - frameMaxDistance;
 90 | 
 91 |           target.style.transform = `translate(${x}px, ${y}px)`;
 92 | 
 93 |           if (progress !== 1) {
 94 |             requestAnimationFrame(frame);
 95 |           }
 96 |         }
 97 | 
 98 |         requestAnimationFrame(frame);
 99 |       });
100 |     }
101 |     if (
102 |       outgoing.classList.contains('vote-buttons') &&
103 |       incoming.classList.contains('waiting')
104 |     ) {
105 |       animate(
106 |         outgoing,
107 |         { to: { opacity: '0', transform: 'translateZ(-300px)' } },
108 |         {
109 |           duration: 500,
110 |           // ease-in cubic
111 |           easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
112 |         },
113 |       ).then(() => {
114 |         outgoing.style.opacity = '0';
115 |       });
116 | 
117 |       return animate(
118 |         incoming,
119 |         { from: { opacity: '0', transform: 'translateZ(400px)' } },
120 |         {
121 |           duration: 500,
122 |           delay: 400,
123 |           // ease-out cubic
124 |           easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
125 |           fill: 'backwards',
126 |         },
127 |       );
128 |     }
129 |   };
130 | 
131 |   componentWillUnmount() {
132 |     this._ws.close();
133 |   }
134 | 
135 |   render(_: Props, { vote }: State) {
136 |     return (
137 |       <Transition onTransition={this._onTransition}>
138 |         {!vote ? (
139 |           <p class="waiting">Waiting on next round</p>
140 |         ) : (
141 |           <VoteButtons key={vote.id} vote={vote} onVote={this._onVote} />
142 |         )}
143 |       </Transition>
144 |     );
145 |   }
146 | }
147 | 


--------------------------------------------------------------------------------
/server/user/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { Socket } from 'net';
 14 | 
 15 | import { Router, Request } from 'express';
 16 | import { h } from 'preact';
 17 | import WebSocket from 'ws';
 18 | import uuidv4 from 'uuid/v4';
 19 | 
 20 | import { renderPage } from 'server/render';
 21 | import { abortHandshake, pingClients } from 'server/utils';
 22 | import {
 23 |   emitter as stateEmitter,
 24 |   state as serverState,
 25 |   userVotes,
 26 |   setState,
 27 |   State as ServerState,
 28 | } from 'server/state';
 29 | import { ClientVote } from 'shared/state';
 30 | import { userAuthorized } from 'server/auth';
 31 | import LoggedOut from 'server/components/pages/logged-out';
 32 | import LoggedIn from 'server/components/pages/logged-in';
 33 | import { requirePlayerLogin } from 'server/config';
 34 | 
 35 | export const router: Router = Router({
 36 |   strict: true,
 37 | });
 38 | 
 39 | router.get('/', (req, res) => {
 40 |   if (userAuthorized(req)) {
 41 |     res
 42 |       .status(200)
 43 |       .send(
 44 |         renderPage(
 45 |           <LoggedIn
 46 |             user={req.session!.user}
 47 |             initialState={generateState(serverState)}
 48 |           />,
 49 |         ),
 50 |       );
 51 |     return;
 52 |   }
 53 |   res.status(200).send(renderPage(<LoggedOut />));
 54 | });
 55 | 
 56 | const wss = new WebSocket.Server({ noServer: true });
 57 | pingClients(wss);
 58 | 
 59 | function broadcastState(state: Partial<State>): void {
 60 |   // Adding a delay here to give priority to the admin & presentation broadcasts.
 61 |   setTimeout(() => {
 62 |     const message = JSON.stringify({ state });
 63 | 
 64 |     for (const client of wss.clients) {
 65 |       if (client.readyState === WebSocket.OPEN) {
 66 |         client.send(message);
 67 |       }
 68 |     }
 69 |   }, 50);
 70 | }
 71 | 
 72 | stateEmitter.on('change', (oldState, newState) => {
 73 |   // We're only interested in votes that are in the voting state:
 74 |   const newVote =
 75 |     newState.vote && newState.vote.state === 'voting' ? newState.vote : null;
 76 |   const oldVote =
 77 |     oldState.vote && oldState.vote.state === 'voting' ? oldState.vote : null;
 78 |   if (newVote === oldVote) return;
 79 |   broadcastState(generateState(newState));
 80 | });
 81 | 
 82 | const wsToVoterId = new WeakMap<WebSocket, string>();
 83 | 
 84 | wss.on('connection', ws => {
 85 |   ws.on('message', data => {
 86 |     if (typeof data !== 'string') {
 87 |       console.error(`Unexpected client data type`);
 88 |       return;
 89 |     }
 90 | 
 91 |     // Voting. Format is v:0 or v:1
 92 |     if (data.startsWith('v:')) {
 93 |       // If there's no vote, or it isn't in the voting state, exit early
 94 |       if (!serverState.vote || serverState.vote.state !== 'voting') return;
 95 |       const voterId = wsToVoterId.get(ws)!;
 96 |       const index = Number(data.slice(2));
 97 |       // Exit early if the value isn't 1 or 0.
 98 |       if (index !== 0 && index !== 1) return;
 99 |       // Get this user's existing vote
100 |       const userVote = userVotes.get(voterId);
101 |       // If they're voting for the same item, exit early.
102 |       if (userVote === index) return;
103 |       const newVoteCount = serverState.voteCount!.slice();
104 |       // Decrement the thing the user previously voted for
105 |       if (userVote !== undefined) newVoteCount[userVote]--;
106 |       // Increment the thing the user voted for
107 |       newVoteCount[index]++;
108 |       // Record it for this user
109 |       userVotes.set(voterId, index);
110 |       setState({ voteCount: newVoteCount as [number, number] });
111 |     } else {
112 |       console.error(`Unexpected client action`);
113 |     }
114 |   });
115 | 
116 |   ws.send(JSON.stringify({ state: generateState(serverState) }));
117 | });
118 | 
119 | export function upgrade(req: Request, socket: Socket, head: Buffer) {
120 |   if (requirePlayerLogin && !req.session!.user) {
121 |     abortHandshake(socket, 403);
122 |     return;
123 |   }
124 | 
125 |   let voterId: string;
126 | 
127 |   if (req.session!.user) {
128 |     voterId = req.session!.user.id;
129 |   } else if (req.session!.voterId) {
130 |     voterId = req.session!.voterId;
131 |   } else {
132 |     const id = uuidv4();
133 |     voterId = id;
134 |     req.session!.voterId = id;
135 |   }
136 | 
137 |   wss.handleUpgrade(req, socket, head, ws => {
138 |     wsToVoterId.set(ws, voterId);
139 |     wss.emit('connection', ws, req);
140 |   });
141 | }
142 | 
143 | export interface State {
144 |   vote: ClientVote | null;
145 | }
146 | 
147 | export function generateState(state: ServerState): State {
148 |   const { vote } = state;
149 |   if (!vote || vote.state !== 'voting') return { vote: null };
150 |   return {
151 |     vote: {
152 |       id: vote.id,
153 |       items: vote.items,
154 |     },
155 |   };
156 | }
157 | 


--------------------------------------------------------------------------------
/server/admin/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { Socket } from 'net';
 14 | 
 15 | import { Router, Request, json } from 'express';
 16 | import { h } from 'preact';
 17 | import WebSocket from 'ws';
 18 | 
 19 | import { requireAdmin, assertAdmin } from '../auth';
 20 | import { renderPage } from '../render';
 21 | import AdminPage from '../components/pages/admin';
 22 | import { abortHandshake, pingClients, requireSameOrigin } from '../utils';
 23 | import {
 24 |   state,
 25 |   emitter as stateEmitter,
 26 |   State,
 27 |   patchState,
 28 |   generateBracket,
 29 | } from 'server/state';
 30 | import TopicsAdminPage from '../components/pages/admin/topics';
 31 | import { broadcast as bigScreenBroadcast } from 'server/big-screen';
 32 | import AdminSimpleLogin from 'server/components/pages/admin/simple-login';
 33 | 
 34 | export const router: Router = Router({
 35 |   strict: true,
 36 | });
 37 | 
 38 | router.get('/login/', (req, res) => {
 39 |   res.status(200).send(renderPage(<AdminSimpleLogin />));
 40 | });
 41 | 
 42 | router.use(requireAdmin());
 43 | 
 44 | router.get('/', (req, res) => {
 45 |   res.status(200).send(renderPage(<AdminPage />));
 46 | });
 47 | 
 48 | router.get('/topics/', (req, res) => {
 49 |   res.status(200).send(renderPage(<TopicsAdminPage />));
 50 | });
 51 | 
 52 | router.patch(
 53 |   '/patch',
 54 |   requireSameOrigin(),
 55 |   json({ limit: '500kb' }),
 56 |   (req, res) => {
 57 |     if (!Array.isArray(req.body)) {
 58 |       res.status(400).json({ err: 'Expected JSON array.' });
 59 |       return;
 60 |     }
 61 | 
 62 |     try {
 63 |       patchState(req.body);
 64 |     } catch (err) {
 65 |       res.status(400).json({ err: 'Patch failed.' });
 66 |       console.error('Patch failed', err);
 67 |       return;
 68 |     }
 69 | 
 70 |     res.status(200).json({ ok: true });
 71 |   },
 72 | );
 73 | 
 74 | router.post('/generate-bracket', requireSameOrigin(), json(), (req, res) => {
 75 |   try {
 76 |     generateBracket(req.body.num || 16);
 77 |   } catch (err) {
 78 |     console.error('Error generating bracket', err);
 79 |     res.status(500).json({ err: 'Error generating bracket' });
 80 |     return;
 81 |   }
 82 | 
 83 |   res.status(200).json({ ok: true });
 84 | });
 85 | 
 86 | const interestingStateKeys: Array<keyof State> = [
 87 |   'topics',
 88 |   'champions',
 89 |   'results',
 90 |   'vote',
 91 |   'voteCount',
 92 |   'presentationView',
 93 |   'iframe',
 94 | ];
 95 | const wss = new WebSocket.Server({ noServer: true });
 96 | pingClients(wss);
 97 | 
 98 | function broadcastState(interestingState: Partial<State>): void {
 99 |   const message = JSON.stringify({ state: interestingState });
100 | 
101 |   for (const client of wss.clients) {
102 |     if (client.readyState === WebSocket.OPEN) {
103 |       client.send(message);
104 |     }
105 |   }
106 | }
107 | 
108 | let pendingUpdate = false;
109 | 
110 | stateEmitter.on('change', async (oldState, newState, changedKeys) => {
111 |   // Throttle broadcasts to voteCount
112 |   if (changedKeys.length === 1 && changedKeys[0] === 'voteCount') {
113 |     if (pendingUpdate) return;
114 |     pendingUpdate = true;
115 |     await new Promise(r => setTimeout(r, 500));
116 |     pendingUpdate = false;
117 |     // Get latest values
118 |     newState = state;
119 |   }
120 | 
121 |   const interestingState: Partial<State> = {};
122 | 
123 |   let foundInterestingState = false;
124 | 
125 |   for (const key of interestingStateKeys) {
126 |     if (oldState[key] !== newState[key]) {
127 |       // Need to cast to 'any' here as TS isn't smart enough to know key === key.
128 |       interestingState[key] = newState[key] as any;
129 |       foundInterestingState = true;
130 |     }
131 |   }
132 | 
133 |   if (foundInterestingState) {
134 |     broadcastState(interestingState);
135 |   }
136 | });
137 | 
138 | wss.on('connection', ws => {
139 |   const interestingState: Partial<State> = {};
140 |   for (const key of interestingStateKeys) {
141 |     // Need to cast to 'any' here as TS isn't smart enough to know key === key.
142 |     interestingState[key] = state[key] as any;
143 |   }
144 | 
145 |   ws.on('message', data => {
146 |     if (typeof data !== 'string') {
147 |       console.error(`Unexpected client data type`);
148 |       return;
149 |     }
150 | 
151 |     let json;
152 | 
153 |     try {
154 |       json = JSON.parse(data);
155 |     } catch (err) {
156 |       console.error(`Couldn't parse client message`);
157 |     }
158 | 
159 |     if (json.action === 'big-screen-broadcast') {
160 |       bigScreenBroadcast(json.message);
161 |     } else {
162 |       console.error(`Unexpected client action`);
163 |     }
164 |   });
165 | 
166 |   ws.send(JSON.stringify({ state: interestingState }));
167 | });
168 | 
169 | export function upgrade(req: Request, socket: Socket, head: Buffer) {
170 |   try {
171 |     assertAdmin(req);
172 |   } catch (err) {
173 |     abortHandshake(socket, 403);
174 |     return;
175 |   }
176 | 
177 |   wss.handleUpgrade(req, socket, head, ws => {
178 |     wss.emit('connection', ws, req);
179 |   });
180 | }
181 | 


--------------------------------------------------------------------------------
/server/state.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { readFileSync, promises as fs } from 'fs';
 14 | import { join } from 'path';
 15 | import { EventEmitter } from 'events';
 16 | 
 17 | import {
 18 |   Topics,
 19 |   Result,
 20 |   Vote,
 21 |   PresentationView,
 22 |   Champions,
 23 | } from 'shared/state';
 24 | import { Operation, applyPatch } from 'fast-json-patch';
 25 | import produce from 'immer';
 26 | 
 27 | export interface State {
 28 |   champions: Champions;
 29 |   topics: Topics;
 30 |   results: Result | null;
 31 |   vote: Vote | null;
 32 |   voteCount: [number, number] | null;
 33 |   bracketZoom: number[][] | null;
 34 |   presentationView: PresentationView;
 35 |   iframe: string;
 36 | }
 37 | 
 38 | type StateChangeCallback = (
 39 |   oldState: State,
 40 |   newState: State,
 41 |   changedKeys: Array<keyof State>,
 42 | ) => void;
 43 | 
 44 | interface StateEmitter extends EventEmitter {
 45 |   addListener(event: 'change', callback: StateChangeCallback): this;
 46 |   emit(event: 'change', ...args: Parameters<StateChangeCallback>): boolean;
 47 |   on(event: 'change', callback: StateChangeCallback): this;
 48 |   once(event: 'change', callback: StateChangeCallback): this;
 49 |   prependListener(event: 'change', callback: StateChangeCallback): this;
 50 |   prependOnceListener(event: 'change', callback: StateChangeCallback): this;
 51 |   removeListener(event: 'change', callback: StateChangeCallback): this;
 52 | }
 53 | 
 54 | const statePath = join(
 55 |   process.env.STORAGE_ROOT || '.data',
 56 |   'storage',
 57 |   'state.json',
 58 | );
 59 | const keysToSave: Array<keyof State> = ['champions', 'topics', 'results'];
 60 | 
 61 | export let state: State = {
 62 |   champions: {},
 63 |   topics: {},
 64 |   results: null,
 65 |   vote: null,
 66 |   voteCount: null,
 67 |   bracketZoom: null,
 68 |   presentationView: 'url',
 69 |   iframe: '',
 70 | };
 71 | 
 72 | export const userVotes = new Map<string, 0 | 1>();
 73 | export const emitter: StateEmitter = new EventEmitter();
 74 | 
 75 | {
 76 |   let savedDataFile;
 77 | 
 78 |   try {
 79 |     savedDataFile = JSON.parse(readFileSync(statePath, { encoding: 'utf8' }));
 80 |   } catch (err) {}
 81 | 
 82 |   if (savedDataFile) {
 83 |     state = { ...state, ...savedDataFile };
 84 |   }
 85 | }
 86 | 
 87 | let writeQueue = Promise.resolve();
 88 | 
 89 | function saveState(state: State) {
 90 |   const saveableState: Partial<State> = {};
 91 | 
 92 |   for (const key of keysToSave) {
 93 |     // Need to cast to 'any' here as TS isn't smart enough to know key === key.
 94 |     saveableState[key] = state[key] as any;
 95 |   }
 96 | 
 97 |   const data = JSON.stringify(saveableState, null, '  ');
 98 | 
 99 |   writeQueue = writeQueue.then(async () => {
100 |     try {
101 |       await fs.writeFile(statePath, data, { encoding: 'utf8' });
102 |     } catch (err) {
103 |       console.error('State saving failed');
104 |     }
105 |   });
106 | }
107 | 
108 | export function generateBracket(num: number) {
109 |   const topicsCount = num;
110 | 
111 |   if (topicsCount < 4) {
112 |     console.error('Cannot generate bracket. Must have at least 2 topics.');
113 |     return;
114 |   }
115 | 
116 |   const results: Result = {
117 |     items: ['', ''],
118 |     winningIndex: -1,
119 |   };
120 |   let remaining = topicsCount - 2;
121 |   let currentLevel: Result[] = [results];
122 | 
123 |   mainLoop: while (true) {
124 |     const nextLevel = [];
125 | 
126 |     for (const result of currentLevel) {
127 |       for (const i of [0, 1]) {
128 |         if (remaining === 0) break mainLoop;
129 | 
130 |         const innerResult: Result = {
131 |           items: ['', ''],
132 |           winningIndex: -1,
133 |         };
134 | 
135 |         result.items[i] = innerResult;
136 |         nextLevel.push(innerResult);
137 |         remaining--;
138 |       }
139 |     }
140 | 
141 |     currentLevel = nextLevel;
142 |   }
143 | 
144 |   // Also remove champions from items.
145 |   // Maybe this should be a different button.
146 |   const newState = produce(state, newState => {
147 |     newState.results = results;
148 | 
149 |     for (const topic of Object.values(newState.topics)) {
150 |       topic.championId = '';
151 |     }
152 |   });
153 | 
154 |   setState(newState);
155 | }
156 | 
157 | export function patchState(patches: Operation[]): void {
158 |   const newState = produce(state, newState => {
159 |     applyPatch(newState, patches);
160 |   });
161 | 
162 |   setState(newState);
163 | }
164 | 
165 | export function setState(toMerge: Partial<State>): void {
166 |   const oldState = state;
167 |   state = { ...state, ...toMerge };
168 | 
169 |   // Do the right thing with additional vote state
170 |   if (oldState.vote && !state.vote) {
171 |     userVotes.clear();
172 |     state.voteCount = null;
173 |   } else if (
174 |     (!oldState.vote && state.vote) ||
175 |     (oldState.vote && state.vote && oldState.vote.id !== state.vote.id)
176 |   ) {
177 |     userVotes.clear();
178 |     state.voteCount = [0, 0];
179 |   }
180 | 
181 |   const changedKeys = Object.keys(toMerge);
182 | 
183 |   emitter.emit(
184 |     'change',
185 |     oldState,
186 |     state,
187 |     changedKeys as Array<keyof typeof toMerge>,
188 |   );
189 | 
190 |   for (const savableKey of keysToSave) {
191 |     if (changedKeys.includes(savableKey)) {
192 |       saveState(state);
193 |       break;
194 |     }
195 |   }
196 | }
197 | 


--------------------------------------------------------------------------------
/client/components/admin/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component } from 'preact';
 14 | 
 15 | import WS from '../../ws';
 16 | import AdminChampions from './champions';
 17 | import {
 18 |   Result,
 19 |   Topics,
 20 |   Vote,
 21 |   VoteItem,
 22 |   PresentationView,
 23 |   Champions,
 24 | } from 'shared/state';
 25 | import {
 26 |   getValueByPath,
 27 |   generateRandomId,
 28 |   getResultTopic,
 29 |   fetchJSON,
 30 | } from 'client/utils';
 31 | import AdminBracket from './bracket';
 32 | import AdminSelectedBracket from './selected-bracket';
 33 | import AdminVote from './vote';
 34 | import AdminPresentationView from './presentation-view';
 35 | import AdminIframe from './iframe';
 36 | 
 37 | interface State {
 38 |   champions: Champions;
 39 |   receivedData: boolean;
 40 |   results?: Result;
 41 |   topics: Topics;
 42 |   selectedBracketPath: string;
 43 |   vote?: Vote;
 44 |   presentationView?: PresentationView;
 45 |   iframe: string;
 46 |   voteCount: [number, number] | null;
 47 | }
 48 | 
 49 | export default class Admin extends Component<{}, State> {
 50 |   private _ws = new WS('/admin/ws', msg => this._onWsMessage(msg));
 51 |   state: State = {
 52 |     champions: {},
 53 |     receivedData: false,
 54 |     topics: {},
 55 |     selectedBracketPath: '',
 56 |     iframe: '',
 57 |     voteCount: null,
 58 |   };
 59 | 
 60 |   private _onWsMessage(message: string) {
 61 |     const data = JSON.parse(message);
 62 |     const interestingKeys: Array<keyof State> = [
 63 |       'champions',
 64 |       'results',
 65 |       'topics',
 66 |       'vote',
 67 |       'voteCount',
 68 |       'presentationView',
 69 |       'iframe',
 70 |     ];
 71 |     const receivedKeys = new Set(Object.keys(data.state));
 72 |     const hasInterestingKeys = interestingKeys.some(v => receivedKeys.has(v));
 73 | 
 74 |     if (!hasInterestingKeys) return;
 75 | 
 76 |     const newState: Partial<State> = {
 77 |       receivedData: true,
 78 |     };
 79 | 
 80 |     for (const key of interestingKeys) {
 81 |       if (key in data.state) {
 82 |         newState[key] = data.state[key];
 83 |       }
 84 |     }
 85 | 
 86 |     this.setState(newState);
 87 |   }
 88 | 
 89 |   private _onSelectBracket = (path: string) => {
 90 |     this.setState({ selectedBracketPath: path });
 91 |   };
 92 | 
 93 |   private _onCreateBracketVote = () => {
 94 |     const result = getValueByPath(
 95 |       this.state.results!,
 96 |       this.state.selectedBracketPath,
 97 |     ) as Result;
 98 | 
 99 |     const items = result.items
100 |       .map(item => getResultTopic(this.state.topics, item))
101 |       .map(topic => {
102 |         if (!topic) return {};
103 |         return {
104 |           championId: topic.championId,
105 |           label: topic.label,
106 |           colorId: topic.colorId,
107 |         };
108 |       });
109 | 
110 |     this._onNewVote(items);
111 |   };
112 | 
113 |   private _onNewVote = (
114 |     items: Array<{
115 |       championId?: string;
116 |       label?: string;
117 |       colorId?: number;
118 |     }> = [],
119 |   ) => {
120 |     const defaultItem: VoteItem = {
121 |       championId: '',
122 |       label: '',
123 |       colorId: 5,
124 |     };
125 | 
126 |     const item1 = { ...defaultItem, ...items[0] };
127 |     const item2 = { ...defaultItem, colorId: 14, ...items[1] };
128 | 
129 |     const vote: Vote = {
130 |       id: generateRandomId(),
131 |       state: 'staging',
132 |       items: [item1, item2],
133 |     };
134 | 
135 |     fetchJSON('/admin/patch', {
136 |       method: 'PATCH',
137 |       body: [
138 |         {
139 |           op: 'replace',
140 |           path: `/vote`,
141 |           value: vote,
142 |         },
143 |       ],
144 |     });
145 |   };
146 | 
147 |   private _onIframeAction = (action: string) => {
148 |     this._ws.send(
149 |       JSON.stringify({
150 |         action: 'big-screen-broadcast',
151 |         message: { iframeAction: action },
152 |       }),
153 |     );
154 |   };
155 | 
156 |   private _onIframeChange = (newVal: string) => {
157 |     fetchJSON('/admin/patch', {
158 |       method: 'PATCH',
159 |       body: [
160 |         {
161 |           op: 'replace',
162 |           path: `/iframe`,
163 |           value: newVal,
164 |         },
165 |       ],
166 |     });
167 |   };
168 | 
169 |   componentWillUnmount() {
170 |     this._ws.close();
171 |   }
172 | 
173 |   render(
174 |     _: {},
175 |     {
176 |       receivedData,
177 |       champions,
178 |       results,
179 |       topics,
180 |       selectedBracketPath,
181 |       vote,
182 |       voteCount,
183 |       presentationView,
184 |       iframe,
185 |     }: State,
186 |   ) {
187 |     if (!receivedData) return <div>Loading…</div>;
188 | 
189 |     const selectedBracket: Result | undefined = selectedBracketPath
190 |       ? getValueByPath(results, selectedBracketPath)
191 |       : undefined;
192 | 
193 |     return (
194 |       <div>
195 |         <AdminPresentationView mode={presentationView!} />
196 |         <AdminChampions champions={champions} />
197 |         <AdminBracket
198 |           onSelectBracket={this._onSelectBracket}
199 |           results={results}
200 |           topics={topics}
201 |         />
202 |         <AdminSelectedBracket
203 |           topics={topics}
204 |           champions={champions}
205 |           result={selectedBracket}
206 |           path={selectedBracketPath}
207 |           onCreateVote={this._onCreateBracketVote}
208 |           onShowSlides={this._onIframeChange}
209 |         />
210 |         <AdminIframe
211 |           iframe={iframe}
212 |           onAction={this._onIframeAction}
213 |           onChange={this._onIframeChange}
214 |         />
215 |         <AdminVote
216 |           key={vote ? vote.id : 'no-vote'}
217 |           champions={champions}
218 |           vote={vote}
219 |           voteCount={voteCount}
220 |           onNewVote={this._onNewVote}
221 |         />
222 |       </div>
223 |     );
224 |   }
225 | }
226 | 


--------------------------------------------------------------------------------
/client/components/big-screen/audio.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component, RenderableProps } from 'preact';
 14 | 
 15 | const context = new AudioContext();
 16 | const safetyOffset = 0.25;
 17 | const loop1BufferP = loadSoundAsAudioBuffer(
 18 |   'https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Floop1.mp3?v=1577451600356',
 19 | );
 20 | const loop1BarLength = (60 / 110) /*BPM*/ * 4;
 21 | const loop2BufferP = loadSoundAsAudioBuffer(
 22 |   'https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Floop2.mp3?v=1577451600714',
 23 | );
 24 | const loop2BarLength = (60 / 123) /*BPM*/ * 4;
 25 | const stabBufferP = loadSoundAsAudioBuffer(
 26 |   'https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Fstab.mp3?v=1577451594952',
 27 | );
 28 | 
 29 | function wait(ms: number): Promise<void> {
 30 |   return new Promise(r => setTimeout(r, ms));
 31 | }
 32 | 
 33 | async function loadSoundAsAudioBuffer(url: string) {
 34 |   const buffer = await fetch(url).then(r => r.arrayBuffer());
 35 |   return context.decodeAudioData(buffer);
 36 | }
 37 | 
 38 | function audioSourceFromBuffer(buffer: AudioBuffer) {
 39 |   const source = context.createBufferSource();
 40 |   source.buffer = buffer;
 41 |   return source;
 42 | }
 43 | 
 44 | function nextBarSwitchTime(
 45 |   playTime: number,
 46 |   loopStart: number,
 47 |   loopBarLength: number,
 48 | ) {
 49 |   const loopPlaytime = playTime - loopStart;
 50 |   const timeInBar = loopPlaytime % loopBarLength;
 51 |   let untilSwitch = loopBarLength - timeInBar;
 52 |   if (untilSwitch < safetyOffset) {
 53 |     untilSwitch += loopBarLength;
 54 |   }
 55 | 
 56 |   return untilSwitch + playTime;
 57 | }
 58 | 
 59 | type LoopStatus = 'stop' | 'play' | 'upgrade';
 60 | 
 61 | class BWQAudio {
 62 |   private _loop1Source?: AudioBufferSourceNode;
 63 |   private _loop2Source?: AudioBufferSourceNode;
 64 |   private _loop1Start: number = 0;
 65 |   private _loop2Start: number = 0;
 66 |   private _loopStatus: LoopStatus = 'stop';
 67 | 
 68 |   constructor(
 69 |     private _loop1Buffer: AudioBuffer,
 70 |     private _loop2Buffer: AudioBuffer,
 71 |     private _stabBuffer: AudioBuffer,
 72 |   ) {}
 73 | 
 74 |   playLoop(): void {
 75 |     if (this._loopStatus === 'play') return;
 76 | 
 77 |     this._loopStatus = 'play';
 78 |     this._loop1Source = audioSourceFromBuffer(this._loop1Buffer);
 79 | 
 80 |     // This would only happen if we go from "revealing" back to activate
 81 |     if (this._loop2Source) {
 82 |       this._loop2Source.stop();
 83 |       this._loop2Source = undefined;
 84 |     }
 85 | 
 86 |     this._loop1Source.connect(context.destination);
 87 |     this._loop1Source.loop = true;
 88 | 
 89 |     this._loop1Start = context.currentTime + safetyOffset;
 90 |     this._loop1Source.start(this._loop1Start);
 91 |   }
 92 | 
 93 |   async upgradeLoop(): Promise<void> {
 94 |     if (this._loopStatus === 'upgrade') return;
 95 | 
 96 |     this._loopStatus = 'upgrade';
 97 | 
 98 |     this._loop2Source = audioSourceFromBuffer(this._loop2Buffer);
 99 |     this._loop2Source.connect(context.destination);
100 |     this._loop2Source.loop = true;
101 | 
102 |     const switchTime = nextBarSwitchTime(
103 |       context.currentTime,
104 |       this._loop1Start,
105 |       loop1BarLength,
106 |     );
107 | 
108 |     this._loop2Start = switchTime;
109 | 
110 |     if (this._loop1Source) {
111 |       this._loop1Source.stop(switchTime);
112 |       this._loop1Source = undefined;
113 |     }
114 | 
115 |     this._loop2Source.start(switchTime);
116 | 
117 |     return wait((switchTime - context.currentTime) * 1000);
118 |   }
119 | 
120 |   async playStab(): Promise<void> {
121 |     if (this._loopStatus === 'stop') {
122 |       return;
123 |     }
124 | 
125 |     this._loopStatus = 'stop';
126 | 
127 |     const stabSource = audioSourceFromBuffer(this._stabBuffer);
128 |     stabSource.connect(context.destination);
129 | 
130 |     let switchTime = context.currentTime;
131 | 
132 |     if (this._loop2Source) {
133 |       switchTime = nextBarSwitchTime(
134 |         context.currentTime,
135 |         this._loop2Start,
136 |         loop2BarLength,
137 |       );
138 |       this._loop2Source.stop(switchTime);
139 |       this._loop2Source = undefined;
140 |     } else if (this._loop1Source) {
141 |       switchTime = nextBarSwitchTime(
142 |         context.currentTime,
143 |         this._loop1Start,
144 |         loop1BarLength,
145 |       );
146 |       this._loop1Source.stop(switchTime);
147 |     }
148 | 
149 |     stabSource.start(switchTime);
150 | 
151 |     return wait((switchTime - context.currentTime) * 1000);
152 |   }
153 | 
154 |   stopLoops() {
155 |     if (this._loop1Source) {
156 |       this._loop1Source.stop();
157 |       this._loop1Source = undefined;
158 |     }
159 | 
160 |     if (this._loop2Source) {
161 |       this._loop2Source.stop();
162 |       this._loop2Source = undefined;
163 |     }
164 | 
165 |     this._loopStatus = 'stop';
166 |   }
167 | }
168 | 
169 | async function getAudio() {
170 |   return new BWQAudio(
171 |     await loop1BufferP,
172 |     await loop2BufferP,
173 |     await stabBufferP,
174 |   );
175 | }
176 | 
177 | interface Props {
178 |   state: LoopStatus;
179 | }
180 | 
181 | export default class Audio extends Component<Props> {
182 |   private _lastState: LoopStatus = 'stop';
183 |   private _lastChildren?: preact.ComponentChildren;
184 |   private _lockedChildren?: preact.ComponentChildren;
185 |   private _audio = getAudio();
186 | 
187 |   async componentWillUnmount() {
188 |     const audio = await this._audio;
189 |     audio.stopLoops();
190 |   }
191 | 
192 |   render({ state, children }: RenderableProps<Props>) {
193 |     if (state !== this._lastState) {
194 |       this._lastState = state;
195 |       this._lockedChildren = this._lastChildren;
196 |       this._audio.then(async audio => {
197 |         if (state === 'play') {
198 |           audio.playLoop();
199 |         } else if (state === 'upgrade') {
200 |           await audio.upgradeLoop();
201 |         } else if (state === 'stop') {
202 |           await audio.playStab();
203 |         }
204 | 
205 |         this._lockedChildren = undefined;
206 |         // Trigger a render
207 |         this.setState({});
208 |       });
209 |     }
210 | 
211 |     this._lastChildren = children;
212 |     return this._lockedChildren || children;
213 |   }
214 | }
215 | 


--------------------------------------------------------------------------------
/client/components/admin/bracket/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component, FunctionalComponent, JSX } from 'preact';
 14 | import { Result, Topics } from 'shared/state';
 15 | import { getResultLabel, fetchJSON } from 'client/utils';
 16 | 
 17 | interface Props {
 18 |   results?: Result;
 19 |   topics: Topics;
 20 |   onSelectBracket: (path: string) => void;
 21 | }
 22 | 
 23 | interface innerProps {
 24 |   onZoomOut: () => void;
 25 |   onGenerateClick: () => void;
 26 | }
 27 | 
 28 | const AdminBracketWrapper: FunctionalComponent<innerProps> = ({
 29 |   children,
 30 |   onGenerateClick,
 31 |   onZoomOut,
 32 | }) => (
 33 |   <section>
 34 |     <h1>Bracket</h1>
 35 |     {children}
 36 |     <div class="reset-row">
 37 |       <button class="button button-danger" onClick={onGenerateClick}>
 38 |         Regenerate bracket
 39 |       </button>{' '}
 40 |       <button class="button" onClick={onZoomOut}>
 41 |         Zoom out
 42 |       </button>
 43 |     </div>
 44 |   </section>
 45 | );
 46 | 
 47 | export default class AdminBracket extends Component<Props> {
 48 |   private _onRegenerateClick = () => {
 49 |     if (!confirm('Are you sure? This will reset all votes.')) return;
 50 |     const promptAnswer = prompt(
 51 |       'How many in competition?',
 52 |       Object.keys(this.props.topics).length.toString(),
 53 |     );
 54 |     if (promptAnswer === null) return;
 55 | 
 56 |     fetchJSON('/admin/generate-bracket', {
 57 |       method: 'POST',
 58 |       body: { num: Number(promptAnswer) },
 59 |     });
 60 |   };
 61 | 
 62 |   private _onZoomOutClick = () => {
 63 |     fetchJSON('/admin/patch', {
 64 |       method: 'PATCH',
 65 |       body: [
 66 |         {
 67 |           op: 'replace',
 68 |           path: `/bracketZoom`,
 69 |           value: null,
 70 |         },
 71 |       ],
 72 |     });
 73 |   };
 74 | 
 75 |   private _onSelectBracketClick = (event: Event) => {
 76 |     const el = event.currentTarget as HTMLElement;
 77 |     const path = el.dataset.path!;
 78 |     this.props.onSelectBracket(path);
 79 |   };
 80 | 
 81 |   private _getResultLabel(result: Result | string): string {
 82 |     return getResultLabel(this.props.topics, result);
 83 |   }
 84 | 
 85 |   private _createBracketColumns(
 86 |     results: Result[],
 87 |     resultsPaths: string[],
 88 |     stage: number,
 89 |   ): JSX.Element[] {
 90 |     const toCreate = 2 ** stage / 2;
 91 |     const mapper = Array(toCreate).fill(undefined);
 92 | 
 93 |     const cols = [
 94 |       <div
 95 |         class={`bracket-column${stage === 1 ? ' bracket-column-semis' : ''}`}
 96 |       >
 97 |         {mapper.map((_, i) => (
 98 |           <div class="bracket-items-container">
 99 |             {results[i] && [
100 |               ...results[i].items.map(item => (
101 |                 <div
102 |                   class={`bracket-item${
103 |                     typeof item === 'string' ? ' bracket-item-leaf' : ''
104 |                   }`}
105 |                 >
106 |                   {this._getResultLabel(item) ||
107 |                     (typeof item === 'string' ? 'Unselected' : 'Undecided')}
108 |                 </div>
109 |               )),
110 |               <button
111 |                 class="button result-edit-button"
112 |                 data-path={resultsPaths[i]}
113 |                 onClick={this._onSelectBracketClick}
114 |               >
115 |                 ...
116 |               </button>,
117 |             ]}
118 |           </div>
119 |         ))}
120 |       </div>,
121 |     ];
122 | 
123 |     const nextResults: Result[] = [];
124 |     const nextResultsPaths: string[] = [];
125 | 
126 |     for (const [i, result] of results.entries()) {
127 |       const path = resultsPaths[i];
128 | 
129 |       for (let itemI = 0; itemI < 2; itemI++) {
130 |         if (typeof result.items[itemI] === 'string') continue;
131 |         nextResults.push(result.items[itemI] as Result);
132 |         nextResultsPaths.push(path + '/items/' + itemI);
133 |       }
134 |     }
135 | 
136 |     if (nextResults.length !== 0) {
137 |       cols.push(
138 |         ...this._createBracketColumns(nextResults, nextResultsPaths, stage + 1),
139 |       );
140 |     }
141 | 
142 |     return cols;
143 |   }
144 | 
145 |   private _createBracket(result: Result): JSX.Element {
146 |     const cols = [
147 |       <div class="bracket-center">
148 |         <div class="bracket-center-items">
149 |           <div class="bracket-center-item">
150 |             {this._getResultLabel(result.items[0]) ||
151 |               (typeof result.items[0] === 'string'
152 |                 ? 'Unselected'
153 |                 : 'Undecided')}
154 |           </div>
155 |           <div class="bracket-center-vs">
156 |             <button
157 |               class="button"
158 |               data-path="/"
159 |               onClick={this._onSelectBracketClick}
160 |             >
161 |               ...
162 |             </button>
163 |           </div>
164 |           <div class="bracket-center-item">
165 |             {this._getResultLabel(result.items[1]) ||
166 |               (typeof result.items[0] === 'string'
167 |                 ? 'Unselected'
168 |                 : 'Undecided')}
169 |           </div>
170 |         </div>
171 |       </div>,
172 |     ];
173 | 
174 |     for (let i = 0; i < 2; i++) {
175 |       if (typeof result.items[i] === 'string') continue;
176 |       const newCols = this._createBracketColumns(
177 |         [result.items[i] as Result],
178 |         ['/items/' + i],
179 |         1,
180 |       );
181 | 
182 |       if (i === 0) {
183 |         cols.unshift(...newCols.reverse());
184 |       } else {
185 |         cols.push(...newCols);
186 |       }
187 |     }
188 | 
189 |     return <div class="bracket">{cols}</div>;
190 |   }
191 | 
192 |   render({ results }: Props) {
193 |     if (!results) {
194 |       return (
195 |         <AdminBracketWrapper
196 |           onGenerateClick={this._onRegenerateClick}
197 |           onZoomOut={this._onZoomOutClick}
198 |         >
199 |           <p>No bracket initialised. Press "Regenerate bracket".</p>
200 |         </AdminBracketWrapper>
201 |       );
202 |     }
203 | 
204 |     return (
205 |       <AdminBracketWrapper
206 |         onGenerateClick={this._onRegenerateClick}
207 |         onZoomOut={this._onZoomOutClick}
208 |       >
209 |         <div class="bracket-scroller">{this._createBracket(results)}</div>
210 |       </AdminBracketWrapper>
211 |     );
212 |   }
213 | }
214 | 


--------------------------------------------------------------------------------
/client/components/admin/iframe/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component } from 'preact';
 14 | import * as comlink from 'comlink';
 15 | 
 16 | import { presetIframes } from 'shared/state';
 17 | 
 18 | interface IframeComlink {
 19 |   getActions: () => Promise<string[]>;
 20 |   [comlink.releaseProxy]: () => void;
 21 | }
 22 | 
 23 | interface Props {
 24 |   iframe: string;
 25 |   onChange: (newVal: string) => void;
 26 |   onAction: (action: string) => void;
 27 | }
 28 | 
 29 | interface State {
 30 |   iframe: string;
 31 |   editedIframe: string;
 32 |   editing: boolean;
 33 |   saving: boolean;
 34 |   actions: string[];
 35 | }
 36 | 
 37 | export default class AdminIframe extends Component<Props, State> {
 38 |   static getDerivedStateFromProps(props: Props, state: State): Partial<State> {
 39 |     const newState: Partial<State> = {};
 40 | 
 41 |     if (props.iframe !== state.iframe) {
 42 |       newState.iframe = props.iframe;
 43 |       newState.actions = [];
 44 | 
 45 |       if (state.saving) {
 46 |         newState.saving = false;
 47 |         newState.editing = false;
 48 |       }
 49 |     }
 50 | 
 51 |     return newState;
 52 |   }
 53 | 
 54 |   state: State = {
 55 |     iframe: '',
 56 |     editedIframe: '',
 57 |     editing: false,
 58 |     saving: false,
 59 |     actions: [],
 60 |   };
 61 | 
 62 |   private _iframeLink?: IframeComlink;
 63 |   private _getActionsController?: AbortController;
 64 | 
 65 |   componentDidUpdate(_: Props, prevState: State) {
 66 |     if (this.state.iframe !== prevState.iframe) {
 67 |       if (this._iframeLink) this._iframeLink[comlink.releaseProxy]();
 68 |       if (this._getActionsController) this._getActionsController.abort();
 69 |       this.setState({ actions: [] });
 70 |     }
 71 |   }
 72 | 
 73 |   private _onIframeInput = (event: Event) => {
 74 |     const el = event.currentTarget as HTMLInputElement;
 75 |     this.setState({ editedIframe: el.value });
 76 |   };
 77 | 
 78 |   private _onEditClick = () => {
 79 |     this.setState(state => ({
 80 |       editedIframe: state.iframe,
 81 |       editing: true,
 82 |     }));
 83 |   };
 84 | 
 85 |   private _onSaveClick = () => {
 86 |     this.setState(state => {
 87 |       this.props.onChange(state.editedIframe);
 88 |       return { saving: true };
 89 |     });
 90 |   };
 91 | 
 92 |   private _onClearClick = () => {
 93 |     this.props.onChange('');
 94 |     this.setState({ saving: true });
 95 |   };
 96 | 
 97 |   private _onPresetClick = (event: Event) => {
 98 |     const el = event.currentTarget as HTMLButtonElement;
 99 |     this.props.onChange(el.dataset.url!);
100 |     this.setState({ saving: true });
101 |   };
102 | 
103 |   private _onIframeLoad = async (event: Event) => {
104 |     const el = event.currentTarget as HTMLIFrameElement;
105 | 
106 |     this._iframeLink = (comlink.wrap(
107 |       comlink.windowEndpoint(el.contentWindow!),
108 |     ) as unknown) as IframeComlink;
109 | 
110 |     this._getActionsController = new AbortController();
111 |     const signal = this._getActionsController.signal;
112 | 
113 |     try {
114 |       const actions = await Promise.race([
115 |         this._iframeLink.getActions(),
116 |         new Promise<never>((_, reject) => {
117 |           signal.addEventListener('abort', () =>
118 |             reject(new DOMException('Aborted', 'AbortError')),
119 |           );
120 |         }),
121 |       ]);
122 | 
123 |       this.setState({ actions });
124 |     } catch (err) {}
125 |   };
126 | 
127 |   private _onActionClick = (event: Event) => {
128 |     const el = event.currentTarget as HTMLButtonElement;
129 |     this.props.onAction(el.textContent!);
130 |   };
131 | 
132 |   render(_: Props, { iframe, editing, editedIframe, saving, actions }: State) {
133 |     return (
134 |       <section>
135 |         <h1>Present iframe</h1>
136 |         {iframe && (
137 |           <iframe
138 |             class="hidden-iframe"
139 |             src={iframe}
140 |             onLoad={this._onIframeLoad}
141 |           />
142 |         )}
143 |         <div class="admin-form-items">
144 |           <div class="admin-form-item">
145 |             <div>
146 |               <label>
147 |                 <span class="label">URL</span>
148 |                 {editing ? (
149 |                   <input
150 |                     class="input"
151 |                     type="text"
152 |                     disabled={saving}
153 |                     value={editedIframe}
154 |                     onInput={this._onIframeInput}
155 |                     autoFocus
156 |                   />
157 |                 ) : (
158 |                   <span class="prefilled-input">{iframe || 'None'}</span>
159 |                 )}
160 |               </label>
161 |             </div>
162 |             <div>
163 |               {editing ? (
164 |                 <button
165 |                   class="button"
166 |                   disabled={saving}
167 |                   onClick={this._onSaveClick}
168 |                 >
169 |                   Save
170 |                 </button>
171 |               ) : (
172 |                 <span>
173 |                   <button
174 |                     disabled={saving}
175 |                     class="button"
176 |                     onClick={this._onEditClick}
177 |                   >
178 |                     Edit
179 |                   </button>{' '}
180 |                   {Object.entries(presetIframes).map(([name, url]) => [
181 |                     <button
182 |                       class="button"
183 |                       data-url={url}
184 |                       onClick={this._onPresetClick}
185 |                     >
186 |                       {name}
187 |                     </button>,
188 |                     ' ',
189 |                   ])}
190 |                   <button
191 |                     disabled={saving || !iframe}
192 |                     class="button"
193 |                     onClick={this._onClearClick}
194 |                   >
195 |                     Clear
196 |                   </button>
197 |                 </span>
198 |               )}
199 |             </div>
200 |           </div>
201 |           {actions[0] && (
202 |             <div class="admin-form-item">
203 |               <div>
204 |                 <div class="label">Actions</div>
205 |                 {actions.map(action => [
206 |                   <button class="button" onClick={this._onActionClick}>
207 |                     {action}
208 |                   </button>,
209 |                   ' ',
210 |                 ])}
211 |               </div>
212 |             </div>
213 |           )}
214 |         </div>
215 |       </section>
216 |     );
217 |   }
218 | }
219 | 


--------------------------------------------------------------------------------
/client/utils.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { Result, Topic, Topics } from 'shared/state';
 14 | import { Champions } from '../shared/state';
 15 | 
 16 | /**
 17 |  * Returns a random 12 char base64 string
 18 |  */
 19 | export function generateRandomId(): string {
 20 |   const randomValues = crypto.getRandomValues(new Uint8Array(9));
 21 |   const binaryString = String.fromCharCode(...randomValues);
 22 |   return btoa(binaryString);
 23 | }
 24 | 
 25 | /**
 26 |  * Escape path component in a JSON patch path.
 27 |  * @param pathComponent
 28 |  */
 29 | export function escapePatchPathComponent(pathComponent: string): string {
 30 |   // Taken from fast-json-patch, which doesn't tree-shake well.
 31 |   if (pathComponent.indexOf('/') === -1 && pathComponent.indexOf('~') === -1) {
 32 |     return pathComponent;
 33 |   }
 34 |   return pathComponent.replace(/~/g, '~0').replace(/\//g, '~1');
 35 | }
 36 | 
 37 | /**
 38 |  * Unescapes a JSON patch path
 39 |  * @param pathComponent
 40 |  */
 41 | export function unescapePathComponent(pathComponent: string): string {
 42 |   if (!pathComponent.includes('~')) return pathComponent;
 43 |   return pathComponent.replace(/~1/g, '/').replace(/~0/g, '~');
 44 | }
 45 | 
 46 | /**
 47 |  * Get value from object using a JSON patch path
 48 |  *
 49 |  * @param obj
 50 |  * @param path
 51 |  */
 52 | export function getValueByPath(obj: any, path: string): any {
 53 |   // Somewhat taken from fast-json-patch, which doesn't tree-shake well.
 54 |   if (path === '/') return obj;
 55 | 
 56 |   const keys = path.split('/');
 57 |   let currentObj = obj;
 58 | 
 59 |   for (const key of keys.slice(1)) {
 60 |     let calculatedKey: string | number = key;
 61 | 
 62 |     if (Array.isArray(obj)) {
 63 |       if (calculatedKey === '-') {
 64 |         calculatedKey = obj.length;
 65 |       } else {
 66 |         calculatedKey = Number(calculatedKey);
 67 |       }
 68 |     } else {
 69 |       calculatedKey = unescapePathComponent(calculatedKey);
 70 |     }
 71 | 
 72 |     currentObj = currentObj[calculatedKey];
 73 |   }
 74 | 
 75 |   return currentObj;
 76 | }
 77 | 
 78 | const resultNameCache = new WeakMap<Result, Topic | undefined>();
 79 | 
 80 | export function getResultTopic(
 81 |   topics: Topics,
 82 |   result: Result | string,
 83 | ): Topic | undefined {
 84 |   if (typeof result === 'string') return topics[result];
 85 | 
 86 |   if (!resultNameCache.has(result)) {
 87 |     if (!result.items[result.winningIndex]) {
 88 |       resultNameCache.set(result, undefined);
 89 |     } else {
 90 |       resultNameCache.set(
 91 |         result,
 92 |         getResultTopic(topics, result.items[result.winningIndex]),
 93 |       );
 94 |     }
 95 |   }
 96 | 
 97 |   return resultNameCache.get(result)!;
 98 | }
 99 | 
100 | export function getResultLabel(
101 |   topics: Topics,
102 |   result: Result | string,
103 | ): string {
104 |   const topic = getResultTopic(topics, result);
105 |   return topic ? topic.label : '';
106 | }
107 | 
108 | export function getResultChampionName(
109 |   topics: Topics,
110 |   result: Result | string,
111 |   champions: Champions,
112 | ): string {
113 |   const topic = getResultTopic(topics, result);
114 |   return champions[topic?.championId || '']?.name || '';
115 | }
116 | 
117 | export function keepServerAlive() {
118 |   setInterval(() => {
119 |     fetch('/ping');
120 |   }, 30 * 1000);
121 | }
122 | 
123 | interface AnimateOptions {
124 |   duration?: number;
125 |   delay?: number;
126 |   easing?: string;
127 |   fill?: 'backwards' | 'none';
128 | }
129 | 
130 | interface AnimateKeyframe {
131 |   [prop: string]: string;
132 | }
133 | 
134 | interface AnimateKeyframes {
135 |   [pos: string]: AnimateKeyframe;
136 | }
137 | 
138 | export function animate(
139 |   el: HTMLElement,
140 |   keyframes: AnimateKeyframes | AnimateKeyframe[],
141 |   {
142 |     duration = 1000,
143 |     delay = 0,
144 |     easing = 'linear',
145 |     fill = 'none',
146 |   }: AnimateOptions = {},
147 | ): Promise<void> {
148 |   // We can't use generateRandomId here as it includes invalid chars.
149 |   const animName =
150 |     'a' + Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16);
151 |   let computedKeyframes: AnimateKeyframes;
152 | 
153 |   if (!Array.isArray(keyframes)) {
154 |     computedKeyframes = keyframes;
155 |   } else {
156 |     computedKeyframes = Object.fromEntries(
157 |       keyframes.map((keyframe, i) => [
158 |         (i / keyframes.length) * 100 + '%',
159 |         keyframe,
160 |       ]),
161 |     );
162 |   }
163 | 
164 |   const style = document.createElement('style');
165 |   style.textContent =
166 |     `@keyframes ${animName} {` +
167 |     Object.entries(computedKeyframes)
168 |       .map(
169 |         ([pos, keyframe]) =>
170 |           pos +
171 |           '{' +
172 |           Object.entries(keyframe)
173 |             .map(([prop, val]) => `${prop}: ${val};`)
174 |             .join('') +
175 |           '}',
176 |       )
177 |       .join('') +
178 |     '}';
179 | 
180 |   document.head.append(style);
181 |   el.style.animation = `${duration}ms ${easing} ${delay}ms ${fill} ${animName}`;
182 | 
183 |   return new Promise(resolve => {
184 |     function completeListener(event: AnimationEvent) {
185 |       if (event.target !== el) return;
186 |       resolve();
187 |       el.removeEventListener('animationend', completeListener);
188 |       el.removeEventListener('animationcancel', completeListener);
189 |       style.remove();
190 |     }
191 |     el.addEventListener('animationend', completeListener);
192 |     el.addEventListener('animationcancel', completeListener);
193 |   });
194 | }
195 | 
196 | function getRGB(color: number): [number, number, number] {
197 |   const mask = 0x0000ff;
198 |   return [color >> 16, (color >> 8) & mask, color & mask];
199 | }
200 | 
201 | export function getMidColor(color1: number, color2: number): number {
202 |   // Ideally this should be converting to LAB, but meh, don't care.
203 |   const [c1r, c1g, c1b] = getRGB(color1);
204 |   const [c2r, c2g, c2b] = getRGB(color2);
205 |   return (
206 |     (Math.round((c1r + c2r) / 2) << 16) +
207 |     (Math.round((c1g + c2g) / 2) << 8) +
208 |     Math.round((c1b + c2b) / 2)
209 |   );
210 | }
211 | 
212 | export function getHexColor(color: number): string {
213 |   return '#' + color.toString(16).padStart(6, '0');
214 | }
215 | 
216 | interface FetchJSONOptions {
217 |   body?: any;
218 |   method?: string;
219 | }
220 | 
221 | export async function fetchJSON(
222 |   path: RequestInfo,
223 |   { body, method = 'GET' }: FetchJSONOptions = {},
224 | ) {
225 |   const response = await fetch(path, {
226 |     body: body ? JSON.stringify(body) : undefined,
227 |     method,
228 |     headers: { 'Content-Type': 'application/json' },
229 |   });
230 | 
231 |   const data = await response.json();
232 |   if (data.err) throw Error(data.err);
233 |   return data;
234 | }
235 | 


--------------------------------------------------------------------------------
/server/components/pages/user-page/styles.css:
--------------------------------------------------------------------------------
  1 | /**
  2 | * Copyright 2019 Google Inc. All Rights Reserved.
  3 | * Licensed under the Apache License, Version 2.0 (the "License");
  4 | * you may not use this file except in compliance with the License.
  5 | * You may obtain a copy of the License at
  6 | *     http://www.apache.org/licenses/LICENSE-2.0
  7 | * Unless required by applicable law or agreed to in writing, software
  8 | * distributed under the License is distributed on an "AS IS" BASIS,
  9 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 | * See the License for the specific language governing permissions and
 11 | * limitations under the License.
 12 | */
 13 | @font-face {
 14 |   font-family: 'app-font';
 15 |   font-style: normal;
 16 |   font-weight: 400;
 17 |   src: url('https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Fnormal.woff2?v=1577974248786')
 18 |     format('woff2');
 19 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
 20 |     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
 21 |     U+FEFF, U+FFFD;
 22 | }
 23 | 
 24 | @font-face {
 25 |   font-family: 'app-font';
 26 |   font-style: normal;
 27 |   font-weight: 700;
 28 |   src: url('https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Fbold.woff2?v=1577974248594')
 29 |     format('woff2');
 30 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
 31 |     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
 32 |     U+FEFF, U+FFFD;
 33 | }
 34 | 
 35 | * {
 36 |   -webkit-tap-highlight-color: transparent;
 37 | }
 38 | 
 39 | html {
 40 |   background-image: radial-gradient(
 41 |       circle farthest-corner,
 42 |       rgb(255, 255, 255, 0.4) 50%,
 43 |       rgb(255, 255, 255, 0.4) 52%,
 44 |       rgb(254, 254, 254, 0.4) 55%,
 45 |       rgb(253, 253, 253, 0.4) 57%,
 46 |       rgb(252, 252, 252, 0.4) 60%,
 47 |       rgb(249, 249, 249, 0.4) 67%,
 48 |       rgb(245, 245, 245, 0.4) 72%,
 49 |       rgb(242, 242, 242, 0.4) 73%,
 50 |       rgb(223, 223, 223, 0.4) 76%,
 51 |       rgb(185, 185, 185, 0.4) 82%,
 52 |       rgb(0, 0, 0, 0.4) 100%
 53 |     ),
 54 |     linear-gradient(to bottom, #fff, #f3f3f3);
 55 |   font-family: app-font, sans-serif;
 56 |   color: black;
 57 |   background-blend-mode: multiply, normal;
 58 |   background-size: 113%, 100%;
 59 |   background-position: center;
 60 |   --side-margin: 1rem;
 61 | 
 62 |   @media (prefers-color-scheme: dark) {
 63 |     background-image: radial-gradient(
 64 |         circle farthest-corner,
 65 |         rgb(255, 255, 255, 0.4) 50%,
 66 |         rgb(255, 255, 255, 0.4) 52%,
 67 |         rgb(254, 254, 254, 0.4) 55%,
 68 |         rgb(253, 253, 253, 0.4) 57%,
 69 |         rgb(252, 252, 252, 0.4) 60%,
 70 |         rgb(249, 249, 249, 0.4) 67%,
 71 |         rgb(245, 245, 245, 0.4) 72%,
 72 |         rgb(242, 242, 242, 0.4) 73%,
 73 |         rgb(223, 223, 223, 0.4) 76%,
 74 |         rgb(185, 185, 185, 0.4) 82%,
 75 |         rgb(0, 0, 0, 0.4) 100%
 76 |       ),
 77 |       linear-gradient(to bottom, #3f3f3f, #000000);
 78 |   }
 79 | }
 80 | 
 81 | html,
 82 | body {
 83 |   min-height: 100%;
 84 |   margin: 0;
 85 |   display: grid;
 86 |   grid-template-rows: 1fr;
 87 |   overflow-x: hidden;
 88 | }
 89 | 
 90 | .main-ui {
 91 |   display: grid;
 92 |   grid-template-rows: max-content 1fr;
 93 | }
 94 | 
 95 | .main-header {
 96 |   background: #525252;
 97 |   display: grid;
 98 |   grid-template-columns: 1fr max-content;
 99 |   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.22);
100 |   padding: 1rem var(--side-margin);
101 |   align-items: center;
102 | }
103 | 
104 | .main-content-container {
105 |   display: grid;
106 |   grid-template-rows: 1fr;
107 | }
108 | 
109 | .main-content {
110 |   display: grid;
111 |   grid-template-rows: max-content 1fr;
112 |   will-change: transform;
113 | }
114 | 
115 | .user-image {
116 |   --size: 40px;
117 |   width: var(--size);
118 |   height: var(--size);
119 |   border-radius: var(--size);
120 |   border: 2px solid #fff;
121 | }
122 | 
123 | .unbutton {
124 |   cursor: pointer;
125 |   background: none;
126 |   border: none;
127 |   font: inherit;
128 |   padding: 0;
129 |   margin: 0;
130 |   user-select: none;
131 | }
132 | 
133 | .log-out-button {
134 |   color: #fff;
135 |   font-weight: bold;
136 |   padding: 0.5em 0;
137 | }
138 | 
139 | .site-title {
140 |   text-align: center;
141 |   padding: 3.4rem var(--side-margin) 0;
142 | 
143 |   & h1 {
144 |     color: #9aa0a6;
145 |     margin: 0 0 0.1em;
146 |   }
147 | 
148 |   & p {
149 |     color: #707070;
150 |     margin: 0;
151 |     font-weight: bold;
152 |   }
153 | }
154 | 
155 | .main-action-area {
156 |   display: grid;
157 |   align-items: center;
158 |   padding: 3.4rem var(--side-margin);
159 | }
160 | 
161 | .waiting {
162 |   color: #1365ce;
163 |   text-align: center;
164 |   font-weight: bold;
165 |   line-height: 1.1;
166 |   font-size: 7vw;
167 | 
168 |   @media (min-width: 635px) {
169 |     font-size: 2.8rem;
170 |   }
171 | 
172 |   @media (prefers-color-scheme: dark) {
173 |     color: #b6d6ff;
174 |   }
175 | }
176 | 
177 | .transition-grid {
178 |   display: grid;
179 |   align-items: center;
180 |   perspective: 1000px;
181 | 
182 |   & > * {
183 |     grid-area: 1 / 1;
184 |     will-change: transform;
185 |   }
186 | }
187 | 
188 | .vote-buttons {
189 |   display: grid;
190 |   grid-template-rows: 1fr max-content 1fr;
191 |   padding: 0 45px;
192 |   margin: 0 auto;
193 |   width: 100%;
194 |   box-sizing: border-box;
195 |   max-width: 740px;
196 |   perspective: 1000px;
197 | }
198 | 
199 | .log-in-container {
200 |   display: grid;
201 |   grid-template-rows: 1fr;
202 |   padding: 0 45px;
203 |   margin: 0 auto;
204 |   width: 100%;
205 |   box-sizing: border-box;
206 |   max-width: 740px;
207 | }
208 | 
209 | .vote-button {
210 |   position: relative;
211 |   overflow: hidden;
212 |   color: #fff;
213 |   padding: 0.7em;
214 |   min-height: 4em;
215 |   font-size: 7vw;
216 |   font-weight: bold;
217 |   border-radius: 0.4rem;
218 |   background-image: linear-gradient(180deg, var(--color-from), var(--color-to));
219 |   box-shadow: 0 0 8px 3px rgba(225, 236, 255, 0.91),
220 |     0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 11px 16px 0 rgba(0, 0, 0, 0.15);
221 |   will-change: transform;
222 |   transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
223 |   transition-property: transform, opacity;
224 |   width: 100%;
225 |   --move-by: 150px;
226 | 
227 |   @media (min-width: 460px) {
228 |     font-size: 2rem;
229 |   }
230 | 
231 |   @media (prefers-color-scheme: dark) {
232 |     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5),
233 |       0 11px 16px 0 rgba(0, 0, 0, 0.15);
234 |   }
235 | 
236 |   &:focus {
237 |     outline: none;
238 |     &::before {
239 |       animation: flash 0.3s linear;
240 |     }
241 |   }
242 | 
243 |   &::after {
244 |     content: '';
245 |     position: absolute;
246 |     top: -30%;
247 |     left: -10px;
248 |     right: 0px;
249 |     bottom: 50%;
250 |     transform: rotate(-4.8deg);
251 |     background-image: linear-gradient(
252 |       180deg,
253 |       rgba(255, 255, 255, 0.32) 13%,
254 |       rgba(255, 255, 255, 0.09)
255 |     );
256 |     background-repeat: no-repeat;
257 |     border-bottom: 1px solid rgba(255, 255, 255, 0.15);
258 |   }
259 | 
260 |   &::before {
261 |     content: '';
262 |     position: absolute;
263 |     top: 0;
264 |     left: 0;
265 |     right: 0;
266 |     bottom: 0;
267 |     background: radial-gradient(#fff, transparent);
268 |     opacity: 0.0001;
269 |     will-change: opacity;
270 |   }
271 | }
272 | @keyframes flash {
273 |   from {
274 |     opacity: 1;
275 |   }
276 | }
277 | 
278 | .vote-button-selected {
279 |   transform: translateZ(var(--move-by));
280 | }
281 | 
282 | .vote-button-unselected {
283 |   transform: translateZ(calc(var(--move-by) * -1));
284 |   opacity: 0.25;
285 | }
286 | 
287 | .vote-or {
288 |   text-transform: uppercase;
289 |   text-align: center;
290 |   color: #707070;
291 |   font-size: 7vw;
292 |   font-weight: bold;
293 |   padding: 0.9em 0;
294 | 
295 |   @media (min-width: 460px) {
296 |     font-size: 2rem;
297 |   }
298 | 
299 |   @media (prefers-color-scheme: dark) {
300 |     color: #b7b7b7;
301 |   }
302 | }
303 | 


--------------------------------------------------------------------------------
/client/components/admin/selected-bracket/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component, FunctionalComponent } from 'preact';
 14 | import { Result, Topics, Champions } from 'shared/state';
 15 | import {
 16 |   getResultLabel,
 17 |   getResultTopic,
 18 |   getResultChampionName,
 19 |   fetchJSON,
 20 |   escapePatchPathComponent,
 21 | } from 'client/utils';
 22 | import Select from '../../select';
 23 | 
 24 | interface Props {
 25 |   topics: Topics;
 26 |   champions: Champions;
 27 |   path: string;
 28 |   result?: Result;
 29 |   onShowSlides: (url: string) => void;
 30 |   onCreateVote: () => void;
 31 | }
 32 | 
 33 | const AdminSelectedBracketWrapper: FunctionalComponent<{}> = ({ children }) => (
 34 |   <section>
 35 |     <h1>Selected bracket</h1>
 36 |     {children}
 37 |   </section>
 38 | );
 39 | 
 40 | const TopicsSelect: FunctionalComponent<{
 41 |   value: string;
 42 |   topics: Topics;
 43 |   onInput: (event: Event) => void;
 44 | }> = ({ onInput, topics, value }) => {
 45 |   const sortedTopics = Object.entries(topics).sort((a, b) =>
 46 |     a[1].label > b[1].label ? 1 : -1,
 47 |   );
 48 | 
 49 |   return (
 50 |     <Select onInput={onInput} value={value}>
 51 |       <option value=""></option>
 52 |       {sortedTopics.map(([id, topic]) => (
 53 |         <option value={id}>{topic.label}</option>
 54 |       ))}
 55 |     </Select>
 56 |   );
 57 | };
 58 | 
 59 | export default class AdminSelectedBracket extends Component<Props> {
 60 |   private _onTopicSelect = (event: Event) => {
 61 |     const el = event.currentTarget as HTMLSelectElement;
 62 |     const container = el.closest('.admin-form-item') as HTMLElement;
 63 | 
 64 |     fetchJSON('/admin/patch', {
 65 |       method: 'PATCH',
 66 |       body: [
 67 |         {
 68 |           op: 'replace',
 69 |           path: `/results${this.props.path}/items/${Number(
 70 |             container.dataset.itemIndex,
 71 |           )}`,
 72 |           value: el.value,
 73 |         },
 74 |       ],
 75 |     });
 76 |   };
 77 | 
 78 |   private _onChampionSelect = (event: Event) => {
 79 |     const el = event.currentTarget as HTMLSelectElement;
 80 |     const container = el.closest('.admin-form-item') as HTMLElement;
 81 |     const topicId = this.props.result!.items[
 82 |       Number(container.dataset.itemIndex)
 83 |     ];
 84 | 
 85 |     fetchJSON('/admin/patch', {
 86 |       method: 'PATCH',
 87 |       body: [
 88 |         {
 89 |           op: 'replace',
 90 |           path: `/topics/${escapePatchPathComponent(
 91 |             topicId as string,
 92 |           )}/championId`,
 93 |           value: el.value,
 94 |         },
 95 |       ],
 96 |     });
 97 |   };
 98 | 
 99 |   private _setWinner(index: number) {
100 |     const path = this.props.path === '/' ? '' : this.props.path;
101 | 
102 |     fetchJSON('/admin/patch', {
103 |       method: 'PATCH',
104 |       body: [
105 |         {
106 |           op: 'replace',
107 |           path: `/results${path}/winningIndex`,
108 |           value: index,
109 |         },
110 |       ],
111 |     });
112 |   }
113 | 
114 |   private _onWinnerSelect = (event: Event) => {
115 |     const el = event.currentTarget as HTMLSelectElement;
116 |     const container = el.closest('.admin-form-item') as HTMLElement;
117 |     this._setWinner(Number(container.dataset.itemIndex));
118 |   };
119 | 
120 |   private _onShowSlides = (event: Event) => {
121 |     const el = event.currentTarget as HTMLSelectElement;
122 |     const container = el.closest('.admin-form-item') as HTMLElement;
123 |     const index = Number(container.dataset.itemIndex);
124 |     const topic = getResultTopic(
125 |       this.props.topics,
126 |       this.props.result!.items[index],
127 |     );
128 |     this.props.onShowSlides(topic!.slidesURL);
129 |   };
130 | 
131 |   private _onClearWinner = () => {
132 |     this._setWinner(-1);
133 |   };
134 | 
135 |   private _onCreateVote = () => {
136 |     this.props.onCreateVote();
137 |   };
138 | 
139 |   private _onZoomHere = () => {
140 |     let toHighlight: string[];
141 | 
142 |     if (this.props.path === '/') {
143 |       toHighlight = ['0', '1'];
144 |     } else {
145 |       const parentPath = this.props.path
146 |         .split('/items/')
147 |         .slice(1)
148 |         .join('-');
149 | 
150 |       toHighlight = [parentPath, parentPath + '-0', parentPath + '-1'];
151 |     }
152 | 
153 |     fetchJSON('/admin/patch', {
154 |       method: 'PATCH',
155 |       body: [
156 |         {
157 |           op: 'replace',
158 |           path: `/bracketZoom`,
159 |           value: toHighlight,
160 |         },
161 |       ],
162 |     });
163 |   };
164 | 
165 |   render({ result, topics, champions }: Props) {
166 |     if (!result) {
167 |       return (
168 |         <AdminSelectedBracketWrapper>
169 |           <p>No bracket item selected</p>
170 |         </AdminSelectedBracketWrapper>
171 |       );
172 |     }
173 |     return (
174 |       <AdminSelectedBracketWrapper>
175 |         <div class="admin-form-items">
176 |           {result.items.map((item, i) => {
177 |             const isLeaf = typeof item === 'string';
178 |             const topic = getResultTopic(topics, item);
179 | 
180 |             const topicAndChamp = isLeaf
181 |               ? [
182 |                   <div>
183 |                     <label>
184 |                       <span class="label">Topic</span>
185 |                       <TopicsSelect
186 |                         value={item as string}
187 |                         topics={topics}
188 |                         onInput={this._onTopicSelect}
189 |                       />
190 |                     </label>
191 |                   </div>,
192 |                   <div>
193 |                     <label>
194 |                       <span class="label">Champion</span>
195 |                       <Select
196 |                         disabled={!topic}
197 |                         value={topic ? topic.championId : ''}
198 |                         onInput={this._onChampionSelect}
199 |                       >
200 |                         <option value="">{topic ? 'None' : ''}</option>
201 |                         {Object.entries(champions).map(([id, champion]) => (
202 |                           <option value={id}>{champion.name}</option>
203 |                         ))}
204 |                       </Select>
205 |                     </label>
206 |                   </div>,
207 |                 ]
208 |               : [
209 |                   <div>
210 |                     <span class="label">Topic</span>{' '}
211 |                     <span class="prefilled-input">
212 |                       {getResultLabel(topics, item) || 'Pending'}
213 |                     </span>
214 |                   </div>,
215 |                   <div>
216 |                     <span class="label">Champion</span>{' '}
217 |                     <span class="prefilled-input">
218 |                       {getResultChampionName(topics, item, champions) ||
219 |                         'Pending'}
220 |                     </span>
221 |                   </div>,
222 |                 ];
223 | 
224 |             return (
225 |               <div class="admin-form-item" data-item-index={i}>
226 |                 {topicAndChamp}
227 |                 <div>
228 |                   <button
229 |                     class="button"
230 |                     disabled={result.winningIndex === i}
231 |                     onClick={this._onWinnerSelect}
232 |                   >
233 |                     Set as winner
234 |                   </button>{' '}
235 |                   {topic && topic.slidesURL && (
236 |                     <button class="button" onClick={this._onShowSlides}>
237 |                       Show slides
238 |                     </button>
239 |                   )}
240 |                 </div>
241 |               </div>
242 |             );
243 |           })}
244 |           <div class="admin-form-extras">
245 |             <div class="label">Actions</div>
246 |             <div>
247 |               <button
248 |                 class="button"
249 |                 disabled={result.winningIndex === -1}
250 |                 onClick={this._onClearWinner}
251 |               >
252 |                 Clear winner
253 |               </button>{' '}
254 |               <button class="button" onClick={this._onCreateVote}>
255 |                 Create vote
256 |               </button>{' '}
257 |               <button class="button" onClick={this._onZoomHere}>
258 |                 Zoom here
259 |               </button>
260 |             </div>
261 |           </div>
262 |         </div>
263 |       </AdminSelectedBracketWrapper>
264 |     );
265 |   }
266 | }
267 | 


--------------------------------------------------------------------------------
/server/components/pages/admin/styles.css:
--------------------------------------------------------------------------------
  1 | /**
  2 | * Copyright 2019 Google Inc. All Rights Reserved.
  3 | * Licensed under the Apache License, Version 2.0 (the "License");
  4 | * you may not use this file except in compliance with the License.
  5 | * You may obtain a copy of the License at
  6 | *     http://www.apache.org/licenses/LICENSE-2.0
  7 | * Unless required by applicable law or agreed to in writing, software
  8 | * distributed under the License is distributed on an "AS IS" BASIS,
  9 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 | * See the License for the specific language governing permissions and
 11 | * limitations under the License.
 12 | */
 13 | html {
 14 |   background: white;
 15 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 16 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 17 |   color: #4a5568;
 18 | }
 19 | 
 20 | .button {
 21 |   display: inline-block;
 22 |   overflow: visible;
 23 |   margin: 0;
 24 |   font-family: inherit;
 25 |   line-height: inherit;
 26 |   font-size: 1em;
 27 |   cursor: pointer;
 28 |   background-color: #4299e1;
 29 |   border-radius: 0.25em;
 30 |   font-weight: bold;
 31 |   padding: 0.5em 1em;
 32 |   color: #fff;
 33 |   border: none;
 34 | 
 35 |   &:hover {
 36 |     background-color: #2b6cb0;
 37 |   }
 38 | 
 39 |   &:disabled {
 40 |     opacity: 0.5;
 41 |   }
 42 | }
 43 | 
 44 | .button-danger {
 45 |   background-color: #f56565;
 46 | 
 47 |   &:hover {
 48 |     background-color: #c53030;
 49 |   }
 50 | }
 51 | 
 52 | .input {
 53 |   -webkit-appearance: none;
 54 |   appearance: none;
 55 |   font-family: inherit;
 56 |   font-size: 100%;
 57 |   margin: 0;
 58 |   border-radius: 0.25rem;
 59 |   border: 1px solid #e2e8f0;
 60 |   line-height: 1.25;
 61 |   padding: 0.5rem 0.75rem;
 62 |   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 63 |   box-sizing: border-box;
 64 |   color: inherit;
 65 | 
 66 |   &:focus {
 67 |     outline: none;
 68 |     box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
 69 |   }
 70 | 
 71 |   &:disabled {
 72 |     opacity: 0.5;
 73 |   }
 74 | }
 75 | 
 76 | .prefilled-input {
 77 |   display: inline-block;
 78 |   line-height: 1.25;
 79 |   padding: calc(0.5rem + 1px) 0;
 80 | }
 81 | 
 82 | .select {
 83 |   display: inline-block;
 84 |   position: relative;
 85 | 
 86 |   & select {
 87 |     display: block;
 88 |     -webkit-appearance: none;
 89 |     appearance: none;
 90 |     font-family: inherit;
 91 |     font-size: 100%;
 92 |     width: 100%;
 93 |     box-sizing: border-box;
 94 |     background: #fff;
 95 |     border: 1px solid #e2e8f0;
 96 |     border-radius: 0.25rem;
 97 |     padding: 0.5rem 1rem;
 98 |     padding-right: 2rem;
 99 |     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
100 |     line-height: 1.25;
101 |     color: inherit;
102 | 
103 |     &:focus {
104 |       outline: none;
105 |       box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
106 |     }
107 | 
108 |     &:disabled {
109 |       opacity: 0.5;
110 | 
111 |       & ~ * {
112 |         display: none;
113 |       }
114 |     }
115 |   }
116 | }
117 | 
118 | .select-icon {
119 |   pointer-events: none;
120 |   position: absolute;
121 |   top: 0;
122 |   bottom: 0;
123 |   right: 0;
124 |   padding: 0 0.5rem;
125 |   display: flex;
126 |   align-items: center;
127 | 
128 |   & svg {
129 |     width: 1rem;
130 |     height: 1rem;
131 |     fill: currentColor;
132 |   }
133 | }
134 | 
135 | .color-select {
136 |   border: 1px solid #e2e8f0;
137 |   background: #fff;
138 |   line-height: 1.25;
139 |   padding: 0.75rem;
140 |   border-radius: 0.25rem;
141 |   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
142 |   box-sizing: border-box;
143 |   display: grid;
144 |   grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
145 |   grid-gap: 0.3rem;
146 | 
147 |   & input[type='radio'] {
148 |     position: absolute;
149 |     pointer-events: none;
150 |     opacity: 0;
151 |   }
152 | 
153 |   &.disabled {
154 |     opacity: 0.5;
155 |   }
156 | }
157 | 
158 | .color-select-item {
159 |   display: block;
160 |   height: 30px;
161 |   background: linear-gradient(to bottom, var(--color-from), var(--color-to));
162 |   cursor: pointer;
163 | 
164 |   input[type='radio']:checked + & {
165 |     box-shadow: inset 0 0 6px 2px #000;
166 |   }
167 | }
168 | 
169 | .prefilled-color-select-item {
170 |   display: block;
171 |   height: 30px;
172 |   width: 40px;
173 |   background: linear-gradient(to bottom, var(--color-from), var(--color-to));
174 | }
175 | 
176 | .label {
177 |   display: block;
178 |   font-weight: bold;
179 |   margin-bottom: 0.5rem;
180 |   font-size: 0.875rem;
181 | }
182 | 
183 | .radio-buttons {
184 |   display: inline;
185 | 
186 |   & input[type='radio'] {
187 |     position: absolute;
188 |     opacity: 0;
189 |     pointer-events: none;
190 | 
191 |     &:checked + .button {
192 |       background: #ed8936;
193 |     }
194 |   }
195 | 
196 |   & .button {
197 |     border-radius: 0;
198 |   }
199 | 
200 |   & > :first-child .button {
201 |     border-radius: 0.25rem 0 0 0.25rem;
202 |   }
203 | 
204 |   & > :last-child .button {
205 |     border-radius: 0 0.25rem 0.25rem 0;
206 |   }
207 | }
208 | 
209 | .topic-form {
210 |   display: grid;
211 |   grid:
212 |     'a b'
213 |     'c c'
214 |     'd d';
215 |   grid-gap: 1.2rem;
216 |   padding: 1.2rem;
217 |   grid-template-columns: 1.7fr 1fr;
218 |   background: #e1e5ea;
219 |   border-radius: 0.25rem;
220 | 
221 |   & > :nth-child(1) {
222 |     grid-area: a;
223 |   }
224 |   & > :nth-child(2) {
225 |     grid-area: b;
226 |   }
227 |   & > :nth-child(3) {
228 |     grid-area: c;
229 |   }
230 |   & > :nth-child(4) {
231 |     grid-area: d;
232 |   }
233 | 
234 |   .input,
235 |   .select {
236 |     width: 100%;
237 |   }
238 | }
239 | 
240 | .add-topic {
241 |   padding: 1.2rem;
242 | }
243 | 
244 | .delete-topic {
245 |   padding: 1.2rem;
246 |   background: #e1e5ea;
247 | }
248 | 
249 | .topic-forms-fieldset {
250 |   border: none;
251 |   margin: 0;
252 |   padding: 0;
253 | }
254 | 
255 | .topic-forms {
256 |   display: grid;
257 |   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
258 |   grid-gap: 0.7rem;
259 | }
260 | 
261 | .topic-save {
262 |   padding: 0.5rem 1.2rem;
263 |   background: #fff;
264 |   position: sticky;
265 |   top: 0;
266 |   z-index: 1;
267 | }
268 | 
269 | .edit-champions {
270 |   display: grid;
271 |   grid-template-columns: repeat(
272 |     auto-fill,
273 |     minmax(100px, 200px) minmax(100px, 200px)
274 |   );
275 |   grid-gap: 0.7rem;
276 | }
277 | 
278 | .edit-champion-item {
279 |   background: #e1e5ea;
280 |   overflow: hidden;
281 |   border-radius: 0.25rem;
282 | }
283 | 
284 | .edit-champions-data {
285 |   position: relative;
286 | }
287 | 
288 | .edit-champions-img {
289 |   display: block;
290 |   width: 100%;
291 |   height: auto;
292 | }
293 | 
294 | .edit-champion-score {
295 |   display: grid;
296 |   grid-template-columns: 3rem 1fr 3rem;
297 |   margin: 0.6rem;
298 | }
299 | 
300 | .edit-champion-score-num {
301 |   display: flex;
302 |   align-items: center;
303 |   justify-content: center;
304 | }
305 | 
306 | .edit-champion-item .admin-form-item {
307 |   padding: 0.6rem;
308 | }
309 | 
310 | .edit-champion-edit-delete {
311 |   position: absolute;
312 |   top: 0.6rem;
313 |   right: 0.6rem;
314 | }
315 | 
316 | .reset-row {
317 |   margin: 1rem 0;
318 | }
319 | 
320 | .bracket {
321 |   display: grid;
322 |   grid-auto-columns: max-content;
323 |   grid-auto-flow: column;
324 | }
325 | 
326 | .bracket-scroller {
327 |   overflow: auto;
328 | }
329 | 
330 | .bracket-center {
331 |   display: flex;
332 |   align-items: center;
333 | }
334 | 
335 | .bracket-center-items {
336 |   display: grid;
337 |   grid-template-columns: 150px max-content 150px;
338 |   grid-gap: 0.5em;
339 | }
340 | 
341 | .bracket-center-item {
342 |   border: 1px solid #000;
343 |   padding: 0.5em;
344 | }
345 | 
346 | .bracket-center-vs {
347 |   display: flex;
348 |   align-items: center;
349 |   justify-content: center;
350 | }
351 | 
352 | .bracket-column {
353 |   width: 150px;
354 |   display: grid;
355 |   grid-auto-rows: 1fr;
356 | }
357 | 
358 | .bracket-item {
359 |   border: 1px solid #000;
360 |   padding: 0.5em;
361 |   margin: 0.3rem;
362 | }
363 | 
364 | .bracket-item-leaf {
365 |   border-color: red;
366 | }
367 | 
368 | .bracket-items-container {
369 |   position: relative;
370 |   height: 100%;
371 |   display: grid;
372 |   grid-auto-rows: max-content;
373 |   align-content: space-around;
374 | }
375 | 
376 | .result-edit-button {
377 |   position: absolute;
378 |   top: 50%;
379 |   left: 50%;
380 |   transform: translate(-50%, -50%);
381 | }
382 | 
383 | .admin-form-item {
384 |   display: grid;
385 |   grid-gap: 1.2rem;
386 |   padding: 1.2rem;
387 |   background: #e1e5ea;
388 |   border-radius: 0.25rem;
389 |   flex: 1;
390 |   box-sizing: border-box;
391 |   align-content: start;
392 | 
393 |   .input,
394 |   .select {
395 |     width: 100%;
396 |   }
397 | }
398 | 
399 | .admin-form-extras {
400 |   padding: 1.2rem;
401 |   background: #e1e5ea;
402 |   border-radius: 0.25rem;
403 |   flex: 1;
404 |   min-width: 180px;
405 |   box-sizing: border-box;
406 | }
407 | 
408 | .admin-form-items {
409 |   display: flex;
410 |   flex-flow: row wrap;
411 |   gap: 0.7rem;
412 | }
413 | 
414 | .hidden-iframe {
415 |   position: absolute;
416 |   opacity: 0;
417 |   pointer-events: none;
418 |   width: 0;
419 |   height: 0;
420 | }
421 | 


--------------------------------------------------------------------------------
/client/components/big-screen/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component } from 'preact';
 14 | import WS from '../../ws';
 15 | import Bracket from './bracket';
 16 | import {
 17 |   Result,
 18 |   Topics,
 19 |   PresentationView,
 20 |   Champions,
 21 |   Vote,
 22 | } from 'shared/state';
 23 | import title from 'consts:title';
 24 | import subTitle from 'consts:subTitle';
 25 | import Transition from '../transition';
 26 | import { animate } from 'client/utils';
 27 | import PresentationChampionScores from './champion-scores';
 28 | import PresentationVote from './vote';
 29 | import Audio from './audio';
 30 | import PresentationIframe from './iframe';
 31 | 
 32 | // Safari and Edge don't quite support extending Event, this works around it.
 33 | function fixExtendedEvent(instance: Event, type: Function) {
 34 |   if (!(instance instanceof type)) {
 35 |     Object.setPrototypeOf(instance, type.prototype);
 36 |   }
 37 | }
 38 | 
 39 | interface IframeActionEventInit extends EventInit {
 40 |   action: string;
 41 | }
 42 | 
 43 | export class IframeActionEvent extends Event {
 44 |   private _action: string;
 45 | 
 46 |   constructor(eventInitDict: IframeActionEventInit) {
 47 |     super('action', eventInitDict);
 48 |     fixExtendedEvent(this, IframeActionEvent);
 49 |     this._action = eventInitDict.action;
 50 |   }
 51 | 
 52 |   get action() {
 53 |     return this._action;
 54 |   }
 55 | }
 56 | 
 57 | export interface IframeActionTarget extends EventTarget {
 58 |   addEventListener(
 59 |     type: 'action',
 60 |     listener: (ev: IframeActionEvent) => any,
 61 |     options?: boolean | AddEventListenerOptions,
 62 |   ): void;
 63 |   addEventListener(
 64 |     type: string,
 65 |     listener: EventListenerOrEventListenerObject,
 66 |     options?: boolean | AddEventListenerOptions,
 67 |   ): void;
 68 |   removeEventListener(
 69 |     type: 'action',
 70 |     listener: (ev: IframeActionEvent) => any,
 71 |     options?: boolean | EventListenerOptions,
 72 |   ): void;
 73 |   removeEventListener(
 74 |     type: string,
 75 |     listener: EventListenerOrEventListenerObject,
 76 |     options?: boolean | EventListenerOptions,
 77 |   ): void;
 78 | }
 79 | 
 80 | interface Props {}
 81 | 
 82 | interface State {
 83 |   results?: Result;
 84 |   topics: Topics;
 85 |   bracketZoom?: string[];
 86 |   receivedData: boolean;
 87 |   presentationView?: PresentationView;
 88 |   champions: Champions;
 89 |   vote?: Vote;
 90 |   voteCount?: [number, number];
 91 |   iframe: string;
 92 | }
 93 | 
 94 | export default class BigScreen extends Component<Props, State> {
 95 |   private _ws = new WS('/big-screen/ws', msg => this._onWsMessage(msg));
 96 |   private _iframeActionTarget = new MessageChannel()
 97 |     .port1 as IframeActionTarget;
 98 | 
 99 |   state: State = {
100 |     receivedData: false,
101 |     iframe: '',
102 |     topics: {},
103 |     champions: {},
104 |   };
105 | 
106 |   private _onWsMessage(message: string) {
107 |     const data = JSON.parse(message);
108 | 
109 |     if ('iframeAction' in data) {
110 |       this._iframeActionTarget.dispatchEvent(
111 |         new IframeActionEvent({ action: data.iframeAction }),
112 |       );
113 |       return;
114 |     }
115 | 
116 |     const interestingKeys: Array<keyof State> = [
117 |       'results',
118 |       'topics',
119 |       'bracketZoom',
120 |       'presentationView',
121 |       'champions',
122 |       'vote',
123 |       'voteCount',
124 |       'iframe',
125 |     ];
126 |     const receivedKeys = new Set(Object.keys(data.state));
127 |     const hasInterestingKeys = interestingKeys.some(v => receivedKeys.has(v));
128 | 
129 |     if (!hasInterestingKeys) return;
130 | 
131 |     const newState: Partial<State> = {
132 |       receivedData: true,
133 |     };
134 | 
135 |     for (const key of interestingKeys) {
136 |       if (key in data.state) {
137 |         newState[key] = data.state[key];
138 |       }
139 |     }
140 | 
141 |     this.setState(newState);
142 |   }
143 | 
144 |   componentWillUnmount() {
145 |     this._ws.close();
146 |   }
147 | 
148 |   private _onTransition = async (el: HTMLElement): Promise<void> => {
149 |     const outgoing = el.children[0] as HTMLElement;
150 |     const incoming = el.children[1] as HTMLElement;
151 | 
152 |     // Wait a microtask so the bracket can lay itself out before we apply transformations.
153 |     await Promise.resolve();
154 | 
155 |     // Special 'slam' animation for the vote
156 |     if (incoming.classList.contains('vote')) {
157 |       animate(
158 |         outgoing,
159 |         { to: { opacity: '0', transform: 'translateZ(-600px)' } },
160 |         {
161 |           duration: 500,
162 |           // ease-in cubic
163 |           easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
164 |         },
165 |       );
166 | 
167 |       return animate(
168 |         incoming,
169 |         { from: { opacity: '0', transform: 'translateZ(800px)' } },
170 |         {
171 |           duration: 200,
172 |           delay: 300,
173 |           // ease-in cubic
174 |           easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
175 |           fill: 'backwards',
176 |         },
177 |       ).then(() => {
178 |         const target = document.querySelector('.main-ui') as HTMLElement;
179 |         const duration = 300;
180 |         const maxDistance = 25;
181 |         const start = performance.now();
182 | 
183 |         function frame() {
184 |           const now = performance.now();
185 |           const progress = Math.min((now - start) / duration, 1);
186 |           const frameMaxDistance = maxDistance - maxDistance * progress;
187 |           const x = Math.random() * frameMaxDistance * 2 - frameMaxDistance;
188 |           const y = Math.random() * frameMaxDistance * 2 - frameMaxDistance;
189 | 
190 |           target.style.transform = `translate(${x}px, ${y}px)`;
191 | 
192 |           if (progress !== 1) {
193 |             requestAnimationFrame(frame);
194 |           }
195 |         }
196 | 
197 |         requestAnimationFrame(frame);
198 |       });
199 |     }
200 | 
201 |     animate(
202 |       outgoing,
203 |       { to: { opacity: '0', transform: 'translateZ(-300px)' } },
204 |       {
205 |         duration: 500,
206 |         // ease-in cubic
207 |         easing: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
208 |       },
209 |     ).then(() => {
210 |       outgoing.style.opacity = '0';
211 |     });
212 | 
213 |     return animate(
214 |       incoming,
215 |       { from: { opacity: '0', transform: 'translateZ(400px)' } },
216 |       {
217 |         duration: 500,
218 |         delay: 400,
219 |         // ease-out cubic
220 |         easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
221 |         fill: 'backwards',
222 |       },
223 |     ).then(() => {
224 |       outgoing.style.opacity = '';
225 |     });
226 |   };
227 | 
228 |   render(
229 |     _: Props,
230 |     {
231 |       results,
232 |       topics,
233 |       receivedData,
234 |       bracketZoom,
235 |       presentationView,
236 |       champions,
237 |       vote,
238 |       voteCount,
239 |       iframe,
240 |     }: State,
241 |   ) {
242 |     if (!receivedData) return <div></div>;
243 | 
244 |     return (
245 |       <div class="main-ui">
246 |         <div
247 |           class="site-title"
248 |           style={{
249 |             opacity:
250 |               !vote && presentationView === 'bracket' && bracketZoom ? 0 : 1,
251 |           }}
252 |         >
253 |           <h1>{title}</h1>
254 |           <p>{subTitle}</p>
255 |         </div>
256 |         <Audio
257 |           state={
258 |             !vote || vote.state === 'results'
259 |               ? 'stop'
260 |               : vote.state === 'introducing'
261 |               ? 'play'
262 |               : vote.state === 'voting'
263 |               ? 'upgrade'
264 |               : 'stop'
265 |           }
266 |         >
267 |           <Transition onTransition={this._onTransition}>
268 |             {vote ? (
269 |               <PresentationVote
270 |                 champions={champions}
271 |                 key={vote.id}
272 |                 vote={vote}
273 |                 voteCount={voteCount!}
274 |               />
275 |             ) : presentationView === 'url' ? (
276 |               <div key="site-url" class="site-url">
277 |                 {location.host}
278 |               </div>
279 |             ) : presentationView === 'bracket' ? (
280 |               results ? (
281 |                 <Bracket
282 |                   key="bracket"
283 |                   champions={champions}
284 |                   results={results}
285 |                   topics={topics}
286 |                   toZoomTo={bracketZoom}
287 |                 />
288 |               ) : (
289 |                 <div />
290 |               )
291 |             ) : (
292 |               <PresentationChampionScores champions={champions} />
293 |             )}
294 |           </Transition>
295 |         </Audio>
296 |         <PresentationIframe
297 |           src={iframe}
298 |           actionTarget={this._iframeActionTarget}
299 |         />
300 |       </div>
301 |     );
302 |   }
303 | }
304 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # The Big Web Quiz
  2 | 
  3 | This exists on:
  4 | 
  5 | - Github https://github.com/GoogleChromeLabs/big-web-quiz
  6 | - Glitch https://glitch.com/edit/#!/bwq
  7 | 
  8 | ## What's this all about?
  9 | 
 10 | At Chrome Dev Summit in 2019 [we polled the audience to discover their favourite web feature of 2019](https://www.youtube.com/watch?v=RE4QlXdou8c). Here's the stuff we (hastily) built to make it all happen. You can use it to run your own live polls, present slides, and run contests.
 11 | 
 12 | **Glitch limits projects to 4000 requests per hour** which will limit the number of people you can have taking part to around 200-500. If you need more, you'll need to set up your own server.
 13 | 
 14 | ## Getting started on Glitch
 15 | 
 16 | First, remix [this project](https://glitch.com/edit/#!/bwq) to create your own copy, and fill in the following in your project's `.env` file:
 17 | 
 18 | - `ADMIN_PASSWORD` - This is the password you'll use to access the admin panel. Make this something difficult to guess, and don't like, write it on your forehead.
 19 | - `COOKIE_SECRET` - Make this something unique. You don't need to remember it, so a quick mash of the keyboard is enough.
 20 | 
 21 | For example:
 22 | 
 23 | ```sh
 24 | ADMIN_PASSWORD=useSomethingDifferent
 25 | COOKIE_SECRET=wociamssjcn9834gkj
 26 | ```
 27 | 
 28 | But yeah, **don't just copy the above**. If you want things to be more secure, you can use Google for logins. More on that later…
 29 | 
 30 | Once you've done the above, the project should build successfully, and you're ready to go!
 31 | 
 32 | ## URLs
 33 | 
 34 | - `/big-screen/` - This is the page you'll display for everyone to see. I recommend clicking somewhere on this page before presenting, as this will allow sound to play. You don't need the sound, but the sound is _cool_ and synchronising it took me _effort_ so please don't _miss out on that_.
 35 | - `/admin/` - This is how you'll control things. Remember how I said this was built hastily? Well, once you see the design of this page you'll see where all the haste was spent.
 36 | - `/` - This is the page folks will use to vote.
 37 | 
 38 | ## Creating a vote
 39 | 
 40 | 1. From `/admin/`, go to the "Active vote" section and click "New vote".
 41 | 1. Click "Edit" and enter labels for each. This is the label that'll appear to the players and on the big screen.
 42 | 1. Ponder briefly at what "Champion" means, then skip over it (it's optional, we'll cover to it later).
 43 | 1. Click 'save'.
 44 | 
 45 | And with that, you've created your first vote! No, nothing happens yet. To make stuff happen you need to change the "State":
 46 | 
 47 | - `Staging` - The vote appears in the admin page, but it doesn't appear on the big screen, or to users.
 48 | - `Introducing` - The vote labels appear on the big screen, but voting hasn't started yet.
 49 | - `Voting` - Users can now vote. The big screen shows the live results.
 50 | - `Results` - Users can no longer vote. The big screen shows the final results.
 51 | - `Clear vote` - Remove the vote. It's removed from the big screen and admin page.
 52 | 
 53 | Cookies are used to 'prevent' folks from voting multiple times. 'Prevent' is in quotes because it's pretty ineffective. Folks can just use multiple browsers, profiles, or voting bots to get around it. If you want extra protection, you'll need to make users log in. More on that later.
 54 | 
 55 | _But first,_ more fun stuff:
 56 | 
 57 | ## Champions
 58 | 
 59 | 'Champions' are people (or teams, or I dunno, maybe other things). In the "Champions" section of `/admin/` you can add/edit champions. Avatars don't need to be bigger than 270x270, but larger/smaller won't break anything. Non-square avatars might break layout. I dunno. Did I mention this was built hastily?
 60 | 
 61 | Of course, the best place to upload avatars is Glitch's 'assets' CDN.
 62 | 
 63 | Once you have champions, you can assign them to votes. This means they'll be displayed on the big screen while a vote is happening, and that's it really.
 64 | 
 65 | You can also give champions a score. You can display scores on the big screen by changing the "Presentation state" on the `/admin/` page to "Champion scores".
 66 | 
 67 | Champions aren't automatically awarded points for 'winning' votes. Scoring is entirely manual and independent from everything else. But this means you can award points however you want. Maybe give double points to a champion if it's their birthday? Maybe secretly dock points from someone you hate? It's up to you.
 68 | 
 69 | ## Presenting iframes
 70 | 
 71 | Do you want to display the contents of another page on the big screen? No? Well stop reading this section. For everyone else:
 72 | 
 73 | In the "Present iframe" section of `/admin/`, click "Edit", enter a URL, then click "save". It'll now be displayed on the big screen. Click "clear" to get rid of it.
 74 | 
 75 | And that's it! No, wait, that's not it…
 76 | 
 77 | ### Iframe actions
 78 | 
 79 | If you want to be really smart, your iframe can expose 'actions' using [Comlink](https://github.com/GoogleChromeLabs/comlink).
 80 | 
 81 | [Here's an example you can remix](https://glitch.com/edit/#!/bwq-iframe-example?path=script.js). Edit the object passed to `init`. The keys are labels, and the values are functions to call.
 82 | 
 83 | Give it a try by showing `https://bwq-iframe-example.glitch.me/` as an iframe. The admin page will now offer the actions "Go red", "Go green", "Go blue", which you can click to run the functions. This is what we used at Chrome Dev Summit to advance the slides as we were talking about features.
 84 | 
 85 | ## Creating a sports bracket
 86 | 
 87 | First, create some topics that'll be part of the bracket:
 88 | 
 89 | 1. From `/admin/`, go to "Edit topics".
 90 | 1. "Add"
 91 | 1. Give it a name, and optionally a champion and "Slides URL". You can easily change these later so don't worry too much about it. "Slides URL" just makes it easier to display this URL as an iframe later.
 92 | 1. Add more, then click 'Save'.
 93 | 
 94 | Back on `/admin/` in the "Bracket" section, click "Regenerate bracket".
 95 | 
 96 | The bracket can have any number of items, but we optimised it for 16 items (8 and 32 work pretty well too). The current CSS might not quite work for other numbers, but feel free to go in and edit the CSS!
 97 | 
 98 | ## Displaying & editing the bracket
 99 | 
100 | From `/admin/` you can set the "Presentation state" to "Results bracket", which will display the bracket on the big screen.
101 | 
102 | See those `...` buttons in the "Bracket" section of `/admin/`? Tap those to select that area of the bracket. That'll populate the "Selected bracket" section of `/admin/`.
103 | 
104 | Clicking "Zoom here" will zoom the big screen into that section of the bracket. Click "Zoom out" in the "Bracket" section if you want to zoom back out.
105 | 
106 | You can use the "Selected bracket" section to assign a topic. Then, you'll be able to change its champion, and show its iframe if it has one.
107 | 
108 | Clicking "create vote" will populate the "Active vote" section with these two items.
109 | 
110 | Clicking "Set as winner" will make this item the winner of this stage. You can change the winner later if you want.
111 | 
112 | ## Better logins
113 | 
114 | If you want, you can use Google Sign-In for admins and even regular users. This is more secure for admins, but it also prevents most vote cheating, as each vote is tied to a Google login. Of course, if someone has 100 Google logins, they can still vote 100 times, but meh, well done them. If you don't require users to log in, they can [pretty easily write a voting bot](https://medium.com/@jsoverson/how-i-hacked-the-vote-at-chrome-dev-summit-ba6cea7a468e).
115 | 
116 | By the way, if you're a government agent and you're thinking of using this system for an election, please stop now. Stop everything. Go away.
117 | 
118 | To set up a Google Sign-in project:
119 | 
120 | 1. Click the "Configure a project" button on [this page](https://developers.google.com/identity/sign-in/web/sign-in).
121 | 1. Create a new project and give it a name.
122 | 1. For "where are you calling from", pick "Web server".
123 | 1. For "Authorized redirect URIs", enter your Glitch project domain followed by `/auth/oauth2callback`. So, if your Glitch domain is `https://bwq.glitch.me`, you'd enter `https://bwq.glitch.me/auth/oauth2callback`.
124 | 1. Save the "Client ID" and "Client Secret".
125 | 
126 | Then in your project's `.env` file add:
127 | 
128 | ```sh
129 | OAUTH_CLIENT=client_id_goes_here
130 | OAUTH_SECRET=client_secret_goes_here
131 | ```
132 | 
133 | Of course, replace the above values with your "Client ID" and "Client Secret".
134 | 
135 | Then, over in `./server/config.ts`:
136 | 
137 | 1. Set `useGoogleLogin` to true.
138 | 1. Set `requirePlayerLogin` to true if you want to require voters to log in.
139 | 1. Set `admins` to an array of email addresses of admins.
140 | 
141 | Done!
142 | 
143 | ## Other config
144 | 
145 | ## Environment variables
146 | 
147 | - `ADMIN_PASSWORD` - If `useGoogleLogin` is false, this is the password for the admin panel.
148 | - `OAUTH_CLIENT` - For Google logins. See above.
149 | - `OAUTH_SECRET` - For Google logins. See above.
150 | - `COOKIE_SECRET` - A random string to improve cookie security.
151 | - `COOKIE_DOMAIN` - The domain for the cookie. It's useful if you want the cookie to apply to subdomains. You shouldn't need this when using Glitch.
152 | - `WEB_SOCKET_ORIGIN` - Optional origin to use for web sockets. Defaults to the same origin.
153 | - `PORT` - Server port number. Again, you probably don't need to change this.
154 | - `ORIGIN` - This is usually autodetected, but you can set it if autodetection doesn't do the right thing. It works fine on Glitch.
155 | - `STORAGE_ROOT` - Where to store persistant data. Defaults to `./.data`, which is the correct value for Glitch.
156 | 
157 | ## Config in JS files
158 | 
159 | `./config.js`
160 | 
161 | - `title` - The main site title.
162 | - `subTitle` - Um, the site sub title.
163 | 
164 | Anything exported from this will be available via `import val from 'consts:propery-name-here';`.
165 | 
166 | `./shared/state.ts`
167 | 
168 | - `palette` - The gradients available to the app.
169 | - `presetIframes` - This populates the admin panel with shortcuts to display particular iframes.
170 | 
171 | `./server/config.ts`
172 | 
173 | - `useGoogleLogin` - Enable using Google logins.
174 | - `requireLogin` - Should users have to log in with Google in order to vote?
175 | - `admins` - Who can log in to the admin bits when Google login is enabled.
176 | 
177 | ## I wish this app did things differently!
178 | 
179 | Change it! Like I said, this was built in a hurry, so there's code in there I'm not proud of, but feel free to dig in and change stuff! That's the beauty of Glitch.
180 | 


--------------------------------------------------------------------------------
/client/components/admin/champions/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component } from 'preact';
 14 | import { Operation } from 'fast-json-patch';
 15 | import { Champions, Champion } from 'shared/state';
 16 | import {
 17 |   fetchJSON,
 18 |   escapePatchPathComponent,
 19 |   generateRandomId,
 20 | } from 'client/utils';
 21 | 
 22 | const genericAvatarURL =
 23 |   'https://cdn.glitch.com/b7996c5b-5a36-4f1b-84db-52a31d101dfc%2Favatar.svg?v=1577974252576';
 24 | 
 25 | interface EditedChampion extends Champion {
 26 |   saving: boolean;
 27 | }
 28 | 
 29 | interface EditedChampions {
 30 |   [id: string]: EditedChampion;
 31 | }
 32 | 
 33 | interface Props {
 34 |   champions: Champions;
 35 | }
 36 | 
 37 | interface State {
 38 |   editedChampions: EditedChampions;
 39 | }
 40 | 
 41 | export default class AdminChampions extends Component<Props, State> {
 42 |   state: State = {
 43 |     editedChampions: {},
 44 |   };
 45 | 
 46 |   private _onPlusClick = (event: Event) => this._onScoreButtonClick(event, 1);
 47 |   private _onMinusClick = (event: Event) => this._onScoreButtonClick(event, -1);
 48 | 
 49 |   private _onScoreButtonClick(event: Event, delta: number): void {
 50 |     const el = (event.currentTarget as HTMLElement).closest(
 51 |       '.edit-champion-item',
 52 |     ) as HTMLElement;
 53 |     const id = el.dataset.id as string;
 54 | 
 55 |     fetchJSON('/admin/patch', {
 56 |       method: 'PATCH',
 57 |       body: [
 58 |         {
 59 |           op: 'replace',
 60 |           path: `/champions/${escapePatchPathComponent(id)}/score`,
 61 |           value: (this.props.champions[id]?.score || 0) + delta,
 62 |         },
 63 |       ],
 64 |     });
 65 |   }
 66 | 
 67 |   private _onResetClick = () => {
 68 |     if (!confirm('Are you sure?')) return;
 69 | 
 70 |     fetchJSON('/admin/patch', {
 71 |       method: 'PATCH',
 72 |       body: Object.keys(this.props.champions).map(championId => ({
 73 |         op: 'replace',
 74 |         path: `/champions/${escapePatchPathComponent(championId)}/score`,
 75 |         value: 0,
 76 |       })),
 77 |     });
 78 |   };
 79 | 
 80 |   private _onAddClick = () => {
 81 |     this.setState(({ editedChampions }) => ({
 82 |       editedChampions: {
 83 |         ...editedChampions,
 84 |         [generateRandomId()]: {
 85 |           name: '',
 86 |           picture: '',
 87 |           score: 0,
 88 |           saving: false,
 89 |         },
 90 |       },
 91 |     }));
 92 |   };
 93 | 
 94 |   private _onEditClick = (event: Event) => {
 95 |     const el = event.currentTarget as HTMLInputElement;
 96 |     const champEl = el.closest('.edit-champion-item') as HTMLInputElement;
 97 |     const id = champEl.dataset.id!;
 98 | 
 99 |     this.setState(({ editedChampions }) => ({
100 |       editedChampions: {
101 |         ...editedChampions,
102 |         [id]: {
103 |           ...this.props.champions[id],
104 |           saving: false,
105 |         },
106 |       },
107 |     }));
108 |   };
109 | 
110 |   private _onDeleteClick = (event: Event) => {
111 |     const el = event.currentTarget as HTMLInputElement;
112 |     const champEl = el.closest('.edit-champion-item') as HTMLInputElement;
113 |     const id = champEl.dataset.id!;
114 | 
115 |     if (
116 |       !confirm(`Delete ${this.props.champions[id].name || 'Unnamed champion'}?`)
117 |     ) {
118 |       return;
119 |     }
120 | 
121 |     fetchJSON('/admin/patch', {
122 |       method: 'PATCH',
123 |       body: [
124 |         {
125 |           op: 'remove',
126 |           path: `/champions/${escapePatchPathComponent(id)}`,
127 |         },
128 |       ],
129 |     });
130 |   };
131 | 
132 |   private _onSaveClick = async (event: Event) => {
133 |     const el = event.currentTarget as HTMLInputElement;
134 |     const champEl = el.closest('.edit-champion-item') as HTMLInputElement;
135 |     const id = champEl.dataset.id!;
136 | 
137 |     this.setState(({ editedChampions }) => ({
138 |       editedChampions: {
139 |         ...editedChampions,
140 |         [id]: {
141 |           ...editedChampions[id],
142 |           saving: true,
143 |         },
144 |       },
145 |     }));
146 | 
147 |     const keys: Array<keyof Champion> = ['name', 'picture'];
148 |     const isNew = !(id in this.props.champions);
149 |     const patches: Operation[] = [];
150 | 
151 |     if (isNew) {
152 |       patches.push({
153 |         op: 'add',
154 |         path: `/champions/${escapePatchPathComponent(id)}`,
155 |         value: { score: 0 },
156 |       });
157 |     }
158 | 
159 |     patches.push(
160 |       ...(keys.map(key => ({
161 |         op: 'replace',
162 |         path: `/champions/${escapePatchPathComponent(id)}/${key}`,
163 |         value: this.state.editedChampions[id][key],
164 |       })) as Operation[]),
165 |     );
166 | 
167 |     await fetchJSON('/admin/patch', {
168 |       method: 'PATCH',
169 |       body: patches,
170 |     });
171 | 
172 |     this.setState(({ editedChampions }) => {
173 |       const newEditedChampions = { ...editedChampions };
174 |       delete newEditedChampions[id];
175 |       return { editedChampions: newEditedChampions };
176 |     });
177 |   };
178 | 
179 |   private _onChampionInput = (event: Event) => {
180 |     const el = event.currentTarget as HTMLInputElement;
181 |     const champEl = el.closest('.edit-champion-item') as HTMLInputElement;
182 |     const id = champEl.dataset.id!;
183 |     const nameEl = champEl.querySelector(
184 |       '.edit-champion-name',
185 |     ) as HTMLInputElement;
186 |     const urlEl = champEl.querySelector(
187 |       '.edit-champion-url',
188 |     ) as HTMLInputElement;
189 | 
190 |     this.setState(({ editedChampions }) => ({
191 |       editedChampions: {
192 |         ...editedChampions,
193 |         [id]: {
194 |           ...editedChampions[id],
195 |           name: nameEl.value,
196 |           picture: urlEl.value,
197 |         },
198 |       },
199 |     }));
200 |   };
201 | 
202 |   render({ champions }: Props, { editedChampions }: State) {
203 |     const allChampions = { ...champions, ...editedChampions };
204 | 
205 |     return (
206 |       <section>
207 |         <h1>Champions</h1>
208 |         <div class="edit-champions">
209 |           {Object.entries(allChampions).map(([id, champion]) => (
210 |             <div key={id} class="edit-champion-item" data-id={id}>
211 |               <div class="edit-champions-data">
212 |                 {id in editedChampions ? (
213 |                   <div class="admin-form-item">
214 |                     <div>
215 |                       <label>
216 |                         <span class="label">Name</span>
217 |                         <input
218 |                           class="input edit-champion-name"
219 |                           type="text"
220 |                           disabled={editedChampions[id].saving}
221 |                           value={champion.name}
222 |                           onInput={this._onChampionInput}
223 |                           autoFocus
224 |                         />
225 |                       </label>
226 |                     </div>
227 |                     <div>
228 |                       <label>
229 |                         <span class="label">Avatar URL (270x270)</span>
230 |                         <input
231 |                           class="input edit-champion-url"
232 |                           type="url"
233 |                           disabled={editedChampions[id].saving}
234 |                           value={champion.picture}
235 |                           onInput={this._onChampionInput}
236 |                         />
237 |                       </label>
238 |                     </div>
239 |                     <div>
240 |                       <button
241 |                         disabled={editedChampions[id].saving}
242 |                         class="button"
243 |                         onClick={this._onSaveClick}
244 |                       >
245 |                         Save
246 |                       </button>
247 |                     </div>
248 |                   </div>
249 |                 ) : (
250 |                   <div>
251 |                     <img
252 |                       class="edit-champions-img"
253 |                       width="270"
254 |                       height="270"
255 |                       src={champion.picture || genericAvatarURL}
256 |                       alt={champion.name}
257 |                     />
258 |                     <div class="edit-champion-edit-delete">
259 |                       <button class="button" onClick={this._onEditClick}>
260 |                         ✐
261 |                       </button>{' '}
262 |                       <button
263 |                         class="button button-danger"
264 |                         onClick={this._onDeleteClick}
265 |                       >
266 |                         ⓧ
267 |                       </button>
268 |                     </div>
269 |                   </div>
270 |                 )}
271 |               </div>
272 |               {!(id in editedChampions) && (
273 |                 <div class="edit-champion-score">
274 |                   <button class="button" onClick={this._onMinusClick}>
275 |                     -
276 |                   </button>
277 |                   <div class="edit-champion-score-num">
278 |                     {champion.score || 0}
279 |                   </div>
280 |                   <button class="button" onClick={this._onPlusClick}>
281 |                     +
282 |                   </button>
283 |                 </div>
284 |               )}
285 |             </div>
286 |           ))}
287 |           <div class="edit-champion-item">
288 |             <div class="admin-form-item">
289 |               <div>
290 |                 <button class="button" onClick={this._onAddClick}>
291 |                   Add
292 |                 </button>
293 |               </div>
294 |             </div>
295 |           </div>
296 |         </div>
297 |         <div class="reset-row">
298 |           <button class="button button-danger" onClick={this._onResetClick}>
299 |             Reset scores
300 |           </button>
301 |         </div>
302 |       </section>
303 |     );
304 |   }
305 | }
306 | 


--------------------------------------------------------------------------------
/client/components/admin/vote/index.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright 2019 Google Inc. All Rights Reserved.
  3 |  * Licensed under the Apache License, Version 2.0 (the "License");
  4 |  * you may not use this file except in compliance with the License.
  5 |  * You may obtain a copy of the License at
  6 |  *     http://www.apache.org/licenses/LICENSE-2.0
  7 |  * Unless required by applicable law or agreed to in writing, software
  8 |  * distributed under the License is distributed on an "AS IS" BASIS,
  9 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 10 |  * See the License for the specific language governing permissions and
 11 |  * limitations under the License.
 12 |  */
 13 | import { h, Component, FunctionalComponent } from 'preact';
 14 | 
 15 | import { Vote, Champions, palette, VoteItem } from 'shared/state';
 16 | import Select from '../../select';
 17 | import ColorSelect from '../../color-select';
 18 | import { getHexColor, fetchJSON, escapePatchPathComponent } from 'client/utils';
 19 | 
 20 | interface Props {
 21 |   vote?: Vote;
 22 |   voteCount: [number, number] | null;
 23 |   champions: Champions;
 24 |   onNewVote: () => void;
 25 | }
 26 | 
 27 | interface WrapperProps {
 28 |   onNewVoteClick: (event: Event) => void;
 29 | }
 30 | 
 31 | interface State {
 32 |   editedVoteItems?: [VoteItem, VoteItem];
 33 |   savingVoteItems: boolean;
 34 | }
 35 | 
 36 | const AdminVoteWrapper: FunctionalComponent<WrapperProps> = ({
 37 |   children,
 38 |   onNewVoteClick,
 39 | }) => (
 40 |   <section>
 41 |     <h1>Active vote</h1>
 42 |     {children}
 43 |     <p>
 44 |       <button class="button" onClick={onNewVoteClick}>
 45 |         New vote
 46 |       </button>
 47 |     </p>
 48 |   </section>
 49 | );
 50 | 
 51 | export default class AdminVote extends Component<Props, State> {
 52 |   state: State = {
 53 |     savingVoteItems: false,
 54 |   };
 55 | 
 56 |   private _onEditClick = () => {
 57 |     this.setState({
 58 |       editedVoteItems: this.props.vote!.items,
 59 |     });
 60 |   };
 61 | 
 62 |   private _onSaveClick = async () => {
 63 |     this.setState({ savingVoteItems: true });
 64 | 
 65 |     await fetchJSON('/admin/patch', {
 66 |       method: 'PATCH',
 67 |       body: this.state.editedVoteItems!.flatMap((item, i) =>
 68 |         ['championId', 'label', 'colorId'].map(key => ({
 69 |           op: 'replace',
 70 |           path: `/vote/items/${i}/${escapePatchPathComponent(key)}`,
 71 |           value: item[key as keyof typeof item],
 72 |         })),
 73 |       ),
 74 |     });
 75 | 
 76 |     this.setState({ savingVoteItems: false, editedVoteItems: undefined });
 77 |   };
 78 | 
 79 |   private _onNewVoteClick = () => {
 80 |     this.props.onNewVote();
 81 |   };
 82 | 
 83 |   private _onClearClick = () => {
 84 |     fetchJSON('/admin/patch', {
 85 |       method: 'PATCH',
 86 |       body: [
 87 |         {
 88 |           op: 'replace',
 89 |           path: `/vote`,
 90 |           value: null,
 91 |         },
 92 |       ],
 93 |     });
 94 |   };
 95 | 
 96 |   private _onStateChange = (event: Event) => {
 97 |     const el = event.currentTarget as HTMLInputElement;
 98 |     const state = el.value as Vote['state'];
 99 | 
100 |     fetchJSON('/admin/patch', {
101 |       method: 'PATCH',
102 |       body: [
103 |         {
104 |           op: 'replace',
105 |           path: `/vote/state`,
106 |           value: state,
107 |         },
108 |       ],
109 |     });
110 |   };
111 | 
112 |   private _onEditInput = (event: Event) => {
113 |     const el = event.currentTarget as HTMLInputElement;
114 |     const container = el.closest('.admin-form-item') as HTMLElement;
115 |     const i = Number(container.dataset.itemIndex);
116 | 
117 |     this._setEditedItem(i, el.name as keyof VoteItem, el.value);
118 |   };
119 | 
120 |   private _setEditedItem<Prop extends keyof VoteItem>(
121 |     index: number,
122 |     prop: Prop,
123 |     newVal: VoteItem[Prop],
124 |   ): void {
125 |     this.setState(state => {
126 |       const editedVoteItems = state.editedVoteItems!.slice() as [
127 |         VoteItem,
128 |         VoteItem,
129 |       ];
130 |       editedVoteItems[index] = {
131 |         ...editedVoteItems[index],
132 |         [prop]: newVal,
133 |       };
134 | 
135 |       return { editedVoteItems };
136 |     });
137 |   }
138 | 
139 |   private _onColorChange = (index: number, newVal: number) => {
140 |     this._setEditedItem(index, 'colorId', newVal);
141 |   };
142 | 
143 |   render(
144 |     { vote, voteCount, champions }: Props,
145 |     { editedVoteItems, savingVoteItems }: State,
146 |   ) {
147 |     if (!vote) {
148 |       return (
149 |         <AdminVoteWrapper onNewVoteClick={this._onNewVoteClick}>
150 |           <p>No active vote.</p>
151 |         </AdminVoteWrapper>
152 |       );
153 |     }
154 |     return (
155 |       <AdminVoteWrapper onNewVoteClick={this._onNewVoteClick}>
156 |         <div class="admin-form-items">
157 |           {vote.items.map((voteItem, i) => {
158 |             const item = editedVoteItems ? editedVoteItems[i] : voteItem;
159 | 
160 |             return (
161 |               <div class="admin-form-item" data-item-index={i}>
162 |                 <div>
163 |                   <label>
164 |                     <span class="label">Label</span>{' '}
165 |                     {editedVoteItems ? (
166 |                       <input
167 |                         class="input"
168 |                         name="label"
169 |                         value={item.label}
170 |                         disabled={savingVoteItems}
171 |                         onInput={this._onEditInput}
172 |                       />
173 |                     ) : (
174 |                       <span class="prefilled-input">
175 |                         {item.label || 'None'}
176 |                       </span>
177 |                     )}
178 |                   </label>
179 |                 </div>
180 |                 <div>
181 |                   <label>
182 |                     <span class="label">Champion</span>{' '}
183 |                     {editedVoteItems ? (
184 |                       <Select
185 |                         value={item.championId}
186 |                         disabled={savingVoteItems}
187 |                         onInput={this._onEditInput}
188 |                         name="championId"
189 |                       >
190 |                         <option value="">None</option>
191 |                         {Object.entries(champions).map(([id, champion]) => (
192 |                           <option value={id}>{champion.name}</option>
193 |                         ))}
194 |                       </Select>
195 |                     ) : (
196 |                       <span class="prefilled-input">
197 |                         {champions[item.championId]?.name || 'none'}
198 |                       </span>
199 |                     )}
200 |                   </label>
201 |                 </div>
202 |                 <div>
203 |                   <span class="label">Colour</span>{' '}
204 |                   {editedVoteItems ? (
205 |                     <ColorSelect
206 |                       name={'vote-item' + i}
207 |                       value={item.colorId || 0}
208 |                       onChange={newVal => this._onColorChange(i, newVal)}
209 |                       disabled={savingVoteItems}
210 |                     />
211 |                   ) : (
212 |                     <span class="prefilled-input">
213 |                       <span
214 |                         class="prefilled-color-select-item"
215 |                         style={{
216 |                           '--color-from': getHexColor(palette[item.colorId][0]),
217 |                           '--color-to': getHexColor(palette[item.colorId][1]),
218 |                         }}
219 |                       ></span>
220 |                     </span>
221 |                   )}
222 |                 </div>
223 |                 <div>
224 |                   <div class="label">Votes</div>
225 |                   <div class="prefilled-input">{voteCount![i]}</div>
226 |                 </div>
227 |               </div>
228 |             );
229 |           })}
230 |           <div class="admin-form-item">
231 |             <div>
232 |               <span class="label">Details</span>
233 |               {editedVoteItems ? (
234 |                 <button
235 |                   class="button"
236 |                   disabled={savingVoteItems}
237 |                   onClick={this._onSaveClick}
238 |                 >
239 |                   Save
240 |                 </button>
241 |               ) : (
242 |                 <button class="button" onClick={this._onEditClick}>
243 |                   Edit
244 |                 </button>
245 |               )}
246 |             </div>
247 |             <div>
248 |               <span class="label">State</span>
249 |               <form class="radio-buttons">
250 |                 <label>
251 |                   <input
252 |                     type="radio"
253 |                     name="state"
254 |                     value="staging"
255 |                     checked={vote.state === 'staging'}
256 |                     onChange={this._onStateChange}
257 |                   />
258 |                   <span class="button">Staging</span>
259 |                 </label>
260 |                 <label>
261 |                   <input
262 |                     type="radio"
263 |                     name="state"
264 |                     value="introducing"
265 |                     checked={vote.state === 'introducing'}
266 |                     onChange={this._onStateChange}
267 |                   />
268 |                   <span class="button">Introducing</span>
269 |                 </label>
270 |                 <label>
271 |                   <input
272 |                     type="radio"
273 |                     name="state"
274 |                     value="voting"
275 |                     checked={vote.state === 'voting'}
276 |                     onChange={this._onStateChange}
277 |                   />
278 |                   <span class="button">Voting</span>
279 |                 </label>
280 |                 <label>
281 |                   <input
282 |                     type="radio"
283 |                     name="state"
284 |                     value="results"
285 |                     checked={vote.state === 'results'}
286 |                     onChange={this._onStateChange}
287 |                   />
288 |                   <span class="button">Results</span>
289 |                 </label>
290 |               </form>{' '}
291 |               <button class="button" onClick={this._onClearClick}>
292 |                 Clear vote
293 |               </button>
294 |             </div>
295 |           </div>
296 |         </div>
297 |       </AdminVoteWrapper>
298 |     );
299 |   }
300 | }
301 | 


--------------------------------------------------------------------------------