57 |
60 |
61 |
14 | }/)
17 | 
20 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import styles from "./Footer.module.scss";
2 |
3 | export default function Footer() {
4 | return (
5 |
26 | )
27 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
38 | # next-pwa
39 | /public/precache.*.*.js
40 | /public/sw.js
41 | /public/workbox-*.js
42 | /public/worker-*.js
43 | /public/fallback-*.js
44 | /public/precache.*.*.js.map
45 | /public/sw.js.map
46 | /public/workbox-*.js.map
47 | /public/worker-*.js.map
48 | /public/fallback-*.js
49 |
50 | # python
51 | */venv
52 | scriptz/
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 |
18 | "baseUrl": ".",
19 | "paths": {
20 | "@/components/*": ["components/*"],
21 | "@/api/*": ["pages/api/*"],
22 | "@/styles/*": ["styles/*"],
23 | "@/types/*": ["types/*"],
24 | "@/hooks/*": ["hooks/*"],
25 | "@/helpers/*": ["helpers/*"],
26 | },
27 | },
28 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
29 | "exclude": ["node_modules"]
30 | }
31 |
--------------------------------------------------------------------------------
/styles/_vars.scss:
--------------------------------------------------------------------------------
1 | // This is a partial file for global constants and helpers.
2 | @use 'sass:math';
3 |
4 | // Color
5 | $page-bg: #171511;
6 | $board-bg: #331E15;
7 | $board-light: #A3703F;
8 |
9 | $grey: #808080;
10 | $blood-red: #880808;
11 |
12 | $wrath: #EE1D1D;
13 | $lust: #BA5320;
14 | $sloth: #CAC202;
15 | $gluttony: #43762F;
16 | $gloom: #0BE4E4;
17 | $pride: #4040E5;
18 | $envy: #D00DD0;
19 |
20 | $text-red: red;
21 | $text-brown: #DDC3A1;
22 | $text-yellow: #FBC500;
23 | $orange-highlight: #FE8C01;
24 |
25 | // Sizes
26 | $sinner-card-width: 200px;
27 | $button-h: 50px;
28 | $button-h-mobile: 36px;
29 |
30 | // Breakpoints
31 | $large-screen: 2560px;
32 | $small-screen: 720px;
33 | $mobile-screen: 450px;
34 |
35 | // Other constants
36 | $before-highlight-border-z: 2;
37 |
38 | // Helpers
39 | @function pxToRem($pxValue) {
40 | @return math.div($pxValue, 16px) * 1rem;
41 | }
42 |
43 | // Aspect ratio to set for elems/imgs within the sinner card.
44 | // To make sure they scale if the card gets wider.
45 | @function getSinnerCardAspectRatio($elemHeight) {
46 | @return math.div($sinner-card-width, $elemHeight);
47 | }
48 |
--------------------------------------------------------------------------------
/components/AffinitySummary.module.scss:
--------------------------------------------------------------------------------
1 | @use 'vars';
2 |
3 | .summary-board {
4 | display: inline-grid;
5 | grid-template-columns: 1fr 1fr;
6 | grid-template-areas:
7 | "header header"
8 | "sins attacks";
9 | column-gap: 1rem;
10 | padding: 1rem;
11 | margin-bottom: 2rem;
12 | margin-right: 2rem;
13 |
14 | h2 {
15 | grid-area: header;
16 | margin-bottom: 1rem;
17 |
18 | font-weight: normal;
19 | color: vars.$text-yellow;
20 | font-size: vars.pxToRem(30px);
21 | @media (max-width: vars.$mobile-screen) {
22 | font-size: vars.pxToRem(24px);
23 | }
24 | }
25 | }
26 |
27 | .summary-items-container {
28 | display: flex;
29 | flex-direction: column;
30 | }
31 | .sins-container {
32 | @extend .summary-items-container;
33 | grid-area: sins;
34 | }
35 | .attacks-container {
36 | @extend .summary-items-container;
37 | grid-area: attacks;
38 | }
39 |
40 | .image-cost-pair {
41 | display: flex;
42 | align-items: center;
43 | margin-bottom: 0.5rem;
44 |
45 | span {
46 | font-size: vars.pxToRem(20px);
47 | }
48 | img {
49 | width: 35px;
50 | margin-right: 0.5rem;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/helpers/costCalcs.ts:
--------------------------------------------------------------------------------
1 | import { TeamResources, EgoData, Passive } from '@/types/data';
2 |
3 | // Obtain TeamResources from consuming the context and pass it here.
4 | function passiveSufficient(resources: TeamResources, passive?: Passive) {
5 | if (!passive) return false;
6 |
7 | const resource = resources.get(passive.affinity);
8 | if (!resource) return false;
9 |
10 | return resource >= passive.cost;
11 | }
12 |
13 | function egoSufficient(resources: TeamResources, ego?: EgoData) {
14 | if (!ego) return false;
15 |
16 | for (const cost of ego.costs) {
17 | const resource = resources.get(cost.affinity);
18 | if (!resource) return false;
19 |
20 | if (resource < cost.cost) return false;
21 | }
22 |
23 | return true;
24 | }
25 |
26 | function getEgoResourcesMap(egoData: EgoData[]) {
27 | const resources : TeamResources = new Map();
28 | for (const ego of egoData) {
29 | for (const cost of ego.costs) {
30 | const old = resources.get(cost.affinity) ?? 0;
31 | resources.set(cost.affinity, old + cost.cost);
32 | }
33 | }
34 |
35 | return resources;
36 | }
37 |
38 |
39 | export {
40 | passiveSufficient, egoSufficient,
41 | getEgoResourcesMap,
42 | }
--------------------------------------------------------------------------------
/public/icons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
26 |
--------------------------------------------------------------------------------
/helpers/loadJson.ts:
--------------------------------------------------------------------------------
1 | import { promises as fs } from 'fs';
2 | import { IdentityData, EgoData } from '@/types/data';
3 | import path from 'path';
4 |
5 | const ID_JSON = "identities.json"
6 | const EGO_JSON = "egos.json"
7 |
8 | export async function importIdentities() : Promise
33 |
52 | )
53 | }
54 |
55 | return (
56 |
34 | })
36 |
37 |
38 |
51 | {ego.name}
39 |
40 | { ego.costs.map((cost) =>
41 |
50 |
44 | })
46 | {`x${resources.get(cost.affinity) ?? 0}/${cost.cost}`}
47 |
48 | )}
49 |
58 | { activeMembers.map((member) =>
59 |
66 |
60 | { member.egos.map((ego) =>
61 | egoContainer(ego)
62 | )}
63 |
64 | )}
65 | ego ? egoSelected(ego) : {} }>
43 |
55 | }
56 |
57 | )
58 | }
59 |
60 | return (
61 | <>
62 | {/* Modals -- layout independent of rest of content. */}
63 | { showEgoModal &&
44 | 
46 |
47 |
49 | { ego?.name }
50 |
51 | { ego &&
52 | setShowEgoModal(!showEgoModal)}
70 | onMouseDown={e => e.preventDefault()}>
71 | { EGO_RARITIES.map((item) => egoRow(item)) }
72 |
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | @use 'vars';
2 |
3 | // Mixins
4 | // - Prefer mixin instead of something in globals if there a tendency
5 | // to override something from the mixin a little bit or
6 | // add a little extra (easier to read in the css file).
7 | @mixin hover-focus-highlight($before-border: false) {
8 | &:hover, &:focus {
9 | cursor: pointer;
10 | outline: none;
11 |
12 | @include highlight-effect;
13 |
14 | @if $before-border == true {
15 | @include highlight-before-border;
16 | border: none;
17 | }
18 | }
19 | }
20 |
21 | @mixin highlight-before-border {
22 | &::before {
23 | content: "";
24 | position: absolute;
25 | top: 0;
26 | bottom: 0;
27 | left: 0;
28 | right: 0;
29 | border: 4px solid vars.$orange-highlight;
30 |
31 | z-index: vars.$before-highlight-border-z;
32 | }
33 | }
34 |
35 | @mixin highlight-effect {
36 | color: vars.$orange-highlight;
37 | border: 2px solid vars.$orange-highlight;
38 |
39 | &::after {
40 | content: "";
41 | position: absolute;
42 | top: 0;
43 | bottom: 0;
44 | left: 0;
45 | right: 0;
46 |
47 | background: vars.$orange-highlight;
48 | opacity: 0.3;
49 | mix-blend-mode: overlay;
50 |
51 | // Prefer mix-blend-mode otherwise you get "pointy corners"
52 | // if element has border-radius.
53 | @supports not (mix-blend-mode: overlay) {
54 | opacity: 0.15;
55 | background: vars.$orange-highlight;
56 | }
57 |
58 | }
59 | }
60 |
61 | @mixin gray-filter($strength: 0.8) {
62 | filter: grayscale($strength);
63 |
64 | // Grayscale is what we actually want.
65 | // Overlay is for old brows.
66 | @supports not (filter: grayscale(1)) {
67 | &::after {
68 | content: "";
69 | position: absolute;
70 | top: 0;
71 | bottom: 0;
72 | left: 0;
73 | right: 0;
74 |
75 | opacity: 0.66;
76 | background: vars.$grey;
77 | }
78 | }
79 | }
80 |
81 | $scrollbar-w: 6px;
82 | $scrollbar-w-mobile: 3px;
83 |
84 | @mixin orange-scrollbar {
85 | @supports not(selector(::-webkit-scrollbar)) {
86 | scrollbar-width: thin;
87 | scrollbar-color: vars.$orange-highlight vars.$grey;
88 | }
89 |
90 | &::-webkit-scrollbar {
91 | width: $scrollbar-w;
92 | }
93 | &::-webkit-scrollbar-thumb { /* Foreground */
94 | border-radius: $scrollbar-w;
95 | background: vars.$orange-highlight;
96 | }
97 | &::-webkit-scrollbar-track { /* Background */
98 | border-radius: $scrollbar-w;
99 | background: vars.$grey;
100 | }
101 |
102 | @media (max-width: vars.$small-screen) {
103 | &::-webkit-scrollbar {
104 | width: $scrollbar-w-mobile;
105 | }
106 | &::-webkit-scrollbar-thumb {
107 | border-radius: $scrollbar-w-mobile;
108 | }
109 | &::-webkit-scrollbar-track {
110 | border-radius: $scrollbar-w-mobile;
111 | }
112 | }
113 | }
--------------------------------------------------------------------------------
/helpers/sinnerData.ts:
--------------------------------------------------------------------------------
1 | import { EGO_RARITIES, IdentityData, EgoData } from "@/types/data";
2 |
3 | function sinnerNumberToName(number: number, caps: boolean=false) {
4 | switch(number) {
5 | case 1: return caps ? "Yi Sang" : "yi sang";
6 | case 2: return caps ? "Faust" : "faust";
7 | case 3: return caps ? "Don Quixote" : "don quixote";
8 | case 4: return caps ? "Ryoshu" : "ryoshu";
9 | case 5: return caps ? "Meursault" : "meursault";
10 | case 6: return caps ? "Hong Lu" : "hong lu";
11 | case 7: return caps ? "HeathCliff" : "heathcliff";
12 | case 8: return caps ? "Ishmael" : "ishmael";
13 | case 9: return caps ? "Rodion" : "rodion";
14 | case 10: return caps ? "Dante" : "dante";
15 | case 11: return caps ? "Sinclair" : "sinclair";
16 | case 12: return caps ? "Outis" : "outis";
17 | case 13: return caps ? "Gregor" : "gregor";
18 | }
19 | }
20 |
21 | function getSinnerEgoSrcImg(ego: EgoData) {
22 | const sinner = sinnerNumberToName(ego.sinner);
23 |
24 | // Special case for some egos with chars unusable in filenames.
25 | if (ego.filename) {
26 | return `sinners/${sinner}/ego/${ego.filename}.webp`;
27 | }
28 |
29 | const egoName = ego.name.toLowerCase().trim();
30 | return `sinners/${sinner}/ego/${egoName}.webp`;
31 | }
32 |
33 | function getSinnerIdSrcImg(id: IdentityData) {
34 | const sinner = sinnerNumberToName(id.sinner);
35 |
36 | // Special case for some egos with chars unusable in filenames.
37 | if (id.filename) {
38 | return `sinners/${sinner}/identities/${id.filename}.webp`;
39 | }
40 |
41 | const idName = id.name.toLocaleLowerCase().trim();
42 | return `sinners/${sinner}/identities/${idName}.webp`;
43 | }
44 |
45 | function identityEquals(a?: IdentityData, b?: IdentityData) {
46 | if (!a || !b) return false;
47 |
48 | // TODO: Use ids instead of name compares
49 | return a.name === b.name;
50 | }
51 |
52 | function egoEquals(a?: EgoData, b?: EgoData) {
53 | if (!a || !b) return false;
54 |
55 | // TODO: Use ids instead of name compares
56 | return a.name === b.name;
57 | }
58 |
59 | function egoSort(egoA: EgoData, egoB: EgoData) {
60 | if (!egoA && !egoB) return 0;
61 | if (!egoA) return 1;
62 | if (!egoB) return -1;
63 |
64 | if (egoA.sinner < egoB.sinner) return -1;
65 | if (egoB.sinner < egoA.sinner) return 1;
66 |
67 | const rarA = EGO_RARITIES.indexOf(egoA.rarity);
68 | const rarB = EGO_RARITIES.indexOf(egoB.rarity);
69 | if (rarA < rarB) return -1;
70 | if (rarB < rarA) return 1;
71 |
72 | return 0;
73 | }
74 |
75 | function idSort(idA: IdentityData, idB: IdentityData) {
76 | if (!idA && !idB) return 0;
77 | if (!idA) return 1;
78 | if (!idB) return -1;
79 |
80 | if (idA.sinner < idB.sinner) return -1;
81 | if (idB.sinner < idA.sinner) return 1;
82 |
83 | if (idA.rarity < idB.rarity) return -1;
84 | if (idB.rarity < idA.rarity) return 1;
85 |
86 | return idA.name.localeCompare(idB.name);
87 | }
88 |
89 |
90 | export {
91 | sinnerNumberToName,
92 | getSinnerEgoSrcImg, getSinnerIdSrcImg,
93 | identityEquals, egoEquals,
94 | egoSort, idSort,
95 | }
--------------------------------------------------------------------------------
/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { createPortal } from 'react-dom';
3 | import styles from './Modal.module.scss'
4 |
5 | // Ensure only one modal open at a time;
6 | let modalIsOpen = false;
7 | const MODAL_ID = "THE-MODAL";
8 | const BODY_SCROLLBAR_WIDTH = "8px"
9 |
10 | interface ModalProps {
11 | children: React.ReactNode;
12 | closeModal: () => void;
13 | }
14 |
15 | export default function Modal({children, closeModal} : ModalProps) {
16 | useEffect(() => {
17 | modalOpen();
18 | return () => modalClosed();
19 | }, [])
20 |
21 | function preventBubbleUp(e : React.MouseEvent) {
22 | e.stopPropagation();
23 | }
24 |
25 | function handleKeydown(e: React.KeyboardEvent) {
26 | if (e.key == 'Escape') {
27 | e.preventDefault();
28 | closeModal();
29 | }
30 | }
31 |
32 | return (
33 | <>
34 | { createPortal(
35 |
38 |
,
42 | document.body
43 | )}
44 |
45 | )
46 | }
47 |
48 | /**
49 | * Modal Open/Close
50 | * - Add overlay
51 | * - Prevent body scrolling
52 | * - Prevent interaction with things outside of modal.
53 | * = Extremely basic focus trap for our use case.
54 | * = We don't need to worry about accessibility for LC players.
55 | */
56 | const FOCUSABLE = "input:not([disabled]), *[tabindex]";
57 | let focusRemoved : [Element, string | null][] = [] ;
58 | let lastFocus : Element | null;
59 |
60 | function modalOpen() {
61 | modalIsOpen = true;
62 | if (!document) return;
63 |
64 | document.body.style.overflow = "hidden";
65 | document.body.style.paddingRight = BODY_SCROLLBAR_WIDTH;
66 | const main = document.querySelector('main');
67 | if (!main) return;
68 |
69 | const focusableElements = main.querySelectorAll(FOCUSABLE);
70 | focusableElements.forEach(elem => {
71 | if (document.activeElement === elem) lastFocus = elem;
72 |
73 | const original = elem.getAttribute("tabindex");
74 | elem.setAttribute("tabindex", "-1");
75 | focusRemoved.push([elem, original])
76 | });
77 |
78 | const modalElem = document.body.querySelector(`#${MODAL_ID}`);
79 | const modalFocusable = modalElem?.querySelector(FOCUSABLE);
80 | if (lastFocus) {
81 | (modalFocusable as HTMLElement)?.focus()
82 | }
83 | }
84 |
85 | function modalClosed() {
86 | modalIsOpen = false;
87 | if (!document) return;
88 |
89 | document.body.style.overflow = "unset";
90 | document.body.style.paddingRight = "0px";
91 | for (const [elem, original] of focusRemoved) {
92 | if (original) {
93 | elem.setAttribute("tabindex", original);
94 | } else {
95 | elem.removeAttribute("tabindex");
96 | }
97 | }
98 | (lastFocus as HTMLElement)?.focus();
99 |
100 | focusRemoved = [];
101 | lastFocus = null;
102 | }
103 |
--------------------------------------------------------------------------------
/components/EgoSelection.tsx:
--------------------------------------------------------------------------------
1 | import { useTeamContext, useTeamDispatchContext, EgoDispatchFunctions } from '@/hooks/teamContext';
2 | import Modal from '@/components/Modal';
3 | import Button from '@/components/Button';
4 | import { getSinnerEgoSrcImg, egoEquals } from '@/helpers/sinnerData';
5 | import { getEgoRarityLabelAsset, getSinTypeAsset } from '@/helpers/assets'
6 | import { EgoData } from '@/types/data';
7 | import styles from './EgoSelection.module.scss';
8 |
9 |
10 | interface EgoSelectionProps {
11 | egoData : EgoData[];
12 | setModalOpen: (open : boolean) => void;
13 | }
14 |
15 | export default function IdentitySelection({egoData, setModalOpen} : EgoSelectionProps) {
16 | const team = useTeamContext();
17 | const teamDispatch = useTeamDispatchContext();
18 | const [egoSelected] = EgoDispatchFunctions(teamDispatch);
19 |
20 | const sinner = egoData[0]?.sinner;
21 | const activeEgos = team.find((member) => member.sinner === sinner)?.egos;
22 |
23 | const handleKeyDown = (e: React.KeyboardEvent
39 | {children}
40 |
41 |
35 |
63 | )
64 | }
65 |
66 | return (
67 | egoSelected(ego)}
38 | onKeyDown={ (e) => handleKeyDown(e, ego)}
39 | tabIndex={0}
40 | onMouseDown={e => e.preventDefault()}>
41 | })
44 | })
47 |
62 |
48 |
51 |
52 | {ego.name}
53 |
54 | { ego.costs.map((cost, index) =>
55 |
61 |
56 |
57 |
59 | )}
60 | {`x${cost.cost}`}
58 |
69 |
72 |
79 |
73 | { egoData.map((ego) => egoCard(ego))}
74 |
75 |
78 | setId(identity)}
44 | onMouseDown={e => e.preventDefault()}
45 | tabIndex={0}
46 | onKeyDown={ (e) => handleKeyDown(e, identity)}>
47 |
68 | )
69 | }
70 |
71 | return (
72 |
48 | })
51 | })
57 |
58 |
52 |
54 | {identity.name}
53 |
59 | { identity.skills.map((skill, index) =>
60 | index < 3 &&
61 |
67 |
62 | })
63 |
65 | )}
66 | {`x${3-index}`}
64 |
74 |
77 |
84 |
78 | { idData.map((identity) => idCard(identity))}
79 |
80 |
83 | ATK AFFINITIES:
52 |
53 | { SINS.map((sin) =>
54 |
60 |
55 | })
56 | {`x${teamResources.get(sin) ?? 0}`}
57 |
58 | )}
59 |
61 | { ATTACK_TYPES.map((attack) =>
62 |
68 |
63 |
64 | {`x${attackCount(attack)}`}
65 |
66 | )}
67 | EGO AFFINITIES:
107 |
108 | { SINS.map((sin) =>
109 |
115 |
110 |
111 | {`x${egoResources.get(sin) ?? 0}`}
112 |
113 | )}
114 |
116 | { ATTACK_TYPES.map((attack) =>
117 |
123 |
118 |
119 | {`x${attackCount(attack)}`}
120 |
121 | )}
122 |
54 |
58 |
62 |
63 | )
64 | }
65 |
66 | return (
67 |
59 |
61 | {identity.name}
60 |
68 | {/* Modals -- layout independent of rest of content. */}
69 | { showIdModal
70 | &&
72 | }
73 |
89 |
90 | )
91 | }
92 |
93 |
94 | function skillRow(identity: IdentityData) {
95 | return (
96 | e.preventDefault()}
75 | onClick={() => setShowIdModal(!showIdModal)}
76 | tabIndex={0}
77 | onKeyDown={handleKeyDownTop}>
78 | { sinnerProfile() }
79 | { skillRow(identity) }
80 |
81 |
82 | e.preventDefault()}
86 | onKeyDown={handleKeyDownChkBox}
87 | onChange={() => setActive(identity.sinner, !member.active)}/>
88 |
97 | { identity.skills.map((skill, index) =>
98 | index < 3 && sinHexCombo(skill, index)
99 | )}
100 |
101 | )
102 | }
103 |
104 | function sinHexCombo(skill: Skill, index: number) {
105 | return (
106 |
107 |
126 | )
127 | }
128 |
129 | function PassiveRow({active, passive} : {active: Passive, passive: Passive}) {
130 | const resources = useTeamResourcesContext();
131 |
132 | return (
133 |
108 |
111 | { index <= 1
112 | &&
115 | }
116 | { index === 0
117 | &&
120 | }
121 |
125 |
122 |
123 |
124 |
134 | { [active, passive].map((item, index) =>
135 |
144 | )
145 | }
146 |
--------------------------------------------------------------------------------
/hooks/teamContext.tsx:
--------------------------------------------------------------------------------
1 | import { useContext, createContext, useReducer } from 'react';
2 | import initialIdData from './initialTeam.json';
3 | import { TeamMember, IdentityData, EgoData, Sin, SINNER_NUMBERS, SinnerNumber } from '@/types/data';
4 |
5 | type TeamEditAction =
6 | | {type: "set-active", sinner: SinnerNumber, active: boolean}
7 | | {type: "update-id", identity: IdentityData}
8 | | {type: "update-ego", ego: EgoData}
9 | | {type: "set-egos", egos: EgoData[]}
10 |
11 | const TeamContext = createContext
139 | })
140 | {`${item.activation.substring(0, 3)}\n x${item.cost}`}
141 |
142 | )}
143 |