working demo

2022-11-10 12:07:11 +01:00
parent 576f646977
commit a7fe37ecf8
5 changed files with 99 additions and 289 deletions
@@ -2,30 +2,105 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title><!-- TODO -->Change this you moron</title>
-    <link rel="stylesheet" href="style.css">
+    <title>Roster grid</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.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://...">
-    -->
+
+    <style>
+        *, *::after, *::before {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Verdana, serif;
+            color: #F5F5F5;
+        }
+        html, body, main {
+            height: 100vh;
+            width: 100vw;
+            line-height: 1.5;
+            background-color: #212121;
+        }
+        .container {
+            width: 100%;
+            height: fit-content;
+            position: absolute;
+            top: 50%;
+            transform: translate(0, -50%);
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            
+        }
+        .item {
+            position: relative;
+            overflow: hidden;
+            text-align: center;
+            background-color: #616161;
+            border-color: #212121;
+            border-style: solid;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            user-select: none;
+            cursor:pointer;
+        }
+    </style>
 </head>
 <body>
-    <main id="app" style="display:none">
-        <h1>{{title}}</h1>
-        <br>
-        <p v-html="content"></p>
-        <br>
-        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - {{currentYear}}</small>
+    <main id="app">
+        <div class="container">
+            <h1 v-if="items.length === 0"><i>click to add items</i></h1>
+            <div v-for="item in items" class="item" :style="style" @click.stop="removeItem(item)" title="remove item">
+                <b>#{{ item.id }}</b>
+            </div>
+        </div>
    </main>
+    <script>
+        const { createApp } = Vue;
+
+        const app = createApp({
+            data() {
+                return {
+                    items: [],
+                    style: {},
+                    currentId: 0,
+                }
+            },
+            methods: {
+                computeStyle() {
+                    const N = this.items.length;
+                    const W = document.body.scrollWidth;
+                    const H = document.body.scrollHeight;
+                    const r = 6 / 7;
+                    let c = Math.ceil((1 + Math.sqrt(1 + 4 * H * N * r / W)) * W / (2 * H * r));
+                    c = (N / (c-1)) === Math.floor(N / (c - 1)) ? c - 1 : c;
+                    const rw = 100 / c;
+                    this.style = {
+                        'font-size': rw * .3 / 2 + 'vw',
+                        'width': rw + 'vw',
+                        'height': (rw / r) + 'vw',
+                        'border-width': rw * .1 / 3 + 'vw',
+                    };
+                },
+                addItem() {
+                    this.currentId++;
+                    this.items.push({id: this.currentId});
+                    this.computeStyle();
+                },
+                removeItem(item) {
+                    this.items.splice(this.items.indexOf(item), 1);
+                    this.computeStyle();
+                },
+            },
+            mounted: function() {
+                this.computeStyle();
+                addEventListener('resize', this.computeStyle);
+                document.body.addEventListener('click', this.addItem);
+            },
+        });
+
+        app.mount('#app');
+    </script>
 </body>
 </html>