🌵🐘 Updated with Glitch

vanessayuenn · Jan 24, 2018 · fc06bae · Leshka163rus · Apr 17, 2022 · Trungthanh92
1 parent ce9f968
commit fc06bae
Show file tree

Hide file tree

Showing 15 changed files with 301 additions and 1 deletion.
diff --git a/.config/configstore/update-notifier-npm.json b/.config/configstore/update-notifier-npm.json
@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1516796960586
+}
diff --git a/.config/configstore/update-notifier-serve.json b/.config/configstore/update-notifier-serve.json
@@ -0,0 +1,10 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1499782708058,
+	"update": {
+		"latest": "6.0.2",
+		"current": "5.2.2",
+		"type": "major",
+		"name": "serve"
+	}
+}
diff --git a/.config/configstore/update-notifier-serve.json.1195833916 b/.config/configstore/update-notifier-serve.json.1195833916
@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1497395416720
+}
diff --git a/.config/configstore/update-notifier-serve.json.1587055911 b/.config/configstore/update-notifier-serve.json.1587055911
@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1499564159184
+}
diff --git a/.config/configstore/update-notifier-serve.json.3137924473 b/.config/configstore/update-notifier-serve.json.3137924473
@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1499564159184
+}
diff --git a/.config/configstore/update-notifier-serve.json.3177954483 b/.config/configstore/update-notifier-serve.json.3177954483
@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1497395416720
+}
diff --git a/.config/configstore/update-notifier-serve.json.3867454747 b/.config/configstore/update-notifier-serve.json.3867454747
@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1497395416720
+}
diff --git a/.config/configstore/update-notifier-serve.json.3972972356 b/.config/configstore/update-notifier-serve.json.3972972356
@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1497395416720
+}
diff --git a/.glitch-assets b/.glitch-assets
@@ -0,0 +1,3 @@
+{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
+{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
+{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
diff --git a/README.md b/README.md
@@ -1 +1,7 @@
-# the-noun-game
+# Getting Started with VueJS
+
+The Progressive JavaScript Framework
+
+> Remix this project as a default template for VueJS
+
+https://vuejs.org/
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Get Started VueJS</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="https://unpkg.com/tachyons" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Magra">
+  <link rel="stylesheet" href="/styles.css" />
+	<script src="https://unpkg.com/getlibs"></script>
+</head>
+<body>
+	<div id="app"></div>
+
+	<script>
+		System.import('./index.js');
+	</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "the-noun-game",
+  "version": "0.0.1",
+  "description": "",
+  "main": "",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.16.2",
+    "the-noun-project": "^2.0.1"
+  },
+  "engines": {
+    "node": "8.6.x"
+  },
+  "license": "MIT"
+}
diff --git a/public/index.js b/public/index.js
@@ -0,0 +1,102 @@
+const Vue = require('vue')
+
+const app = new Vue({
+  el: '#app',
+
+  data: {
+    icon: {},
+    iconNext:{},
+    started: true,
+    score: 0,
+    timePerIcon: 20000,
+    time: 300000,
+    answer: new Array()
+  },
+
+  created: function () {
+    this.fetchIcon().then(data => {
+      this.icon = data.icon
+    })
+    this.fetchIcon().then(data => {
+      this.iconNext = data.icon
+    })
+    window.addEventListener('keyup', this.checkKey)
+  },
+
+  beforeDestroy: function () {
+    // remove listener
+  },
+
+  methods: {
+
+    fetchIcon: () => {
+      return fetch('/icon').then(data => data.json())
+    },
+
+    checkKey: function (e) {
+      switch (true) {
+        case (e.keyCode === 8):    // backspace
+          const del = this.answer.pop()
+          if (del === ' '){
+            this.answer.pop()
+          }
+          break
+        case (e.keyCode === 13):    // enter
+          break
+        case (e.keyCode > 47 && e.keyCode < 91):
+          if (this.icon.term[this.answer.length] === ' '){
+            this.answer.push(' ')
+          }
+          this.answer.push(String.fromCharCode(e.keyCode))
+          break
+        default:
+          break
+      }
+    },
+
+  },
+
+  template: `
+    <div class="vh-100 flex flex-column items-center justify-center">
+      <div class="flex flex-column items-center w-100 w-50-ns">
+        <guess :term=icon.term :answer=answer></guess>
+        <img class="mv2" :src=icon.preview_url />
+        <img class="dn" :src=iconNext.preview_url />
+      </div>
+    </div>
+  `
+})
+
+const guess = Vue.component('guess', {
+  props: ['term', 'answer'],
+
+  computed: {
+
+  },
+
+  methods: {
+    outputAnswer: function(i) {
+      if (i >= this.answer.length) {
+        return ''
+      } else {
+        return this.answer[i]
+      }
+    },
+
+    checkAnswer: function(i) {
+      return i >= this.answer.length || this.term[i].toLowerCase() === this.answer[i].toLowerCase()
+    }
+  },
+
+  template: `
+    <h2>
+      <span 
+       v-for="(ch, i) in term" 
+       class="w1 dib mh1 bw2 code fw1"
+       :class="{bb: ch !== ' ', red: !checkAnswer(i)}"
+      >{{ outputAnswer(i) }}
+      </span>
+    </h2>
+    <input type="text" ></input>
+  `,
+})
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,4 @@
+body {
+  font-family: 'Magra', sans-serif;
+  background: floralwhite;
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,112 @@
+const express = require('express')
+const NounProject = require('the-noun-project')
+
+const app = express()
+const np = new NounProject({
+  key: process.env.NOUN_PROJ_APIKEY,
+  secret: process.env.NOUN_PROJ_SECRET
+})
+
+app.use(express.static('public'))
+
+app.get('/', (req, res) => {
+  res.sendFile(__dirname + '/index.html');
+})
+
+app.get('/icon', (req, res) => {
+  res.json({
+  "icon": {
+    "attribution": "Shinto gateway by Lluisa Iborra from Noun Project",
+    "attribution_preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/attribution/1014145-600.png",
+    "collections": [{
+      "author": {
+        "location": "Granollers, Barcelona, ES",
+        "name": "Lluisa Iborra",
+        "permalink": "/marialuisa.iborra",
+        "username": "marialuisa.iborra"
+      },
+      "author_id": "2129742",
+      "date_created": "2017-04-19 13:17:00",
+      "date_updated": "2017-04-19 13:17:00",
+      "description": "",
+      "id": "32708",
+      "is_collaborative": "",
+      "is_featured": "0",
+      "is_published": "1",
+      "is_store_item": "0",
+      "name": "Shinto gateway",
+      "permalink": "/marialuisa.iborra/collection/shinto-gateway",
+      "slug": "shinto-gateway",
+      "sponsor": {},
+      "sponsor_campaign_link": "",
+      "sponsor_id": "",
+      "tags": [],
+      "template": "24"
+    }],
+    "date_uploaded": "2017-04-19",
+    "id": "1014145",
+    "is_active": "1",
+    "is_explicit": "0",
+    "license_description": "creative-commons-attribution",
+    "nounji_free": "0",
+    "permalink": "/term/shinto-gateway/1014145",
+    "preview_url": "https://d30y9cdsu7xlg0.cloudfront.net/png/1014145-200.png",
+    "preview_url_42": "https://d30y9cdsu7xlg0.cloudfront.net/png/1014145-42.png",
+    "preview_url_84": "https://d30y9cdsu7xlg0.cloudfront.net/png/1014145-84.png",
+    "sponsor": {},
+    "sponsor_campaign_link": null,
+    "sponsor_id": "",
+    "tags": [{
+      "id": 268271,
+      "slug": "shinto-gateway"
+    }, {
+      "id": 1803,
+      "slug": "entrance"
+    }, {
+      "id": 6224,
+      "slug": "gate"
+    }, {
+      "id": 268272,
+      "slug": "japanese-joinery"
+    }, {
+      "id": 3740,
+      "slug": "shrine"
+    }, {
+      "id": 3741,
+      "slug": "torii"
+    }],
+    "term": "Shinto gateway",
+    "term_id": 268271,
+    "term_slug": "shinto-gateway",
+    "uploader": {
+      "location": "Granollers, Barcelona, ES",
+      "name": "Lluisa Iborra",
+      "permalink": "/marialuisa.iborra",
+      "username": "marialuisa.iborra"
+    },
+    "uploader_id": "2129742",
+    "year": 2017
+  }
+})
+  // const maxTries = 3
+  // const handler = (numTry) => {
+  //   if (numTry < maxTries) {
+  //     const randomId = Math.floor(Math.random() * 1538985)
+  //     np.getIconById(randomId, (err, data) => {
+  //       if (err) {
+  //         handler(numTry++)
+  //       } else {
+  //         res.json(data)
+  //       }
+  //     })
+  //   } else {
+  //     res.status(500)
+  //   }
+  // }
+
+  // handler(0)
+})
+
+const listener = app.listen(process.env.PORT, () => {
+  console.log(`Your app is listening on port ${listener.address().port}`)
+})