feat(web): start a new web app

dist

.solid

.output

.vercel

.netlify

netlify

# dependencies

/node_modules

# IDEs and editors

/.idea

.project

.classpath

*.launch

.settings/

# Temp

gitignore

# System Files

.DS_Store

Thumbs.db

# SolidStart

Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);

## Creating a project

```bash

# create a new project in the current directory

npm init solid@latest

# create a new project in my-app

npm init solid@latest my-app

```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash

npm run dev

# or start the server and open the app in a new browser tab

npm run dev -- --open

```

## Building

Solid apps are built with _adapters_, which optimise your project for deployment to different environments.

By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different adapter, add it to the `devDependencies` in `package.json` and specify in your `vite.config.js`.

{

    "name": "@yume-chan/tango-web",

    "version": "1.0.0",

    "scripts": {

        "dev": "solid-start dev",

        "build": "solid-start build",

        "start": "solid-start start"

    },

    "type": "module",

    "devDependencies": {

        "@types/node": "^20.2.1",

        "esbuild": "^0.14.54",

        "postcss": "^8.4.21",

        "solid-start-node": "^0.2.19",

        "typescript": "^5.0.3",

        "vite": "^4.1.4"

    },

    "dependencies": {

        "@solidjs/meta": "^0.28.2",

        "@solidjs/router": "^0.8.2",

        "@solid-devtools/overlay": "^0.6.0",

        "@yume-chan/adb": "workspace:^0.0.19",

        "@yume-chan/adb-credential-web": "workspace:^0.0.19",

        "@yume-chan/adb-daemon-webusb": "workspace:^0.0.19",

        "@yume-chan/async": "^2.2.0",

        "@yume-chan/stream-extra": "workspace:^0.0.19",

        "@yume-chan/struct": "workspace:^0.0.19",

        "solid-js": "^1.7.2",

        "solid-start": "^0.2.26",

        "undici": "^5.15.1"

    },

    "engines": {

        "node": ">=16.8"

    }

}

vec2 project(vec2 a, vec2 b) {

    return a * dot(a, b) / dot(a, a);

}

vec4 drawCircle(vec2 coord, vec2 c, float r, float rr, float as, float ae, vec3 color1, vec3 color2) {

    vec2 delta = coord - c;

    float d = length(delta);

    if (d < r - 15.0) {

        return vec4(0, 0, 0, 0);

    }

    float a = atan(delta.y, delta.x) + 3.14;

    if (as < ae ? a > as && a < ae : a > as || a < ae) {

        if (d < r) {

            return vec4(0, 0, 0, 1);

        } else if (d < rr) {

            float crossLength = sqrt(pow(rr, 2.0) * 2.0);

            float p = length(project(vec2(-1,1),delta)-(vec2(-1,1)*crossLength)) / (crossLength * 2.0);

            return vec4(mix(color1, color2, p), 1);

        } else if (d < rr + 15.0) {

            return vec4(0, 0, 0, 1);

        }

    }

    return vec4(0, 0, 0, 0);

}

vec3 parseColor(int color) {

    return vec3(float((color >> 16) & 0xff) / 255.0, float((color >> 8) & 0xff) / 255.0, float((color >> 0) & 0xff) / 255.0);

}

void mainImage( out vec4 fragColor, in vec2 fragCoord )

{

    vec2 c1 = vec2(0.6, 0.5) * iResolution.xy;

    float r1 = 0.3 * iResolution.y;

    float rr1 = 0.2 * iResolution.y;

    float as1 = 225.0 / 180.0 * 3.14;

    float ae1 = 135.0 / 180.0 * 3.14;

    vec2 c2 = vec2(0.45, 0.5) * iResolution.xy;

    float r2 = 0.3 * iResolution.y;

    float rr2 = 0.2 * iResolution.y;

    float as2 = 315.0 / 180.0 * 3.14;

    float ae2 = 270.0 / 180.0 * 3.14;

    float w = 11.0;

    vec3 color11= parseColor(0xD9D9D9);

    vec3 color12= parseColor(0x898989);

    vec3 color21 = parseColor(0x2D6AF6);

    vec3 color22 = parseColor(0xA3BFFF);

    vec4 color;

    if (fragCoord.y < iResolution.y / 2.0) {

        color = drawCircle(fragCoord, c1, rr1, r1, as1, ae1, color11, color12);

        if (color.a == 0.0) {

            color = drawCircle(fragCoord, c2, rr2, r2, as2, ae2, color21, color22);

        }

    } else {

        color = drawCircle(fragCoord, c2, rr2, r2, as2, ae2, color21, color22);

        if (color.a == 0.0) {

            color = drawCircle(fragCoord, c1, rr1, r1, as1, ae1, color11, color12);

        }

    }

    fragColor = color;

}