tool to read any day tetris piece

2021-08-29 21:43:14 +02:00
parent c698fa380e
commit b3b22ee5b9
23 changed files with 145 additions and 0 deletions
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Change this you moron</title>
+    <link rel="stylesheet" href="style.css">
+    <script type="text/javascript" src="lib/vue.min.js"></script>
+    <script type="text/javascript" src="main.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- card related -->
+    <!--
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:title" content="">
+    <meta property="twitter:title" content="">
+    <meta property="og:description" content="">
+    <meta property="twitter:description" content="">
+    <meta property="og:image" content="https://.../preview_640x320.jpg">
+    <meta property="twitter:image" content="">
+    <meta property="org:url" content="https://...">
+    -->
+</head>
+<body>
+    <main id="app" style="display:none">
+        <h1>{{title}}</h1>
+        <h2>Tetris piece by day</h2>
+        <input type="date" v-model="tetris_input" />
+        <br>
+        <br>
+        <div class="tetris">
+            <img :src="tetris_path" />
+        </div>
+        <br>
+        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="https://github.com/Klemek/watchy">Github Repository</a> - 2021</small>
+    </main>
+</body>
+</html>
@@ -0,0 +1,51 @@
+/* exported app, utils */
+
+images = ['piece0_0', 'piece0_1',
+  'piece1_0', 'piece1_1',
+  'piece2_0', 'piece2_1', 'piece2_2', 'piece2_3',
+  'piece3_0', 'piece3_1', 'piece3_2', 'piece3_3',
+  'piece4_0', 'piece4_1',
+  'piece5_0',
+  'piece6_0', 'piece6_1', 'piece6_2', 'piece6_3'];
+
+let app = {
+  el: '#app',
+  data: {
+    title: 'Watchy tools',
+    tetris_input: '',
+    tetris_path: 'img/piece0_0.png'
+  },
+  methods: {
+    compute_tetris: function() {
+      const self = this;
+      const date = new Date(self.tetris_input);
+      const v = Math.floor(self.random_cpp(date) * images.length);
+      self.tetris_path = `img/${images[v]}.png`;
+    },
+    random_cpp: function (date) {
+      let seed = date.getFullYear() - 1970;
+      seed = seed * 12 + (date.getMonth() + 1);
+      seed = seed * 31 + date.getDate();
+    
+      let v = Math.pow(seed, 6/7);
+      v *= (Math.sin(v) + 1);
+    
+      return v - Math.floor(v);
+    },
+  },
+  watch: {
+    tetris_input: 'compute_tetris',
+  },
+  'mounted': function () {
+    const self = this;
+    console.log('app mounted');
+    setTimeout(() => {
+      self.$el.setAttribute('style', '');
+    });
+    self.tetris_input = (new Date()).toISOString().substr(0, 10);
+  }
+};
+
+window.onload = () => {
+  app = new Vue(app);
+};
@@ -0,0 +1,52 @@
+* {
+    box-sizing: border-box;
+    font-family: Verdana, serif;
+    color: #424242;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    max-width: 100%;
+}
+
+body {
+    background-color: #F5F5F5;
+}
+
+main {
+    padding: 1.5rem;
+    margin: auto;
+    background-color: #EEEEEE;
+    min-height: 100%;
+}
+
+h1 {
+    margin-bottom: .5em;
+}
+
+table{
+    border-collapse: collapse;
+    width:100%;
+    font-size: .9em;
+}
+
+@media only screen and (min-width: 768px) {
+    main {
+        max-width: 42rem;
+    }
+    table{
+        font-size:inherit;
+    }
+}
+
+.tetris {
+    background-color: #AEAEAE;
+    padding: 1em;
+    max-width: 10em;
+}
+
+.tetris img{
+    width: 100%;
+}