adds solution for LangtonApp and BerlinClock

katas/BerlinClock/solutions/supersub0/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

katas/BerlinClock/solutions/supersub0/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

katas/BerlinClock/solutions/supersub0/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

katas/BerlinClock/solutions/supersub0/app.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="max-w-sm mx-auto my-6">
+      <div class="grid grid-cols-4">
+          <div class="col-span-4 flex justify-center">
+              <div class="w-8 h-8 rounded-full border"
+                   :class="{ 'bg-slate-300': seconds > 0 }">
+                  &nbsp;
+              </div>
+          </div>
+
+          <div class="border h-8" :class="{ 'bg-slate-600': fiveHours > 0 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': fiveHours > 1 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': fiveHours > 2 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': fiveHours > 3 }">&nbsp;</div>
+
+          <div class="border h-8" :class="{ 'bg-slate-600': hours > 0 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': hours > 1 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': hours > 2 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': hours > 3 }">&nbsp;</div>
+      </div>
+
+      <div class="grid grid-cols-11">
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 0 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 1 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': fiveMinutes > 2 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 3 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 4 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': fiveMinutes > 5 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 6 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 7 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-600': fiveMinutes > 8 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 9 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': fiveMinutes > 10 }">&nbsp;</div>
+      </div>
+
+      <div class="grid grid-cols-4">
+          <div class="border h-8" :class="{ 'bg-slate-300': minutes > 0 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': minutes > 1 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': minutes > 2 }">&nbsp;</div>
+          <div class="border h-8" :class="{ 'bg-slate-300': minutes > 3 }">&nbsp;</div>
+      </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const seconds = ref(0)
+const fiveHours = ref(0)
+const hours = ref(0)
+const fiveMinutes = ref(0)
+const minutes = ref(0)
+
+setDateTimeData()
+setInterval(() => setDateTimeData(), 1000)
+
+function setDateTimeData(): void {
+    const dateTime = new Date()
+
+    seconds.value = dateTime.getSeconds() % 2
+    fiveHours.value = Math.floor(dateTime.getHours() / 5)
+    hours.value = dateTime.getHours() % 5
+    fiveMinutes.value = Math.floor(dateTime.getMinutes() / 5)
+    minutes.value = dateTime.getMinutes() % 5
+}
+</script>

katas/BerlinClock/solutions/supersub0/assets/css/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

katas/BerlinClock/solutions/supersub0/nuxt.config.ts

@@ -0,0 +1,10 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  css: ['~/assets/css/main.css'],
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+})