Skip to content

Commit

Permalink
moar epicness
Browse files Browse the repository at this point in the history
  • Loading branch information
@subtleGradient
subtleGradient committed Mar 26, 2020
1 parent 1002a93 commit ac3435b
Show file tree
Hide file tree
Showing 10 changed files with 267 additions and 207 deletions.
25 changes: 21 additions & 4 deletions src/AOPActivationTable.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,22 @@
}

.AOPActivationTable .animal {
border-radius: 1ex;
border-radius: 1.5ex;
display: flex;
flex-direction: column;
padding: 1ex 0;
align-items: center;
/* justify-items: stretch; */
}
.AOPActivationTable .part {
width: 2.5em;
text-align: center;
padding: 0.1em 0.3em;
box-sizing: border-box;
height: 2em;
line-height: 1.5em;
margin: 2px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 2px 0;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.AOPActivationTable .part i {
font-style: normal;
Expand Down Expand Up @@ -49,15 +53,28 @@
} */

.AOPActivationTable .pair {
border: 2px solid lime;
border: 2px solid blue;
}
.AOPActivationTable .pair.next {
border-radius: 1em 0 0 1em;
border-right: 0;
margin-right: 0;
margin-left: 4px;
}
.AOPActivationTable .pair.previous {
border-radius: 0 1em 1em 0;
border-left: 0;
margin-left: 0;
margin-right: 4px;
}

.AOPActivationTable .animal.index0 .pair,
.AOPActivationTable .animal.index1 .pair.previous {
border-color: #FFF;
background: blue;
color: white;
}
.AOPActivationTable .animal.index0.flipSideIsLast .pair,
.AOPActivationTable .animal.index1.flipSideIsLast .pair.previous {
color: yellow;
}
6 changes: 3 additions & 3 deletions src/AOPActivationTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function AOPActivationTable({ op512 }: { op512: OPT512 }) {
<span
key={code}
className={`animal ${Ox.sex + Dx.sex} ${code} ${flipSideIsLast &&
"flipSideIsLast"}`}
"flipSideIsLast"} index${index}`}
>
{showSex && (
<span className="part sex">{(Ox.sex + Dx.sex).toUpperCase()}</span>
Expand All @@ -32,15 +32,15 @@ export default function AOPActivationTable({ op512 }: { op512: OPT512 }) {
className={`part o ${next?.observer === Ox &&
"pair next"} ${previous?.observer === Ox && "pair previous"}`}
>
<i>{Ox.sex}</i>
{showSex && <i>{Ox.sex}</i>}
{Ox.code}
{Ox.focus}
</span>
<span
className={`part o ${next?.decider === Dx &&
"pair next"} ${previous?.decider === Dx && "pair previous"}`}
>
<i>{Dx.sex}</i>
{showSex && <i>{Dx.sex}</i>}
{Dx.code}
{Dx.focus}
</span>
Expand Down
62 changes: 62 additions & 0 deletions src/KnownTypes.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
.KnownTypes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.KnownTypes > .TypeTableCells {
box-sizing: border-box;
width: 25%;
border-bottom: 2px solid #aaa;
}

.TypeTableCells {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.TypeTableCells > * {
box-sizing: border-box;
width: 25%;
text-align: center;
padding: 1ex 0;
font-size: 0.8em;
border: 2px solid transparent;
cursor: pointer;
}
.TypeTableCell[data-optype]:hover {
border-color: #000;
}

.TypeTableCell[data-optype*="Ni/"],
.TypeTableCell[data-optype*="Si/"] {
background: #c9daf8;
}
.TypeTableCell[data-optype*="Ne/"],
.TypeTableCell[data-optype*="Se/"] {
background: #d9ead3;
}
.TypeTableCell[data-optype*="Fi/"],
.TypeTableCell[data-optype*="Ti/"] {
background: #efefef;
}
.TypeTableCell[data-optype*="Fe/"],
.TypeTableCell[data-optype*="Te/"] {
background: #f4cccc;
}

@media (max-width: 424px) {
.KnownTypes > .TypeTableCells {
width: 50%;
}
}
@media (min-width: 425px) and (max-width: 767px) {
.KnownTypes > .TypeTableCells {
width: 25%;
}
}
@media (min-width: 768px) {
.KnownTypes > .TypeTableCells {
width: 25%;
}
}
153 changes: 75 additions & 78 deletions src/KnownTypes.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,115 @@
import * as React from "react";
import knownTypes from "./known-types.sheet.json";
import { OPT512 } from "./OPT512";
import * as React from "react"
import knownTypes from "./known-types.sheet.json"
import { OPT512 } from "./OPT512"
import "./KnownTypes.css"

export interface KnownType {
opType: OPT512;
index: number;
"oPT#": number;
"oPT#+": string;
"m/F": string;
saviors: string;
animals: string;
typeCode: string;
doublyActivatedFunctions: string;
people1: string | null;
people2: string | null;
people3: string | null;
people4: string | null;
people5: string | null;
people6: string | null;
people7: string | null;
people8: string | null;
people9: string | null;
people10: string | null;
people11: string | null;
people12: string | null;
people13: string | null;
people14: string | null;
opType: OPT512
index: number
"oPT#": number
"oPT#+": string
"m/F": string
saviors: string
animals: string
typeCode: string
doublyActivatedFunctions: string
people1: string | null
people2: string | null
people3: string | null
people4: string | null
people5: string | null
people6: string | null
people7: string | null
people8: string | null
people9: string | null
people10: string | null
people11: string | null
people12: string | null
people13: string | null
people14: string | null
}

export const KNOWN_TYPES: KnownType[] = knownTypes.map(knownType => ({
...knownType,
opType: OPT512.fromCoinText(knownType.typeCode)
}));
opType: OPT512.fromCoinText(knownType.typeCode),
}))

export function KnownTypes({ addType, Cell = TypeTableCell }) {
return (
<div className="type-table">
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(0, 32)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(32, 64)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(64, 96)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(96, 128)} />
// prettier-ignore
<div className="KnownTypes">
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(0, 32)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(32, 64)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(64, 96)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(96, 128)} />
</div>
);
)
}

export function KnownTypesTable({ addType, filters, Cell = TypeTableCell }) {
let o = 0;
let o = 0
return (
<div className="type-table">
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<TypeTable
addType={addType} Cell={Cell}
kTypes={KNOWN_TYPES.slice(o + 96, o + 128)}
/>
// prettier-ignore
<div>
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 96, o + 128)} />
{void (o += 128)}
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<TypeTable
addType={addType} Cell={Cell}
kTypes={KNOWN_TYPES.slice(o + 96, o + 128)}
/>
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 96, o + 128)} />
{void (o += 128)}
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<TypeTable
addType={addType} Cell={Cell}
kTypes={KNOWN_TYPES.slice(o + 96, o + 128)}
/>
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 96, o + 128)} />
{void (o += 128)}
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<TypeTable addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<TypeTable
addType={addType} Cell={Cell}
kTypes={KNOWN_TYPES.slice(o + 96, o + 128)}
/>
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 0, o + 32)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 32, o + 64)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 64, o + 96)} />
<Cells addType={addType} Cell={Cell} kTypes={KNOWN_TYPES.slice(o + 96, o + 128)} />
</div>
);
)
}

function TypeTable({ kTypes, addType, Cell = TypeTableCell }) {
function Cells({ kTypes, addType, Cell = TypeTableCell }) {
return (
<div className="type-table with-cells">
<div>{kTypes[0].animals}</div>
<div>{kTypes[1].animals}</div>
<div>{kTypes[2].animals}</div>
<div>{kTypes[3].animals}</div>
<div className="TypeTableCells">
<div className="TypeTableCell">{kTypes[0].animals}</div>
<div className="TypeTableCell">{kTypes[1].animals}</div>
<div className="TypeTableCell">{kTypes[2].animals}</div>
<div className="TypeTableCell">{kTypes[3].animals}</div>
{kTypes.map((kType: KnownType) => (
<Cell key={kType.typeCode} kType={kType} addType={addType} />
<Cell
key={kType.typeCode}
className="TypeTableCell"
kType={kType}
addType={addType}
/>
))}
</div>
);
)
}
function TypeTableCell({ kType, addType }) {
function TypeTableCell({ kType, addType, className }) {
return (
<a
className={className}
key={kType.typeCode}
data-optype={kType.typeCode}
onClick={e => {
e.preventDefault();
e.preventDefault()
addType(
kType.typeCode
.split("-")
.slice(1)
.join("-"),
kType.typeCode
);
kType.typeCode,
)
}}
>
{kType.typeCode.split("-")[1]}
</a>
);
)
}
5 changes: 2 additions & 3 deletions src/OPActivationTable.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
}

.OPActivationTable .animals {
/* flex: 0.5; */
background-color: #eeeeee;
}
.OPActivationTable .animals th {
Expand All @@ -35,9 +34,9 @@
.OPActivationTable table.layout > tbody > tr > td {
border: none;
padding: 0;
padding-right: 0.4em;
padding-right: 0.2em;
}
.OPActivationTable table.layout > tbody > tr > td + td {
padding: 0;
padding-left: 0.4em;
padding-left: 0.2em;
}
20 changes: 8 additions & 12 deletions src/OPActivationTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,7 @@ import { betweenX } from "./between"
export default function OPActivationTable({ op512 }: { op512: OPT512 }) {
const showSex = op512.fmDe !== "?" || op512.fmS !== "?"
return (
<div
className="OPActivationTable"
style={{
padding: betweenX(0, 14),
paddingBottom: 0,
}}
>
<div className="OPActivationTable">
<table className="layout">
<tbody>
<tr>
Expand All @@ -37,11 +31,13 @@ export default function OPActivationTable({ op512 }: { op512: OPT512 }) {
}) => (
<tr key={code}>
<td title={activation + 1}>{activation1or2}</td>
{showSex && <td
title={{ f: "feminine", m: "masculine" }[opFn?.sex]}
>
{opFn?.sex}
</td>}
{showSex && (
<td
title={{ f: "feminine", m: "masculine" }[opFn?.sex]}
>
{opFn?.sex}
</td>
)}
<td>
{code}
{opFn?.focus}
Expand Down
Loading

1 comment on commit ac3435b

@vercel
Copy link

@vercel vercel bot commented on ac3435b Mar 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.