scambier/n0mbers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Commit before breaking stuff

Browse Source
This commit is contained in:
Simon Cambier 2022-02-09 21:27:26 +01:00
parent d441658180
commit eda068951f
17 changed files with 259 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/algo.ts
View File

@ -1,10 +1,22 @@
import { operators, pool } from './globals' import { operators, pool } from './globals'
import { OperatorType } from './types' import { Operation, OperatorType } from './types'
import { randRange } from './utils' import { randRange } from './utils'
type HistoryType = { a: number; b: number; op: OperatorType }[] type HistoryType = { a: number; b: number; op: OperatorType }[]
export function operate(operator: OperatorType, valA: number, valB: number): number { export function isOperationValid(op: Operation): boolean {
return (
!!op.operator &&
!!op.left &&
!!op.right &&
Number.isInteger(operate(op.operator, op.left?.value, op.right?.value))
)
}
export function operate(
operator: OperatorType,
valA: number,
valB: number,
): number {
switch (operator) { switch (operator) {
case '+': case '+':
return valA + valB return valA + valB

14
src/components/HelloWorld.vue
View File

@ -1,16 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
msg: string; msg: string;
}>(); }>()
</script> </script>
<template> <template>
<div class="greetings"> <div class="greetings">
<h1 class="green">{{ msg }}</h1> <h1 class="green">
{{ msg }}
</h1>
<h3> <h3>
You’ve successfully created a project with You’ve successfully created a project with
<a target="_blank" href="https://vitejs.dev/">Vite</a> + <a
<a target="_blank" href="https://v3.vuejs.org/">Vue 3</a>. What's next? target="_blank"
href="https://vitejs.dev/">Vite</a> +
<a
target="_blank"
href="https://v3.vuejs.org/">Vue 3</a>. What's next?
</h3> </h3>
</div> </div>
</template> </template>

107
src/components/TheWelcome.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import WelcomeItem from "./WelcomeItem.vue"; import CommunityIcon from './icons/IconCommunity.vue'
import DocumentationIcon from "./icons/IconDocumentation.vue"; import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from "./icons/IconTooling.vue"; import EcosystemIcon from './icons/IconEcosystem.vue'
import EcosystemIcon from "./icons/IconEcosystem.vue"; import SupportIcon from './icons/IconSupport.vue'
import CommunityIcon from "./icons/IconCommunity.vue"; import ToolingIcon from './icons/IconTooling.vue'
import SupportIcon from "./icons/IconSupport.vue"; import WelcomeItem from './WelcomeItem.vue'
</script> </script>
<template> <template>
@ -12,10 +12,14 @@ import SupportIcon from "./icons/IconSupport.vue";
<template #icon> <template #icon>
<DocumentationIcon /> <DocumentationIcon />
</template> </template>
<template #heading>Documentation</template> <template #heading>
Documentation
</template>
Vue’s Vue’s
<a target="_blank" href="https://v3.vuejs.org/">official documentation</a> <a
target="_blank"
href="https://v3.vuejs.org/">official documentation</a>
provides you with all information you need to get started. provides you with all information you need to get started.
</WelcomeItem> </WelcomeItem>
@ -23,22 +27,30 @@ import SupportIcon from "./icons/IconSupport.vue";
<template #icon> <template #icon>
<ToolingIcon /> <ToolingIcon />
</template> </template>
<template #heading>Tooling</template> <template #heading>
Tooling
</template>
This project is served and bundled with This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. <a
href="https://vitejs.dev/guide/features.html"
target="_blank">Vite</a>.
The recommended IDE setup is The recommended IDE setup is
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a> + <a
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. href="https://code.visualstudio.com/"
target="_blank">VSCode</a> +
<a
href="https://github.com/johnsoncodehk/volar"
target="_blank">Volar</a>.
If you need to test your components and web pages, check out If you need to test your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and <a
href="https://www.cypress.io/"
target="_blank">Cypress</a> and
<a <a
href="https://docs.cypress.io/guides/component-testing/introduction" href="https://docs.cypress.io/guides/component-testing/introduction"
target="_blank" target="_blank">Cypress Component Testing</a>.
>Cypress Component Testing</a
>.
<br /> <br>
More instructions are available in <code>README.md</code>. More instructions are available in <code>README.md</code>.
</WelcomeItem> </WelcomeItem>
@ -47,19 +59,26 @@ import SupportIcon from "./icons/IconSupport.vue";
<template #icon> <template #icon>
<EcosystemIcon /> <EcosystemIcon />
</template> </template>
<template #heading>Ecosystem</template> <template #heading>
Ecosystem
</template>
Get official tools and libraries for your project: Get official tools and libraries for your project:
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>, <a
<a target="_blank" href="https://next.router.vuejs.org/">Vue Router</a>, target="_blank"
<a target="_blank" href="https://next.vue-test-utils.vuejs.org/" href="https://pinia.vuejs.org/">Pinia</a>,
>Vue Test Utils</a <a
>, and target="_blank"
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a href="https://next.router.vuejs.org/">Vue Router</a>,
>. If you need more resources, we suggest paying <a
<a target="_blank" href="https://github.com/vuejs/awesome-vue" target="_blank"
>Awesome Vue</a href="https://next.vue-test-utils.vuejs.org/">Vue Test Utils</a>, and
> <a
target="_blank"
href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more resources, we suggest paying
<a
target="_blank"
href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
a visit. a visit.
</WelcomeItem> </WelcomeItem>
@ -67,17 +86,25 @@ import SupportIcon from "./icons/IconSupport.vue";
<template #icon> <template #icon>
<CommunityIcon /> <CommunityIcon />
</template> </template>
<template #heading>Community</template> <template #heading>
Community
</template>
Got stuck? Ask your question on Got stuck? Ask your question on
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official <a
target="_blank"
href="https://chat.vuejs.org">Vue Land</a>, our official
Discord server, or Discord server, or
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js" <a
>StackOverflow</a target="_blank"
>. You should also subscribe to href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>. You should also subscribe to
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and <a
target="_blank"
href="https://news.vuejs.org">our mailing list</a> and
follow the official follow the official
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a> <a
target="_blank"
href="https://twitter.com/vuejs">@vuejs</a>
twitter account for latest news in the Vue world. twitter account for latest news in the Vue world.
</WelcomeItem> </WelcomeItem>
@ -85,12 +112,14 @@ import SupportIcon from "./icons/IconSupport.vue";
<template #icon> <template #icon>
<SupportIcon /> <SupportIcon />
</template> </template>
<template #heading>Support Vue</template> <template #heading>
Support Vue
</template>
As an independent project, Vue relies on community backing for its As an independent project, Vue relies on community backing for its
sustainability. You can help us by sustainability. You can help us by
<a target="_blank" href="https://vuejs.org/support-vuejs/" <a
>becoming a sponsor</a target="_blank"
>. href="https://vuejs.org/support-vuejs/">becoming a sponsor</a>.
</WelcomeItem> </WelcomeItem>
</template> </template>

6
src/components/WelcomeItem.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="item"> <div class="item">
<i> <i>
<slot name="icon"></slot> <slot name="icon" />
</i> </i>
<div class="details"> <div class="details">
<h3> <h3>
<slot name="heading"></slot> <slot name="heading" />
</h3> </h3>
<slot></slot> <slot />
</div> </div>
</div> </div>
</template> </template>

18
src/components/__tests__/HelloWorld.spec.ts
View File

@ -1,11 +1,11 @@
import { describe, it, expect } from "vitest"; import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import { mount } from "@vue/test-utils"; import HelloWorld from '../HelloWorld.vue'
import HelloWorld from "../HelloWorld.vue";
describe("HelloWorld", () => { describe('HelloWorld', () => {
it("renders properly", () => { it('renders properly', () => {
const wrapper = mount(HelloWorld, { props: { msg: "Hello Vitest" } }); const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
expect(wrapper.text()).toContain("Hello Vitest"); expect(wrapper.text()).toContain('Hello Vitest')
}); })
}); })

2
src/components/common/NumberBox.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="aspect-square flex justify-center w-[2em] text-3xl font-bold uppercase border"> class="flex overflow-hidden justify-center font-bold uppercase rounded border transition-all">
<span class="self-center text-center"><slot /></span> <span class="self-center text-center"><slot /></span>
</div> </div>
</template> </template>

6
src/components/icons/IconCommunity.vue
View File

@ -3,10 +3,8 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
fill="currentColor" fill="currentColor">
>
<path <path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z" d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z" />
/>
</svg> </svg>
</template> </template>

6
src/components/icons/IconDocumentation.vue
View File

@ -3,10 +3,8 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="17" height="17"
fill="currentColor" fill="currentColor">
>
<path <path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z" d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z" />
/>
</svg> </svg>
</template> </template>

6
src/components/icons/IconEcosystem.vue
View File

@ -3,10 +3,8 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="18" width="18"
height="20" height="20"
fill="currentColor" fill="currentColor">
>
<path <path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z" d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z" />
/>
</svg> </svg>
</template> </template>

6
src/components/icons/IconSupport.vue
View File

@ -3,10 +3,8 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="20" width="20"
height="20" height="20"
fill="currentColor" fill="currentColor">
>
<path <path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z" d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z" />
/>
</svg> </svg>
</template> </template>

6
src/components/icons/IconTooling.vue
View File

@ -9,11 +9,9 @@
width="24" width="24"
height="24" height="24"
preserveAspectRatio="xMidYMid meet" preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24" viewBox="0 0 24 24">
>
<path <path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z" d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor" fill="currentColor" />
></path>
</svg> </svg>
</template> </template>

4
src/main.ts
View File

@ -1,7 +1,9 @@
import './index.css'
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import './index.css'
const app = createApp(App) const app = createApp(App)

7
src/router/index.ts
View File

@ -1,4 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import GameView from '../views/GameView.vue' import GameView from '../views/GameView.vue'
const router = createRouter({ const router = createRouter({
@ -7,9 +8,9 @@ const router = createRouter({
{ {
path: '/', path: '/',
name: 'game', name: 'game',
component: GameView component: GameView,
} },
] ],
}) })
export default router export default router

15
src/types.ts
View File

@ -1,6 +1,13 @@
export type OperatorType = '+' | '-' | '*' | '/' export type OperatorType = '+' | '-' | '*' | '/'
export type Operation = {
left: number | null export type Plaquette = {
right: number | null value: number
operator: OperatorType | null free: boolean
}
export type Operation = {
left: Plaquette | null
right: Plaquette | null
operator: OperatorType | null
executed: boolean
} }

158
src/views/GameView.vue
View File

@ -5,22 +5,28 @@
</h1> </h1>
<!-- Number to find --> <!-- Number to find -->
<NumberBox class="mx-auto mb-8 w-[3em] text-4xl"> <NumberBox class="aspect-square mx-auto mb-8 w-[3em] text-4xl text-red-400">
{{ result }} {{ result }}
</NumberBox> </NumberBox>
<!-- Plaquettes --> <!-- Plaquettes -->
<div class="flex gap-2 justify-center mx-2 mb-8"> <div class="grid grid-cols-6 grid-rows-2 gap-2 mx-auto max-w-sm">
<NumberBox <TransitionGroup name="list">
@click="selectNumber(item)" <NumberBox
v-for="(item, i) in plaquettes" class="text-2xl "
:key="i"> :class="{ 'text-stone-600 border-stone-600': !item.free }"
{{ item }} @click="selectNumber(item)"
</NumberBox> v-for="(item, i) in plaquettes"
:key="i">
{{ item.value }}
</NumberBox>
</TransitionGroup>
</div> </div>
<div class="flex gap-2 justify-center mb-8"> <!-- OPERATORS -->
<div class="flex gap-2 justify-center my-4">
<NumberBox <NumberBox
class="aspect-square w-[1.5em] text-2xl"
@click="selectOperator(item)" @click="selectOperator(item)"
v-for="(item, i) in operators" v-for="(item, i) in operators"
:key="i"> :key="i">
@ -28,57 +34,124 @@
</NumberBox> </NumberBox>
</div> </div>
<div class="text-center"> <div class="my-4 border-b" />
<div
class="mb-2 text-center"
v-for="(operation, i) in operations"
:key="i">
<div class="inline-block relative"> <div class="inline-block relative">
<div <!-- OPERATION -->
v-for="(operation, i) in operations" <div class="flex absolute top-0 right-full whitespace-nowrap">
:key="i"> <NumberBox class="w-[2.5em]">
<div class="absolute top-0 right-full whitespace-nowrap border"> {{ operation.left?.value ?? '?' }}
{{ operation.left ?? '?' }} {{ operation.operator ?? '?' }} </NumberBox>
{{ operation.right ?? '?' }} <NumberBox class="w-[2.5em] border-none">
</div> {{ operation.operator ?? '' }}
<div class="mx-4 border"> </NumberBox>
= <NumberBox class="w-[2.5em]">
</div> {{ operation.right?.value ?? '?' }}
<div </NumberBox>
v-if="operation.operator && operation.left && operation.right"
class="absolute top-0 left-full whitespace-nowrap border">
{{ operate(operation.operator, operation.left, operation.right) }}
</div>
</div> </div>
<!-- EQUALS -->
<NumberBox class="mx-4 border-none">
=
</NumberBox>
<!-- RESULT -->
<NumberBox
class="absolute top-0 left-full whitespace-nowrap border-none">
<span
v-if="
operation.operator &&
operation.left &&
operation.right &&
isOperationValid(operation)
">
{{
operate(
operation.operator,
operation.left.value,
operation.right.value
)
}}
</span>
<span v-else>?</span>
</NumberBox>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style>
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue' import { computed, onMounted, reactive, ref } from 'vue'
import { isSolvable, operate } from '@/algo' import { isOperationValid, isSolvable, operate } from '@/algo'
import NumberBox from '@/components/common/NumberBox.vue' import NumberBox from '@/components/common/NumberBox.vue'
import { pool } from '@/globals' import { pool } from '@/globals'
import { Operation, OperatorType } from '@/types' import { Operation, OperatorType, Plaquette } from '@/types'
import { randRange } from '@/utils' import { randRange } from '@/utils'
const operators = ['+', '-', '*', '/'] as const const operators = ['+', '-', '*', '/'] as const
const result = ref(0) const result = ref(0)
const plaquettes = ref<number[]>([]) const plaquettes = ref<Plaquette[]>([])
const operations = ref<Operation[]>([
{ left: null, right: null, operator: null }, const operations = ref<Operation[]>([])
]) pushEmptyOperation()
// pushEmptyOperation()
const currentOperation = computed( const currentOperation = computed(
() => operations.value[operations.value.length - 1], () => operations.value[operations.value.length - 1],
) )
function selectNumber(n: number): void { function pushEmptyOperation(): void {
console.log(n) operations.value.push({
if (!currentOperation.value.left) { left: null,
currentOperation.value.left = n right: null,
operator: null,
executed: false,
})
}
function selectNumber(p: Plaquette): void {
const op = currentOperation.value
if (!p.free) return
p.free = false
if (!op.left) {
op.left = p
} }
else if (!currentOperation.value.right) { else if (!op.right) {
currentOperation.value.right = n op.right = p
}
if (
op.operator &&
op.right &&
op.left &&
isOperationValid(op) &&
!op.executed
) {
op.executed = true
plaquettes.value.push({
value: operate(op.operator, op.left.value, op.right.value),
free: true,
})
pushEmptyOperation()
} }
} }
@ -95,10 +168,15 @@ onMounted(() => {
for (let i = 0; i < 6; ++i) { for (let i = 0; i < 6; ++i) {
const random = Math.floor(Math.random() * pool.length) const random = Math.floor(Math.random() * pool.length)
const el = pool.splice(random, 1)[0] const el = pool.splice(random, 1)[0]
plaquettes.value.push(el) plaquettes.value.push({ value: el, free: true })
} }
// Solve it // Solve it
} while (!isSolvable(result.value, plaquettes.value)) } while (
plaquettes.value.sort((a, b) => a - b) !isSolvable(
result.value,
plaquettes.value.map(p => p.value),
)
)
plaquettes.value.sort((a, b) => a.value - b.value)
}) })
</script> </script>

6
tailwind.config.js
View File

@ -3,8 +3,8 @@ module.exports = {
theme: { theme: {
extend: {}, extend: {},
fontFamily: { fontFamily: {
sans: ['Manrope', 'ui-sans-serif', 'system-ui', 'apple-system'] sans: ['Manrope', 'ui-sans-serif', 'system-ui', 'apple-system'],
} },
}, },
plugins: [] plugins: [],
} }

11
vite.config.ts
View File

@ -1,14 +1,13 @@
import { fileURLToPath, URL } from "url"; import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'url'
import { defineConfig } from "vite"; import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)), '@': fileURLToPath(new URL('./src', import.meta.url)),
}, },
}, },
}); })