missed all the changes last checkin; also added Dockerfile;

Dockerfile

@@ -0,0 +1,28 @@
+FROM node:14.5.0-alpine
+
+# create destination directory
+RUN mkdir -p /usr/src/kekkon
+WORKDIR /usr/src/kekkon
+
+# update and install dependency
+RUN apk update && apk upgrade
+RUN apk add git
+
+# copy the app, note .dockerignore
+COPY . /usr/src/kekkon/
+RUN yarn install
+
+# build necessary, even if no static files are needed,
+# since it builds the server as well
+RUN yarn build
+
+# expose 3000 on container
+EXPOSE 3000
+
+# set app serving to permissive / assigned
+ENV NUXT_HOST=0.0.0.0
+# set app port
+ENV NUXT_PORT=3000
+
+# start the app
+CMD [ "yarn", "start" ]

pages/index.vue

@@ -1,14 +1,22 @@
 <template>
   <main>
-    <nav>
-      <button>home</button>
-      <button>links 'n stuff</button>
-    </nav>
-    <div class="test-links">
-      <nuxt-link to="/wrongo-and-peanut"> test 1 </nuxt-link>
-      <nuxt-link to="/rayray-and-becs"> test 2 </nuxt-link>
-      <nuxt-link to="/brimame"> test 3 </nuxt-link>
-    </div>
+    <!-- <nav>
+      <button class="btn btn--header" @click="openPopup">
+        <span>☙</span>
+        {{ mappedGuests.Language == "en" ? "click here" : "klik hier" }}
+        <span>❧</span>
+      </button>
+    </nav> -->
+    <!-- <pre>
+      {{ guests }}
+    </pre> -->
+    <!-- <ul class="test-links">
+      <li v-for="guest in allGuests" :key="guest.code">
+        <nuxt-link :to="'/' + guest.code">{{
+          guest.names.join(" & ")
+        }}</nuxt-link>
+      </li>
+    </ul> -->
     <!-- <div class="names">{{ guests.Names }}</div> -->
     <!-- <img
       class="img--bkg"
@@ -19,25 +27,72 @@
       class="img--bkg"
       playsinline
       autoplay
-      muted
       loop
-      poster="polina.jpg"
+      muted
       id="bgvid"
+      :poster="require(`@/assets/images/bkgs/poster.png`)"
     >
+      <!-- :poster="require(`@/assets/images/bkgs/poster.png`)" -->
       <!-- <source src="polina.webm" type="video/webm"> -->
       <source
         :src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
         type="video/mp4"
       />
     </video>
+    <!-- <video
+      class="img--bkg"
+      playsinline
+      autoplay
+      loop
+      poster="https://assets.codepen.io/6093409/river.mp4"
+      id="bgvid"
+      >-->
+    <!-- <source
+        :src="require(`@/assets/images/bkgs/${this.$route.params.code}.webm`)"
+        type="video/webm"
+      />
+      <source
+        :src="require(`@/assets/images/bkgs/${this.$route.params.code}.mp4`)"
+        type="video/mp4"
+      />
+    </video>-->
+    <div v-if="isPopupVisible" class="popup-wrapper">
+      <div class="popup">
+        <button class="x" @click="openPopup">x</button>
+        <h1>this is the header</h1>
+        <p>this is the paragraph</p>
+        <!-- <pre>
+          {{ mappedGuests.Names.length }}
+        </pre> -->
+        <div class="buttons">
+          <button @click="sayYes" class="btn btn--popup">
+            <span>🞄</span>
+            {{ yesText(mappedGuests.Language, mappedGuests.Names.length) }}
+            <span>🞄</span>
+          </button>
+          <button @click="sayNo" class="btn btn--popup">
+            <span>🞄</span>
+            {{ noText(mappedGuests.Language, mappedGuests.Names.length) }}
+            <span>🞄</span>
+          </button>
+        </div>
+      </div>
+    </div>
   </main>
 </template>
 
 <script>
 export default {
   data: () => ({
-    guests: {}
+    guests: {},
+    allGuests: [],
+    isPopupVisible: false
   }),
+  computed: {
+    mappedGuests () {
+      return this.guests && this.guests.records && this.guests.records[0] && this.guests.records[0].fields
+    }
+  },
   async fetch () {
     const res = await fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
       method: 'GET',
@@ -49,7 +104,74 @@ export default {
 
     const json = await res.json()
     console.log(json)
-    this.guests = { ...await json && json.records && json.records[0] && json.records[0].fields }
+    this.guests = { ...await json }
+
+    const res2 = await fetch('https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(IsActive=1)', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
+      }
+    })
+
+    const json2 = await res2.json()
+    console.log(json2)
+    const guestData = [...await json2 && json2.records]
+    this.allGuests = await guestData.map((guest) => {
+      return {
+        code: guest.fields.Code,
+        names: guest.fields.Names
+      }
+    })
+  },
+  methods: {
+    openPopup () {
+      this.isPopupVisible = !this.isPopupVisible
+    },
+    yesText (lang, count) {
+      if (lang === 'en') {
+        return (count > 1 ? 'We' : 'I') + ' will try to make it! 🥳'
+      } else {
+        return (count > 1 ? 'Wij zijn ' : 'Ik ben') + ' er (waarschijnlijk) bij! 🥳'
+      }
+    },
+    noText (lang, count) {
+      if (lang === 'en') {
+        return 'Sorry, ' + (count > 1 ? 'we' : 'I') + ' definitely can\'t make it. 😞'
+      } else {
+        return 'Helaas, ' + (count > 1 ? 'wij zijn' : 'I') + ' er zeker weten niet bij. 😞'
+      }
+    },
+    sayYes () {
+      this.guests = { ...this.guests, records: { ...this.guests.records[0], fields: { ...this.guests.records[0].fields, Status: 'maybe' } } }
+
+      fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
+        },
+        body: this.guests
+      }).then((response) => {
+        console.log(response.status)
+        return response.json()
+      }).then(data => console.log(data))
+    },
+    sayNo () {
+      this.guests = { ...this.guests, records: { ...this.guests.records[0], fields: { ...this.guests.records[0].fields, Status: 'nah' } } }
+
+      fetch(`https://api.airtable.com/v0/appR5dwqGUe1vBaa9/Guest?filterByFormula=(Code='${this.$route.params.code}')`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
+        },
+        body: this.guests
+      }).then((response) => {
+        console.log(response.status)
+        return response.json()
+      }).then(data => console.log(data))
+    }
   }
 }
 </script>
@@ -57,6 +179,23 @@ export default {
 <style>
 html {
   font-size: 2vmin;
+  font-family: "Times New Roman", Times, serif;
+  color: var(--blue);
+}
+
+:root {
+  --b1: #648bc8;
+  --b2: #5b6ba6;
+  --blue: var(--b2);
+  --lightblue: #b2c6eb;
+  --bkg: #dfebfe;
+}
+
+@font-face {
+  font-family: "kingthings_petrockregular";
+  src: url("~assets/fonts/Kingthings_Petrock-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
 }
 
 body {
@@ -66,13 +205,22 @@ body {
 main {
   width: 100vw;
   height: 100vh;
-  background: tan;
+  background: var(--bkg);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
+h1 {
+  font-size: 3rem;
+  font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
+}
+
+p {
+  font-size: 1.5rem;
+}
+
 .img--bkg {
   width: 100vw;
   object-fit: cover;
@@ -83,8 +231,8 @@ main {
   position: fixed;
   padding: 2rem;
   aspect-ratio: 1;
-  background: white;
-  color: blue;
+  background: var(--bkg);
+  color: var(--blue);
   font-size: 2rem;
   border-radius: 999px;
   display: flex;
@@ -95,7 +243,7 @@ main {
 
 .names::before {
   content: "";
-  border: 5px dotted blue;
+  border: 5px dotted var(--blue);
   position: absolute;
   border-radius: 999px;
   width: 90%;
@@ -104,7 +252,7 @@ main {
 
 .names::after {
   content: "";
-  border: 5px dashed blue;
+  border: 5px dashed var(--blue);
   position: absolute;
   border-radius: 999px;
   width: 80%;
@@ -115,23 +263,139 @@ main {
   position: fixed;
   top: 1rem;
   left: 1rem;
+  z-index: 2;
 }
 
 nav {
-  /* sex */
   position: fixed;
   right: 2rem;
   top: 2rem;
   display: flex;
   gap: 1rem;
+  z-index: 2;
 }
 
-button {
-  color: white;
-  background: teal;
+.popup-wrapper {
+  position: fixed;
+  z-index: 2;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.popup-wrapper::after {
+  content: "";
+  position: absolute;
+  z-index: 3;
+  width: calc(100vw + 20px);
+  height: calc(100vh + 20px);
+  backdrop-filter: blur(10px);
+  pointer-events: none;
+}
+
+.popup {
+  background: linear-gradient(to right bottom, var(--bkg), var(--lightblue));
+  border-radius: 0.5rem;
+  position: relative;
+  padding: 1rem 3rem 3rem 3rem;
+  border: 1.5px solid var(--blue);
+  z-index: 4;
+}
+
+.popup::before {
+  content: "";
+  position: absolute;
+  border-radius: 0.5rem;
+  border: 2px dotted var(--blue);
+  top: calc(0.2em);
+  left: 0.2em;
+  bottom: calc(0.2em);
+  right: 0.2em;
+  pointer-events: none;
+}
+
+.btn--header {
+  background: linear-gradient(to right bottom, var(--bkg), var(--lightblue));
+  color: var(--blue);
   padding: 0.5rem 1rem;
-  font-size: 1rem;
+  font-size: 1.5rem;
+  border-radius: 0.2em 1em 0.2em 1em;
+  font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
+  font-weight: 800;
+  border: 1.5px solid var(--blue);
+  transition: all 0.3s;
+  cursor: pointer;
+  position: relative;
+  text-transform: capitalize;
+}
+
+.btn--header:hover {
+  background: linear-gradient(to right bottom, var(--bkg), var(--blue));
+}
+
+.btn--header::before {
+  content: "";
+  position: absolute;
+  border-radius: 0.2em 0.9em 0.2em 0.9em;
+  border: 2px dotted var(--blue);
+  top: calc(0.2em);
+  left: 0.2em;
+  bottom: calc(0.2em);
+  right: 0.2em;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.btn--popup {
+  padding: 0.5em 1em;
+  font-size: 1.5rem;
+  border-radius: 999rem;
+  border: none;
+  color: var(--bkg);
+  background: linear-gradient(to right bottom, var(--b1), var(--b2));
+  display: flex;
+  align-items: center;
+  font-family: "kingthings_petrockregular", "Times New Roman", Times, serif;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.btn--popup span:first-child {
+  display: inline-block;
+  margin-right: 0.8em;
+}
+
+.btn--popup span:last-child {
+  display: inline-block;
+  margin-left: 0.8em;
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+li {
+  display: inline-block;
+  list-style-type: none;
+}
+
+li a {
+  background: var(--bkg);
+  color: var(--blue);
+  padding: 0.5em 1em;
   border-radius: 999px;
   border: 0;
+  display: inline-block;
+  font-size: 0.75rem;
 }
 </style>