TITLE

commit 4706498199496193e47d7c6ab9a88356499a3874 Author: sqozz Date: Tue Oct 4 20:41:50 2016 +0200 initial commit diff --git a/assets/frame1/0.JPG b/assets/frame1/0.JPG new file mode 100644 index 0000000..3e1b3f7 Binary files /dev/null and b/assets/frame1/0.JPG differ diff --git a/assets/frame1/1.JPG b/assets/frame1/1.JPG new file mode 100644 index 0000000..ecc39e3 Binary files /dev/null and b/assets/frame1/1.JPG differ diff --git a/assets/frame1/2.JPG b/assets/frame1/2.JPG new file mode 100644 index 0000000..5ac3309 Binary files /dev/null and b/assets/frame1/2.JPG differ diff --git a/assets/frame1/3.JPG b/assets/frame1/3.JPG new file mode 100644 index 0000000..945531c Binary files /dev/null and b/assets/frame1/3.JPG differ diff --git a/assets/frame1/4.JPG b/assets/frame1/4.JPG new file mode 100644 index 0000000..6c21e5e Binary files /dev/null and b/assets/frame1/4.JPG differ diff --git a/assets/frame1/5.JPG b/assets/frame1/5.JPG new file mode 100644 index 0000000..aa46d50 Binary files /dev/null and b/assets/frame1/5.JPG differ diff --git a/assets/frame1/6.JPG b/assets/frame1/6.JPG new file mode 100644 index 0000000..4a946db Binary files /dev/null and b/assets/frame1/6.JPG differ diff --git a/assets/frame1/7.JPG b/assets/frame1/7.JPG new file mode 100644 index 0000000..c918146 Binary files /dev/null and b/assets/frame1/7.JPG differ diff --git a/assets/frame2/0.JPG b/assets/frame2/0.JPG new file mode 100644 index 0000000..d03f26f Binary files /dev/null and b/assets/frame2/0.JPG differ diff --git a/assets/frame2/1.JPG b/assets/frame2/1.JPG new file mode 100644 index 0000000..c96b3b4 Binary files /dev/null and b/assets/frame2/1.JPG differ diff --git a/assets/frame2/2.JPG b/assets/frame2/2.JPG new file mode 100644 index 0000000..1d58a45 Binary files /dev/null and b/assets/frame2/2.JPG differ diff --git a/assets/frame2/3.JPG b/assets/frame2/3.JPG new file mode 100644 index 0000000..94817e2 Binary files /dev/null and b/assets/frame2/3.JPG differ diff --git a/assets/frame2/4.JPG b/assets/frame2/4.JPG new file mode 100644 index 0000000..755a6ae Binary files /dev/null and b/assets/frame2/4.JPG differ diff --git a/assets/frame2/5.JPG b/assets/frame2/5.JPG new file mode 100644 index 0000000..712fc98 Binary files /dev/null and b/assets/frame2/5.JPG differ diff --git a/assets/frame2/6.JPG b/assets/frame2/6.JPG new file mode 100644 index 0000000..e91c586 Binary files /dev/null and b/assets/frame2/6.JPG differ diff --git a/assets/frame2/7.JPG b/assets/frame2/7.JPG new file mode 100644 index 0000000..b4dd082 Binary files /dev/null and b/assets/frame2/7.JPG differ diff --git a/css/.index.css.swp b/css/.index.css.swp new file mode 100644 index 0000000..0a30890 Binary files /dev/null and b/css/.index.css.swp differ diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..1f150cb --- /dev/null +++ b/css/index.css @@ -0,0 +1,42 @@ +html, body { + height: 100%; + margin: 0px; + overflow: hidden; +} + +body { + display: flex; + background-color: black; +} + +.side { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +#left.side { + width: 55%; +} + +#right.side { + width: 45%; +} + +#left.side .frame { + background-size:contain; + background-position: center; + background-repeat: no-repeat; +} + +#right.side .frame { + background-size:contain; + background-position: center; + background-repeat: no-repeat; +} + +.frame { + width: 100%; + height: 100%; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..6f4101e --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + TITLE + + + + +

+ + diff --git a/js/.index.js.swp b/js/.index.js.swp new file mode 100644 index 0000000..f6af66a Binary files /dev/null and b/js/.index.js.swp differ diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..326e52b --- /dev/null +++ b/js/index.js @@ -0,0 +1,86 @@ +MAX_IMG_NUMBER = 7 +ASSET_PATH = "\"assets/frame1/" +ASSET_SUFFIX = ".JPG\"" + +var frames = [ + { + DOMElement : "", + IMGCounter : 0, + }, + { + DOMElement : "", + IMGCounter : 0, + }, + { + DOMElement : "", + IMGCounter : 0, + } +] + +FOOBAR = "" + +document.addEventListener('DOMContentLoaded', function() { + frames[0].DOMElement = document.querySelector("#left.side .frame") + frames[1].DOMElement = document.querySelector("#right.side .frame") + + frames.forEach(function(val, i) { + if (frames[i].DOMElement != "") { + nextImage(frames[i]) + } + }); + +}, false); + +document.addEventListener("keypress", function(keyEvent) { + switch (keyEvent.key) { + case "q": + targetFrame = frames[0] + prevImage(targetFrame) + break; + case "w": + targetFrame = frames[0] + nextImage(targetFrame) + break; + case "a": + targetFrame = frames[1] + prevImage(targetFrame) + break; + case "s": + targetFrame = frames[1] + nextImage(targetFrame) + break; + case "y": + targetFrame = frames[2] + prevImage(targetFrame) + break; + case "x": + targetFrame = frames[2] + nextImage(targetFrame) + 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) +} + +function prevImage(targetFrame) { + if (targetFrame.IMGCounter <= 0) { + targetFrame.IMGCounter = MAX_IMG_NUMBER + } else { + targetFrame.IMGCounter-- + } + + setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX) +} + +function setFrameImage(frame, imgPath) { + frame.style.backgroundImage = "url(" + imgPath + ")" +} \ No newline at end of file diff --git a/test.html b/test.html new file mode 100644 index 0000000..d2f70c2 --- /dev/null +++ b/test.html @@ -0,0 +1,55 @@ + + + + + TITLE + + + + + + + + +

+ + +u"left" class="side"> +