Skip to content

Commit

Permalink
polish
Browse files Browse the repository at this point in the history
  • Loading branch information
@seigler
seigler committed Apr 8, 2024
1 parent 6e15a05 commit 1c6067a
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 201 deletions.
12 changes: 7 additions & 5 deletions src/components/DualText.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { ligatures } from "./store";

export default function DualText({ children }: { children: string }) {
export default function DualText({ text }: { text: string }) {
const words: string[] = [];
children.split(/\n/).forEach((line, index, lines) => {
text.split(/\n/).forEach((line, index, lines) => {
line.split(/\b(?=\w)/).forEach((word) => {
words.push(word);
});
if (index < lines.length - 1) {
words.push("\n");
}
});
const currentLigatures = ligatures.value;

return (
<span>
{words.map((word) => {
Expand All @@ -19,16 +21,16 @@ export default function DualText({ children }: { children: string }) {
const letters: string[] = [];
for (let i = 0; i < word.length; i += 1) {
const nextTwoCharacters = word.slice(i, i + 2);
if (ligatures.value.includes(nextTwoCharacters.toLowerCase())) {
if (currentLigatures.includes(nextTwoCharacters.toLowerCase())) {
letters.push(nextTwoCharacters);
i += 1;
} else {
letters.push(nextTwoCharacters[0]);
}
}
return (
<span class="dualtext-word">
<span class="aurebesh">{word}</span>
<span class="dualtext-word aurebesh">
{word}
<div className="dualtext-help">
{letters.map((character) => {
return <span data-character={character} />;
Expand Down
174 changes: 5 additions & 169 deletions src/components/Main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,92 +1,10 @@
import { computed, effect, signal } from "@preact/signals";
import localforage from "localforage";
import { useEffect } from "preact/hooks";
import { selectedFont } from "./store";
import ReadingBox from "./ReadingBox";

const fonts: Record<string, { ligatures: string[]; lowercase: boolean }> = {
"AB-Equinox": {
ligatures: ["ch", "sh", "th", "ae", "eo", "kh", "ng", "oo"],
lowercase: false,
},
"AurebeshAF-Canon": {
ligatures: [],
lowercase: false,
},
"AurebeshAF-CanonTech": {
ligatures: [],
lowercase: false,
},
"AurebeshAF-Legends": {
ligatures: ["ch", "sh", "th", "ae", "eo", "kh", "ng", "oo"],
lowercase: false,
},
"AurebeshAF-LegendsTech": {
ligatures: ["ch", "sh", "th", "ae", "eo", "kh", "ng", "oo"],
lowercase: false,
},
"Aurebesh_Rodian-Oblique": {
ligatures: [],
lowercase: false,
},
"Aurebesh_Rodian-OblqOutline": {
ligatures: [],
lowercase: false,
},
Aurebesh_Rodian: {
ligatures: [],
lowercase: false,
},
"Aurebesh_Rodian-Outline": {
ligatures: [],
lowercase: false,
},
"AurebeshTypewriter-Light": {
ligatures: [],
lowercase: true,
},
"AurebeshTypewriter-Regular": {
ligatures: [],
lowercase: true,
},
Droidobesh: {
ligatures: [],
lowercase: false,
},
LaptiNekAF: {
ligatures: [],
lowercase: false,
},
Maulobesh: {
ligatures: [],
lowercase: false,
},
Nirvanabesh: {
ligatures: [],
lowercase: false,
},
Skyhook: {
ligatures: [],
lowercase: false,
},
};

const fontNames = Object.keys(fonts);

const selectedFont = signal("AurebeshAF-Legends");
effect(() => {
if (typeof window !== "undefined") {
document.documentElement.style.setProperty(
"--font-aurebesh",
selectedFont.value
);
}
});
const ligatures = computed(() => {
return fonts[selectedFont.value].ligatures;
});
const lowercase = computed(() => {
return fonts[selectedFont.value].lowercase;
});
import Reference from "./Reference";
import FontPicker from "./FontPicker";
import DualText from "./DualText";

export default function Main() {
useEffect(() => {
Expand All @@ -105,7 +23,7 @@ export default function Main() {
<>
<header>
<h1>
<DualText>Learn Aurebesh</DualText>
<DualText text="Learn Aurebesh" />
</h1>
</header>
<main>
Expand All @@ -118,85 +36,3 @@ export default function Main() {
</>
);
}

function FontPicker() {
return (
<select
onChange={(event) => {
const newValue = event.currentTarget.value;
selectedFont.value = newValue;
localforage.setItem("aurebesh-font", newValue);
}}
>
{fontNames.map((font) => {
return (
<option value={font} selected={font === selectedFont.value}>
{font}
</option>
);
})}
</select>
);
}

function DualText({ children }: { children: string }) {
const words: string[] = [];
children.split(/\n/).forEach((line, index, lines) => {
line.split(/\b(?=\w)/).forEach((word) => {
words.push(word);
});
if (index < lines.length - 1) {
words.push("\n");
}
});
return (
<span>
{words.map((word) => {
if (word === "\n") {
return <br />;
}
const letters: string[] = [];
for (let i = 0; i < word.length; i += 1) {
const nextTwoCharacters = word.slice(i, i + 2);
if (ligatures.value.includes(nextTwoCharacters.toLowerCase())) {
letters.push(nextTwoCharacters);
i += 1;
} else {
letters.push(nextTwoCharacters[0]);
}
}
return (
<span class="dualtext-word">
<span class="aurebesh">{word}</span>
<div className="dualtext-help">
{letters.map((character) => {
return <span data-character={character} />;
})}
</div>
</span>
);
})}
</span>
);
}

function Reference() {
return (
<aside class="reference">
<DualText>
{lowercase.value ? "Aa Bb Cc Dd Ee Ff Gg Hh Ii" : "A B C D E F G H I"}
</DualText>
<DualText>
{lowercase.value ? "Jj Kk Ll Mm Nn Oo Pp Qq Rr" : "J K L M N O P Q R"}
</DualText>
<DualText>
{lowercase.value ? "Ss Tt Uu Vv Ww Xx Yy Zz" : "S T U V W X Y Z"}
</DualText>
<DualText>0 1 2 3 4 5 6 7 8 9</DualText>
{ligatures.value.length > 0 && (
<DualText>{ligatures.value.join(" ")}</DualText>
)}
<DualText>{`, . ? ! : ; ' " ( )`}</DualText>
</aside>
);
}
9 changes: 4 additions & 5 deletions src/components/ReadingBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Pursued by the Empire's sinister agents, Princess Leia races home aboard her sta
}}
/>
</span>
{isEditing.value ? (
{isEditing.value && (
<textarea
class="readingbox-textarea"
id="reading-material"
Expand All @@ -48,11 +48,10 @@ Pursued by the Empire's sinister agents, Princess Leia races home aboard her sta
}}
spellCheck={false}
/>
) : (
<div class="readingbox-text aurebesh">
<DualText>{contents.value}</DualText>
</div>
)}
<div class="readingbox-text aurebesh">
<DualText text={contents.value} />
</div>
</div>
);
}
22 changes: 10 additions & 12 deletions src/components/Reference.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,18 @@ import { ligatures, lowercase } from "./store";
export default function Reference() {
return (
<aside class="reference">
<DualText>
{lowercase.value ? "Aa Bb Cc Dd Ee Ff Gg Hh Ii" : "A B C D E F G H I"}
</DualText>
<DualText>
{lowercase.value ? "Jj Kk Ll Mm Nn Oo Pp Qq Rr" : "J K L M N O P Q R"}
</DualText>
<DualText>
{lowercase.value ? "Ss Tt Uu Vv Ww Xx Yy Zz" : "S T U V W X Y Z"}
</DualText>
<DualText>0 1 2 3 4 5 6 7 8 9</DualText>
<DualText
text={
lowercase.value
? "Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz"
: "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z"
}
/>
<DualText text="0 1 2 3 4 5 6 7 8 9" />
{ligatures.value.length > 0 && (
<DualText>{ligatures.value.join(" ")}</DualText>
<DualText text={ligatures.value.join(" ")} />
)}
<DualText>{`, . ? ! : ; ' " ( )`}</DualText>
<DualText text={`, . ? ! : ; ' " ( )`} />
</aside>
);
}
2 changes: 1 addition & 1 deletion src/components/store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const fonts: Record<

export const fontNames = Object.keys(fonts);

export const selectedFont = signal("AurebeshAF-Legends");
export const selectedFont = signal("AurebeshAF-Canon");
effect(() => {
if (typeof window !== "undefined") {
document.documentElement.style.setProperty(
Expand Down

0 comments on commit 1c6067a

Please sign in to comment.