diff --git a/script.js b/newspaper_test/.ipynb_checkpoints/script-checkpoint.js similarity index 100% rename from script.js rename to newspaper_test/.ipynb_checkpoints/script-checkpoint.js diff --git a/.ipynb_checkpoints/start-checkpoint.html b/newspaper_test/.ipynb_checkpoints/start-checkpoint.html similarity index 100% rename from .ipynb_checkpoints/start-checkpoint.html rename to newspaper_test/.ipynb_checkpoints/start-checkpoint.html diff --git a/newspaper_test/.ipynb_checkpoints/style_1-checkpoint.css b/newspaper_test/.ipynb_checkpoints/style_1-checkpoint.css new file mode 100644 index 0000000..6f30cb7 --- /dev/null +++ b/newspaper_test/.ipynb_checkpoints/style_1-checkpoint.css @@ -0,0 +1,104 @@ +body { + background-color: black; + font: 18px monospace; + } + +#container { + background-color: white; + border: 2px black; + width: 70%; + bottom: 0px; + left: 13%; + right:13%; + position:fixed; + padding: 2% 2% 2% 2%; + margin-bottom: 2%; + z-index: 0; + +} + +/* iframes park */ + +#readme_1 { + position:absolute; + z-index: 0; + left: 13%; + top:5%; + +} +#readme_1:hover { + z-index: 3; +} + +#readme_2 { + position:absolute; + z-index: 1; + left: 25%; + top:15%; +} +#readme_2:hover { + z-index: 3; +} + +#readme_3 { + position:absolute; + z-index: 2; + left: 40%; + top:25%; +} +#readme_3:hover { + z-index: 4; +} + +#readme_4 { + position:absolute; + z-index: 3; + right:13%; + top:35%; +} +#readme_4:hover { + z-index: 3; +} + +body.readme{ + background-color: white; + color:red; +} + +.pink{ + background-color: yellow; +} + +div.readme::selection{ + background-color: fuchsia; + +} + +/* garden/walk*/ + +#gardenSpace { +width: 100%; +height: 100%; +background-color:violet; +position:absolute; +z-index: -1; + +} + +#pane { + position:relative; + width:900px; + height:700px; + border:2px solid red; +} + +#square { + position: absolute; + width: 70px; + height: 115px; + + + +} + + diff --git a/readme/readme_1.html b/newspaper_test/readme/.ipynb_checkpoints/readme_1-checkpoint.html similarity index 100% rename from readme/readme_1.html rename to newspaper_test/readme/.ipynb_checkpoints/readme_1-checkpoint.html diff --git a/newspaper_test/readme/readme_1.html b/newspaper_test/readme/readme_1.html new file mode 100644 index 0000000..f5c780f --- /dev/null +++ b/newspaper_test/readme/readme_1.html @@ -0,0 +1,17 @@ + + + + readme + + + + + +
+Hello Hello Hello Hello Hello Salmon rolls Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Salmon rolls Hello Hello Hello Salmon rolls Hello Hello Hello Hello Hello Hello Hello Hello Salmon rolls Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Salmon rolls Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Salmon rolls Hello Hello +
+ + + + + \ No newline at end of file diff --git a/readme/readme_2.html b/newspaper_test/readme/readme_2.html similarity index 100% rename from readme/readme_2.html rename to newspaper_test/readme/readme_2.html diff --git a/readme/readme_3.html b/newspaper_test/readme/readme_3.html similarity index 100% rename from readme/readme_3.html rename to newspaper_test/readme/readme_3.html diff --git a/readme/readme_4.html b/newspaper_test/readme/readme_4.html similarity index 100% rename from readme/readme_4.html rename to newspaper_test/readme/readme_4.html diff --git a/newspaper_test/script.js b/newspaper_test/script.js new file mode 100644 index 0000000..cd44ae3 --- /dev/null +++ b/newspaper_test/script.js @@ -0,0 +1,87 @@ + + +// all jQuery stuff here + +$(document).ready(function() { + //newspaper passage iframes + $(document).on('click', '#paper_1', function(){ + $("#readme_1").show(); + }); + $(document).on('click', '#paper_2', function(){ + $("#readme_2").show(); + }); + $(document).on('click', '#paper_3', function(){ + $("#readme_3").show(); + }); + $(document).on('click', '#paper_4', function(){ + $("#readme_4").show(); + }); + +});; + + +$(document).ready(function() { +//switch story divs +$("#switchTo2_newspaper").click (function(){ + $("#2_park_newspaper").show(); + $("#1_park").hide(); +}); + +$("#switchTo1_news").click (function(){ + $("#1_park").show(); + $("#2_park_newspaper").hide(); + $("#readme_1,#readme_2,#readme_3,#readme_4").hide(); +}); + +$("#switchTo2_walk").click (function(){ + $("#2_park_walk").show(); + $("#1_park").hide(); + $("#gardenSpace").show(); + +}); + + $("#switchTo1_walk").click (function(){ + $("#2_park_walk").hide(); + $("#1_park").show(); + $("#gardenSpace").hide(); +}); + +//readme 1 salmonRoll +$('.readme').hover( + function(){ $('.salmonRoll1').addClass('pink')}, + function(){ $('.salmonRoll1').removeClass('pink') +}); + + + +// garden moving box +var pane = $('#pane'), + box = $('#square'), + w = pane.width() - box.width(), + d = {}, + x = 3; + +function newv(v,a,b) { + var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0); + return n < 0 ? 0 : n > w ? w : n; +} + +$(window).keydown(function(e) { d[e.which] = true; }); +$(window).keyup(function(e) { d[e.which] = false; }); + +setInterval(function() { + box.css({ + left: function(i,v) { return newv(v, 37, 39); }, + top: function(i,v) { return newv(v, 38, 40); } + }); +}, 20); + + + + + + + + +});; + diff --git a/start.html b/newspaper_test/start.html similarity index 100% rename from start.html rename to newspaper_test/start.html diff --git a/newspaper_test/style_1.css b/newspaper_test/style_1.css new file mode 100644 index 0000000..6f30cb7 --- /dev/null +++ b/newspaper_test/style_1.css @@ -0,0 +1,104 @@ +body { + background-color: black; + font: 18px monospace; + } + +#container { + background-color: white; + border: 2px black; + width: 70%; + bottom: 0px; + left: 13%; + right:13%; + position:fixed; + padding: 2% 2% 2% 2%; + margin-bottom: 2%; + z-index: 0; + +} + +/* iframes park */ + +#readme_1 { + position:absolute; + z-index: 0; + left: 13%; + top:5%; + +} +#readme_1:hover { + z-index: 3; +} + +#readme_2 { + position:absolute; + z-index: 1; + left: 25%; + top:15%; +} +#readme_2:hover { + z-index: 3; +} + +#readme_3 { + position:absolute; + z-index: 2; + left: 40%; + top:25%; +} +#readme_3:hover { + z-index: 4; +} + +#readme_4 { + position:absolute; + z-index: 3; + right:13%; + top:35%; +} +#readme_4:hover { + z-index: 3; +} + +body.readme{ + background-color: white; + color:red; +} + +.pink{ + background-color: yellow; +} + +div.readme::selection{ + background-color: fuchsia; + +} + +/* garden/walk*/ + +#gardenSpace { +width: 100%; +height: 100%; +background-color:violet; +position:absolute; +z-index: -1; + +} + +#pane { + position:relative; + width:900px; + height:700px; + border:2px solid red; +} + +#square { + position: absolute; + width: 70px; + height: 115px; + + + +} + + diff --git a/untitled.txt b/newspaper_test/untitled.txt similarity index 100% rename from untitled.txt rename to newspaper_test/untitled.txt diff --git a/.ipynb_checkpoints/story_v.1-checkpoint.html b/test stories/.ipynb_checkpoints/story_v.1-checkpoint.html similarity index 100% rename from .ipynb_checkpoints/story_v.1-checkpoint.html rename to test stories/.ipynb_checkpoints/story_v.1-checkpoint.html diff --git a/a story_v.2.html b/test stories/a story_v.2.html similarity index 100% rename from a story_v.2.html rename to test stories/a story_v.2.html diff --git a/story_v.1.html b/test stories/story_v.1.html similarity index 100% rename from story_v.1.html rename to test stories/story_v.1.html diff --git a/tree/.ipynb_checkpoints/park-checkpoint.css b/tree/.ipynb_checkpoints/park-checkpoint.css new file mode 100644 index 0000000..847c104 --- /dev/null +++ b/tree/.ipynb_checkpoints/park-checkpoint.css @@ -0,0 +1,327 @@ +@font-face { + font-family: sinistre; + src: url(fonts/Sinistre-S†Caroline.otf); +} +@font-face { + font-family: sinistre; + src: url(fonts/Sinistre-S†Caroline.woff), + url(fonts/Sinistre-S†Caroline.otf); +} +@font-face { + font-family: jolybolditalic; + src: url(fonts/JolyDisplay-BoldDisplayItalic.woff), + url(fonts/JolyDisplay-BoldDisplayItalic.otf); +} + +@font-face { + font-family: jolyregularitalic; + src: url(fonts/JolyDisplay-RegularDisplayItalic.woff), + url(fonts/JolyDisplay-RegularDisplayItalic.otf); +} +@font-face { + font-family: jolyregular; + src: url(fonts/JolyDisplay-RegularDisplay.woff), + url(fonts/JolyDisplay-RegularDisplay.otf); +} + +@font-face { + font-family: jolyheavyitalic; + src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff), + url(fonts/JolyDisplay-HeavyDisplayItalic.otf); +} + + body { + font-family: jolyregular; + font-size: 1.8vw; + + } + + ::-moz-selection { /* Code for Firefox */ + + background: transparent; + } + ::selection { + + background: transparent; + } + + #player_img { + bottom: 35%; + left: 35%; + position:absolute ; + z-index: 20; +} + + +#ground{ + position:relative ; + height:100vh; + width:4000px; +} + + + + +#groundline { + position: fixed; + bottom:0px; + height:83%; + width: 100%; + border-top: 0.1vw solid; +} + + +div.text_container { + bottom: 2%; + left:3%; + right:3%; + position:fixed; + /*border: 1px solid;*/ + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 1em; + margin-inline-end: 1em; + +} + +button{ + -webkit-appearance: none; + background-color: white; + border: 0.1vw black solid; + border-radius: 25vw; + color:black; + cursor:pointer; + font-family: jolybolditalic; +} + +span.button_text{ + font-size: 1.6vw; + padding: 8px; +} + +#player_name{ + font-family: jolybolditalic; +} + +#close_news{ + position:fixed; + top:4%; + right:15%; +} +#newspaper{ + position:fixed; + /* border: solid black 2px;*/ + left:20%; + top:10%; + bottom:25%; + right:20%; + font-family: sinistre; + z-index:30; + font-size: 1.1vw; + max-height:80vw; + border: 1px solid black; + -webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); + -moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); + box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); +} + +.news_title_index{ + font-size: 2vw; + font-family: jolyboldItalic; + text-decoration: underline 2px solid; + +} +.news_title{ + font-size: 1.5vw; + font-family: jolyboldItalic; +} +.news_author{ + text-decoration: underline 1px solid; +} + +.clues{ + text-decoration: underline double 2px #ccb3ff; +} + + +.left_page{ + float:left; + max-width: 50%; + height: 100%; + background: linear-gradient(90deg, white 95%, black 100%); +} + +.index, .school1 , .school2, .school3,.school4, .school5 { + padding: 5%; +} + +.right_page{ + float:right; + max-width: 50%; + height: 100%; + background: linear-gradient(270deg, white 90%,black 100%); + +} + +#arrow_go1, #arrow_go2 { + bottom:2%; + right:2%; + position:absolute; + cursor: pointer; + font-size: 2.5vw; + font-family:jolybolditalic; + +} +#arrow_back1, #arrow_back2 { + bottom:2%; + left:2%; + position:absolute; + cursor: pointer; + font-size: 2.5vw; + font-family:jolybolditalic; +} + + +/*baloons */ + .baloons{ + font-family:sinistre; + font-size: 3.5vw; + + } +#baloon1 { + width: 20vw; + height: 4vw; + border:1px solid black; + background:white; + border-radius: 100vw; + font-size: 1vw; + text-align: center; + left: 15%; + top:5%; + position:absolute; + z-index: 50; + } + #baloon2 { + width: 20vw; + height: 4vw; + border:1px solid black; + background:white; + border-radius: 100vw; + font-size: 1vw; + text-align: center; + right: 10%; + top:61%; + position:absolute; + z-index: 50; + } + #baloon3 { + width: 20vw; + height: 4vw; + border:1px solid black; + background:white; + border-radius: 100vw; + font-size: 1vw; + text-align: center; + left: 10%; + top:60%; + position:absolute; + z-index: 50; + } + #baloon4 { + width: 20vw; + height: 4vw; + border:1px solid black; + background:white; + border-radius: 100vw; + font-size: 1vw; + text-align: center; + right: 8%; + top:52%; + position:absolute; + z-index: 50; + } + + + +/*images*/ + + + +#bench { + bottom: 35%; + left: 20%; + position: absolute; + z-index:18; +} + +#tree1 { + top:5%; + left: 28%; + position: absolute; + +} +#tree2 { + bottom:45%; + left: 8%; + position: absolute; + z-index:16; +} +#tree3 { + bottom:50%; + left: 55%; + position: absolute; + z-index:2; +} + +#newspaperimg { + bottom: 42%; + left: 25%; + position: absolute; + z-index:19; +} + +#flower1 { + bottom:75%; + left: 17%; + position: absolute; +} + +#flower2{ + bottom: 38%; + left: 8%; + position: absolute; + z-index:17; +} + +#flower3{ + bottom: 80%; + left: 65%; + position: absolute; + z-index:17; +} +#flower4{ + bottom: 48%; + left: 48%; + position: absolute; + z-index:17; +} +#flower5{ + bottom: 60%; + right: 14%; + position: absolute; + z-index:17; +} + +#grass1{ + bottom: 30%; + right: 20%; + position: absolute; + z-index:17; +} +#grass2{ + bottom: 80%; + left: 2000px; + position: absolute; + z-index:17; +} + diff --git a/tree/.ipynb_checkpoints/park-checkpoint.html b/tree/.ipynb_checkpoints/park-checkpoint.html new file mode 100644 index 0000000..65c3f4c --- /dev/null +++ b/tree/.ipynb_checkpoints/park-checkpoint.html @@ -0,0 +1,70 @@ + + + + + + park + + + + + + + + +
+ + + + + + + + + + + + + + +

Hello . It's Saturday morning. You are at the park waiting for your friend Amanda. She seems to be really late. + You spot a copy of today's newspaper on the bench close to you. Maybe you want to . You can go for a little walk or just wait for Amanda if you feel like it.

+ + + + + + + + \ No newline at end of file diff --git a/tree/.ipynb_checkpoints/park_N-checkpoint.html b/tree/.ipynb_checkpoints/park_N-checkpoint.html new file mode 100644 index 0000000..8d804be --- /dev/null +++ b/tree/.ipynb_checkpoints/park_N-checkpoint.html @@ -0,0 +1,124 @@ + + + + + + looking for + + + + + + + +
+ + + +
+ + + + +
+ + + + + + + + + + + + + + +
+ + + + + +
+move +
+ + + + + + + + \ No newline at end of file diff --git a/tree/park.css b/tree/park.css index c68b891..847c104 100644 --- a/tree/park.css +++ b/tree/park.css @@ -55,6 +55,7 @@ #ground{ position:relative ; + height:100vh; width:4000px; } @@ -249,78 +250,78 @@ span.button_text{ #bench { bottom: 35%; left: 20%; - position: fixed; + position: absolute; z-index:18; } #tree1 { top:5%; left: 28%; - position: relative; + position: absolute; } #tree2 { bottom:45%; left: 8%; - position: relative; + position: absolute; z-index:16; } #tree3 { bottom:50%; left: 55%; - position: fixed; + position: absolute; z-index:2; } #newspaperimg { bottom: 42%; left: 25%; - position: fixed; + position: absolute; z-index:19; } #flower1 { bottom:75%; left: 17%; - position: fixed; + position: absolute; } #flower2{ bottom: 38%; left: 8%; - position: fixed; + position: absolute; z-index:17; } #flower3{ bottom: 80%; left: 65%; - position: fixed; + position: absolute; z-index:17; } #flower4{ bottom: 48%; left: 48%; - position: fixed; + position: absolute; z-index:17; } #flower5{ bottom: 60%; right: 14%; - position: fixed; + position: absolute; z-index:17; } #grass1{ bottom: 30%; right: 20%; - position: fixed; + position: absolute; z-index:17; } #grass2{ bottom: 80%; left: 2000px; - position: fixed; + position: absolute; z-index:17; } diff --git a/tree/park_N.html b/tree/park_N.html index 7dfbafa..8d804be 100644 --- a/tree/park_N.html +++ b/tree/park_N.html @@ -17,14 +17,14 @@
-
+
- +
@@ -56,17 +56,41 @@ move // player moves var $div = $('#player_img'); + var screenLeftMin = 0; + var screenLeftMax = 870; + + function adjustScroll() { + var playerLeft = parseInt($div.css("left")); + var scrollLeft = $(document).scrollLeft(); + var screenLeft = playerLeft - scrollLeft; + console.log ("screenleft:", screenLeft); + + if (screenLeft > screenLeftMax ) { + $(document).scrollLeft(playerLeft - screenLeftMax) + } + + if (screenLeft < screenLeftMin ) { + $(document).scrollLeft(playerLeft - screenLeftMin) + } + + + } + $(document).keydown(function(e) { switch (e.which) { case 37: $div.css('left', $div.offset().left - 20); + e.preventDefault(); + adjustScroll(); break; case 38: $div.css('top', $div.offset().top - 20); break; case 39: $div.css('left', $div.offset().left + 20); + e.preventDefault(); + adjustScroll(); break; case 40: $div.css('top', $div.offset().top + 20);