diff --git a/mj/.idea/.gitignore b/mj/.idea/.gitignore
deleted file mode 100644
index b58b603..0000000
--- a/mj/.idea/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
diff --git a/mj/.idea/misc.xml b/mj/.idea/misc.xml
deleted file mode 100644
index 28a804d..0000000
--- a/mj/.idea/misc.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/mj/.idea/mj.iml b/mj/.idea/mj.iml
deleted file mode 100644
index 24643cc..0000000
--- a/mj/.idea/mj.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/mj/.idea/modules.xml b/mj/.idea/modules.xml
deleted file mode 100644
index 45d0b26..0000000
--- a/mj/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/mj/icons/refresh.svg b/mj/icons/refresh.svg
new file mode 100644
index 0000000..cc01cb2
--- /dev/null
+++ b/mj/icons/refresh.svg
@@ -0,0 +1,17 @@
+
diff --git a/mj/main.css b/mj/main.css
index 0942bbb..891a106 100644
--- a/mj/main.css
+++ b/mj/main.css
@@ -1,21 +1,52 @@
body {
margin: 0;
- font-family: Sans;
+ font-family: sans-serif;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+.fs,
+body,
+html {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+.card,
+.cp {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.button {
+ background-color: rgba(0, 0, 0, 0);
+ transition: background-color 200ms ease-in-out;
+}
+
+.button:hover {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+
+.cp {
+ color: white;
+ font-family: monospace;
+ font-size: 48px;
}
.card {
- display: flex;
width: 150px;
height: 220px;
- align-items: center;
- justify-content: center;
- background-color: #ddd;
+ background-color: #d8ecbe;
margin: 5px;
float: left;
- box-shadow: #000000 1px 1px 7px -1px;
+ box-shadow: #000000 1px 1px 5px -1px;
font-size: 17pt;
color: #4c4c4c;
opacity: 1;
+ user-select: none;
transition: background-color 200ms ease-in-out,
opacity 200ms ease-in-out,
@@ -25,13 +56,23 @@ body {
}
.selected {
- background-color: #76bce2;
+ background-color: #8bc9ee;
+ z-index: 5;
}
.card.selected:hover {
- background-color: #76bce2;
+ background-color: #8bc9ee;
}
.card:hover {
background-color: #e3cfbb;
+}
+
+.panel {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: #198cfc;
+ box-shadow: #000000 0px 1px 4px 0px;
}
\ No newline at end of file
diff --git a/mj/main.js b/mj/main.js
index 7f47755..5edffa5 100644
--- a/mj/main.js
+++ b/mj/main.js
@@ -1,4 +1,5 @@
-import Card from './card.js'
+import Card from './card.js';
+import Panel from './panel.js';
document.body.innerText = "";
@@ -25,8 +26,21 @@ const vocabulary = [
let deck = [];
let selected = null;
-Card.setBounds(0, 0, window.innerWidth, window.innerHeight)
-for (let i = 0; i < 50; ++i) {
+let panel = new Panel();
+let field = document.createElement("div");
+field.classList.add("fs");
+field.style.position = "relative";
+panel.append(document.body);
+panel.installShuffle(reshuffle);
+document.body.appendChild(field);
+
+window.onresize = function() {
+ Card.setBounds(0, 0, field.offsetWidth, field.offsetHeight);
+ reshuffle();
+}
+
+Card.setBounds(0, 0, field.offsetWidth, field.offsetHeight);
+for (let i = 0; i < 30; ++i) {
let id = Math.floor(Math.random() * vocabulary.length);
let set = vocabulary[id];
for (let s = 0; s < set.length; ++s) {
@@ -39,15 +53,18 @@ for (let i = 0; i < 50; ++i) {
deck = shuffle(deck);
for (let i = 0; i < deck.length; ++i) {
- document.body.appendChild(deck[i].element);
+ field.appendChild(deck[i].element);
}
+panel.startTimer();
+
function onCardClick(card) {
if (selected != null) {
if (card === selected) {
return;
}
if (selected.setId === card.setId && selected.cardId !== card.cardId) {
+ card.select();
score(selected, card);
selected = null;
return;
@@ -69,12 +86,17 @@ function score(c1, c2) {
c2.position(x, y);
c1.rotate(0);
c2.rotate(0);
- c1.element.style.zIndex = "5";
- c2.element.style.zIndex = "5";
setTimeout(fade.bind(null, c1, c2), 200);
}
+function reshuffle() {
+ for (let i = 0; i < deck.length; ++i) {
+ deck[i].disrotate();
+ deck[i].displace();
+ }
+}
+
function fade(c1, c2) {
c1.destructor();
c2.destructor();
diff --git a/mj/panel.js b/mj/panel.js
new file mode 100644
index 0000000..a1360c0
--- /dev/null
+++ b/mj/panel.js
@@ -0,0 +1,123 @@
+const height = 100;
+
+class Panel {
+ constructor() {
+ this.element = document.createElement("div");
+ this.element.classList.add("panel")
+ this.element.style.height = height + "px";
+
+ this._createLeftPanel();
+ this._createRightPanel();
+ this._createCentralPanel();
+
+ this._shuffle = null;
+
+ this._time = null;
+
+ this._updateInterval = setInterval(this._update.bind(this), 53);
+ }
+ destructor() {
+ this.element.remove();
+ }
+ append(element) {
+ element.style.position = "relative";
+ element.style.paddingTop = height + "px";
+ element.appendChild(this.element);
+ }
+ installShuffle(func) {
+ this._shuffle = func;
+ }
+ startTimer() {
+ this._time = Date.now();
+ }
+ _createLeftPanel() {
+ this._leftPanel = document.createElement("div");
+ this._leftPanel.style.position = "absolute";
+ this._leftPanel.style.top = "0";
+ this._leftPanel.style.left = "0";
+
+ this._shuffleButton = document.createElement("div");
+ this._shuffleButton.classList.add("button");
+ this._shuffleButton.style.backgroundImage = "url(icons/refresh.svg)";
+ this._shuffleButton.style.height = height + "px";
+ this._shuffleButton.style.width = height + "px";
+ this._shuffleButton.style.position = "absolute";
+ this._shuffleButton.style.top = "0";
+ this._shuffleButton.style.left = "0";
+ this._shuffleButton.title = "Shuffle";
+ this._shuffleButton.addEventListener("click", this._onShuffle.bind(this));
+
+ this._leftPanel.appendChild(this._shuffleButton);
+
+ this.element.style.paddingLeft = height + "px";
+ this.element.appendChild(this._leftPanel);
+ }
+ _createRightPanel() {
+ this._rightPanel = document.createElement("div");
+ this._rightPanel.style.position = "absolute";
+ this._rightPanel.style.top = "0";
+ this._rightPanel.style.right = "0";
+ this.element.appendChild(this._rightPanel);
+ }
+ _createCentralPanel() {
+ this._centralPanel = document.createElement("div");
+ this._centralPanel.classList.add("fs", "cp");
+ this._centralPanel.style.display = "flex";
+ this._centralPanel.style.alignItems = "center";
+ this._centralPanel.style.justifyContent = "center";
+
+ this._ms = document.createElement("span");
+ this._mds = document.createElement("span");
+ this._ss = document.createElement("span");
+ this._sdmin = document.createElement("span");
+ this._mins = document.createElement("span");
+
+ this._ms.innerText = "000";
+ this._mds.innerText = ":";
+ this._ss.innerText = "00";
+ this._sdmin.innerText = ":";
+ this._mins.innerText = "00";
+
+ this._centralPanel.appendChild(this._mins);
+ this._centralPanel.appendChild(this._sdmin);
+ this._centralPanel.appendChild(this._ss);
+ this._centralPanel.appendChild(this._mds);
+ this._centralPanel.appendChild(this._ms);
+
+ this.element.appendChild(this._centralPanel);
+ }
+ _update() {
+ if (this._time !== null) {
+ let time = Date.now() - this._time;
+ let minutes = Math.floor(time / (1000 * 60));
+ time = time % (1000 * 60);
+ let seconds = Math.floor(time / 1000);
+ time = time % 1000;
+
+ this._mins.innerText = pad(minutes, 2);
+ this._ss.innerText = pad(seconds, 2);
+ this._ms.innerText = pad(time, 3);
+ }
+ }
+ _onShuffle() {
+ if (this._shuffle !== null) {
+ this._shuffle();
+ }
+ }
+}
+
+function pad (num, amount) {
+ let p = pads[amount];
+ let sNum = num.toString();
+ let pref = p[sNum.length];
+ return pref + sNum;
+}
+
+const pads = [
+ [""],
+ ["0", ""],
+ ["00", "0", ""],
+ ["000", "00", "0", ""]
+]
+
+export default Panel;
\ No newline at end of file