#171 Creating a Line Shape

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+    build_and_preview:
+        if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - run: npm ci && echo "${{ secrets.ENV_FILE }}" > .env.template && npm run build
+            - uses: FirebaseExtended/action-hosting-deploy@v0
+              with:
+                  repoToken: '${{ secrets.GITHUB_TOKEN }}'
+                  firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_WORDPLAY_DEV }}'
+                  projectId: wordplay-dev

Moderation Ideas.txt

@@ -0,0 +1,25 @@
+Problem: People can post things that are inappropriate/violate policies.
+Solution: Ban them from publicly publishing after repeated offenses.
+
+What we have: Content Warning
+
+Ideas:
+Keep track of the number of content warnings on an account
+When passed a certain threshold, ban tag on account (different bans in future)
+When an account has the ban tag, restrict public publishing
+Unbanning function, if another content warning is banned again (different amount of lengths?)
+
+Question:
+Where is the code for the content warnings (if we keep track of this number, we can ban)
+Do we need Firebase access to do this
+How long for the ban
+Code for creator attributes & publishing privileges
+
+Functions:
+If banned, take down all previous postings (change visibility)
+After n 
+
+Important files:
+Moderation.ts - Flags projects
+Project.ts - Individual project
+CreatorDatabase.ts - Creator attributes

PLAYPEN.md

@@ -0,0 +1,54 @@
+# Welcome to the Wordplaypen!
+
+It's probably not obvious, but this is a _pun_. It's a portmanteau of "Wordplay" (this platform) and "playpen" the English word for a small enclosed area in which children can safely play. This is important to know for several reasons:
+
+-   Wordplay is full of puns
+-   I want this to be a space where you can safely learn to contribute to a large software project.
+
+Hence, _Wordplaypen_!
+
+# Expectations
+
+Independent studies are _independent_: that generally means that much of this quarter will be you, working with others, with minimal guidance. Of course, I will provide much guidance. I am the lead on this project, after all. But my expectation is that you work independently from until you can't, and that you depend on others before you depend on me.
+
+For example, if you don't understand some aspect of the system, first read the documentation, if there is any. If there isn't any, ask someone else in the #wordplay channel of ComputingEd@UW Slack. If they don't know, then you should probably tag me so I can answer. That's what I mean by "independent".
+
+# Roles
+
+Every software project has people that play different roles. In many software organizations, these roles are often aligned with _titles_ (e.g., software engineer, designer, project manager, tester). But in Wordplaypen, I don't want you to think of these as titles. (After all, this isn't a job, it's a class, and an open source project). Instead, I want you to think of them as different domains of work, where you might be taking on multiple roles.
+
+Here are the roles I've brainstormed so far, and what responsibilites those roles have:
+
+| Role                       | Responsibility                                                                                                                                                                                                                                                                                                                                                                                                     |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Engineering**            | Choose an issue, work with designers and Amy to identify a good design, then implement it, following the design patterns established in the code base. Ensure there are no type errors, write unit tests to verify the behavior to prevent regressions in the future, and submit a pull request for code review.                                                                                                   |
+| **Engineering leadership** | Review pull requests. Consult with Amy on design patterns and code quality. Resolve conflicts between people engaging in engineering roles. Teach others about Wordplay, answering questions and providing knowledge they need to do their role successfully. Generate new and revised localization.                                                                                                               |
+| **Design**                 | Many issues identify problems but do not have designs, or only have design sketches, without sufficient detail for engineering. This role takes design problems and envisions a concrete design suitable for implementation, iterating through community feedback and guidance from Amy. Design specifications should be in the main issue description, providing clear guidance for what needs to be implemented. |
+| **Project management**     | Triage new issues, improving their quality, closing duplicates, linking to relevant issues, labeling them appropriately, deciding which milestones they belong in in consulation with Amy. Coordinate the engineering and design work of multiple students so that they don't do duplicative work and make conflicting decisions.                                                                                  |
+| **Localization**           | Improve existing locales and write new ones. Adadpt existing languages for new regions. Build communities of students working on the same language to divide up the localization work while maintaiing a shared voice. Manage out of date translations.                                                                                                                                                            |
+| **Verification**           | Find ways in which Wordplay does not work as intended, particularly in non-English, non-mouse based ways. Look for duplicates before submitting, create new issues. Write new unit tests to improve test coverage.                                                                                                                                                                                                 |
+| **Writing**                | Improve documentation, including documents like this, the contributors guide, as well as Wordplay's documentation. Coordinate with localization teams around updates.                                                                                                                                                                                                                                              |
+
+Remember: you could do more than one of the above. Your quarter could be a bit of localization, some testing, or maybe one big design project plus some project management. There's no reason to limit yourself to a single role if you want to try multiple. Just make sure the work you commit to is feasible for the time you've committed.
+
+# Schedule
+
+Because this is structured as a quarterly independent study, there's a certain rhythm to our work:
+
+| Week | Goals                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1    | **Onboarding**. If you're new to the project, learn and read everything you need to know to contribute. If you've already contributed in one quarter, you'll help train. By the end of the first week, everyone should have high level knowledge of everything in this document and of the platform's design and implementation.                                                                                                              |
+| 2    | **Assignments**. By the end of this week, everyone should choose one or more roles, and begin their role (e.g., engineering and design roles should choose some issues to work on, project managers should choose a set of issues to improve and begin coordinating work on Slack). The goal is to pick enough work that it fills the five weeks, but not so much that you won't finish it. We'll create a milestone for all selected issues. |
+| 3-7  | **Implementation**. By the end of this 5 week sprint, designs and implementations should be done, ready for evaluation. For designers, this means having a candidate design posted in issues. For engineers, this means having a branch submitted as a pull request. For smaller issues, this can happen before the end of the sprint, but the end of week seven is the last chance.                                                          |
+| 8-9  | **Verification**. We merge all approved pull requests into the `dev` branch, release to our staging server, and everyone tests the changes. Engineering debugs and patches. Designers interate and refine, getting their design finalized in their issue. Project management updates `CHANGELOG` to reflect all completed work. We update the version number.                                                                                 |
+| 10   | **Release**. We merge `dev` into `main` and release to production, then have a party.                                                                                                                                                                                                                                                                                                                                                         |
+
+I'm not interested in grading your independent studies. Just DM me a list of the commitments you made and how they went this quarter, and that's sufficient for a 4.0.
+
+After the quarter, maybe you'll do it all again the next quarter!
+
+In summer, I'll recruit a couple students to work full time on bigger features that take more time.
+
+# Knowledge
+
+There's a lot you need to know to contribute to Wordplay. Read the [CONTRIBUTING.md](https://github.com/amyjko/wordplay/blob/main/CONTRIBUTING.md) page and anything it tells you to read.

src/components/app/getProjectLink.ts

@@ -0,0 +1,8 @@
+import type Project from '../../models/Project';
+import { PROJECT_PARAM_PLAY } from '../project/ProjectView.svelte';
+
+export default function getProjectLink(project: Project, fullscreen: boolean) {
+    return `/project/${encodeURI(project.getID())}${
+        fullscreen ? `?${PROJECT_PARAM_PLAY}` : ''
+    }`;
+}

src/components/editor/NoneOrView.svelte

@@ -0,0 +1,12 @@
+<svelte:options immutable={true} />
+
+<script lang="ts">
+    import NodeView from './NodeView.svelte';
+    import type Otherwise from '@nodes/Otherwise';
+
+    export let node: Otherwise;
+</script>
+
+<NodeView node={node.left} /><NodeView node={node.coalesce} /><NodeView
+    node={node.right}
+/>

src/components/output/ShapeView.svelte

@@ -11,7 +11,7 @@
     import type RenderContext from '@output/RenderContext';
     import { locales } from '../../db/Database';
     import type Shape from '../../output/Shape';
-    import { Circle, Polygon, Rectangle } from '../../output/Form';
+    import { Circle, Polygon, Rectangle, Line } from '../../output/Form';
 
     export let shape: Shape;
     export let place: Place;
@@ -29,9 +29,42 @@
 
     $: width = shape.form.getWidth() * PX_PER_METER;
     $: height = shape.form.getHeight() * PX_PER_METER;
+
+    $: height, console.log(height / 64);
+    $: width, console.log(width / 64);
+
+    let top = shape.form.getTop() * PX_PER_METER
+    let left = shape.form.getLeft() * PX_PER_METER  
+    let color = shape.getBackground()?.toCSS()
+
+    $: top, console.log(top / 64);
+    $: left, console.log(left / 64);
+
+    let shapeClass = '';
+    if(shape.form instanceof Rectangle) {
+        shapeClass = 'rectangle'
+    } else if(shape.form instanceof Line) {
+        shapeClass = 'line'
+    }
+
+    const lineWidth = 10;
+    $: lineLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+    $: angle = calcAngle(shape.form.getLeft(), shape.form.getTop(), shape.form.getLeft() + shape.form.getWidth(), shape.form.getTop() + shape.form.getHeight());
+
+    $: lineLength, console.log(lineLength / 64);
+    $: angle, console.log(angle);
+
+    // Function to calculate angle
+    function calcAngle(x1: number, y1: number, x2: number, y2: number) {
+        const angleRadians = Math.atan2(y2 - y1, x2 - x1);
+        const angleDegrees = (angleRadians * 180) / Math.PI;
+        const positiveAngle = angleDegrees >= 0 ? angleDegrees : 360 + angleDegrees;
+        return positiveAngle;
+    }
 </script>
 
 {#if visible}
+    {#if shape.form instanceof Rectangle || shape.form instanceof Circle || shape.form instanceof Polygon}
     <div
         role={selectable ? 'button' : null}
         aria-disabled={!selectable}
@@ -87,6 +120,33 @@
             />
         </svg>
     </div>
+    {/if}
+    <!-- style:background-color="{color?.toCSS()}" add this if implementing color-->
+    {#if shapeClass == 'line'}
+        <div
+            role={selectable ? 'button' : 'presentation'}
+            aria-disabled={!selectable}
+            aria-label={still ? shape.getDescription($locales) : null}
+            aria-roledescription={!selectable
+                ? $locales.get((l) => l.term.phrase)
+                : null}
+            class="output shape {shapeClass}"
+            tabIndex={interactive && (selectable || editing) ? 0 : null}
+            data-id={shape.getHTMLID()}
+            data-node-id={shape.value.creator.id}
+            data-name={shape.getName()}
+            data-selectable={selectable}
+            style:font-family={getFaceCSS(context.face)}
+            style:font-size={getSizeCSS(context.size)}
+            style:background={color ?? null}
+            style:color={getColorCSS(shape.getFirstRestPose(), shape.pose)}
+            style:opacity={getOpacityCSS(shape.getFirstRestPose(), shape.pose)}
+            style:width="{lineWidth}px"
+            style:height="{lineLength}px"
+            style:transform={`translate(${left}px, ${-1 * top}px) rotate(${270 - angle}deg)`}
+        />
+    {/if}
+
 {/if}
 
 <style>
@@ -102,6 +162,11 @@
         border-color: transparent;
     }
 
+    .shape.line {
+        background: var(--wordplay-inactive-color);
+        transform-origin: 0 0;
+        position: absolute;
+    }
     .form {
         fill: var(--wordplay-inactive-color);
     }

src/components/project/Help.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { locales } from '../../db/Database';
+    import Commands, { Category } from '../editor/util/Commands';
+    import Dialog from '../widgets/Dialog.svelte';
+    import CommandDescription from './CommandDescription.svelte';
+
+    export let show: boolean;
+</script>
+
+<Dialog bind:show description={$locales.get((l) => l.ui.dialog.help)}>
+    <table>
+        <td colspan="3"
+            ><h1
+                >{$locales.get(
+                    (l) => l.ui.dialog.help.subheader.moveCursor
+                )}</h1
+            ></td
+        >
+        {#each Commands.filter((c) => c.category === Category.Cursor) as command}
+            <CommandDescription {command} />
+        {/each}
+        <td colspan="3"
+            ><h1>{$locales.get((l) => l.ui.dialog.help.subheader.editCode)}</h1
+            ></td
+        >
+        {#each Commands.filter((c) => c.category === Category.Modify) as command}
+            <CommandDescription {command} />
+        {/each}
+        <td colspan="3"
+            ><h1
+                >{$locales.get(
+                    (l) => l.ui.dialog.help.subheader.insertCode
+                )}</h1
+            ></td
+        >
+        {#each Commands.filter((c) => c.category === Category.Insert) as command}
+            <CommandDescription {command} />
+        {/each}
+        <td colspan="3"
+            ><h1>{$locales.get((l) => l.ui.dialog.help.subheader.debug)}</h1
+            ></td
+        >
+        {#each Commands.filter((c) => c.category === Category.Evaluate) as command}
+            <CommandDescription {command} />
+        {/each}
+    </table>
+</Dialog>
+
+<style>
+    table {
+        border-spacing: 0;
+        border: none;
+        width: 100%;
+    }
+
+    h1 {
+        margin-top: var(--wordplay-spacing);
+    }
+</style>

src/db/Creator.ts

@@ -0,0 +1,5 @@
+export const HiddenUsernameEmailDomain = '@wordplay.dev';
+
+export type Creator = {
+    icon: string;
+};

src/locale/OutputTexts.ts

@@ -148,6 +148,17 @@ type OutputTexts = {
         /** Depth of rectangle */
         z: NameAndDoc;
     };
+    /** A line shape, for Stage.frame */
+    Line: NameAndDoc & {
+        /** Left of the line */
+        x1: NameAndDoc;
+        /** Top of the line */
+        y1: NameAndDoc;
+        /** Right of the line */
+        x2: NameAndDoc;
+        /** Bottom of the line */
+        y2: NameAndDoc;
+    }
     /** A circle form */
     Circle: NameAndDoc & {
         /** Radius of the circle */