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%;
 }