diff --git a/assets/fpk2/0.JPG b/assets/fpk2/0.JPG
new file mode 100644
index 0000000..3e1b3f7
Binary files /dev/null and b/assets/fpk2/0.JPG differ
diff --git a/assets/fpk2/1.JPG b/assets/fpk2/1.JPG
new file mode 100644
index 0000000..ecc39e3
Binary files /dev/null and b/assets/fpk2/1.JPG differ
diff --git a/assets/fpk2/2.JPG b/assets/fpk2/2.JPG
new file mode 100644
index 0000000..5ac3309
Binary files /dev/null and b/assets/fpk2/2.JPG differ
diff --git a/assets/fpk2/3.JPG b/assets/fpk2/3.JPG
new file mode 100644
index 0000000..945531c
Binary files /dev/null and b/assets/fpk2/3.JPG differ
diff --git a/assets/fpk2/4.JPG b/assets/fpk2/4.JPG
new file mode 100644
index 0000000..6c21e5e
Binary files /dev/null and b/assets/fpk2/4.JPG differ
diff --git a/assets/fpk2/5.JPG b/assets/fpk2/5.JPG
new file mode 100644
index 0000000..aa46d50
Binary files /dev/null and b/assets/fpk2/5.JPG differ
diff --git a/assets/fpk2/6.JPG b/assets/fpk2/6.JPG
new file mode 100644
index 0000000..4a946db
Binary files /dev/null and b/assets/fpk2/6.JPG differ
diff --git a/assets/fpk2/7.JPG b/assets/fpk2/7.JPG
new file mode 100644
index 0000000..c918146
Binary files /dev/null and b/assets/fpk2/7.JPG differ
diff --git a/css/.index.css.swo b/css/.index.css.swo
new file mode 100644
index 0000000..d399644
Binary files /dev/null and b/css/.index.css.swo differ
diff --git a/css/index.css b/css/index.css
index 1f150cb..38c3927 100644
--- a/css/index.css
+++ b/css/index.css
@@ -24,6 +24,10 @@ body {
width: 45%;
}
+#fpk.side {
+ width: 100%;
+}
+
#left.side .frame {
background-size:contain;
background-position: center;
@@ -36,6 +40,12 @@ body {
background-repeat: no-repeat;
}
+#fpk.side .frame {
+ background-size:contain;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
.frame {
width: 100%;
height: 100%;
diff --git a/fpk2.html b/fpk2.html
new file mode 100644
index 0000000..c024c77
--- /dev/null
+++ b/fpk2.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>TITLE</title>
+ <link rel="stylesheet" href="css/index.css">
+ </head>
+ <body>
+ <script src="js/index.js"></script>
+ <div id="fpk" class="side">
+ <div class="frame"></div>
+ </div>
+ </body>
+</html>
diff --git a/js/index.js b/js/index.js
index 326e52b..409d15b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,19 +1,23 @@
MAX_IMG_NUMBER = 7
ASSET_PATH = "\"assets/frame1/"
-ASSET_SUFFIX = ".JPG\""
+ASSET_SUFFIX = ".JPG"
+SET_COOKIE = false
var frames = [
{
- DOMElement : "",
+ DOMElement : null,
IMGCounter : 0,
+ ASSET_FOLDER : "assets/frame1/",
},
{
- DOMElement : "",
+ DOMElement : null,
IMGCounter : 0,
+ ASSET_FOLDER : "assets/frame2/",
},
{
- DOMElement : "",
+ DOMElement : null,
IMGCounter : 0,
+ ASSET_FOLDER : "assets/fpk2/",
}
]
@@ -22,53 +26,132 @@ FOOBAR = ""
document.addEventListener('DOMContentLoaded', function() {
frames[0].DOMElement = document.querySelector("#left.side .frame")
frames[1].DOMElement = document.querySelector("#right.side .frame")
-
+ frames[2].DOMElement = document.querySelector("#fpk.side .frame")
+
frames.forEach(function(val, i) {
- if (frames[i].DOMElement != "") {
+ if (frames[i].DOMElement != null) {
nextImage(frames[i])
}
});
-
+
+ old_cookies = document.cookie
+ setInterval(function() {
+ var new_cookies = document.cookie
+ if (old_cookies != new_cookies && !SET_COOKIE) {
+ var cookie = new_cookies
+ var deviderPos = cookie.indexOf("=")
+ var name = deviderPos > -1 ? cookie.substr(0, deviderPos) : cookie;
+ var value = cookie.substr(deviderPos + 1, cookie.length)
+
+ if (name != "") {
+ console.log("processing remote keypress: " + value )
+ processKeypress(value)
+ cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+ }
+ document.cookie = cookie
+ old_cookies = new_cookies
+ } else {
+ SET_COOKIE = false
+ }
+ }, 10)
}, false);
+
+
+function deleteAllCookies() {
+ var cookies = document.cookie.split(";");
+
+ for (var i = 0; i < cookies.length; i++) {
+ var cookie = cookies[i];
+ var eqPos = cookie.indexOf("=");
+ var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+ document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+ }
+}
+
document.addEventListener("keypress", function(keyEvent) {
- switch (keyEvent.key) {
+ processKeypress(keyEvent.key)
+}, false);
+
+function processKeypress(keypress) {
+ switch (keypress) {
case "q":
targetFrame = frames[0]
- prevImage(targetFrame)
+ if (targetFrame.DOMElement != null) {
+ prevImage(targetFrame)
+ SET_COOKIE = false
+ } else {
+ console.log("frame not available, setting cookie")
+ document.cookie = "key="+keypress
+ SET_COOKIE = true
+ }
break;
case "w":
targetFrame = frames[0]
- nextImage(targetFrame)
+ if (targetFrame.DOMElement != null) {
+ nextImage(targetFrame)
+ SET_COOKIE = false
+ } else {
+ console.log("frame not available, setting cookie")
+ document.cookie = "key="+keypress
+ SET_COOKIE = true
+ }
break;
case "a":
targetFrame = frames[1]
- prevImage(targetFrame)
+ if (targetFrame.DOMElement != null) {
+ prevImage(targetFrame)
+ SET_COOKIE = false
+ } else {
+ console.log("frame not available, setting cookie")
+ document.cookie = "key="+keypress
+ SET_COOKIE = true
+ }
break;
case "s":
targetFrame = frames[1]
- nextImage(targetFrame)
+ if (targetFrame.DOMElement != null) {
+ nextImage(targetFrame)
+ SET_COOKIE = false
+ } else {
+ console.log("frame not available, setting cookie")
+ document.cookie = "key="+keypress
+ SET_COOKIE = true
+ }
break;
case "y":
targetFrame = frames[2]
- prevImage(targetFrame)
+ if (targetFrame.DOMElement != null) {
+ prevImage(targetFrame)
+ SET_COOKIE = false
+ } else {
+ console.log("frame not available, setting cookie")
+ document.cookie = "key="+keypress
+ SET_COOKIE = true
+ }
break;
case "x":
targetFrame = frames[2]
- nextImage(targetFrame)
+ if (targetFrame.DOMElement != null) {
+ nextImage(targetFrame)
+ SET_COOKIE = false
+ } else {
+ console.log("frame not available, setting cookie")
+ document.cookie = "key="+keypress
+ SET_COOKIE = true
+ }
break;
}
-}, false);
+}
function nextImage(targetFrame) {
- console.log(targetFrame)
if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) {
targetFrame.IMGCounter = 0
} else {
targetFrame.IMGCounter++
}
- setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
+ setFrameImage(targetFrame.DOMElement, "\"" + targetFrame.ASSET_FOLDER + targetFrame.IMGCounter + ASSET_SUFFIX + "\"")
}
function prevImage(targetFrame) {
@@ -78,9 +161,9 @@ function prevImage(targetFrame) {
targetFrame.IMGCounter--
}
- setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
+ setFrameImage(targetFrame.DOMElement, "\"" + targetFrame.ASSET_FOLDER + targetFrame.IMGCounter + ASSET_SUFFIX + "\"")
}
function setFrameImage(frame, imgPath) {
frame.style.backgroundImage = "url(" + imgPath + ")"
-}
\ No newline at end of file
+}
diff --git a/index.html b/masterframe.html
similarity index 100%
rename from index.html
rename to masterframe.html