dao-game / commit
Removed snackbar HTML and instead the snackbar is being added automatically.
public/index.html | 2 --
public/local.html | 2 --
public/remote.html | 4 +--
public/styles.css | 57 ++--------------------------------------
src/game.ts | 2 +-
src/remote-game.ts | 22 +++-------------
src/{online.ts => remote.ts} | 0
src/snackbar.ts | 28 ++++++++++++++++++++
src/types.ts | 14 +++-------
src/utils.ts | 11 --------
tools/esbuild-build-and-serve.ts | 4 ++-
tools/esbuild-settings.ts | 9 +++++--
tools/esbuild-watch.ts | 4 ++-
tools/esbuild.ts | 4 ++-
14 files changed, 55 insertions(+), 108 deletions(-)
diff --git a/public/index.html b/public/index.html
index defd512..8994e4f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,8 +46,6 @@
<a href="https://gitlab.com/fuzzy-rp/dao-game" target="_blank" rel="noopener">source code</a>
</p>
</div>
-
- <div id="snackbar" class="info"></div>
</body>
</html>
\ No newline at end of file
diff --git a/public/local.html b/public/local.html
index c3fc3cf..4c9952d 100644
--- a/public/local.html
+++ b/public/local.html
@@ -63,8 +63,6 @@
</p>
</div>
- <div id="snackbar"></div>
-
</body>
</html>
\ No newline at end of file
diff --git a/public/remote.html b/public/remote.html
index ff94ed7..4f57b0d 100644
--- a/public/remote.html
+++ b/public/remote.html
@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="yin-yang.svg" type="image/svg+xml" />
<link rel="stylesheet" href="styles.css" />
- <script defer src="js/online.js"></script>
+ <script defer src="js/remote.js"></script>
</head>
<body>
@@ -61,8 +61,6 @@
</p>
</div>
- <div id="snackbar" class="info"></div>
-
<div id="other-mouse">
<img src="./cursor.png" alt="cursor" />
</div>
diff --git a/public/styles.css b/public/styles.css
index 79f8c94..379f53a 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -225,7 +225,6 @@
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
- visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
background-color: #333; /* Black background color */
@@ -237,60 +236,8 @@
z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the snackbar */
bottom: 30px; /* 30px from the bottom */
-}
-
-/* Show the snackbar when clicking on a button (class added with JavaScript) */
-#snackbar.show {
- visibility: visible; /* Show the snackbar */
- /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
- However, delay the fade out process for 2.5 seconds */
- -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
- animation: fadein 0.5s, fadeout 0.5s 2.5s;
-}
-
-/* Animations to fade the snackbar in and out */
-@-webkit-keyframes fadein {
- from {
- bottom: 0;
- opacity: 0;
- }
- to {
- bottom: 30px;
- opacity: 1;
- }
-}
-
-@keyframes fadein {
- from {
- bottom: 0;
- opacity: 0;
- }
- to {
- bottom: 30px;
- opacity: 1;
- }
-}
-
-@-webkit-keyframes fadeout {
- from {
- bottom: 30px;
- opacity: 1;
- }
- to {
- bottom: 0;
- opacity: 0;
- }
-}
-
-@keyframes fadeout {
- from {
- bottom: 30px;
- opacity: 1;
- }
- to {
- bottom: 0;
- opacity: 0;
- }
+ font-family: var(--font-family);
+ font-size: 20px;
}
/* Modal from https://www.w3schools.com/howto/howto_css_modals.asp */
diff --git a/src/game.ts b/src/game.ts
index 2cfd4ee..674d488 100644
--- a/src/game.ts
+++ b/src/game.ts
@@ -118,7 +118,7 @@ export class Game implements IGame {
const isP1Turn = this.currentPlayerId === player1Id;
const playerId = isP1Turn ? player1Id : player2Id;
- this._moveHistory.push(new Move(playerId, source, dest));
+ this._moveHistory.push({ playerId, source, dest });
gameBoard.move(source, dest);
const result = checkForWin(isP1Turn);
diff --git a/src/remote-game.ts b/src/remote-game.ts
index 8d642b3..85285ed 100644
--- a/src/remote-game.ts
+++ b/src/remote-game.ts
@@ -3,7 +3,8 @@ import { LocalGame } from './local-game';
import { showModal } from './modal';
import { useSessionStorage } from './storage';
import { Coord, Move, MoveResult } from './types';
-import { delay, generateHash, showSnackbar } from './utils';
+import { delay, generateHash } from './utils';
+import { showSnackbar } from "./snackbar";
interface LocalData {
id: string;
@@ -22,22 +23,6 @@ const { getter: getData, setter: setData } = useSessionStorage<LocalData>('dao-g
const otherMouseElement = document.getElementById('other-mouse');
const shareContainer = document.getElementById('share-container');
const shareLinkButton = document.getElementById('share-link');
-const openInNewTab = (url: string) => {
- const openInSystemDefault = false;
- if (openInSystemDefault) {
- window.open(`microsoft-edge:${url}`, '_blank');
- } else {
- // opening in the same browser causes a copy of the session storage,
- // so we clear the session storage, open the url, and restore the session storage
- const data = getData();
- sessionStorage.clear();
- try {
- window.open(url, '_blank');
- } finally {
- setData(data);
- }
- }
-};
const minString = (a: string, b: string): string => (a < b ? a : b);
const maxString = (a: string, b: string): string => (a > b ? a : b);
const getFirstPlayerId = (playerId1: string, playerId2: string) => {
@@ -195,7 +180,6 @@ export class PeerGame extends LocalGame {
showSnackbar('Url copied to clipboard');
};
shareContainer.classList.remove('invisible');
- // openInNewTab(newUrl);
}
});
@@ -208,5 +192,5 @@ export class PeerGame extends LocalGame {
}
export const playGame = async () => {
- const game = await PeerGame.createPeerGame();
+ await PeerGame.createPeerGame();
};
diff --git a/src/online.ts b/src/remote.ts
similarity index 100%
rename from src/online.ts
rename to src/remote.ts
diff --git a/src/snackbar.ts b/src/snackbar.ts
new file mode 100644
index 0000000..ebe4861
--- /dev/null
+++ b/src/snackbar.ts
@@ -0,0 +1,28 @@
+import { delay } from "./utils";
+
+export async function showSnackbar(
+ text: string,
+ fadeDurationMs: number = 500,
+ showDurationMs: number = 3000) {
+
+ const div = document.createElement('div');
+ div.id = 'snackbar';
+ div.classList.add('info');
+ div.classList.add('show');
+ div.innerText = text;
+ document.body.appendChild(div);
+
+ const invisibleKeyframe = {
+ opacity: 0,
+ bottom: '0px'
+ };
+ const visibleKeyframe = {
+ opacity: 1,
+ bottom: '30px'
+ };
+ const options = { duration: fadeDurationMs, iterations: 1 };
+ await div.animate([invisibleKeyframe, visibleKeyframe], options).finished;
+ await delay(showDurationMs);
+ await div.animate([visibleKeyframe, invisibleKeyframe], options).finished;
+ div.parentNode.removeChild(div);
+}
diff --git a/src/types.ts b/src/types.ts
index 9dfa8e0..57072be 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -46,16 +46,10 @@ export class Coord {
return allDirections;
}
}
-
-export class Move {
- public source: Coord;
- public dest: Coord;
- public playerId: string;
- constructor(playerId: string, source: Coord, dest: Coord) {
- this.source = source;
- this.dest = dest;
- this.playerId = playerId;
- }
+export interface Move {
+ source: Coord;
+ dest: Coord;
+ playerId: string;
}
export interface MoveResult {
diff --git a/src/utils.ts b/src/utils.ts
index b97d40e..fd7e87c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -19,14 +19,3 @@ export async function delay(delayInMs: number) {
});
}
-export function showSnackbar(text) {
- // Get the snackbar DIV
- var x = document.getElementById("snackbar");
-
- // Add the "show" class to DIV
- x.className = "show";
- x.innerText = text;
-
- // After 3 seconds, remove the show class from DIV
- setTimeout(function () { x.className = x.className.replace("show", ""); }, 3000);
-}
\ No newline at end of file
diff --git a/tools/esbuild-build-and-serve.ts b/tools/esbuild-build-and-serve.ts
index 144ba95..d2fa260 100644
--- a/tools/esbuild-build-and-serve.ts
+++ b/tools/esbuild-build-and-serve.ts
@@ -1,6 +1,8 @@
import esbuild from 'esbuild';
import http from 'http';
-import { serveOptions, buildOptions, hostPort } from './esbuild-settings'
+import { serveOptions, buildOptions, hostPort, clearOutDir } from './esbuild-settings'
+
+clearOutDir();
esbuild.serve(serveOptions, buildOptions).then((result) => {
const { host, port } = result;
diff --git a/tools/esbuild-settings.ts b/tools/esbuild-settings.ts
index d6c5afd..59f1054 100644
--- a/tools/esbuild-settings.ts
+++ b/tools/esbuild-settings.ts
@@ -1,13 +1,18 @@
import esbuild from 'esbuild';
+import fs from 'fs'
export const hostPort = 3000;
+const outDir = 'public/js';
export const serveOptions: esbuild.ServeOptions = {
servedir: 'public',
};
export const buildOptions: esbuild.BuildOptions = {
- entryPoints: ['src/local.ts', 'src/online.ts'],
+ entryPoints: ['src/local.ts', 'src/remote.ts'],
bundle: true,
- outdir: 'public/js',
+ outdir: outDir,
sourcemap: true,
};
+export function clearOutDir() {
+ fs.rmSync(outDir, { recursive: true, force: true });
+}
\ No newline at end of file
diff --git a/tools/esbuild-watch.ts b/tools/esbuild-watch.ts
index e37f236..49a3d03 100644
--- a/tools/esbuild-watch.ts
+++ b/tools/esbuild-watch.ts
@@ -1,4 +1,6 @@
import esbuild from 'esbuild';
-import { buildOptions } from './esbuild-settings'
+import { buildOptions, clearOutDir } from './esbuild-settings'
+
+clearOutDir();
esbuild.build(buildOptions).catch(() => process.exit(1))
\ No newline at end of file
diff --git a/tools/esbuild.ts b/tools/esbuild.ts
index e9dce4e..b02895b 100644
--- a/tools/esbuild.ts
+++ b/tools/esbuild.ts
@@ -1,4 +1,6 @@
import esbuild from 'esbuild';
-import { serveOptions, buildOptions, hostPort } from './esbuild-settings'
+import { serveOptions, buildOptions, hostPort, clearOutDir } from './esbuild-settings'
+
+clearOutDir();
esbuild.build(buildOptions).catch(() => process.exit(1))
\ No newline at end of file