Merge pull request #23 from brick-trader/feat/editor

Landing page and new editor

README.md

@@ -1,35 +1,133 @@
-# Nuxt 3 Minimal Starter
+<div id="top"></div>
 
-Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
+<!-- PROJECT SHIELDS -->
 
-## Setup
+[<div align="center"> ![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![MIT License][license-shield]][license-url]
+[![Issues][issues-shield]][issues-url]
+[![Issues Closed][issues-closed-shield]</div>][issues-closed-url]
 
-Make sure to install the dependencies:
+<br />
 
-```bash
-pnpm install --shamefully-hoist
-```
+<!-- PROJECT LOGO -->
 
-## Development Server
+![brick-trader-frontend](https://socialify.git.ci/brick-trader/brick-trader-frontend/image?font=KoHo&name=1&owner=1&pattern=Circuit%20Board&theme=Light&description=1)
 
-Start the development server on http://localhost:3000
+<br />
+<div align="center">
+<p align="center">
+    <a href="https://github.com/brick-trader/brick-trader-frontend"><strong>Explore Usage »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/brick-trader/brick-trader-frontend/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/brick-trader/brick-trader-frontend/issues">Request Feature</a>
+  </p>
+</div>
 
-```bash
-pnpm run dev
-```
+<!-- TABLE OF CONTENTS -->
 
-## Production
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li><a href="#about-the-project">About The Project</a></li>
+    <li><a href="#getting-started">Getting Started</a></li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+  </ol>
+</details>
 
-Build the application for production:
+<!-- ABOUT THE PROJECT -->
 
-```bash
-pnpm run build
-```
+## Screenshots
 
-Locally preview production build:
+![product](https://github.com/brick-trader/brick-trader-frontend/blob/main/assets/product.png)
 
-```bash
-pnpm run preview
-```
+## About The Project
 
-Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information.
+`brick-trader` is a web-based trading strategy builder that allows you to build your own trading strategy with blocks, and we also provides a backtesting tool to test your strategy.
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+To use `brick-trader`, head over to [our website](https://github.com/brick-trader/brick-trader-frontend).
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- ROADMAP -->
+
+## Roadmap
+
+- [ ] Add more tests.
+
+See the [open issues](https://github.com/brick-trader/brick-trader-frontend/issues)
+for a full list of proposed features (and known issues).
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to
+learn, inspire, and create. Any contributions you make are **greatly
+appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and
+create a pull request. You can also simply open an issue with the tag
+"enhancement". Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feat/amazing-feature`)
+3. Commit your Changes with
+   [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
+4. Push to the Branch (`git push origin feat/amazing-feature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- LICENSE -->
+
+## License
+
+Distributed under the GPL-3.0 License. See
+[LICENSE](https://github.com/brick-trader/brick-trader-frontend/blob/main/LICENSE)
+for more information.
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+<!-- CONTACT -->
+
+## Contact
+
+### Contributors
+
+<a href="https://github.com/brick-trader/brick-trader-frontend/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=brick-trader/brick-trader-frontend" />
+</a>
+
+### Project Link
+
+- <https://github.com/brick-trader/brick-trader-frontend>
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+[contributors-shield]: https://img.shields.io/github/contributors/brick-trader/brick-trader-frontend.svg?style=for-the-badge
+[contributors-url]: https://github.com/brick-trader/brick-trader-frontend/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/brick-trader/brick-trader-frontend.svg?style=for-the-badge
+[forks-url]: https://github.com/brick-trader/brick-trader-frontend/network/members
+[stars-shield]: https://img.shields.io/github/stars/brick-trader/brick-trader-frontend.svg?style=for-the-badge
+[stars-url]: https://github.com/brick-trader/brick-trader-frontend/stargazers
+[issues-shield]: https://img.shields.io/github/issues/brick-trader/brick-trader-frontend.svg?style=for-the-badge
+[issues-url]: https://github.com/brick-trader/brick-trader-frontend/issues
+[issues-closed-shield]: https://img.shields.io/github/issues-closed/brick-trader/brick-trader-frontend.svg?style=for-the-badge
+[issues-closed-url]: https://github.com/brick-trader/brick-trader-frontend/issues?q=is%3Aissue+is%3Aclosed
+[license-shield]: https://img.shields.io/github/license/brick-trader/brick-trader-frontend.svg?style=for-the-badge
+[license-url]: https://github.com/brick-trader/brick-trader-frontend/blob/main/LICENSE

app.vue

@@ -1,31 +1,27 @@
 <template>
-  <div>
-    <ClientOnly>
-      <Editor @generate="test" />
-    </ClientOnly>
-  </div>
+  <NuxtLoadingIndicator />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 
-<script setup lang="ts">
-import { Stock } from "./stock/stock";
-import { Ticker } from "./types/stock/ticker";
-import { runtime } from "~/plugins/blockly/runtume";
-const indicatorts = await import("indicatorts");
-
-const config = useRuntimeConfig();
-const { data: stockData } = await useFetch<Ticker>(
-  `${config.public.apiBaseUrl}/tickers/2330.TW/historical-data?start=1980-01-01`,
-);
-
-// prepare runtime
-const stock = new Stock(stockData.value);
+<style>
+@import url("https://fonts.googleapis.com/css2?family=Quantico&family=Silkscreen&display=swap");
+*,
+*::before,
+*::after {
+  font-family: "Quantico", monospace;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-if (indicatorts && stock && runtime && process.client) {
-  console.log("Runtime ready");
+body {
+  width: 100vw;
+  height: 100vh;
 }
 
-function test(code: string) {
-  console.log(code);
-  eval(code);
+.blocklyTreeLabel {
+  font-family: "Quantico", monospace;
 }
-</script>
+</style>

components/Navbar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const route = useRoute();
+const path = computed(() => route.path);
+</script>
+
+<template>
+  <nav>
+    <div>
+      <NuxtLink to="/">
+        <div id="title">© Brick Trader</div>
+      </NuxtLink>
+    </div>
+    <div v-if="path != '/editor'" class="button">
+      <NuxtLink to="/editor">
+        <pre>▶   Continue Editing Strategy</pre>
+      </NuxtLink>
+    </div>
+    <div v-if="path != '/dashboard'" class="button">
+      <NuxtLink to="/dashboard">
+        <pre>See Backtest Result   ▶</pre>
+      </NuxtLink>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 4rem;
+  background: #ff9f1c;
+}
+
+nav > div {
+  margin: 0 2em;
+}
+
+#title {
+  font-size: calc(0.75vw + 0.6em);
+  color: #111;
+  font-weight: bold;
+  text-align: center;
+  font-family: "Silkscreen";
+  text-shadow: 0 0 2px #fff;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.5em 1em;
+  border-radius: 5px;
+  background: #5700ad;
+  font-weight: bold;
+}
+
+nav > div > a {
+  color: #ffc779;
+  text-decoration: none;
+}
+</style>

components/chart/Chart.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Chart } from "chart.js";
+
+const options = {
+  elements: {
+    point: {
+      radius: 0,
+    },
+  },
+};
+const chartCanvas = ref<HTMLCanvasElement | null>(null);
+const props = defineProps<{
+  data: any;
+}>();
+const chart = ref(null);
+
+onMounted(() => {
+  chart.value = new Chart(chartCanvas.value, {
+    type: "line",
+    data: props.data,
+    options,
+  });
+});
+
+watch(
+  () => props.data,
+  () => {
+    chart.value.destroy();
+    chart.value = new Chart(chartCanvas.value, {
+      type: "line",
+      data: props.data,
+      options,
+    });
+  },
+);
+</script>
+
+<template>
+  <div class="chart-container">
+    <canvas ref="chartCanvas"></canvas>
+  </div>
+</template>
+
+<style scoped>
+.chart-container {
+  position: relative;
+  width: 90vw;
+}
+</style>

components/cube/Cube.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="cube-wrapper">
+    <div class="cube">
+      <div class="cube-face cube-face-front"></div>
+      <div class="cube-face cube-face-back"></div>
+      <div class="cube-face cube-face-left"></div>
+      <div class="cube-face cube-face-right"></div>
+      <div class="cube-face cube-face-top"></div>
+      <div class="cube-face cube-face-bottom"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cube-wrapper {
+  perspective: 1000px;
+}
+
+.cube {
+  width: 300px;
+  height: 300px;
+  position: relative;
+  margin: 0 auto;
+  margin-top: 150px;
+  transform-style: preserve-3d;
+  transform-origin: center center -200px;
+  animation: around 30s linear infinite;
+}
+
+.cube-face {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  box-shadow: inset 0px 0px 100px 0px #333;
+  position: absolute;
+  transform-origin: center;
+  text-align: center;
+  line-height: 3;
+}
+
+.cube-face-back {
+  transform: translateZ(-300px);
+}
+
+.cube-face-left {
+  transform: rotateY(-90deg) translateX(-150px) translateZ(150px);
+}
+
+.cube-face-right {
+  transform: rotateY(90deg) translateX(150px) translateZ(150px);
+}
+
+.cube-face-top {
+  transform: rotateX(-90deg) translateY(150px) translateZ(150px);
+}
+
+.cube-face-bottom {
+  transform: rotateX(90deg) translateY(-150px) translateZ(150px);
+}
+
+@keyframes around {
+  from {
+    transform: rotateX(360deg) rotateY(360deg);
+  }
+}
+</style>