/view for fullscreen view only

hosting/src/App.vue → hosting/src/Editor.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
+    <p class="instruction">Pick a color</p>
     <Palette @color="penColor = $event" />
+    <p class="instruction">Click a pixel to change its color</p>
     <Canvas :penColor="penColor" />
     <About />
   </div>

hosting/src/Viewer.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="app">
+    <Canvas :fullscreen="true" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import Canvas from './components/Canvas.vue';
+
+@Component({
+  components: {
+    Canvas,
+  },
+})
+
+export default class App extends Vue {}
+</script>
+
+<style>
+:root, body {
+  margin: 0;
+  padding: 0;
+}
+
+.color {
+  background-color: transparent;
+}
+.color.color-0 {
+  background-color: #FFFFFF;
+}
+.color.color-1 {
+  background-color: #E4E4E4;
+}
+.color.color-2 {
+  background-color: #888888;
+}
+.color.color-3 {
+  background-color: #000000; /* Darker in "view" mode */
+}
+.color.color-4 {
+  background-color: #FFA7D1;
+}
+.color.color-5 {
+  background-color: #E50000;
+}
+.color.color-6 {
+  background-color: #E59500;
+}
+.color.color-7 {
+  background-color: #A06A42;
+}
+.color.color-8 {
+  background-color: #E5D900;
+}
+.color.color-9 {
+  background-color: #94E044;
+}
+.color.color-A {
+  background-color: #02BE01;
+}
+.color.color-B {
+  background-color: #00D3DD;
+}
+.color.color-C {
+  background-color: #0083C7;
+}
+.color.color-D {
+  background-color: #0000EA;
+}
+.color.color-E {
+  background-color: #CF6EE4;
+}
+.color.color-F {
+  background-color: #820080;
+}
+
+</style>

hosting/src/components/Canvas.vue

@@ -1,15 +1,14 @@
 <template>
   <div id="canvas">
-    <p class="instruction">Click a pixel to change its color</p>
-    <table>
+    <table :class="[penColor !== undefined && 'editable', fullscreen && 'fullscreen']">
       <tbody>
           <tr
             v-for="(row, rowIndex) in data.canvas"
             :key="rowIndex">
             <td
               v-for="(cellColor, columnIndex) in row"
               :key="columnIndex"
-              @click="setPixelColor(rowIndex, columnIndex, penColor)"
+              @click="penColor !== undefined && setPixelColor(rowIndex, columnIndex, penColor)"
               :class="['color', colorClass(cellColor)]"></td>
           </tr>
       </tbody>
@@ -28,7 +27,10 @@ import firebase from 'firebase/app';
 export default class Canvas extends Vue {
 
   @Prop()
-  public penColor: Color = 0;
+  public penColor: Color | undefined = undefined;
+
+  @Prop()
+  public fullscreen: boolean = false;
 
   public data = {
     canvasDepth: 1,
@@ -37,6 +39,9 @@ export default class Canvas extends Vue {
 
   public colorClass = colorClass;
 
+  private canvasId = 'the-one-and-only';
+  private placeRef = database.ref('canvas').child(this.canvasId);
+
   public setPixelColor(row: number, column: number, color: Color) {
     const xOffsets = row.toString(2).padStart(this.data.canvasDepth, '0');
     const yOffsets = column.toString(2).padStart(this.data.canvasDepth, '0');
@@ -77,28 +82,36 @@ export default class Canvas extends Vue {
     this.data.canvas = toGrid<number>(snapshot.val(), emptyGrid(Math.pow(2, this.data.canvasDepth)));
   }
 
-  private canvasId = 'the-one-and-only';
-  private placeRef = database.ref('canvas').child(this.canvasId);
 }
 </script>
 
 <style scoped>
 table {
-  border: 1px solid #ddd;
+  border: none;
   border-collapse: collapse;
   overflow: auto;
   table-layout: fixed;
   width: max-content;
   margin: 0;
 }
 table td {
-  height: 10px;
-  width: 10px;
+  height: 12px;
+  width: 12px;
   border-color: transparent;
-  cursor: pointer;
   transition: transform 200ms, box-shadow 200ms;
+  padding: 0;
+}
+table.fullscreen td {
+  height: calc(100vw / 128);
+  width: calc(100vw / 128);
+}
+table.editable {
+  border: 1px solid #ddd;
+}
+table.editable td {
+  cursor: pointer;
 }
-table td:hover {
+table.editable td:hover {
   transform: scale(1.5);
   box-shadow: 0 0 6px #777;
 }

hosting/src/components/Palette.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <p class="instruction">Pick a color</p>
-
     <div id="palette">
       <span
         v-for="color in colors"

hosting/src/main.ts → hosting/src/index.ts

@@ -1,8 +1,8 @@
 import Vue from 'vue';
-import App from './App.vue';
+import Editor from './Editor.vue';
 
 Vue.config.productionTip = false;
 
 new Vue({
-  render: (h) => h(App),
+  render: (h) => h(Editor),
 }).$mount('#app');

hosting/src/view.ts

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import Viewer from './Viewer.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(Viewer),
+}).$mount('#app');

hosting/vue.config.js

@@ -0,0 +1,7 @@
+
+module.exports = {
+  pages: {
+    index: 'src/index.ts',
+    view: 'src/view.ts'
+  }
+}