diff --git a/index.html b/index.html
index 43fac5a..80cf03c 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,19 @@
ShareChess
-
+
-
+
-
+
+
+ Loading
+ .
+ .
+ .
+ .
+
diff --git a/package.json b/package.json
index d3ac6fc..8eb8c5c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
"@types/howler": "^2.2.6",
"@types/node": "^17.0.8",
"@types/ua-parser-js": "^0.7.36",
- "@types/webfontloader": "^1.6.34",
"@vitejs/plugin-legacy": "^1.8.1",
"typescript": "^4.4.4",
"vite": "^2.7.2",
@@ -34,7 +33,6 @@
"is-mobile": "^3.0.0",
"npm": "^8.4.0",
"ua-parser-js": "^1.0.2",
- "webfontloader": "^1.6.28",
"webm-writer": "^1.0.0"
}
}
diff --git a/public/chess.ttf b/public/fonts/Chess.ttf
similarity index 100%
rename from public/chess.ttf
rename to public/fonts/Chess.ttf
diff --git a/public/fonts/FiraMono-Medium.ttf b/public/fonts/FiraMono-Medium.ttf
new file mode 100644
index 0000000..793c60d
Binary files /dev/null and b/public/fonts/FiraMono-Medium.ttf differ
diff --git a/public/fonts/Ubuntu-Bold.ttf b/public/fonts/Ubuntu-Bold.ttf
new file mode 100644
index 0000000..c2293d5
Binary files /dev/null and b/public/fonts/Ubuntu-Bold.ttf differ
diff --git a/public/fonts/Ubuntu-Medium.ttf b/public/fonts/Ubuntu-Medium.ttf
new file mode 100644
index 0000000..7340a40
Binary files /dev/null and b/public/fonts/Ubuntu-Medium.ttf differ
diff --git a/src/main.tsx b/src/main.tsx
index 139c23e..3fd7bd6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,3 @@
-import WebFont from "webfontloader";
import { render } from "solid-js/web";
import Board from "./board/Board";
@@ -47,19 +46,11 @@ const main = async () => {
/* Initialize */
Promise.all([
- new Promise((resolve) =>
- WebFont.load({
- google: {
- families: ["Ubuntu:500,700", "Fira Mono:500"],
- },
- custom: {
- families: ["Chess"],
- urls: ["/fonts.css"],
- },
- active: () => resolve(null),
- })
- ).catch(() => null),
new Promise((resolve) => {
+ if (!window.speechSynthesis) {
+ resolve(null);
+ }
+
if (speechSynthesis.getVoices().length > 0) {
resolve(null);
} else {
diff --git a/src/player/Player.ts b/src/player/Player.ts
index 629d349..1ba9eeb 100644
--- a/src/player/Player.ts
+++ b/src/player/Player.ts
@@ -4,7 +4,7 @@ import Board from "../board/Board";
import Game from "../game/Game";
import { setState, state } from "../state";
import sfx from "./sfx";
-import Speech, { sanToText } from "./speach";
+import Speech, { sanToText } from "./speech";
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -190,26 +190,28 @@ class Player {
await this.board.frame(position, this.game.header);
this.board.render();
- if (this.ply > 0 && state.siteConfig.speech) {
- this.speech.say(sanToText(position.move?.san as string));
- }
+ if (window.speechSynthesis) {
+ if (this.ply > 0 && state.siteConfig.speech) {
+ this.speech.say(sanToText(position.move?.san as string));
+ }
- if (this.ply > 0 && state.siteConfig.sounds) {
- state.boardConfig.piecesStyle.includes("anarchy")
- ? this.playAnarchySFX(position)
- : this.playSFX(position);
- }
+ if (this.ply > 0 && state.siteConfig.sounds) {
+ state.boardConfig.piecesStyle.includes("anarchy")
+ ? this.playAnarchySFX(position)
+ : this.playSFX(position);
+ }
- if (position.end === 0 && state.siteConfig.speech) {
- const result = this.game.header.Result;
- if (result) {
- this.speech.say(
- result === "1-0"
- ? "White wins!"
- : result === "0-1"
- ? "Black wins!"
- : "Draw!"
- );
+ if (position.end === 0 && state.siteConfig.speech) {
+ const result = this.game.header.Result;
+ if (result) {
+ this.speech.say(
+ result === "1-0"
+ ? "White wins!"
+ : result === "0-1"
+ ? "Black wins!"
+ : "Draw!"
+ );
+ }
}
}
}
diff --git a/src/player/speach.ts b/src/player/speech.ts
similarity index 83%
rename from src/player/speach.ts
rename to src/player/speech.ts
index 0957ddc..8ebaa66 100644
--- a/src/player/speach.ts
+++ b/src/player/speech.ts
@@ -43,11 +43,15 @@ const sanToText = (move: string) => {
return move;
};
-class Speach {
+class Speech {
private voice: SpeechSynthesisVoice | undefined;
constructor() {
- const voices = speechSynthesis.getVoices();
- this.voice = voices.find((voice) => voice.lang === config.lang);
+ if (!window.speechSynthesis) {
+ this.voice = undefined;
+ } else {
+ const voices = speechSynthesis.getVoices();
+ this.voice = voices.find((voice) => voice.lang === config.lang);
+ }
}
say(text: string) {
@@ -63,4 +67,4 @@ class Speach {
}
export { sanToText };
-export default Speach;
+export default Speech;
diff --git a/src/state.ts b/src/state.ts
index 5e3d9ec..05d74e7 100644
--- a/src/state.ts
+++ b/src/state.ts
@@ -94,6 +94,4 @@ const initialState: State = {
const [state, setState] = createStore(initialState);
-console.log(state);
-
export { state, setState };
diff --git a/src/ui/App.css b/src/ui/App.css
index 11d5764..9cbb10c 100644
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -1,6 +1,28 @@
@font-face {
font-family: "Chess";
- src: url("chess.ttf") format("ttf");
+ font-weight: 400;
+ font-display: swap;
+ src: url("/fonts/Chess.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "Ubuntu";
+ font-weight: 500;
+ font-display: swap;
+ src: url("/fonts/Ubuntu-Medium.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "Ubuntu";
+ font-weight: 700;
+ font-display: swap;
+ src: url("/fonts/Ubuntu-Bold.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "Fira Mono";
+ font-display: swap;
+ src: url("/fonts/FiraMono-Medium.ttf") format("truetype");
}
* {
@@ -25,6 +47,31 @@ body {
--header-margin: 6rem;
}
+.invisible {
+ font-size: 0;
+ height: 0;
+}
+
+.ubuntu-font-init {
+ font-family: Ubuntu;
+ font-weight: 500;
+}
+
+.ubuntu-bold-font-init {
+ font-family: Ubuntu;
+ font-weight: 700;
+}
+
+.fira-font-init {
+ font-family: "Fira Mono";
+ font-weight: 500;
+}
+
+.chess-font-init {
+ font-family: Chess;
+ font-weight: 400;
+}
+
.dark {
background-color: #313742;
background-image: url(/img/pattern.png);
diff --git a/src/ui/components/Header.tsx b/src/ui/components/Header.tsx
index 8dbd1cd..1c84d84 100644
--- a/src/ui/components/Header.tsx
+++ b/src/ui/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Component } from "solid-js";
+import { Component, Show } from "solid-js";
import { Handlers } from "../../types";
import { setState, state } from "../../state";
import "./Header.css";
@@ -33,19 +33,21 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
}}
>
-
+
+
+