From 2613c391db80076fe72b35670e6ee70b340a9ed0 Mon Sep 17 00:00:00 2001
From: koehr <n@koehr.in>
Date: Thu, 26 Apr 2018 21:32:07 +0200
Subject: [PATCH] generate level bigger than viewport

---
 src/Field.vue                                 |  41 +++++++++++-------
 src/assets/rock_gravel.png                    | Bin 0 -> 2942 bytes
 src/assets/{soil01.png => soil.png}           | Bin
 .../{soil_gravel01.png => soil_gravel.png}    | Bin
 4 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/rock_gravel.png
 rename src/assets/{soil01.png => soil.png} (100%)
 rename src/assets/{soil_gravel01.png => soil_gravel.png} (100%)

diff --git a/src/Field.vue b/src/Field.vue
index c271ecc..7b2b3b4 100644
--- a/src/Field.vue
+++ b/src/Field.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="field" @click="handleClick">
+  <div id="field" @click="handleClick">
     <input v-keep-focussed type="text"
       @keydown.down="goDown($event)"
       @keydown.up="goUp($event)"
@@ -7,21 +7,23 @@
       @keydown.left="goLeft($event)"
       @keydown.space="jump($event)"
     />
-    <div id="level-indicator">x:{{ x }}, y:{{ y }}</div>
+    <div id="wrap">
+      <template v-for="(row, y) in rows">
+        <div v-for="(block, x) in row" class="block" :class="[block.type]" :data-x="x" :data-y="y" />
+      </template>
+    </div>
     <div id="player" :class="[player_direction]" :data-x="player_x" :data-y="player_y" />
-    <template v-for="(row, y) in rows">
-      <div v-for="(block, x) in row" class="block" :class="[block.type]" :data-x="x" :data-y="y" />
-    </template>
+    <div id="level-indicator">x:{{ x }}, y:{{ y }}</div>
   </div>
 </template>
 
 <script>
 import Level from './level'
 
-const WIDTH = 32
-const HEIGHT = 32
+const WIDTH = 32 + 2
+const HEIGHT = 32 + 2
 const PLAYER_X = ~~(WIDTH / 2) - 1
-const PLAYER_Y = HEIGHT - 16
+const PLAYER_Y = HEIGHT - 17
 const level = new Level(WIDTH, HEIGHT)
 
 export default {
@@ -137,14 +139,14 @@ export default {
 </script>
 
 <style>
-.field {
+#field {
   position: relative;
-  display: flex;
-  flex-flow: row wrap;
   width: 1024px;
+  height: 1024px;
   margin: auto;
+  overflow: hidden;
 }
-.field > input {
+#field > input {
   position: absolute;
   opacity: 0;
   display: block;
@@ -176,6 +178,15 @@ export default {
   background-position: center;
   background-repeat: no-repeat;
 }
+#wrap {
+  position: absolute;
+  top: -32px;
+  left: -32px;
+  width: 1088px;
+  height: 1088px;
+  display: flex;
+  flex-flow: row wrap;
+}
 .block         { background-color: #56F; }
 .block.grass   { background-image: url(./assets/grass01.png); }
 
@@ -205,9 +216,9 @@ export default {
 .block.tree_trunk_right_mixed  { background-image: url(./assets/tree_trunk_right_mixed.png); }
 .block.tree_root_right_mixed   { background-image: url(./assets/tree_root_right_mixed.png); }
 
-.block.soil    { background-image: url(./assets/soil01.png); }
-.block.soil_gravel { background-image: url(./assets/soil_gravel01.png); }
-.block.stone_gravel { background-color: #444; /* background-image: url(./assets/soil_gravel01.png) */; }
+.block.soil    { background-image: url(./assets/soil.png); }
+.block.soil_gravel { background-image: url(./assets/soil_gravel.png); }
+.block.stone_gravel { background-image: url(./assets/rock_gravel.png); }
 .block.stone   { background-image: url(./assets/rock.png); }
 .block.bedrock { background-image: url(./assets/bedrock.png); }
 .block.cave    { background-color: #000; }
diff --git a/src/assets/rock_gravel.png b/src/assets/rock_gravel.png
new file mode 100644
index 0000000000000000000000000000000000000000..b407ef8be707c700b895bd76865a5c2575058f11
GIT binary patch
literal 2942
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

literal 0
HcmV?d00001

diff --git a/src/assets/soil01.png b/src/assets/soil.png
similarity index 100%
rename from src/assets/soil01.png
rename to src/assets/soil.png
diff --git a/src/assets/soil_gravel01.png b/src/assets/soil_gravel.png
similarity index 100%
rename from src/assets/soil_gravel01.png
rename to src/assets/soil_gravel.png