project files added

2021-06-15 16:00:08 +02:00
parent e156e2f053
commit db46afa351
13928 changed files with 1569902 additions and 0 deletions
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>PIXI Theme</title>
+
+    <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="../../css/doctest.css">
+
+    <script src="../3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
+
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.pixi.js"></script>
+</head>
+<body onload="Doctest.run()">
+    <h1>Theme</h1>
+    <p>
+        The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
+        and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make 
+        buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set 
+        the button type to "checkbox".
+    </p>
+    <p>Let's look at some button examples:</p><br />
+    <canvas id="canvas" class="interactive"></canvas>
+    <p>
+        What you should see: Many buttons with very different styling and behaviour.
+    </p>
+    <script class="doctest">
+const app = new PIXIApp({
+    view: canvas,
+    width: 900,
+    height: 250,
+    transparent: false
+}).setup().run()
+
+let buttonDark = new Button({
+    x: 10,
+    y: 10,
+    label: 'Button with theme dark',
+    type: 'checkbox'
+})
+
+let buttonGroupLight = new ButtonGroup({
+    x: 230,
+    y: 10,
+    theme: 'light',
+    buttons: [
+        {label: 'Button with', active: true},
+        {label: 'theme light'}
+    ],
+    type: 'checkbox'
+})
+
+let buttonGroupRed = new ButtonGroup({
+    x: 480,
+    y: 10,
+    theme: 'red',
+    margin: 0,
+    buttons: [
+        {label: 'Button with', active: true},
+        {label: 'theme red'}
+    ],
+    type: 'radio'
+})
+
+let switchDark = new Switch({
+    x: 10,
+    y: 90
+})
+
+let switchLight = new Switch({
+    x: 80,
+    y: 90,
+    theme: 'light'
+})
+
+let switchRed = new Switch({
+    x: 150,
+    y: 90,
+    theme: 'red'
+})
+
+let yellowTheme = new Theme({
+    fill: 0xfecd2d,
+    fillActive: 0xfe9727,
+    strokeActive: 0xfecd2d,
+    strokeActiveWidth: 4,
+    textStyle: {
+        fill: 0x5ec7f8
+    },
+    textStyleActive: {
+        fill: 0x5954d3
+    },
+    textStyleLarge: {
+        fontSize: 36
+    }
+})
+
+let buttonYellow = new Button({
+    x: 10,
+    y: 160,
+    theme: yellowTheme,
+    label: 'Button with theme yellow',
+    type: 'checkbox',
+    action: event => {
+        const modal = new Modal({
+            app: app,
+            theme: yellowTheme,
+            header: 'Theme',
+            content: 'Yellow'
+        })
+        app.scene.addChild(modal)
+    }
+})
+
+app.scene.addChild(buttonDark, buttonGroupLight, buttonGroupRed)
+app.scene.addChild(switchDark, switchLight, switchRed)
+app.scene.addChild(buttonYellow)
+    </script>
+</body>
+</html>