design; improvements;

3 years ago · 943085259f
3 changed files with 52 additions and 29 deletions
--- a/css/app.css
+++ b/css/app.css
@ -1,13 +1,14 @@
				@@ -1,13 +1,14 @@
 body {
    font-family: Arial, sans-serif;
+    background-image: url('../assets/sand/fishTile_001.png');
 }

 .rod {
-    float: right;
    width: 50px;
    height: 300px;
    border: 1px solid black;
-    background-color: lightblue;
+    /*background-color: lightblue;*/
+    background-image: url('../assets/water/fishTile_089.png') ;
    padding: 0;

    display: flex;
@ -26,8 +27,7 @@ body {
				@@ -26,8 +27,7 @@ body {

 .pull {
    background-color: cornflowerblue;
-    width: 250px;
-    height: 250px;
+    height: 100px;
    border-radius: 15px;
    border: 5px solid darkblue;

@ -36,11 +36,13 @@ body {
				@@ -36,11 +36,13 @@ body {
    justify-content: space-around;
    align-items: center;

-    font-size: 4.7em;
-    user-select: none;
    color: white;
 }

+.pull * {
+    user-select: none;
+}
+
 .pull:active {
    background-color: #a4bbe5;
    margin-top: 3px;
@ -70,4 +72,5 @@ body {
				@@ -70,4 +72,5 @@ body {
    margin: 0;
    padding: 0;
    background-color: greenyellow;
+    z-index: 50;
 }
--- a/index.html
+++ b/index.html
@ -4,37 +4,48 @@
				@@ -4,37 +4,48 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fishy</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css" integrity="sha512-DIW4FkYTOxjCqRt7oS9BFO+nVOwDL4bzukDyDtMO7crjUZhwpyrWBFroq+IqRe6VnJkTpRAS6nhDvf0w+wHmxg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="css/app.css">
 </head>
 <body>

-<div id="root">
-    <div class="rod">
-        <p class="hook" :style="'margin-bottom: ' + force * 2 + 'px'"></p>
-        <div v-if="fishy" class="fish" :style="'bottom: '+fishy.position+'px'">
-            <img :src="fishy.sprite" alt="fishy.sprite"><br/>
-            <div class="fishyScoreIndicatorWrapper">
-                <div class="fishyScoreIndicator" :style="'width: '+(fishyScore)+'%;'"></div>
+<div id="root" class="container">
+    <div class="row">
+        <div class="col-12">
+            Score: {{ score }}<br/>
+            <a href="javascript:" v-on:click="deployFish()" v-if="!fishy">let there be fish</a>
+        </div>
+        <div class="col-4">
+            <div class="rod">
+                <p class="hook" :style="'margin-bottom: ' + force * 2 + 'px'"></p>
+                <div v-if="fishy" class="fish" :style="'bottom: '+fishy.position+'px'">
+                    <img :src="fishy.sprite" alt="fishy.sprite"><br/>
+                    <div class="fishyScoreIndicatorWrapper">
+                        <div class="fishyScoreIndicator" :style="'width: '+(fishyScore)+'%;'"></div>
+                    </div>
+                </div>
+            </div></div>
+        <div class="col-8">
+            <div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false">
+                <span>PULL</span>
            </div>
        </div>
+        <div class="col-12">
+<!--            Force: {{ force }}<br/>-->
+<!--            Pulling: {{ pull }}<br/>-->
+            <template v-if="fishy">
+<!--                Fishy-position: {{ fishyPosition }}<br/>-->
+                Fishy-name: {{ fishy.name }}<br/>
+<!--                FishyScore: {{ fishyScore }}<br/>-->
+            </template>
+        </div>
    </div>
-
-    Score: {{ score }}<br/>
-    Force: {{ force }}<br/>
-    Pulling: {{ pull }}<br/>
-    <template v-if="fishy">
-        Fishy-position: {{ fishyPosition }}<br/>
-        Fishy-name: {{ fishy.name }}<br/>
-        FishyScore: {{ fishyScore }}<br/>
-    </template>
-    <br/>
-    <div class="pull" v-on:pointerdown="pull = true" v-on:pointerup="pull = false">
-        <span>PULL</span>
-    </div>
-    <a href="javascript:" v-on:click="deployFish()" v-if="!fishy">let there be fish</a>
 </div>
 </div>

+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://unpkg.com/vue@next"></script>
 <script src="js/app.js"></script>
 </body>
--- a/js/app.js
+++ b/js/app.js
@ -15,6 +15,7 @@ const FishApp = {
				@@ -15,6 +15,7 @@ const FishApp = {
                fishMovementIntervalID: null
            },
            fishy: null,
+            fishiesCaught: [],
            fishies: [
                {
                    name: 'Franz the Flying Fishy',
@ -121,10 +122,15 @@ const FishApp = {
				@@ -121,10 +122,15 @@ const FishApp = {
            window.clearInterval(this.intervals.fishMovementIntervalID);

            this.score += this.fishy.points;
+            this.fishyCaught.push(this.fishy);
+
            this.fishy = null;
            this.pull = false;

-            alert('fischi ist jetzt dein freund');
+            iziToast.success({
+                title: 'fischi ist jetzt dein freund',
+                position: 'topCenter'
+            });
        },
        fishyFled() {
            window.clearInterval(this.intervals.fishMovementIntervalID);
@ -132,7 +138,10 @@ const FishApp = {
				@@ -132,7 +138,10 @@ const FishApp = {
            this.fishy = null;
            this.pull = false;

-            alert('fischi fort!');
+            iziToast.warning({
+                title: 'fischi fort!',
+                position: 'topCenter'
+            });
        }
    }
 };