feat: data stucture refactor + quality update

lisboa-daniel · Aug 19, 2024 · 89994b2 · 89994b2
1 parent 8c8a2de
commit 89994b2
Show file tree

Hide file tree

Showing 25 changed files with 493 additions and 179 deletions.
diff --git a/public/commands/close_pam.svg b/public/commands/close_pam.svg
diff --git a/public/commands/dash.svg b/public/commands/dash.svg
diff --git a/public/commands/dash_button.svg b/public/commands/dash_button.svg
diff --git a/public/commands/dot.svg b/public/commands/dot.svg
diff --git a/public/commands/open_pam.svg b/public/commands/open_pam.svg
diff --git a/public/commands/plus.svg b/public/commands/plus.svg
diff --git a/public/commands/special1.svg b/public/commands/special1.svg
diff --git a/public/commands/special2.svg b/public/commands/special2.svg
diff --git a/public/commands/team_button_hold.svg b/public/commands/team_button_hold.svg
diff --git a/public/shapiro-115-plus-extd.ttf → public/fonts/shapiro-115-plus-extd.ttf b/public/shapiro-115-plus-extd.ttf → public/fonts/shapiro-115-plus-extd.ttf
diff --git a/public/fonts/shapiro-35-light.otf b/public/fonts/shapiro-35-light.otf
diff --git a/public/fonts/shapiro-5-light.otf b/public/fonts/shapiro-5-light.otf
diff --git a/public/shapiro-75-heavy.ttf → public/fonts/shapiro-75-heavy.ttf b/public/shapiro-75-heavy.ttf → public/fonts/shapiro-75-heavy.ttf
diff --git a/public/fonts/shapiro-95-super-extd.ttf b/public/fonts/shapiro-95-super-extd.ttf
diff --git a/public/fonts/shapiro-97-air.otf b/public/fonts/shapiro-97-air.otf
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -18,12 +18,7 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: #1c1d21;
 }
 
 @layer utilities {
@@ -33,6 +28,10 @@ body {
 }
 
 body input {
-  background-color: azure;
-  color: black;
+  background-color: #484b55;
+  color: white;
+}
+
+.title{
+  font-family: 'font-shapiro95';
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,23 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import localFont from 'next/font/local';
+
 
 const inter = Inter({ subsets: ["latin"] });
 
+
+const myFont = localFont({ src: [
+  {
+    path: '../../public/fonts/shapiro-35-light.otf',
+    weight: '500'
+  },] });
+
+
+
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Kolib",
+  description: "A combo translator for 2XKO",
 };
 
 export default function RootLayout({
@@ -16,7 +27,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={myFont.className}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,34 +4,84 @@ import Image from "next/image";
 import {generateIcons, translateCombo} from '@/app/scripts/translator';
 import { useState } from "react";
 import { ReactNode } from "react";
+import { CommandIconObject, CommandObject } from "./scripts/definitions";
+import { FormControlLabel, FormGroup, Switch } from "@mui/material";
+import Title from "./ui/title";
+import localFont from "next/font/local";
 
+const boldFont = localFont({ src: [
+  {
+    path: '/../../public/fonts/shapiro-95-super-extd.ttf',
+    weight: '500',
+
+  },],
+  variable: '--font-shapiro75h' });
+
+
 export default function Home() {
 
-  const [comboInput, setComboInput] = useState('d.L > L > M > H > S1> S1 > f f >  H > M > df.H>j.H> m>s2');
-  const [iconCombo, setIconCombo] = useState<ReactNode[]>([]);
+  const [comboInput, setComboInput] = useState('d.L > L > M > H > S1> S1 > ff >  H > M > df.H>j.H> m>s2');
+  const [commandCombo, setCommandCombo] = useState<CommandObject[]>([]);
   const [comboTranslation, setComboTranslation] = useState('');
-
+  const [useD, setUseD] = useState(true);
+  const [ignoreDot, setIgnoreDot] = useState(false)
 
 
   const handleClick = (comboInput: string) => {
-  const [comboText, comboArray] =  translateCombo(comboInput);
+  const [comboText, comboArray] =  translateCombo(comboInput, {
+    igDot: ignoreDot,
+    useD: useD
+  });
 
-  setIconCombo(generateIcons(comboArray));
+  setCommandCombo(generateIcons(comboArray));
   setComboTranslation(comboText);
 
 
 }
 
+
   return (
-    <main className="flex min-h-screen w-full flex-col items-center justify-between p-24">
+    <main className="flex min-h-screen w-full flex-col items-start justify-between p-24">
+      <div className="flex flex-row w-full items-start justify-center">
+        <Title text="2XKO Combo Translator" style=" text-center text-4xl " />
+        <p className="text-left">&nbsp;alpha v.0.1</p>
+      </div>
+
+        <div id="form" className="flex flex-col w-full">  
+            <label>Combo recipe</label> 
+            <div className="flex flex-row items-center justify-between">
+              <input className={'w-full text-xl p-2 '} defaultValue={comboInput} onChange={(e) => setComboInput(e.target.value)} name="combo" id="combo" type="text"/>
+              <input className={`text-xl p-2 ml-2 text-[#1c1c1c] bg-[#cdf564] cursor-pointer hover:bg-[#93b63c] font-extrabold ${boldFont.className}`} value={'GO'} type="submit" onClick={() => handleClick(comboInput)}/>
+            </div>
 
-        <h1>Combo translator</h1>
-        <div id="form" className="flex w-full">
-            <label>Combo recipe</label>
-            <input className={'w-full text-xl'} defaultValue={comboInput} onChange={(e) => setComboInput(e.target.value)} name="combo" id="combo" type="text"/>
-            <input className={''} value={'send'} type="submit" onClick={() => handleClick(comboInput)}/>
         </div>
+
+        <div id="settings" className="flex w-full flex-col">
+          <p>Settings</p>
+        <FormGroup>
+          <FormControlLabel control={
+            <Switch
+            checked={useD}
+            onChange={(e) => setUseD(e.target.checked)}
+             inputProps={{ 'aria-label': 'Use Dash as (D) button' }
+             }/>} 
+
+            label="Use Dash as (D) button" />
+
+
+          <FormControlLabel control={
+            <Switch
+            checked={ignoreDot}
+            onChange={(e) => setIgnoreDot(e.target.checked)}
+             inputProps={{ 'aria-label': 'Ignore dot' }
+             }/>} 
+
+            label="Ignore Dot" />
+
 
+        </FormGroup>
+
+        </div>
         <div id="result">
           <p>Combo translation: </p>
           <p>
@@ -40,12 +90,18 @@ export default function Home() {
         </div>
         <div id="images" className="flex flex-row items-start justify-center">
         {
-          iconCombo.map((icon, index) => (
+
+           commandCombo.map((cmd, index) => (
 
-              <span className={'pl-2'} key={index}>{icon}</span>
+              <span className={'pl-2'} key={index}>{cmd.node}</span>
             ))
         }
         </div>
+        <footer className="bg-[#cdf564] w-full  text-gray-900 py-4 px-6 text-center font-extrabold">
+          <p className="text-sm">
+            This is a free tool made by a fan for the FGC / 2XKO community. All rights reserved for Riot Games © 2024
+          </p>
+        </footer>
     </main>
   );
 }
diff --git a/src/app/scripts/definitions.ts b/src/app/scripts/definitions.ts
@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+export type CommandObject = CommandIconObject | CommandTextObject;
+
+export interface CommandIconObject {
+  node : ReactNode,
+  size: number,
+  style?: string,
+}
+
+export interface CommandTextObject {
+  node: ReactNode,
+  style?: string,
+}
+
+
+export interface Command {
+  key : string,
+  icon? : string,
+  alias : string[],
+}
+
+export interface TranslationSettings {
+  igDot : boolean,
+  useD : boolean,
+}