feat: Added license and link to github

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present Sergei Sergienko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/App.vue

@@ -6,6 +6,7 @@ import VisControls from './components/VisControls.vue'
 import VisMat from './components/VisMat.vue'
 import VisQuat from './components/VisQuat.vue'
 import Help from './components/Help.vue'
+import Links from './components/Links.vue'
 
 provide("isLocal", shallowRef(true))
 provide("isEdit", shallowRef(false))
@@ -27,6 +28,7 @@ provide("snapDenom", shallowRef(6))
   <header>
     <h1>Rotation Converter</h1>
     <Help />
+    <Links />
   </header>
 
   <main>

src/assets/base.css

@@ -1,12 +1,12 @@
-/* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --c-white: #ffffff;
-  --c-white-soft: #f8f8f8;
-  --c-white-mute: #f2f2f2;
+  --c-light-0: #ffffff;
+  --c-light-1: #f8f8f8;
+  --c-light-2: #f2f2f2;
 
-  --c-black: #181818;
-  --c-black-soft: #222222;
-  --c-black-mute: #282828;
+  --c-dark-0: #000000;
+  --c-dark-1: #181818;
+  --c-dark-2: #222222;
+  --c-dark-3: #282828;
 
   --c-indigo: #2c3e50;
 
@@ -17,7 +17,7 @@
 
   --c-text-light-1: var(--c-indigo);
   --c-text-light-2: rgba(60, 60, 60, 0.66);
-  --c-text-dark-1: var(--c-white);
+  --c-text-dark-1: var(--c-light-0);
   --c-text-dark-2: rgba(235, 235, 235, 0.64);
 
   --quat-bg-alpha: 0.1;
@@ -33,9 +33,9 @@
 
 /* semantic color variables for this project */
 :root {
-  --color-background: var(--c-white);
-  --color-background-soft: var(--c-white-soft);
-  --color-background-mute: var(--c-white-mute);
+  --color-background: var(--c-light-0);
+  --color-background-soft: var(--c-light-1);
+  --color-background-mute: var(--c-light-2);
 
   --color-border: var(--c-divider-light-2);
   --color-border-hover: var(--c-divider-light-1);
@@ -46,9 +46,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-background: var(--c-black);
-    --color-background-soft: var(--c-black-soft);
-    --color-background-mute: var(--c-black-mute);
+    --color-background: var(--c-dark-1);
+    --color-background-soft: var(--c-dark-2);
+    --color-background-mute: var(--c-dark-3);
 
     --color-border: var(--c-divider-dark-2);
     --color-border-hover: var(--c-divider-dark-1);

src/assets/main.css

@@ -24,14 +24,6 @@ h2 {
   background-color: black;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
 .tooltip {
   position: relative;
   display: inline-block;
@@ -60,10 +52,10 @@ a,
   visibility: visible;
 }
 
-@media (hover: hover) {
+/* @media (hover: hover) {
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
   }
-}
+} */
 
-@media (min-width: 1024px) {}
+/* @media (min-width: 1024px) {} */

src/components/Help.vue

@@ -90,7 +90,6 @@ button {
     width: 50px;
     height: 50px;
     padding: 0 15px 0 15px;
-    background-color: black;
     border: 1px solid var(--c-divider-dark-1);
     background-color: var(--c-bg-btn);
     border-radius: 50%;

src/components/Links.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import IconGithub from './icons/IconGithub.vue';
+
+const isActive = shallowRef(false)
+</script>
+
+<template>
+    <div class="links">
+        <a href="https://github.com/Divelix/rotation_converter" target="_blank">
+            <IconGithub />
+        </a>
+    </div>
+</template>
+
+<style scoped>
+.links {
+    position: fixed;
+    z-index: 1;
+    top: 35px;
+    right: 85px;
+}
+
+a {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+svg {
+    fill: var(--c-text-dark-2);
+    transition: fill 0.3s;
+}
+
+svg:hover {
+    fill: white;
+}
+
+/* a:hover {
+    background-color: var(--c-bg-btn-hover);
+}
+
+a:active {
+    background-color: var(--c-bg-btn-active);
+} */
+
+.content {
+    z-index: 1;
+    top: 15px;
+    right: 15px;
+    border: 1px solid var(--c-divider-dark-1);
+    background-color: var(--c-bg-btn);
+    padding: 0 70px 20px 70px;
+    display: flex;
+    flex-direction: column;
+}
+
+table {
+    border-collapse: collapse;
+    line-height: 1;
+}
+
+.header-row {
+    color: white;
+    background-color: var(--c-bg-btn-hover);
+}
+
+td {
+    border: 1px solid var(--c-divider-dark-1);
+    padding: 10px;
+}
+</style>

src/components/Vis3D.vue

@@ -1,59 +1,3 @@
-<template>
-  <div class="container">
-    <canvas ref="experience"></canvas>
-    <div class="snap">
-      <Snap />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.container {
-  position: relative;
-}
-
-.snap {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: flex;
-  place-content: center;
-  align-items: center;
-  gap: 0.5em;
-}
-
-span {
-  font-size: 20pt;
-}
-
-.coord {
-  font-size: 30pt;
-  width: 50px;
-  height: 50px;
-  margin: 10px;
-}
-
-.sign {
-  font-size: 20pt;
-  width: 30px;
-  height: 30px;
-  margin: 10px;
-}
-
-.x {
-  color: red
-}
-
-.y {
-  color: greenyellow
-}
-
-.z {
-  color: blue
-}
-</style>
-
-
 <script setup lang="ts">
 import { Axes } from '../types'
 import * as Constants from '@/const';
@@ -74,7 +18,7 @@ const axisCounters: Ref<number[]> = inject("axisCounters")!
 const rotMat: Ref<number[]> = inject("rotMat")!
 const quat: Ref<number[]> = inject("quat")!
 const currAxis: Ref<Axes> = inject("currAxis")!
-const experience = ref<HTMLCanvasElement | null>(null)
+const canvas = ref<HTMLCanvasElement | null>(null)
 const snapSize = computed(() => Math.PI / snapDenom.value)
 
 // Constants
@@ -407,7 +351,7 @@ const loop = () => {
 
 onMounted(() => {
   renderer = new WebGLRenderer({
-    canvas: experience.value as unknown as HTMLCanvasElement,
+    canvas: canvas.value as unknown as HTMLCanvasElement,
     antialias: true,
   })
   renderer.setClearColor(0x282828)
@@ -416,11 +360,66 @@ onMounted(() => {
   controls = new OrbitControls(camera, renderer.domElement)
   controls.enablePan = false
   controls.enableZoom = false
-  experience.value?.addEventListener('wheel', handleScroll)
+  canvas.value?.addEventListener('wheel', handleScroll)
   window.addEventListener("keydown", onKeydown)
   window.addEventListener("keyup", onKeyup)
   window.addEventListener("blur", handleBlur)
   reset()
   loop()
 })
 </script>
+
+<template>
+  <div class="container">
+    <canvas ref="canvas"></canvas>
+    <div class="snap">
+      <Snap />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  position: relative;
+}
+
+.snap {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  place-content: center;
+  align-items: center;
+  gap: 0.5em;
+}
+
+span {
+  font-size: 20pt;
+}
+
+.coord {
+  font-size: 30pt;
+  width: 50px;
+  height: 50px;
+  margin: 10px;
+}
+
+.sign {
+  font-size: 20pt;
+  width: 30px;
+  height: 30px;
+  margin: 10px;
+}
+
+.x {
+  color: red
+}
+
+.y {
+  color: greenyellow
+}
+
+.z {
+  color: blue
+}
+</style>

src/components/icons/IconGithub.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+    <path
+      d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
+  </svg>
+</template>
+
+<style scoped>
+/* path {
+  fill: var(--c-text-dark-2);
+} */
+</style>

vite.config.ts

@@ -3,9 +3,8 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  base: '/rotation_converter/',
+  base: '/rotation_converter',
   plugins: [
     vue(),
   ],